{lang: 'de'}
Flashhilfe.de - Flash Community
  Flashkurse > Flash MX > Animierter Stern  
 
 

Seite drucken ::

 Autor: Christiana Hamalega (Tamara)
Webseite: biz2u.de
 
1) In Flash kann man viele schöne Effekte durch den gezielten Einsatz von Farbverläufen erzielen. Dies wird hier am Beispiel eines Sterns verdeutlicht, der im Anschluss mittels Actionscript (Skriptsprache in Flash) animiert wird. Die in diesem Tutorial angesprochenen Fensterpositionen beziehen sich jeweils auf die Standardinstallation.
 
2) Öffnen Sie einen neuen Film (Datei). In diesem Beispiel haben wir die Größe und die Hintergrundfarbe folgendermaßen angepasst:
  • Höhe: 200px
  • Breite: 200px
  • Hintergrundfarbe: schwarz (in Hexadezimalcode: #000000)
Wählen Sie im Menü Modifizieren den Unterpunkt Film, um die Einstellungen für den Film zu ändern.
Es öffnet sich das Dialogfenster Filmeigenschaften, in dem Sie die Angaben wie im Bild unten anpassen. Tragen Sie unter Breite 200 px und unter Höhe 200 px ein. Für die Auswahl der Hintergrundfarbe klicken Sie auf das weiße Feld hinter Hintergrundfarbe und wählen dort schwarz aus. In den restlichen Feldern muss für unsere Zwecke keine Änderung vorgenommen werden.
 
 
 Zur Bestätigung Klicken Sie auf OK
Hinweis: Sie können die Filmeigenschaften natürlich an Ihren Film anpassen. Die Angaben hier, sind lediglich Richtwerte und wurden in diesem Beispiel verwendet.
 
3) Im nächsten Schritt werden die Farben für den Stern definiert. Dies hat den Vorteil, dass gleich zu Beginn alle notwendigen Einstellungen gemacht wurden und im Anschluss nichts mehr vom eigentlichen Zeichnen abhält.
  • Wählen Sie im obersten Fenster am rechten Fensterrand den Unterpunkt Füllungen. (Sollte das Fenster nicht bereits angezeigt werden, wählen Sie aus der Menüleiste Fenster -> Bedienfeldsätze -> Standardlayout)
  • Wählen Sie aus dem Dropdown-Menü den Auswahlpunkt Kreisförmiger Farbverlauf
Sie müssten nun folgendes Bedienfeld vor sich haben:
 
 
 Um die einzelnen Farben einzustellen müssen Sie auf die Zeiger (kleine Pfeile) unterhalb des Definitionsleiste für den Farbverlauf klicken. Wählen Sie den ersten (linken) Zeiger. Neben der Definitionsleiste für den Farbverlauf erscheint ein nun das Symbol für die Zeigerfarbe. Klicken Sie auf dieses Symbol. Es öffnet sich ein Popup-Fenster in dem Sie die gewünschte Farbe entweder anklicken können oder manuell mittels eines Hexadezimalcodes (übliche Definitionsweise von Farben im Internet) festlegen können. Klicken Sie in das Texteingabefeld, geben Sie für den ersten Farbton #FFFFFF (weiß) ein und drücken Sie Enter. Da wir für unseren Farbverlauf nicht nur 2 sondern 3 Farbtöne benötigen müssen wir einen weiteren Zeiger einfügen. Klicken Sie hierzu unterhalb der Definitionsleiste für den Farbverlauf mit der linken Maustaste ungefähr in die Mitte. Legen Sie nun, wie oben beschrieben für den zweiten Zeiger die Farbe #0000CC (blau) fest. Für den letzten Zeiger wählen wir #000000 (schwarz). Damit uns der Farbverlauf anschließend zur Verfügung steht müssen Sie zum Abschluss der Farbdefinition auf das Speichersymbol (Diskette, rechts unten im Bedienfeld sichtbar) klicken.
 
 
