zur Startseite

TEMPLATES

Swish Templates

Flash Templates

Flash CMS Templates

SwishMAX 4

Flash FLV Video Player

Flash Fotogalerien

Sie sind hier: Startseite - Swish Tutorials - Masken Tutorial
 
 
Swish Tutorial - Erstellen eines animierten Maskeneffektes für Anfänger


Download
SWI & SWF
Download Video ansehen Yout Tube Video ansehen Dieses Tutorial mit anderen teilen! Twitter Facebook Delicious

 


Swish bietet von Hause aus an ein Sprite / Movieclip zu maskieren. Dies bedeutet, dass nur der Bereich sichtbar ist, den die Maske umgibt. Die Funktion ein Sprite zu maskieren könnt ihr über die Eigenschaften eines Sprites festlegen.

Beginnen wir also zunächst damit ein Sprite zu erstellen. Sprites dienen im Übrigen dazu, unabhängig vom eigentlichen Film Aktionen in der Zeitleiste auszulösen. Dazu machen Sie eine Swish Datei auch übersichtlicher. Es bietet sich also an die verschiedenen Elemente einer Seite in verschiedene Sprites zu legen.

Nun aber los. Zeichnet zunächst mit Hilfe des Malwerkzeuges ein Rechteck. Gebt ihm eine Füllung und klickt anschließend mit der rechten Maustaste das Rechteck an. Wählt hier die Option „Konvertieren – zum Sprite / Movieclip“ und benennt das Sprite anschließend mit „Mein_Sprite


Sprite erzeugen
Screenshot "Sprite erzeugen"

Ihr seht, dass sich nun das Aussehen des Rechteckes in der Outline verändert hat. Es ist nun zu einem grünen Symbol geworden.

Bis auf die Tatsache, dass unser Rechteck nun in einem Sprite ist hat sich noch nichts getan. Nun wollen wir mal ein Bild importieren, von dem später nur ein gewisser Teil zu sehen sein soll. Klickt also „Einfügen – Bild importieren“ und wählt ein Bild von eurem Rechner aus. Wichtig ist hier, dass sich dieses Bild auch anschließend im Sprite befindet.

Bild einfügen
Screenshot "Bild einfügen
"

Nun wollen wir, dass von dem Bild nur der Teil zu sehen ist, den das zuvor gezeichnete Rechteck einschließt. Dazu wählt das Sprite Symbol in der Outline aus und wechselt zu den Eigenschaften des Sprites. Wählt dort die Option „Unterstes Objekt als Maske verwenden


sprite-maskieren-option
Screenshot "Sprite maskieren Option"

mask bennen Wenn Ihr nun euren Film über die Playtaste startet seht ihr, dass nur noch der Bereich des Rechteckes vom Bild zu sehen ist. Um die Übersicht in einem Projekt zu behalten bietet es sich an Formen, die ihr als Maske nutzt immer auch als solche zu benennen. Wählt also das Rechteck und gebt ihm den Namen „mask“.

Nun wäre es schon möglich dieses Maske mit einem Effekt zu versehen. Wählt dazu einfach das Rechteck aus. Führt in der oberen Zeitleiste einen Klick mit der rechten Maustaste aus und wählt „Zoom - Hineinzoomen"

Bild einfügen
Screenshot "Bild einfügen"

Wenn ihr den Film nun per Play startet werdet ihr sehen, dass das Bild im entsprechenden Ausschnitt eingezoomt wird.

Dieser Effekt reicht uns natürlich nicht. Wie wäre es wenn das gesamte Bild in verschiedenen Teilen erscheint? Ein Sprite, was über die Funktion „Sprite maskieren“ zu einem maskierten Sprite bestimmt wurde, kann immer nur eine Form als Maske verwenden. Diese Form muss zudem immer an der untersten Position im Sprite liegen. Sprich das Objekt was sich in der Outline im Sprite zuletzt befindet ist die Maske. In unserem Fall war es schon das Rechteck, weil dieses vor dem Bild im Sprite enthalten war. Um es zu testen verschiebt das Bild einfach mal an die Stelle des Rechteckes und ihr werdet sehen, dass nun nur noch das Rechteck zu sehen ist, also das Bild unsere Maske bildet.

Um nun mehr als eine Form als Maske zu nutzen, müssen wir zunächst einen entsprechenden Code eingeben. Wechselt dazu in den Scriptmodus / Aktion. Wichtig ist dabei, dass ihr das Sprite angewählt habt. Gebt anschließend diesen Code in den Scriptbereich ein:

  onSelfEvent (load) {
this.setMask(mask);
}

actionscript
Screenshot "Actionscript einfügen"

Damit haben wir unserem Sprite (this) mitgeteilt, dass es durch ein Objekt „mask“ maskiert wird. Wenn das nicht so klar sein sollte, werdet ihr es gleich verstehen. Deaktiviert nun die Funktion des Sprites selber „Unterstes Objekt als Maske verwenden“ in den Eigenschaften des Sprites.

