Flash Lupen

Flash 8 – Lupeneffekt
Allgemein
Für die folgenden Lernschritte benötigst du das Foto „Winter.jpg“ aus dem Übungsordner
„Übungsdateien für Corel Photopaint und Painter“. Du kannst den Ordner unter folgender
Adresse als Zip-File herunterladen:
http://www.psbregenz.at/service/downloads/info/downloadcorel.html
Natürlich funktioniert diese Anleitung auch mit einem anderen Bild.
Ebenen erstellen in Flash
Starte Flash 8 und wähle das Menü „Datei – Neu“. Stelle die Bühne auf folgende Maße
ein:
Für diese Übung benötigst du insgesamt drei Ebenen: „aktionen“, „lupe“ und „foto“. Diese
Ebenen erstellst du, indem du in der Zeitleiste auf die Schaltfläche „Ebene einfügen“
klickst und die neuen Ebenen durch Doppelklick auf den Namen umbenennst:
Flash_Lupeneffekt
Seite 1 von 8
© SC 2006
Symbole in der Bibliothek von Flash erstellen
Über das Menü „Fenster – Bibliothek“ stellst du zunächst
sicher, dass die Bibliothek deines Flash-Films am rechten
Rand angezeigt wird.
Klicke nun am unteren Ende der Bibliothek auf das Symbol
„Neues Symbol“ (Vergleiche mit der Abbildung rechts) und gib
im darauf erscheinenden Dialogfeld folgende Daten ein:
Abschließend klicke auf „OK“. Importiere nun über das Menü
„Datei – Importieren – In Bühne importieren“ das Foto
„Winter.jpg“ in deinen Flash-Film.
Richte nun das Foto an der linken oberen Ecke aus, indem du
unter „Eigenschaften“ für X und Y folgende Werte eingibst:
Bevor du nun zum nächsten Schritt kommst, wird es Zeit, deine Arbeit zu speichern.
Speichere deinen Flash-Film unter dem Namen „lupe“ in dein Übungsverzeichnis.
Lege nun ein weiteres neues Symbol an, indem du in der
Bibliothek wieder auf die Schaltfläche „Neues Symbol“
klickst. Nenne dieses Symbol „lupe“ und speichere es
wiederum als „Movieclip“ ab.
In deiner Bibliothek müssten sich nun 3 Objekte befinden
(Vergleiche mit der Abbildung rechts).
Wähle als nächstes in der Werkzeugleiste das
„Rechteckwerkzeug“ aus und zeichne ein Rechteck.
Flash_Lupeneffekt
Seite 2 von 8
© SC 2006
Nachdem du mit Hilfe des Rechteckwerkzeugs (siehe Abbildung rechts,
roter Rahmen) ein Rechteck gezeichnet hast, wählst du das
Auswahlwerkzeug (Abbildung rechts, grüner Rahmen) und klickst damit
doppelt in dein Rechteck.
Nun kannst du in der Eigenschaftenleiste folgende Eigenschaften für
dein Rechteck einstellen:
Die Füll- und Umrissfarbe deines
Rechtecks spielen keine Rolle,
daher
musst
du
diese
Eigenschaften
auch
nicht
ändern. Übernimm einfach die
Einstellungen, die vorgegeben
sind.
Du benötigst noch ein weiteres Symbol für den Lupeneffekt. Klicke also in der Bibliothek
ein weiteres Mal auf die Schaltfläche „Neues Symbol“. Dieses nennst du „maske“:
Maskenebene in Flash erstellen
Das Symbol „maske“ besitzt eine
eigene Zeitleiste. In diesem Symbol
musst du nun zwei Ebenen anlegen.
Achte darauf, dass du dich auch
wirklich
im
Symbol
„maske“
befindest (Vergleiche mit der
Abbildung rechts).
Nenne die obere Ebene „lupe“ und
die untere Ebene „foto“, wie in der
Abbildung dargestellt.
Flash_Lupeneffekt
Seite 3 von 8
© SC 2006
Klicke nun die Ebene „lupe“ mit der rechten Maustaste an und wähle den Befehl
„Maske“. Beide Ebenen sind jetzt gesperrt, das erkennst du an dem Schlosssymbol:
Um weiterarbeiten zu können, musst du als nun
die Sperre der beiden Ebenen aufheben, indem
du auf die beiden Schlosssymbole klickst.
Ziehe nun das Symbol „lupe“ in deiner
Bibliothek auf die Ebene „lupe“ (Achte darauf,
dass in der Zeitleiste die Ebene „lupe“
ausgewählt ist).
Nimm in der Eigenschaftenleiste folgende Einstellungen für das Symbol „lupe“ vor:
Wähle als nächstes in der Zeitleiste die Ebene „foto“ aus, indem du sie anklickst, und
ziehe anschließend aus der Bibliothek das Symbol „foto“ in die gleichnamige Ebene. Gib
für das Foto in der Eigenschaftenleiste folgende Werte ein:
Die weiteren Einstellungen nimmst du nun im Hauptfilm vor. Klicke dazu in der Zeitleiste
auf „Szene1“:
Nun befindest du dich wieder im Hauptfilm und musst noch folgende Einstellungen und
Arbeitschritte vornehmen.
Flash_Lupeneffekt
Seite 4 von 8
© SC 2006
Ziehe als erstes das Symbol „maske“ aus der Bibliothek in die Ebene „lupe“ (Achte auch
hier wieder darauf, dass du die Ebene zuerst ausgewählt hast). Nimm dann in der
Eigenschaftenleiste folgende Einstellungen vor:
Instanzname: maske
X: 0.0
Y: 0.0
Als nächstes ziehst du das Symbol „foto“ aus der Bibliothek auf die Ebene „foto“. In der
Eigenschaftenleiste musst du nun folgende Einstellungen vornehmen:
Klicke
zuerst
auf
das
Schlosssymbol (roter Rahmen)
vor B und H. Gib anschließend den
halben Wert deines Bildes ein. In
unserem Beispiel hat das Bild eine
Breite von 768 Pixel – die Hälfte ist
also 384 Pixel. Die Höhe wird
automatisch ebenfalls angepasst.
Für X und Y gibst du wieder die Werte „0.0“ ein. Falls du ein anderes Bild verwendet hast,
musst du bei der Breite eben die Hälfte des Wertes deines Bildes eintragen. Falls du das
Schlosssymbol nicht angeklickt hast, musst du auch die Höhe selbst halbieren.
Füge in der Zeitleiste in den Ebenen „lupe“ und „foto“ jeweils 3 Bilder ein, indem du das
leere Kästchen rechts vom Schlüsselbild mit der rechten Maustaste anklickst und den
Befehl „Bild einfügen“ wählst:
Zuletzt musst du noch ein wenig mit ActionScript programmieren, damit der Lupeneffekt
funktioniert. Wie das geht, erfährst du im nächsten Kapitel.
Flash_Lupeneffekt
Seite 5 von 8
© SC 2006
Mit ActionScript programmieren
Markiere in der Zeitleiste der Ebene „aktionen“ das erste Schlüsselbild. Klicke
anschließend in der Eigenschaftenleiste auf „Aktionen“:
Dadurch öffnest du das ActionScript-Fenster. Gib hier den folgenden Code ein:
Hier noch einmal der Code, falls du ihn in der
Abbildung nicht gut lesen kannst:
startDrag(„maske“,true);
Markiere in der Ebene „aktionen“ das zweite Bild, klicke mit der rechten Maustaste und
wähle den Befehl „Schlüsselbild einfügen“.
Flash_Lupeneffekt
Seite 6 von 8
© SC 2006
Gib im ActionScript-Fenster den folgenden Code ein:
Hier noch einmal der Code, falls du ihn in der
Abbildung nicht gut lesen kannst:
maske.foto._x=-_xmouse*2;
maske.foto._y=-_ymouse*2;
Nun musst du noch im dritten Bild ein Schlüsselbild einfügen und dieses ebenfalls mit
ActionScript-Code ausstatten:
Hier noch einmal der Code, falls du ihn in der
Abbildung nicht gut lesen kannst:
gotoAndPlay(2);
Flash_Lupeneffekt
Seite 7 von 8
© SC 2006
Film testen
Klicke im Menü „Steuerung“ auf „Film testen“ und überprüfe, ob deine Lupe funktioniert.
Vergiss nicht, deine Arbeit zu speichern!
Flash_Lupeneffekt
Seite 8 von 8
© SC 2006