Anzeige
Tutorialbeschreibung

Sonnenaufgang in Flash

Sonnenaufgang in Flash

Dies ist eine sehr einfache Animation. Für den Flash-Einsteiger habe ich versucht ebenso einfach zu erklären, wie man einen Sonnenaufgang in Flash realisiert. In einem meiner nächsten Workshops werde ich dann - aufbauend auf diesem - erklären, wie man simuliert, dass es zu Beginn der Animation Nacht ist und zusammen mit der aufgehenden Sonne Tag wird.

 


 


 


Sonnenaufgang in Flash

Schritt1:
Zunächst ändern wir die Proportionen des Flashfilms (bzw. der Haupttribühne)
Dazu klicken wir in einem neuen Dokument auf „Modify > Document“  

Bilder

und im sich öffnenden Fenster nehmen wir folgende Einstellungen vor:

Bilder

Dimensons: 800 (width) x 500 (height)
Background Color: # FFFFCC (auf das Farbkästchen klicken und links oben wird der Farbname angezeigt, wenn man mit der Maus über die Farben zieht)
Framerate: 31 fps (frames per second/Bilder pro Sekunde)
Ruler units: Pixels (Ihr könnt auch cm einstellen, meine Angaben sind aber in Pixeln.)
Mit „OK“ wird die Eingabe bestätigt.
Mit dem kleinen Aufklappmenü rechts oben, über der Zeitleiste könnt ihr einstellen, wie der Falshfilm angezeigt werden soll. Die Einstellung „Fit in Window“ ist im Folgenden die geeignete. 

Bilder

Schritt2:

Nun erstellen wir ein Rechteck auf der Bühne.

Bilder

Es ist grau und hat die Maße: 800.0 x 85.0 (im Bild oben WxH)
Und befindet sich an der Position:
x = 0.0 (also ganz links) und y = 415.0 (also ganz unten)
Das Rechteck kann man auch mit dem Align & Info & Transform – Dialogfeld positionieren:

Bilder

Dabei muss das Kästchen „To stage:“ ausgewählt sein.

In der ersten Reihe, also unter „Align“ kann man nun das Rechteck (wenn es ausgewählt ist) links, horizontal/mittig, rechts, oben, vertikal/mittig und unten positionieren und das proportional zur Bühne.

Schritt 3:

Nun da das Rechteck bündig zur Bühne ist, löschen wir mit Hilfe des

Auswahlwerkzeugs

Bilder

seinen Rahmen (die einzelnen Linen).

Mit einem Doppelklick auf die Linien des Rechtecks werden alle Linien markiert und können mittels der Taste „Entf“ gelöscht werden.

Wieder mit dem Auswahlwerkzeug gehen wir nun an die obere Kante des Rechtecks und warten bis das Auswahlwerkzeug einen kleinen Bogen dazubekommt. Wenn man nun mit gedrückter Maustaste nach oben zieht, verändert sich die Außenkante und folgt dem Mauszeiger.

Bilder

Wenn eine bestimmte Wölbung erreicht ist, lassen wir los und erhalten in etwa folgendes Resultat.

Bilder

Schritt 4:

Mit dem „Kreis“-Werkzeug, auch „Oval“-Tool genannt,

Bilder

erstellen wir nun einen Kreis.

Stellen wir uns vor das eben erstellte Rechteck wäre ein Hügel und der Kreis die Sonne über dem Hügel.

Bilder

Da die Sonne in den meisten Fällen gelblich-orange ist, löschen wir auch deren Rahmen und markieren ihr Inneres.

