NetObserver Studie
Aktuelles
Startseite
TP Wettbewerbe
Sitemap
Service
Hilfe-Forum
Kolumnen
Linktipps
Buchrezensionen
Traum-Team
Newsletter
Traumquelle
Dreamweaver
Fireworks
Photoshop
Flash
Traum-Start
gimp
GoLive
php / Apache
Sonstige
Grundlagen
Usability
CSS
Apple / Mac
3D
Intern
TP-Sponsor
TP SHOP
Bild Galerie
TP Wallpapers
Forum-Archiv
Link zu uns
Impressum
Zurück  
TP Portal > Flash > Irisblende mit Flash II

Irisblende - Animation (Seite 2)

Auf Seite 1 haben wir die Blende konstruiert. Auf dieser Seite werden wir sie animieren.

Wir wollen die Blende öffnen, indem wir die Lamellen um den linken Eckpunkt aus dem Kreis herausdrehen. Es soll aber nur die runde Öffnung sichtbar bleiben. Das erreichen wir mit einer kreisförmigen Maske.

Vorbereitungen für die Animation

Bisher hat unsere Zeitleiste nur eine einzige Ebene. Wir klicken den Namen doppelt an und nennen die Ebene "lamellen". Durch Klick auf das + Zeichen am unteren Rand der Zeitleiste fügen wir eine neue Ebene ein. Das soll unsere Maskenebene werden. Wir klicken mit der rechten Maustaste auf den Namen der Ebene und wählen aus dem Popupfenster "Maske". Wir geben dieser Ebene den Namen "Maske". Die darunterliegende Ebene hat ein neues Symbol bekommen und wurde eingerückt . Das zeigt, dass diese Ebene jetzt maskiert ist. Das Schloss zeigt an, dass die beiden Ebenen gesperrt sind, also nicht bearbeitbar. Wir klicken die Schlösser an, um die Ebenen zu entsperren.tooltipp

Wir wählen das erste noch leere Schlüsselbild der Maskenebene aus und zeichnen auf der Bühne einen Kreis mit Füllung in beliebiger Farbe. Im Bedienfeld "Eigenschaften" geben wir für Breite und Höhe 230px ein und im Fenster "Ausrichten" zentrieren wir den Kreis auf der Bühne. tooltippDie Maske verdeckt nun auf der Bühne die Lamellen. Im Film wird aber nur sichtbar, was unterhalb der Maske liegt. Mit einem Klick auf den Punkt unterhalb des Auges in der Zeitleiste blenden wir die Maske aus. (durch einen erneuten Klick kann sie wieder eingeblendet werden. Das Ein-und Ausblenden hat keinen Einfluss auf den Film)

Bisher befinden sich alle Lamellen zusammen auf der Ebene "Lamellen". Um sie aber animieren zu können, muss jede Lamelle auf einer eigenen Ebene liegen. Wir wählen die Ebene "Lamellen" aus tooltippund verteilen die Lamellen mit "Modifizieren>Auf Ebenen verteilen". Wir sehen, dass nun jede Lamelle auf einer eigenen Ebene liegt und nummerieren sie von 1 bis 8. Die unterste Ebene nennen wir "hilfskreis" Die Ebene "Lamellen" ist jetzt leer. Wir löschen sie. tooltipp

Die ganze Animation der Irisblende wird aus 45 Bildern auf der Zeitleiste bestehen. Für die Ebenen "Maske" und "hilfskreis" fügen wir diese Bilder jetzt ein, indem wir Bild 45 dieser Ebenen auswählen und dann Taste F5 betätigen.

 

Öffnen der ersten Lamelle

Mit einem Klick auf das Augensymbol in der Zeitleiste blenden wir zunächst alle Ebenen aus und anschließend blenden wir mit Klick auf das rote Kreuz nur die Ebenen "lamelle1" und "hilfskreis" wieder ein.

Auf der Bühne sehen wir nun eine Lamelle, deren Drehpunkt wir auf ihre linke ober Ecke ziehen wollen.(nachdem wir "Modifizieren>Transformieren>Drehen und neigen" gewählt haben, können wir den kleinen Kreis für den Drehpunkt verschieben) tooltipp In der Zeitleiste für "lamelle1" klicken wir mit der rechten Maustaste auf Bild15 und wählen "Schlüsselbild einfügen".(oder F6) Im Bedienfeld "Transformieren" sehen wir, dass diese Lamelle einen Drehwinkel von -45° hat. Sie muss nun gegen den Uhrzeigersinn um 75° gedreht werden, das heißt, zu den -45° müssen -75° zugezählt werden. Das ergibt -120°. Wir geben diese Zahl ein und bestätigen mit "Enter". tooltipp und tooltipp

