Anzeige
Tutorialbeschreibung

Sonnenaufgang in Flash II

Sonnenaufgang in Flash II

Basierend auf dem ersten Teil des Workshops knüpfe ich nun an und verändere das „Umgebungslicht“ entsprechend dem Sonnenstand.

 


Beim folgenden Workshop ist es wie immer natürlich ratsam, oft zwischenzuspeichern.

 
Schritt 1:

In Teil I habe ich erklärt, wie man aus dem Kreis das „Sonnen“-Symbol (MovieClip) erstellt.

Den Anfangspunkt des Pfades habe ich exakt so positioniert, dass die Sonne im ersten Frame hinter dem Hügel nicht zu sehen ist.

Genau das gleiche, (also einen MovieClip) müssen wir nun aus dem erstellten grauen Hügel machen.

Wir wandeln Ihn in ein Symbol um, welches wir „Hügel“ nennen, dazu müssen wir die entsprechende Ebene eventuell entsichern.

 
Schritt 2:

Außerdem brauchen wir ein Foto das den Himmel zeigt im Format 800x500 (es darf dennoch nur eine kleine Dateigröße haben, ca.25KB, eine Auflösung von 72dpi reicht vollkommen aus).

Dies wird unser neuer Hintergrund bei Tag. 

Bilder

Auf einer neuen Ebene, die ganz zu unterst in der Zeitleiste liegt und die wir „Htgr“ nennen, importieren wir das Foto in das erste Schlüsselbild, mittels dem Befehl: File > Import > Import to Stage.

Bilder

Wenn das Bild exakt mittig auf der Bühne platziert ist, das heißt wenn nichts mehr vom Bühnenhintergrund übersteht, dann sichern wir die Ebene.

Schritt 3a:
Wir animieren jetzt den Hügel.

Als erstes fügen wir im Bild 40 der Ebene „rechteck-grau“, die wir auch gerne in „Hügel“ umbenennen können, ein Schlüsselbild ein (entweder mit der rechten Maustaste und dann Insert Keyframe, oder mit F6). Also dupliziert Flash den Movieclip und setzt dort eine neue Instanz ein.

Anmerkung: Wenn du nicht mehr weißt, wie das geht, in „Sonnenanimation in Flash Teil I“ habe ich das bereits erklärt, also dort noch mal nachsehen.

Schritt 3b:

Dann markieren wir wieder das erste Schlüsselbild der „Hügel“-Ebene und anschließend klicken wir einmal auf den „Hügel“.

Ein Fenster am unteren Bildschirmrand öffnet sich. Das „Properties“/Eigenschaften-Fenster.

Dort gibt es die Möglichkeit Farben, Transparenzen und so fort einzustellen.

Der Hügel muss markiert sein, damit Flash weiß für welche Instanz er die Eigenschaften ändern soll.

Bilder

Im Bild ist also nun die rechte Seite des Properties-Dialogfensters zu sehen.

Dort nehmen wir folgende Einstellungen vor. Color: Tint (also Farbfüllung oder Farbe) und dort wählen wir das dunkelste Blau aus, das wir finden können.

Der Rest bleibt unverändert. Also Transparenz:100% und Blend:Normal.

Schritt 3c:

Das gleiche machen wir im letzten Schlüsselbild der Ebene. Wieder muss der Hügel markiert werden und im „Properties“-Dialogfenster eine Farbe ausgewählt werden.

Diesmal wählen wir aber eine andere Farbe. Zum Beispiel # 330000.

 
Schritt 3d:

Nun markieren wir das erste Schlüssel Bild und mit rechtem Mausklick aktivieren im sich öffnenden Fenster: „Create Motion Tween“, so wie wir das bei der Sonne im letzten Workshop gemacht haben.

Bilder

Zwischenergebnis.

Im Bild wurde der Pfad ausgeblendet. Dazu habe ich auf den ersten Punkt neben dem Pfadnamen geklickt, dort wo jetzt das rote Kreuz zu sehen ist.

 
Schritt 4a:

Widmen wir uns nun dem Wolkenhintergrund. Wir haben - wie so oft bei Flash- zahlreiche Möglichkeiten ihn zu verändern.

Auch er soll natürlich am Anfang ein Nachthimmel sein und am Ende….

Um den Hintergrund zu verändern, der ja ein Foto ist, wenden wir einen kleinen Trick an.

