Scan-Effekt in Flash MX
Wie bei einem richtigen Scanner wollen wir wahlweise von links nach rechts oder von oben nach unten einen Scanner-Balken durch eine Grafik laufen lassen. Wenden Sie diese Technik in Ihren Flashdokumenten richtig dosiert an, so geben Sie Ihren Dateien einen futuristischen Touch und erzeugen einen richtigen Eye-Catcher.
Für den nachfolgenden Effekt benötigen wir zunächst eine Grafik. Diese sollte sich in den Grundfarben von der Farbe des späteren Scanners deutlich abheben. Ein Scanner wird in der Regel in einem sehr hellen bis weißen Farbton dargestellt. Dies ist auch in unserem Beispiel der Fall, weshalb wir auf eine dunkle Grafik zurückgreifen wollen. Die dem Artikel beigefügte Beispieldatei enthält eine solche Grafik im typischen Format eines Webbanners. Zum Nachvollziehen des Effektes sollte diese Grafik ausreichen. Sie können die Grafik zu einem späteren Zeitpunkt immer noch durch eine Andere im gleichen Format ersetzen.
Importieren Sie in einem neuen Flashdokument die benannte Bilddatei. Das Dokument sollte vorzugsweise an die Ausmaße der importierten Grafik angepasst werden. Da wir einen horizontal verlaufenden Scanner realisieren wollen, muss der spätere Scanner-Balken vertikal verlaufen. Erstellen Sie hierfür eine Linie mit der Farbe des späteren Scanners. Die Linie muss über die gesamte Höhe der Grafik verlaufen.
Konvertieren Sie die Linie über „Modifizieren“ unter „In Symbol konvertieren“ oder mit der Tastenkombination F8 in ein Symbol mit dem Verhalten „Movieclip“. Der spätere Scanner-Balken besteht natürlich nicht nur aus einer Linie. Wir benötigen daher weitere Instanzen des Linien-Symbols. Wie viele Sie hierbei verwenden, ist letztendlich Ihnen überlassen. Sie sollten jedoch vorzugsweise eine ungerade Anzahl an Linien verwenden, damit der spätere Scanner-Balken eine klare Mittellinie besitzt. Positionieren Sie die eingefügten Instanzen alle horizontal nebeneinander. Hierfür sollten Sie in einer höheren Auflösung von mindestens 400% arbeiten. Achten Sie darauf, dass keine Lücken zwischen den einzelnen Linien entstehen. Beginnend von der mittleren Linie wollen wir nun den Alphawert zu den äußeren Linien stetig verringern.
Markieren Sie die mittlere Linie und wählen Sie anschließend im Bedienfeld „Eigenschaften“ unter „Farbe“ dein Eintrag „Alpha“ aus. Geben Sie der Linie daraufhin einen Alpha-Wert von 80%.
Einstellen des Alpha-Wertes:
Wiederholen Sie diesen Schritt für alle Linien, wobei Sie den Alpha-Wert nach außen stetig verringern. Die direkt benachbarten Linien links und rechts neben der Mittellinie erhalten beispielsweise einen Alpha-Wert von 70%. Die darauf folgenden Linien erhalten dann nur noch einen Wert von 60%.
Markieren Sie alle Linien und erzeugen Sie mit F8 oder über das Menü „Modifizieren“ unter „In Symbol konvertieren“ ein Symbol mit dem Verhalten „Movieclip“. Sie haben den fertigen Scanner-Balken somit in einem Symbol zusammengefasst.
Es fehlt die Animation des Scanners. Hierfür wollen wir den Balken über die Grafik laufen lassen. Erstellen Sie eine neue Ebene und platzieren Sie die Instanz des Scanner-Symbols in das erste Bild. Verschieben Sie die Instanz so weit nach links, dass sie sich außerhalb des sichtbaren Bereiches befindet. Der Scanner-Balken soll erst im Laufe der Animation ins Bild kommen. Erstellen Sie anschließend im Bild 50 durch Betätigen der Funktionstaste F6 ein Schlüsselbild. Verschieben Sie die Instanz in diesem Bild nach rechts bis sie sich wiederum außerhalb des sichtbaren Bereiches befindet. Jetzt benötigen wir nur noch einen Bewegungs-Tween zwischen den beiden Schlüsselbildern der Ebene. Klicken Sie hierfür auf ein beliebiges Bild zwischen den beiden Schlüsselbildern. Wechseln Sie anschließend in das Bedienfeld „Eigenschaften“ und wählen Sie unter „Tween“ den Eintrag „Bewegung“ aus.
Erstellung eines Bewegungs-Tween:
Bei Bedarf können Sie zum Ende der Animation ein Abbremsen des Scanners hervorrufen, in dem Sie unter „Abbremsen“ einen positiven Wert eintragen.
Der Scan-Effekt ist somit vollendet. Als kleine Erweiterung können Sie den Scanner noch zurücklaufen lassen. Erstellen Sie hierfür im Bild 100 ein neues Schlüsselbild und positionieren Sie den Scanner in diesem Bild wieder links außerhalb des sichtbaren Bereiches. Erstellen Sie anschließend im vorgestellten Verfahren ein Bewegungs-Tween zwischen dem zweiten und dritten Schlüsselbild der Ebene.
Beispieldatei: Scan-Effekt[Scan-Effekt_in_Flash_MX.zip]
Für den nachfolgenden Effekt benötigen wir zunächst eine Grafik. Diese sollte sich in den Grundfarben von der Farbe des späteren Scanners deutlich abheben. Ein Scanner wird in der Regel in einem sehr hellen bis weißen Farbton dargestellt. Dies ist auch in unserem Beispiel der Fall, weshalb wir auf eine dunkle Grafik zurückgreifen wollen. Die dem Artikel beigefügte Beispieldatei enthält eine solche Grafik im typischen Format eines Webbanners. Zum Nachvollziehen des Effektes sollte diese Grafik ausreichen. Sie können die Grafik zu einem späteren Zeitpunkt immer noch durch eine Andere im gleichen Format ersetzen.
Importieren Sie in einem neuen Flashdokument die benannte Bilddatei. Das Dokument sollte vorzugsweise an die Ausmaße der importierten Grafik angepasst werden. Da wir einen horizontal verlaufenden Scanner realisieren wollen, muss der spätere Scanner-Balken vertikal verlaufen. Erstellen Sie hierfür eine Linie mit der Farbe des späteren Scanners. Die Linie muss über die gesamte Höhe der Grafik verlaufen.
Konvertieren Sie die Linie über „Modifizieren“ unter „In Symbol konvertieren“ oder mit der Tastenkombination F8 in ein Symbol mit dem Verhalten „Movieclip“. Der spätere Scanner-Balken besteht natürlich nicht nur aus einer Linie. Wir benötigen daher weitere Instanzen des Linien-Symbols. Wie viele Sie hierbei verwenden, ist letztendlich Ihnen überlassen. Sie sollten jedoch vorzugsweise eine ungerade Anzahl an Linien verwenden, damit der spätere Scanner-Balken eine klare Mittellinie besitzt. Positionieren Sie die eingefügten Instanzen alle horizontal nebeneinander. Hierfür sollten Sie in einer höheren Auflösung von mindestens 400% arbeiten. Achten Sie darauf, dass keine Lücken zwischen den einzelnen Linien entstehen. Beginnend von der mittleren Linie wollen wir nun den Alphawert zu den äußeren Linien stetig verringern.
Markieren Sie die mittlere Linie und wählen Sie anschließend im Bedienfeld „Eigenschaften“ unter „Farbe“ dein Eintrag „Alpha“ aus. Geben Sie der Linie daraufhin einen Alpha-Wert von 80%.
Einstellen des Alpha-Wertes:
Wiederholen Sie diesen Schritt für alle Linien, wobei Sie den Alpha-Wert nach außen stetig verringern. Die direkt benachbarten Linien links und rechts neben der Mittellinie erhalten beispielsweise einen Alpha-Wert von 70%. Die darauf folgenden Linien erhalten dann nur noch einen Wert von 60%.
Markieren Sie alle Linien und erzeugen Sie mit F8 oder über das Menü „Modifizieren“ unter „In Symbol konvertieren“ ein Symbol mit dem Verhalten „Movieclip“. Sie haben den fertigen Scanner-Balken somit in einem Symbol zusammengefasst.
Es fehlt die Animation des Scanners. Hierfür wollen wir den Balken über die Grafik laufen lassen. Erstellen Sie eine neue Ebene und platzieren Sie die Instanz des Scanner-Symbols in das erste Bild. Verschieben Sie die Instanz so weit nach links, dass sie sich außerhalb des sichtbaren Bereiches befindet. Der Scanner-Balken soll erst im Laufe der Animation ins Bild kommen. Erstellen Sie anschließend im Bild 50 durch Betätigen der Funktionstaste F6 ein Schlüsselbild. Verschieben Sie die Instanz in diesem Bild nach rechts bis sie sich wiederum außerhalb des sichtbaren Bereiches befindet. Jetzt benötigen wir nur noch einen Bewegungs-Tween zwischen den beiden Schlüsselbildern der Ebene. Klicken Sie hierfür auf ein beliebiges Bild zwischen den beiden Schlüsselbildern. Wechseln Sie anschließend in das Bedienfeld „Eigenschaften“ und wählen Sie unter „Tween“ den Eintrag „Bewegung“ aus.
Erstellung eines Bewegungs-Tween:
Bei Bedarf können Sie zum Ende der Animation ein Abbremsen des Scanners hervorrufen, in dem Sie unter „Abbremsen“ einen positiven Wert eintragen.
Der Scan-Effekt ist somit vollendet. Als kleine Erweiterung können Sie den Scanner noch zurücklaufen lassen. Erstellen Sie hierfür im Bild 100 ein neues Schlüsselbild und positionieren Sie den Scanner in diesem Bild wieder links außerhalb des sichtbaren Bereiches. Erstellen Sie anschließend im vorgestellten Verfahren ein Bewegungs-Tween zwischen dem zweiten und dritten Schlüsselbild der Ebene.
Beispieldatei: Scan-Effekt[Scan-Effekt_in_Flash_MX.zip]