4)Nun legen wir einen geraden Farbverlauf fest. Gehen Sie hierzu wie oben beschrieben vor. Wählen Sie anstatt Kreisförmiger Farbverlauf nun Gerader Farbverlauf. Die Farben müssten bereits voreingestellt sein. Wenn nicht, dann übergeben Sie die selben Werte, die oben verwendet wurden. Drücken Sie nochmals auf das Speichersymbol. Sie können nun als Füllfarben direkt auf die gerade erstellten Farbverläufe zugreifen.
 
 
5) Nun ist es an der Zeit unseren Stern zu zeichnen.
Wir zeichnen einen Kreis, ohne Rand und als Füllfarbe nehmen wir den selbst erstellten, kreisförmigen Verlauf.
Hierzu gehen wir folgendermaßen vor:
Wählen Sie links aus der Werkzeugleiste das Ellipsenwerkzeug mit einem Linksklick aus (Sollte das Fenster nicht bereits angezeigt werden, wählen Sie aus der Menüleiste Fenster -> Werkzeuge).
Etwas unterhalb befinden Sie zwei Farbwahlfenster. Klicken Sie mit der linken Maustaste auf das Bleistiftsymbol (Zeichenfarbe). Unterhalb befinden sich 3 Symbole. Klicken Sie mit der linken Maustaste auf das Symbol mit dem weißen Quadrat mit dem roten, diagonalen Strich. Sie haben nun festgelegt, dass keine sichtbare Außenlinie gezogen wird.
Klicken Sie nun auf das Farbwahlsymbol neben dem Farbeimer (Füllfarbe). Am unteren Rand des nun geöffneten Popups befindet sich als zweites Symbol von rechts unser runder Farbverlauf. Klicken Sie diesen (mit der linken Maustaste) an. Zeichnen Sie nun auf der Bühne nun einen Kreis indem Sie den Mauszeiger auf die Bühne bewegen und mit gedrückter linker Maustaste einen Kreis aufziehen.
Jetzt legen wir die Position und Größe des Kreises fest.
Wechseln Sie das Werkzeug indem sie in der Werkzeugleiste den schwarzen Pfeil (Pfeilwerkzeug) auswählen. Ziehen Sie nun einen Rahmen um den gezeichneten Kreis. Tragen Sie hierbei Sorge dafür, dass der komplette Kreis markiert wird. (Die Markierung erkennen Sie anhand des gepunkteten Bereichs).
Legen Sie im Infofenster (Selbes Bedienfeld wie für die Füllungen, Tabellenreiter Info wählen) unter W 40 (width=Breite) und unter H 40 (height=Höhe) fest. Beachten Sie, dass sie nach der Eingabe der Werte die Tabulatortaste drücken, das die Werte sonst u.U. nicht übernommen werden.
 
 
 Um den Kreis auf der Bühne zu zentrieren wählen Sie auf der Symbolleiste Ausrichten (Sollte die Symbolleiste nicht bereits angezeigt werden, wählen Sie aus der Menüleiste Fenster -> Symbolleisten -> Standard). Klicken Sie in dem Popup auf das Symbol An Bühne ausrichten/anpassen (rechts). Klicken Sie jetzt auf vertikal zentriert und horizontal zentriert (oberste Zeile jeweils das mittlere Symbol)
 
 
6) Jetzt wird der Kreis in ein Symbol konvertiert.
Gehen Sie hierzu folgendermaßen vor:
Sollte der Kreis nicht mehr markiert sein, markieren Sie ihn und drücken dann F8. Vergeben Sie in dem Popup-Fenster Symboleigenschaften den Namen "mitte". Auf der Bühne befindet sich nun unser Kreis mit einem blauen Rahmen.
 
 
7) Nun zeichnen wir einen Strahl:
Löschen Sie zuerst den Kreis auf der Bühne (nicht auf der Zeitleiste, wir benötigen das leere Schlüsselbild).
Wählen Sie nun aus der Werkzeugleiste das Rechteckwerkzeug und zeichnen Sie ein Rechteck ohne Rand. (Vorgehensweise wie beim Kreis. Als Füllfarbe wählen Sie den geraden Farbverlauf und definieren dann die Höhe und Breite im Infofenster auf W: 85 und H: 1.5 (beachten Sie den Punkt, Komma wird nicht akzeptiert).
 
 
8) Konvertieren Sie das Rechteck in ein Symbol mit dem Namen "strahl"
Gehen Sie hierzu folgendermaßen vor:
Sollte das Rechteck nicht mehr markiert sein, markieren Sie es und drücken dann F8. Vergeben Sie in dem Popup-Fenster Symboleigenschaften den Namen "strahl". Auf der Bühne befindet sich nun unser Rechteck mit einem blauen Rahmen.
Löschen Sie auch dieses Symbol auf der Bühne.
 
9) Öffnen Sie die Bibliothek mit Strg+L (oder Fenster -> Bibliothek). In dem Popup-Fenster müsste nun strahl und mitte zu finden sein.
 
 
 Doppelklicken Sie auf strahl. Auf der Bühne müsste nun der Strahl ohne blauen Rahmen zu sehen sein.
