Realisierung einer Lupe

Eine einfach gestrickte Homepage wird einem Benutzer kaum einen Anreiz für einen längeren Besuch geben. Sobald diese Homepage zudem über einen längeren Zeitraum keine neuen Inhalte bietet, werden die Besucher auch nicht wiederkehren. Mit einfachen Mitteln können Sie dem entgegenwirken. Bieten Sie dem Besucher Abwechslung durch Bewegungsabläufe, die vom Verhalten des Benutzers abhängen. Bieten Sie dem Besucher eine Möglichkeit, auf Ihrer Homepage zu „spielen“. Als praktisches Beispiel wollen wir ein Bild mit einer Lupe ausstatten. Für eine detaillierte Ansicht des Bildes muss der Betrachter selbstständig mit der Lupe über das Bild fahren.

Erstellen Sie ein neues Flashdokument und fügen Sie dem Projekt zwei weitere Ebenen hinzu. Benennen Sie die erste Ebene mit „action“, die Zweite mit „mask“ und die Dritte mit „image“. Erzeugen Sie über das Menü „Einfügen“ unter „Neues Symbol“ oder mit der Tastenkombination Strg + F8 ein neues Symbol. Geben Sie dem Symbol den Namen „image“ und wählen Sie unter Verhalten „Movieclip“ aus. Für die weitere Erstellung des Lupeneffektes benötigen wir das gewünschte Bild, an dem Sie den Effekt ausüben wollen. Betätigen Sie hierfür im Bearbeitungsmodus des soeben erzeugten Symbols die Tastenkombination Strg + R. Wählen Sie eine Bilddatei aus und verlassen Sie das Fenster über die Schaltfläche „Öffnen“. Das importierte Bild sollte in einer höheren Auflösung vorliegen, als es für die später Darstellung im Flashdokument erwünscht ist. Dies ist notwendig, da wir die Bilddatei zu einem späteren Zeitpunkt auf 50% der eigentlichen Größe skalieren werden.

Nach dem Importieren wird die Bilddatei mittig auf der Bühne platziert. Dies ist jedoch nicht erwünscht. Richten Sie das Bild am Nullpunkt aus. Verschieben Sie das Bild hierfür entweder mit der Maus oder nehmen Sie die Einstellung über das Bedienfeld „Eigenschaften“ vor. Wechseln Sie mit Strg + E zurück in die Hauptszene. Nun wollen wir das Symbol „image“ in die Ebene „image“ platzieren. Hierfür müssen Sie per Drag & Drop das soeben erzeugte Symbol von der Bibliothek auf die Bühne ziehen. Die Bibliothek erreichen Sie über den Shortcut Strg + L. Wir wollen die erzeugte Instanz des Symbols auf die bereits angekündigten 50% der eigentlichen Ausmaße skalieren. Hierfür gehen Sie in das Bedienfeld „Transformieren“.

Das Bedienfeld „Transformieren“:


Setzen Sie den Haken unter Proportionen und geben Sie anschließend in einem der beiden oberen Felder den Wert „50%“ an. Betätigen Sie die Eingabe-Taste um die Skalierung vorzunehmen. Die linke obere Ecke des Bildes sollte nachfolgend mit dem Nullpunkt des Dokumentes ausgerichtet werden.

Zur Darstellung der Lupe benötigen wir ein weiteres Symbol. Erzeugen Sie daher ein zweites Symbol mit dem Namen „zoom“ - wiederum mit dem Verhalten „Movieclip“. Zeichnen Sie im Bearbeitungsmodus des Symbols mit dem Ellipsenwerkzeug einen Kreis und richten Sie diesen anschließend mittig auf der Bühne aus.
Erzeugen Sie ein weiteres Symbol mit den Namen „mask“ und dem Verhalten „Movieclip“. Erstellen Sie im Bearbeitungsmodus des Symbols eine zweite Ebene in der Zeitleiste. Benennen Sie die obere Ebene mit „zoom“ und die Untere mit „image“. Platzieren Sie auf der Ebene „zoom“ eine Instanz des gleichnamigen Symbols „zoom“ und auf der Ebene image eine Instanz des Symbols „image“. Richten Sie anschließend die Instanz von „zoom“ mittig auf der Bühne aus. Die Instanz von „image“ müssen Sie am Nullpunkt ausrichten. Da wir später mit einem ActionScript auf die Instanz von „image“ zugreifen wollen, geben wir im Bedienfeld „Eigenschaften“ der Instanz den Namen „image“. Klicken Sie anschließend mit der rechten Maustaste auf die Ebene „zoom“ und wählen Sie im Kontextmenü den Eintrag „Maske“ aus. Die Ebene „image“ wird daraufhin eingerückt dargestellt. Mit einem Schloss-Symbol rechts neben den Ebenen wird Ihnen signalisiert, dass diese gesperrt sind. Heben Sie die Sperrung beider Ebenen durch einen Mausklick auf das jeweilige Symbol auf.

Die Zeitleiste des Symbols „mask“


Zurück auf der Hauptbühne wollen wir nun das soeben bearbeitete Symbol „mask“ in die Ebene „mask“ einfügen. Richten Sie die somit erstellte Instanz erneut am Nullpunkt aus und geben Sie der Instanz über das Bedienfeld „Eigenschaften“ den Namen „mask“.

Gehen Sie in das dritte Bild der Ebene „image“ und erzeugen Sie mit der Funktionstaste F5 ein Bild. Wiederholen Sie diesen Schritt für die Ebene „mask“. Die Design-Arbeiten an der Lupe sind somit abgeschlossen. Zur funktionstüchtigen Lupe fehlen lediglich ein paar Zeilen ActionScript. Wechseln Sie in das erste Bild der Ebene „action“ und rufen Sie mit der Funktionstaste F9 das Aktionen-Fenster auf. Fügen Sie in das Fenster folgendes ActionScript ein:


Mit der Anweisung ist das Verschieben der Lupe möglich. Wechseln Sie in das zweite Bild der Ebene und platzieren Sie nach dem Hinzufügen eines Schlüsselbildes mittels F6 folgendes ActionScript im Aktionen-Fenster:


Damit die Lupe der Mausposition folgt, übergeben wir die X- und Y-Koordinate der Maus an die Lupe. Im dritten Bild der Ebene benötigen wir ebenso ein ActionScript. Platzieren Sie hier nach dem Hinzufügen eines Schlüsselbildes mittels F6 im Aktionen-Fenster folgende Anweisung:


Mit der Anweisung springen wir zurück in das zweite Bild der Zeitleiste. Somit gewähleisten wir, dass das dort platzierte ActionScript stetig neu ausgeführt wird und die Lupe fortwährend dem Cursor folgt. Ihre Zeitleiste sollte nach Vollendung des Projektes wie folgt aussehen:

Die Zeitleiste des fertigen Projektes:


Verbessern Sie bei Bedarf die Darstellung des Lupeneffektes durch einen geeigneten Rahmen und einen Haltegriff und erzeugen Sie so das klassische Aussehen einer realen Lupe.

Beispieldatei: Lupeneffekt [Realisierung_einer_Lupe.zip]