Anzeige
Tutorialbeschreibung

Maskeneffekt mit Lupe mithilfe von Masken in Adobe Flash

Maskeneffekt mit Lupe mithilfe von Masken in Adobe Flash

Kleines Einsteiger Tutorial zum Thema Ebenenmaskierung. Hier wird gezeigt, wie man mit Hilfe solcher Masken einen Lupeneffekt erstellt.


Schritt 1:
Zuerst brauchen wir in Flash vier Ebenen -

Ebene 01 für den normalen, immer sichtbaren Text;
Ebene 02 für den vergrößerten Lupen-Text,
Ebene 03 für die Lupe,
Ebene 04 für den Lupenrand.

(die Ebenen sollten natürlich entsprechend benannt werden!)


Bilder

Schritt 2:
Jetzt brauchen wir natürlich den Text, also schreibt in die beiden Textebenen einen identischen Text (in unserem Beispiel "Hallo Welt!"). Der einzige Unterschied ist, dass der Text in der Ebene für den großen Text eben größer ist als der Text darunter.

Nun sollten sich also zweimal der gleiche Text überlagern, der kleine Text unten, der große oben!

(in unserem Beispiel hat der Text "Hallo Welt!" in der unteren Ebene die Schriftart Verdana mit einer Größe von 15, der große Text darüber die Größe 19 mit der Eigenschaft "bold".)


Bilder


Schritt 3:
Nun erstellen wir die Lupe.

Hierfür zeichnen wir in die Ebene für die Lupe einen Kreis mit ca. 45 Pixel (je nach Textgröße) und einer Konturfarbe nach Wahl. Die Farbe der Kreisfüllung ist egal, da man sie später nicht mehr sehen wird (trotzdem eine Farbe wählen, sie wird für den Maskeneffekt benötigt!).

Wenn die Lupe mit Rand erstellt ist, schieben wir die Lupe so über den Text, dass der erste Buchstabe bedeckt wird. Dann markieren wir den Rand, schneiden ihn aus und fügen ihn in der Ebene für den Rand wieder ein (am besten über "Bearbeiten -> An Position einfügen").

Jetzt weisen wir auch gleich der Ebene mit der Lupe (Füllung) eine Maskierung zu, indem wir sie mit Rechtsklick anwählen und "Maske" auswählen.


Bilder



Schritt 4:
Die Animation

Die Lupe soll sich nun über den Text bewegen und dabei immer einen Bereich des großen Textes sichtbar werden lassen. Also verlängern wir erst einmal die Ebenen mit dem Text bis Bild 48 (je nach eingestellter Bildrate).
Nun weisen wir in den beiden Ebenen für die Lupe einen Bewegungstween hinzu (Rechtsklick auf das erste Bild -> Bewegungstween erstellen) und machen je in Bild 24 und 48 pro Lupen Ebene ein Schlüsselbild.
Bewegt in Schlüsselbild 24 die Lupe und den Lupenrand so, dass sie den letzten großen Buchstaben überlagern und Rand und Lupe wieder eine Lupe ergeben. In Bild 48 kommen Lupe und Rand wieder zu ihrem Anfang zurück.

Wenn Ihr das Ganze nun testet, funktioniert die Lupe im Grunde schon, nur ist neben dem vergrößerten Text auch IMMER der kleine Text zu sehen.
Dafür gehen wir in die Ebene mit dem großen Text und zeichnen hier ein Rechteck in Hintergrundfarbe ohne Kontur über den gesamten Text (keine Angst, da der Text quasi ein gruppiertes Objekt ist liegt er in der Hierarchie über dem gezeichneten Objekt.)
Nun wird also der darunterliegende kleine Text in der Ebene des großen Textes bedeckt und durch die Lupe eben nur der groß geschriebene Teil sichtbar.


Bilder

Und animiert sieht es so aus:


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von didip
  • 29.08.2011 - 10:47

Hat super funktioniert mit der Lupe. An manchen Stellen nur etwas unklar, deshalb hat's nicht auf Anhieb mti der Lupe geklappt, aber ich bin noch Einsteiger :)

Portrait von sonnenblume
  • 30.04.2011 - 18:55

Bei mir hat das nicht geklappt, dass der kleine Text in der Lupe nicht mehr sichtbar ist...

Portrait von PhotoshopFan
  • 08.03.2011 - 10:51

sehr schöne und wirklich klasse erklärt

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 16.09.2010 - 15:31

Danke für die Zeit und Mühen, super Tut :)

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 21.09.2008 - 08:14

Haha echt geil und einfach^^

Portrait von medienbox
  • 19.09.2008 - 21:04

Echt gut! Einfach und wirkungsvoll. Danke!

Portrait von medienbox
  • 19.09.2008 - 21:04

Echt gut! Einfach und wirkungsvoll. Danke!

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 19.09.2008 - 00:14

Hat mich auf jeden fall etwas weiter geracht danke für dieses tut! :)

Portrait von uwna
  • 18.09.2008 - 13:22

Die Idee ist gut. Aber die Umsetzung könnte noch interessanter gemacht sein.

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 16.09.2008 - 22:15

Ich geb ma 5, weil ich die Idee sicher ausbauend weiterbenutzen kann :-) Finde es von der Arbeitsweise gut und einfach umgesetzt. Was geil wäre in Flash, wäre so ein Shader, der das Bild verzerrt... quasi ein mobiler Filter wie in PS, oder komplett berechnet (wohl zu aufwändig). Gibts sowas? (glaube zwar nicht aber mal nebenbei anfragen geht ja sicher^^)

Portrait von Lallemann
  • 15.09.2008 - 18:15

Danke für Eure Kommentare!
Grundsätzlich gehts hier natürlich um
Ebenen und Maskierungen und was
man damit machen kann.
Etwas Experimentierfreude schadet nicht ;-)
Man könnte natürlich noch einen transparenten
verlauf für eine Lupenglasoptik erstellen
oder an den Textgrößen spielen damit nicht
ein zu versetzter Effekt auftritt usw...
Ein weiteres Tutorial zum Thema folgt bald!

Portrait von shishaboy001
  • 15.09.2008 - 17:16

soweit ganz gut ,allerdings wäre eine zusätzliche besonderheit die das ganze noch interessanter mach auch nicht schlecht

Portrait von waldi7388
  • 15.09.2008 - 12:03

gut ist es das wäre cool wenn man es noch mit bildern sieht ob es auch so geht

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 15.09.2008 - 11:26

An und für sich gut, aber ein wenig versetzt das Ganze.

x
×
×