Markieren Sie den Strahl und beachten Sie wieder, dass er vollständig markiert ist.
Tipp: Ändern Sie vorübergehend die Farbe des Films (s.o.) auf rot, dann sieht man genauer, wo der Strahl anfängt und wo er aufhört.
Richten Sie nun das Rechteck an der linken Kante auf der Bühne aus (Fenster Ausrichten)
Oben links, über der Zeitleiste befindet sich der Tabellenreiter Szene1 klicken Sie darauf.
Sie haben nun eine leere Bühne vor sich.
 
10) Ziehen Sie per drag and drop das Symbol mitte auf die Bühne.
Zentrieren Sie es sowohl horizontal als auch vertikal.
 
 
11) Positionieren Sie nun per drag and drop das Symbol strahl neben den Kreis auf die Bühne.
Stellen Sie sicher, dass An Objekt ausrichten (Magnetsymbol) auf der Symbolleiste aktiviert ist.
Packen Sie nun den Strahl am linken Ende (am Kreuz) und ziehen Sie ihn in Richtung des Mittelpunkts des Kreises bis ein kleiner Kreis erscheint. Lassen Sie den Strahl los und er ist korrekt positioniert.
 
12) Platzieren Sie nun eine weitere Instanz (wieder das Symbol aus der Bibliothek ziehen) von strahl auf die Bühne. Es müsste ein blauer Rahmen um das neue Symbol sichtbar sein. Wählen Sie auf dem Bedienfeld den Tabellenreiter Transformieren. (selbes Bedienfeld wie die Füllungen) und definieren Sie unter Drehen einen Winkel von 90°. Positionieren Sie den neuen Strahl wie oben beschrieben.
 
13) Gehen Sie mit dem dritten und vierten Strahl wie oben beschrieben vor und legen Sie für den dritten 180° und für den vierten 270° fest.
Das Bild auf Ihrer Bühne müsste nun wie unten aussehen:
 
 
14) Es befindet sich nun ein fertiger Stern auf der Bühne, der nun animiert wird.
Markieren Sie alles auf der Bühne indem Sie einen Rahmen darum ziehen oder drücken Sie Strg+A. Konvertieren Sie den gesamten Stern in ein Symbol mit dem Namen "stern".
Es ist nun nur noch ein quadratischer blauer Rahmen sichtbar.
Konvertieren Sie dieses Symbol (stern) nun in ein Symbol namens "sternsequenz"
 
15) Wählen Sie aus der Bibliothek die sternsequenz mit einem Doppelklick aus.
Auf der Bühne befindet sich nun der Stern (eine Instanz des Objekts stern).
Wählen Sie per Rechtsklick aus dem Kontextmenü Aktionen
Das Fenster Objektaktionen (hier ist der Bereich für Actionscript) wird geöffnet.
Selbst wenn Sie noch keine Experte sein sollten, schalten Sie nun in den Expertenmodus um. Dies erfolgt entweder durch die Tastenkombination Strg+E oder durch einen Klick auf den Pfeil rechts oben in der Ecke.
Klicken Sie nun in den leeren Bearbeitunsbereich und fügen Sie folgenden Text dort ein:
onClipEvent (enterFrame) { groesse = random(100); _xscale = groesse; _yscale = groesse; _alpha = random(40)+10; }
Es sollte dann wie unten dargestellt aussehen.
 
 
16) Schließen Sie das Fenster Objektaktionen.
 
17) Speichern Sie den Film, veröffentlichen Sie ihn. Sie können den Film nun mit Strg+Enter testen oder sich die HTML-Datei anschauen. Mehr zum Thema Veröffentlichen und Testen finden Sie hier im Forum.
 
18) Experimentieren Sie einfach ein wenig mit den Werten im Actionscript.
Sie können die Veränderungen jederzeit überprüfen, indem Sie den Film testen
 
 Bei diesem Tutorial bedanken wir uns für die Unterstützung von flashtuts.de
 


Ergebnis anschauen.
Flashkurs "Flash MX :: Animierter Stern" downloaden ( 115.88 KB )


«« zurück   Auswahl   vor »»


Alle Inhalte gehören zu flashhilfe.de
 
 
Partner Webseiten: art-and-law.de  Mediengestalter.info   phpwelt.de   Scubacube.de  
Haftungsausschluss   Datenschutzerklärung   Impressum
© 1999-2024 Sebastian Wichmann - Flashhilfe.de