target-bestimmen Wenn ihr nun den Film startet werdet ihr feststellen, dass das Bild in seiner vollen Gr öße zu sehen ist und nicht maskiert wird. Das hat damit zu tun, das wir zwar eine Form haben, die „mask“ heißt, diese Form aber nicht ein Ziel ist. Damit es unser Script finden kann, müsst ihr in den Eigenschaften der Form die Option „Ziel / Target“ wählen

Wenn ihr nun Play wählt seht ihr wieder den Effekt. ( Falls ihr mit SwishMAX 1 arbeiten solltet, müsst ihr den Film mit dem externen Player testen) Ihr werdet euch jetzt sicher fragen, warum haben wir das überhaupt gemacht, denn schließlich ist ja alles wie vorher. Ist es auf den ersten Blick auch, aber das wird sich jetzt ändern!

Wie ihr zu Beginn schon das Rechteck zu einem Sprite konvertiert habt, macht ihr es jetzt nochmals mit dem Rechteck (mask). Gebt anschließend dem Sprite den Namen „mask“. Die Meldung, die SwishMAX meldet könnt ihr mit "Ja" beantworten. Das bewirkt, dass der Effekt, den wir bereits auf das Rechteck angewandt haben mit in das Sprite übernommen wird. Maske als Sprite

Löscht anschließend wieder den Zoomeffekt auf dem Rechteck und positioniert das Rechteck an die obere linke Ecke des Bildes. Zeichnet weitere Rechtecke oder Kreise bis euer gesamtes Bild mit Formen belegt ist.

Da das Sprite aktuell unter dem Bild liegt könnt ihr dieses auch in der Outline über das Bild legen, um besser sehen zu können wo die Formen platziert werden müssen. War es bei der Methode die Option „Sprite maskieren“ zu nutzen noch notwendig die Maske als unterstes Objekt im Sprite zu nutzen, können wir nun unsere Maske beliebig setzen. Lassen wir Sie also einfach über dem Bild.


masken zeichnen
Screenshot "Masken zeichnen"


Wenn jetzt alles läuft habt ihr das Prinzip des Maskierens bereits verstanden. Spielt mal ein wenig mit den Effekten oder wendet zusätzlich noch Effekte auf das eigentliche Bild an. Wenn die Animation immer wieder abspielen sollte, so setzt nach dem letzten Effekt einfach ein Stop in die Zeitleiste.

Was auch schöne Effekte ergibt ist, wenn ihr das Bild zunächst noch in „Teile zerbrecht“ und dann Effekte anwendet. So lassen sich mit recht wenig Aufwand eindrucksvolle Effekte erzielen.

Ich hoffe dieses Swish Tutorial war verständlich geschrieben. Für alle, die sich die fertige Datei als swi Datei wünschen gibt es am Ende den Download und das Video zum Swish Tutorial.

Flash Vorschau
Xpellshop.com, Widerrufsrecht
 
Swish
Tutorials

Swish Tutorial Masken erstellen

  copyright 2003 - 2012 by xpellshop.com | all rights reserved
  Swish Templates - Flash Templates - Swish Fotogalerien - Webspell Templates - Swish Gästebücher - Swish Intros - animierte Button - Swish MAX 4 -
  SwishVideo 3 - Firmenlogos - Swish MiniMax 4 - Flash Banner - HTML Templates - Foto Templates - Swish Formulare - Flash Newsletter- SwishMAX 3
  Firmenlogos - Sonderangebote - Flash MP3 Player - Rechtsanwalt Templates - PSD Templates - After Effects Templates - SwishMAX XML Templates
  3D Templates - Auto & Tuning Templates - Business Swish Templates - DJ / Musik Swish Templates - Flash Onlineshop System - FULL CMS Swish Templates - Immobilien Templates
  Fitness & Sport Templates -Beauty Templates - Webdesign Portfolio Templates - Kunst & Fotografie Templates - Hochzeits Templates - Restaurant Templates - WebhostingTemplates
Hotel Templates - Handwerker Templates
  Impressum| AGB | Datenschutz | Widerrufsrecht
 
 
Klicks heute: 706
Klicks seit 16.03.2005: 3835789
Aktuell online: - Heute gesamt:
 
Deutsche Sprache English Language
  Alle Preise verstehen sich incl. der gesetzlichen MwSt und zzgl der Versandkosten nach Preis bzw. Gewicht und eventueller Nachnahmegebühren des Versanddienstleisters.
Alle Markennamen, Warenzeichen und eingetragene Warenzeichen sind Eigentum ihrer rechtmäßigen Eigentümer und dienen hier nur der Beschreibung
Trusted SSL Certificate