Mit dem Füllwerkzeug geben wir Ihr ein frisches Orange. (#FF6600)

Bilder


Schritt 5:

Die Sonne in unserem Flash-Film soll sich bewegen und damit sie das tun kann, müssen wir sie in ein Symbol konvertieren. Also wählen wir sie aus mit dem Auswahlwerkzeug und klicken dann auf Modify > Convert to Symbol.

Bilder

Folgendes Dialogfeld erscheint.

Bilder

Wir geben dem Symbol den Namen „Sonne“ (so wird es dann auch in der Bibliothek des Flash-Films erscheinen.

Als „Type“ also die Art des Symbols wählen wir „Movie-Clip“. (Man könnte auch „Graphic“ wählen, mittlerweile wird „Graphic“ aber nur noch selten angewandt, da das angeblich manchmal zu Problemen führt.)

Mit „OK“ bestätigen wir den Vorgang.

Schritt 6:

Nun haben wir das erstellte aber verzerrte Rechteck (unseren Hügel) und die Sonne in Form einer unbenannten Instanz des Symbols: „Sonne“ auf der Bühne und das auf ein und der selben Ebene.

Anmerkung: Da das Symbol: „Sonne“ ja so zu sagen immer wieder verwendbar ist, indem man es aus der Bibliothek in den Flash-Film zieht, befinden sich auf der Bühne (also im Hauptfenster) nur Instanzen des Symbols, die man unterschiedlich benennen kann, damit man sie bzw. damit der Flash-Film sie auseinander halten kann. Dies ist besonders dann wichtig, wenn man per AS (Action Script) die Symbole veranlassen will etwas zu tun. In unserem Fall animieren wir die Instanz des Symbols „Sonne“ per Hand, deshalb brauchen wir ihr keinen Instanznamen zu geben.

Zurück zum 6. Schritt:

Wie gesagt, beide Sachen sind auf einer Ebene und das bedeutet, dass man sie nicht unabhängig von einander animieren kann. Deshalb muss die „Sonnen“-Instanz auf eine eigene Ebene gelegt werden.

Dazu erstellen wir eine neue Ebene („Layer“): Insert > Timeline > Layer

Bilder

Und indem wir die „Sonnen“-Instanz mittels Mausklick markieren und mit „STRG+X“ ausschneiden können wir Sie, wenn wir das erste Schlüsselbild der neu erstellten Ebene markieren,

Bilder

mittels „STRG+SHIFT+V“ an genau der selben Stelle einfügen.

Schritt 7:

Jetzt sind wir in der Lage die „Sonnen“- Instanz zu animieren.

Um die darunter liegende Ebene, die ich mittels Doppelklick auf den Namen „rechteck-grau“ umbenannt habe, nicht aus versehen zu verändern, klicke ich auf den zweiten Punkt von links neben dem Ebenennamen.

Bilder

Ein Schloss wird eingeblendet und die Ebene kann nicht mehr verändert werden bis sie „unlocked“ wird.

Schritt 8:

Animation der Sonne.

Am einfachsten ist es wenn die Sonne senkrecht von unten nach oben aufsteigt. Das ist aber auch am langweiligsten. Deshalb soll die Sonne in einem leichten Bogen aufgehen.

Um dies zu bewirken, muss ich der  „Sonnen“-Instanz sagen, dass sie einem Pfad folgen soll, den wir vorher erstellen müssen.

Anders als in Photoshop erstellen wir eine ganz normale gekrümmte Linie und sagen ihr erst später, dass sie ein Pfad ist.

Als erstes erstellen wir eine neue Ebene (sh. Schritt 6),

auf deren erstem Schlüsselbild

Bilder

erstellen wir nun eine gekrümmte Linie. (Dazu muss das Schlüsselbild markiert sein.)

Dazu wählen wir nun das „Line Tool“ mit der Taste „N“ aus und ziehen vom unteren Rand der Bühne bis zum Mittelpunkt der erstellten Sonne eine Linie.

Bilder

Mit dem Auswahlwerkzeug können wir die Linie nun krümmen.

Wir gehen mit der Maus auf die Linie und ziehen sie mit gedrückter Maustaste nach rechts bis eine Krümmung entstanden ist.

Bilder

Schritt 9:

Damit der Flash-Film nun weiß, dass die eben erstellte Ebene ein Pfad sein soll, müssen wir mit der rechten Maustaste beim Ebenennamen (in unserem Fall „Layer 3“) klicken und dort „Guide“ aktivieren.

Bilder

Wie unschwer zu erkennen ist, taucht sofort ein neues Symbol vor dem Ebenennamen auf: Das „Guide“-Symbol.

Der Flash-Film weiß leider noch nicht, für wen der Pfad gedacht ist.

Wir müssen da etwas nachhelfen.

Wenn wir die „Sonnen“-Ebene ein wenig in die Pfad-Ebene ziehen (mit Hilfe der Maus),

also die „Sonnen“-Ebene ein wenig gen „Layer 3“-Ebene ziehen, dann verknüpfen sich die beiden. Wir markieren also die „Sonnen“-Ebene, als wollten wir sie umbenennen, und halten die Maustaste gedrückt, gehen leicht nach oben in Richtung „Layer 3“- Ebene und dann sollte es folgendermaßen aussehen.

Bilder

 Wichtig zu wissen ist, dass die erstellte gekrümmte Linie zwei entscheidende Punkte besitzt, den Anfangs- und den Endpunkt. (Da mag man nun lachen, aber ohne die zwei Punkte funktioniert die ganze Animation nicht.)

Wir müssen uns darüber im Klaren sein, dass die Sonne von unten nach oben aufgeht, momentan ist sie aber schon aufgegangen und das müssen wir ändern.

Wir markieren also die Sonne und ziehen sie an den Anfang des „Guides“ (Anfang ist unten).

Damit die Sonne nun ganz exakt mit Ihrem Mittelpunkt über dem Anfangspunkt der gekrümmten Linie liegt, müssen wir folgendes aktivieren.

Bilder

Dieses magnetische Hufeisen erleichtert uns nämlich die Positionierung.

Bilder

Ein kleiner Kreis in der Mitte der „Sonne“ verdeutlicht, dass die Sonne über dem Pfad liegt.

Schritt 10:

 
Damit die Sonne nun aufgehen kann und das entlang des Pfades müssen wir ihr einige „Frames“ Zeit dafür geben.

Also von Schlüsselbild eins bis zu einem anderen Schlüsselbild.

(Im Schlüsselbild 1 der „Sonnen“-Ebene ist die Sonne unten und im Schlüsselbild 40 oben)

Wir erstellen also im Schlüsselbild 40 der Sonnenebene ein Schlüsselbild (z.B. mit F6) und in „Layer 3“ müssen wir ein Bild/Frame an der Position 40 einfügen, ebenso in Layer „rechteck-grau“. Ein Bild wird eingefügt indem man an der gewünschten Position der Zeitleiste mit der rechten Maustaste drückt und im sich aufklappenden Menue auf „Insert Frame“ klickt. Wahlweise kann man das auch mit der Taste „F5“ machen, wenn der Frame markiert ist.

Bilder

So sieht das ganze dann aus.

Schritt 11:


Im Schlüsselbild der „Sonnen“-Ebene ist die Sonne immer noch unten, das kann nicht sein.

Deshalb markieren wir die Sonne und positionieren ihren Mittelpunkt (im Frame 40! der „Sonnen“-Ebene) auf den Endpunkt des „Guides“, also auf den Endpunkt der gekrümmten Linie.

Bilder


Schritt 12:

Jetzt weiß Flash, dass im Frame eins die Sonne unten ist und im Frame 40 ist sie oben.
Wir markieren das erste Schlüsselbild der „Sonnen“-Ebene und mit rechtem Mausklick können wir nun im sich öffnenden Menü „Create Motion Tween“ anklicken.

Bilder

Flash erstellt nun eine automatische Abfolge der Bilder, als würden wir die Sonne von Hand - Bild für Bild – von unten nach oben rücken.
Wir markieren das erste Schlüsselbild der Ebene „Sonne“ erneut und ein Dialogfeld im unteren Bereich des Bildschirms öffnet sich.

Bilder

In diesem aktivieren wir das Feld „Orient to path“ wodurch Flash weiß, dass er sich bei der Erstellung der Einzelbildabfolgen am Pfad orientieren soll.

Schritt 13:
Flash würde die Animation immer wiederholen, deshalb müssen wir ihm sagen, dass er am Ende anhalten soll.
Im letzten Schlüsselbild der Animation, also Frame 40 müssen wir via AS (Action Script) ein „Stop“ einfügen.

Dazu markieren wir das 40. Bild der Zeitleiste auf der Ebene „Sonne“ und öffnen den „Actions“ Dialog.

Bilder

Wir klicken auf das mint-grüne Plus (+) und gelangen über GLOBAL FUNCTIONS > TIMELINECONTROL > zu STOP. Hier klicken wir.

Bilder

Flash hält die Animation nun beim erreichen des 40. Bildes an.
Danach wird das Fenster geschlossen.

Schritt 14:

Wenn wir den Film nun testen, dann ist die Sonne vor den Hügeln.

Deshalb müssen wir die „rechteck-grau“-Ebene ähnlich wie bei drag&drop über die anderen Ebenen legen. Wir ziehen sie einfach bei gedrückter Maustaste über die anderen hinweg nach oben und lassen dort los.

Bilder

Nun können wir den Film testen.

Viel Spaß damit!

Euer Verlunkid


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Dominic62
  • 30.11.2011 - 19:46

Danke für das Tutorial - gut für einen Anfänger wie mich :)

Portrait von Gregorius_Pi
  • 06.03.2011 - 11:01

Vielen Dank für dieses Tutorial. Sehr verständlich erklärt, sehr empfehlenswert für blutige Anfänger.

Portrait von saera
  • 29.10.2010 - 09:56

Super Tutorial, das sich auch leicht auf Flash CS3 übertragen lässt!

Portrait von raphs
  • 22.01.2010 - 21:02

gerade für mich als anfänger super
werd ich sicherlich nachbauen:D

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 19.01.2010 - 17:52

Alles gut erklärt und super durch Bilder unterstützt!

Danke!

Portrait von seppdomin
  • 15.09.2009 - 10:49

coooooooool:) vielen dank. das tutorial wird mir weiterhelfen danke noch mal:)