Zunächst wandeln wir das Wolken-Foto in ein Symbol (Movie-Clip, Name:z.B.Wolken) um und mit Hilfe des „Properties“-Fensters, geben wir bei „Blend“:Substract ein.

Bilder

Die Ebene mit dem Wolken-Foto können wir auch „Wolken“ statt „Htgr“ nennen.

Anschließend wird die Ebene „gelockt“, also gesperrt.
 
 
Schritt 4b:
Nun zum eigentlichen Trick.

Dieser Schritt mag für den Anfänger leicht kompliziert sein, lohnt sich aber enorm.

Unter die „Wolken“-Ebene kommt nun eine weitere Ebene mit einem Verlauf.

Diese weitere Ebene nennen wir „Verlauf“. Alle anderen Ebenen werden ausgeblendet und „gelockt“.

Wir erstellen ein Rechteck mit der Größe 800x500, entfernen den Rahmen, platzieren es exakt zentral auf der Bühne und markieren die Fläche. Dann öffnen wir das „Color-Mixer“-Fenster und wählen bei Type: „Radial“, also kreisförmig.

Bilder

Des weiteren markieren wir die Füllfässchen im unteren Bereich des Bildes, geben für das erste den Farbwert #FFCC99 ein, bestätigen das mit der Taste „Enter“ und für das zweite Fässchen, den Farbwert #000033. Wieder bestätigen wir mit „Enter“. Die Position der Füllfässchen entnehmt bitte dem Bild oben.

Das erstellte Rechteck auf der Bühne sollte nun den Farbverlauf angenommen haben. Wichtig! ist, dass es die ganze Zeit markiert ist.

 
Schritt 4c:

Als nächsten müssen wir auf Frame 40 der „Verlaufs“-Ebene einen Keyframe einfügen. Der Verlauf wird !nicht! in ein Symbol konvertiert. Im erstellten Schlüsselbild 40 markieren wir das Rechteck, und im „Color-Mixer“ geben wir nun neue Werte ein.

Bilder

 
Die markierte Fläche bekommt die Verlaufswerte:
Radial,
#FFCC99, Alpha 76% (Alpha steht links neben dem Farbwert)
und
#000033, Alpha 0%.

Die Position der Farbkübelchen entnehmt bitte wieder dem Bild.

 
Schritt 4d:

Nun blenden wir die Sonnen-Ebene ein und markieren den ersten Frame der Verlaufsebene.

Anschließend wählen wir das Verlaufswerkzeug aus.

Bilder

Wir klicken damit auf den ersten Verlauf und ein Kreis wird angezeigt.

Mit dem Verlaufswerkzeug verschieben wir den Mittelpunkt dieses Kreises so, dass er über dem Mittelpunkt der Sonne liegt.

Bilder

Das gleiche tun wir bei Frame 40 im zweiten Verlauf. Da ist die Sonne ja schon aufgegangen und auch dort müssen wir den Mittelpunkt verschieben.

Bilder

 
Schritt 4e:

Zum Abschluss dieser Aktion, markieren wir wieder das erste Schlüsselbild auf der „Verlaufsebene“ und das Propertiesfenster öffnet sich. Wir müssen nun ein „Shape-Tweening“ erstellen.

Bilder

Also wählen wir bei „Tween“ > „Shape“, also Form aus.
 
Schritt 5:

Wir verschönern unsere Sonne ein wenig. Dazu sperren wir die „Verlaufs“-Ebene und entsperren die „Sonnen“-Ebene.

Im ersten Frame der „Sonnenebene“ markieren wir die „Sonnen“-Instanz, nun wieder mit dem Auswahlwerkzeug, und wählen im „Properties“-Fenster:

 
Color: Alpha, 70%
Blend: Hard Light
 

Ebenso tun wir das im 40. Frame, wenn es noch nicht geschehen ist.

 
Schritt 6:
Nun zum letzten Schritt für diesen Workshop.

Alle Ebenen werden gesperrt und bis auf den Pfad „eingeblendet“.

Die Sonne geht bisher sehr schnell auf. Schöner wäre es wenn sie langsamer aufginge. Deshalb markieren wir alle Frames/Bilder auf der Zeitleiste, zwischen Bild Nr. 10 und 30. 

Bilder

Dann drücken wir fünfmal auf die Taste „F5“. Dadurch werden 105 Bilder eingefügt. Und logischerweise dauert die Animation dadurch länger.

Jetzt können wir die Animation testen.
Viel Spaß damit!
Euer Verlunkid 

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

x
×
×