Wir klicken auf das Schlüsselbild in Bild 1 und wählen im Bedienfeld "Eigenschaften" die Einträge wie bei tooltipp. In der Zeitleiste erscheint nun zwischen Schlüsselbild1 und Schlüsselbild15 ein schwarzer Pfeil, das Zeichen für ein Tweening (Animation). tooltippMit Strg+Enter testen wir die Animation. (wir können auch mit "Fenster>Symbolleisten> Steuerung" über der Zeitleiste eine Reihe Symbole zur Steuerung des Films einblenden und betätigen)

Lamellen 2-8

Lamellen

Drehwinkel
Schlüsselbild1

Drehwinkel
Schlüsselbild15

lam.1

-45°

-120°

lam.2

-90°

-165°

lam.3

-135°

150°

lam.4

180

105

lam.5

135

65

lam.6

90°

15°

lam.7

45

-30

lam8

-75°

Die Ebene "hilfskreis" ist jetzt überflüssig geworden und wir können sie löschen.

Blende wieder schließen

Wir klicken in der Zeitleiste auf eine leere Stelle hinter dem Namen von Ebene "lamelle1" Damit sind alle Bilder und Schlüsselbilder dieser Ebene ausgewählt. Jetzt klicken wir mit der rechten Maustaste auf eine beliebige Stelle des Tweenings und wählen im Popup "Bilder kopieren" Dann klicken wir wieder mit der rechten Taste, jetzt auf Bild 30 und wählen "Bilder einfügen". Wir haben nun eine Kopie des Tweenings von Bild 1-15. Die Blende soll aber geschlossen werden, deshalb müssen wir die Bilder umkehren. Wir markieren mit gedrückter Shifttaste die Schlüsselbilder 30 und 45. Lösen Shift und klicken mit der rechten Maustaste wieder an einer beliebigen Stelle in das neue Tweening. Im Popup Fenster wählen wir "Bilder umkehren". tooltippJetzt müssen wir nur noch im Bedienfeld "Eigenschaften" bei "Drehen" "Automatisch" wählen. tooltipp

Die oben beschriebenen Schritte für Ebene "lamelle1" wiederholen wir für "lamelle 2-8"

Bitmap für Hintergrundbild einfügen und animieren.

Wir fügen unterhalb von "lamelle8" eine neue Ebene ein und nennen sie "bitmap". Wir wählen "Datei>Importieren" und suchen uns eine passende Grafik als Hintergrundbild aus. Ich habe Wolken gewählt, die von rechts nach links ziehen sollen und dabei auch noch näher kommen. In Schlüsselbild 1 positioniere ich die Grafik wie auf tooltippzu sehen. Wir klicken in der Zeitleiste auf Bild45 und fügen mit F6 ein Schlüsselbild ein, das eine Kopie von Bild eins ist. Unsere Wolken sollen aber wandern, deshalb verschieben wir sie in Bild45 wie wir auf tooltippsehen. Damit der Eindruck erweckt wird, als kämen die Wolken näher, müssen wir die Grafik in Bild1 verkleinern. Wir markieren also in der Zeitleiste Bild1 und geben im Bedienfeld "Tansformieren" 80% ein. tooltippIm Bedienfeld "Eigenschaften" wählen wir bei "Tween" "Bewegung" aus.

Unsere Irisblende ist fertig !!!

 

Wollt Ihr die Blende mit einem Ring umrahmen, müsst Ihr Euch auch Seite 3 ansehen.

>>> Seite 3

(uj) (http://www.sitecrea.de)

Abbildungen

Abbildung 1

Abbildung 1

Abbildung 2

Abbildung 2

Abbildung 3

Abbildung 3

Abbildung 4

Abbildung 4

Abbildung 5

Abbildung 5

Abbildung 6

Abbildung 6

Abbildung 7

Abbildung 7

Abbildung 8

Abbildung 8

Abbildung 9

Abbildung 9

Abbildung 10

Abbildung 10

Abbildung 11

Abbildung 11

Abbildung 12

Abbildung 12

Abbildung 13

Abbildung 13

Abbildung 14

Abbildung 14

Buchrezension

Coverimage
AJAX Hacks
Dynamische Webseiten mit AJAX programmieren - dieses Handbuch bietet einen praktischen Einblick.
[mehr]
Gimahhot - Shopping
TP-Partner
Sprachreise London
Webmasterpro
Computerhilfen
Computerhilfen
Eventagentur Hamburg
it-rechtsinfo.de
Designguide
Getreidemühlen
sk-typo3
Kochkurs Berlin
Maandiko.de
d. Webdesigner
PSD Tutorials
Medizin
Handy Forum

Hier könnte Ihre Werbung stehen

 >> INFO << 

\ Startseite | Forum | Impressum | nach oben | Seite zurück /