Portrait von eri
eri
  • 17.06.2009 - 21:24

vielen dank. das tutorial wird mir weiterhelfen - vorallem, da es herrlich einsteigerfreundlich ist :D

Portrait von TheAngels
  • 27.05.2009 - 09:21

Dieses Tut ist für Einsteiger wirklich super erklärt...bleiben keine Fragen offen-hat alles toll geklappt :-) Danke!

Portrait von Freell
  • 05.04.2009 - 20:25

dankefein, hat mir sehr geholfen :D

Portrait von Black4ox
  • 06.11.2008 - 08:17

Ich fange gerade erst mit Flash an und da ist dieses Tut. absolut super Ich merke schon das wird mehr spaß machen desto mehr man beherscht.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 22.10.2008 - 17:31

super :) werde es gleich erstmal ausprobieren , danke

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 30.08.2008 - 09:39

Vielen Dank für das tolle Tutorial!

Portrait von itac6
  • 29.06.2008 - 19:48

Eine schöne Erklärung zu MovieClips an Spline ausrichten. Interessanter währe wenn man noch die Zeit auf dem Rechner auswertet und dann je nach Uhrzeit die Sonne per Script positioniert. evtl. Als Stufe " Tutorial :)

salü

Portrait von hero
  • 27.06.2008 - 11:54

super cool! sehr leicht! danke!

Portrait von Mouzze
  • 24.04.2008 - 23:44

super geklappt danke

Portrait von Liebling373
  • 03.03.2008 - 15:52

Super anfänger tut!

Ich kann euch nur wärmstens die Fortsetzung dazu empfehlen!

Portrait von suechtig-nach-farbe
  • 18.04.2007 - 21:58

schönes tut...war das erste was ich je mit flash gemacht hab...schöner einstieg für mich

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 14.03.2007 - 17:47

Sehr gut gemachtes tutorial! Besonders für Anfänger sehr zu empfehlen

Portrait von caracalla
  • 08.03.2007 - 01:21

schön gemacht, genau das was ich brauche,zufall ^^...danke für den tut

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 28.02.2007 - 04:08

sehr gut nachvollziehbar...schön für jeden blutigen anfänger(mich)..werd mich gleich mal an die fortsetzung machen..

x
×
×