Anzeige
Tutorialbeschreibung

Animation - Fliege fliegt bei Mausberührung weg

Animation - Fliege fliegt bei Mausberührung weg

Hier zeige ich euch wie ihr eine Fliege Animieren könnt so, dass sie wegfliegt sobald sie von der Maus berührt wird.


Speichert euch diese Fliege ab, ihr braucht sie.

Bilder



Schritt 1:

Als erstes öffnen wir ein neues Dokument dies geht einfach über
Datei - Neu - Flash-Dokument

Schritt 2:
So, nun wollen wir eine Animation erstellen die sich bewegt wenn man mit der Maus drauf kommt. Also erstellen wir ein Movie Clip, dies geht folgender masen:
Einfügen- Neues Symbol

Wir erhalten darauf ein neues Fenster in dem wir natürlich "Movieclip" anklicken, als Namen
geben wir "Fliege" ein. Warum Fliege? Ganz einfach weil wir hier eine Fliege animieren wollen :)

Bilder


Schritt 3:
Nun gehen wir auf:
Datei - Importieren - In Bühne Importieren
und wählen dort unser Bild mit der Fliege aus.

Bilder


Schritt 4:
Danach gehen wir auf:
Bearbeiten - Dokument Bearbeiten

Bilder


Schrit 5:
Wir sind nun wieder am Anfang. Als nächstes zieht ihr eure Fliege an die untere Ecke der rechten Seite.
Klickt dann auf 50 und wählt:
Einfügen - Zeitleiste - Leeres Schlüsselbild

Bilder


Nun ist eure Fliege weg aber das ist ok, zieht nun erneut eure Fliege von der Bibliothek auf eure Fläche,
allerdings dieses mal ganz Links oben.

Schritt 6:
Klickt nun erneut auf das erste Bild und vergewissert euch das eure Fliege mit einem blauen Ramen markiert ist
und klickt nun unter Eigenschaften auf Tweene und dort wählt ihr Bewegung aus.

Bilder

Wenn ihr nun auf Steuerung und Film testen klickt könnt ihr sehen das sich euer Bild also eure Fliege bereits bewegt.

Schritt 7:
Aber sie bewegt sich allein und nur in einer geraden Linie. Dies wollen wir nun ändern in dem wir nun auf
Bild 15 klicken und dann auf Einfügen - Zeitleiste - Schlüssel Bild klicken. Dies machen wir nun auch
bei Bild 30 und 42 noch mal. Aber anstatt immer auf Einfügen zu gehen drückt einfach die F6 taste.

Bilder


Schritt 8:
Nun klickt auf Bild 15 und verschiebt die Fliege z.B in die rechte obere Ecke. Mit Bild 30 und 43 macht ihr das gleiche,
also einfach dorthin schieben wo ihr die Fliege haben wollt.

Wenn ihr nun erneut auf Steuerung - Film testen klickt merkt ihr das sich eure Fliege nun nicht mehr gerade bewegt sondern
in eure gewünschte Richtung.

Schritt 9:
So, nun fehlt nur noch das die Fliege wegfliegt sobald die Maus sie berührt.

Bennent nun eure Erste Ebene in "Animation" um und erstellt eine zweite Ebene, diese nennt ihr "Skript".
Nun klickt ihr auf euren Stop Punkt und drückt wieder die F6 taste, dies macht ihr bei allen Stop Punkten,
also bei Bild 15,30,43. *Macht auch bei Bild 1 und 50 ein stop Punkt.*

Jetzt müsst ihr auf Aktionen klicken und jeweils in Bild 1,15,30,43,50 folgenden code eingeben:

stop();

Bilder


Schritt 10:
Nun klickt ihr auf das erste Bild in eurer ersten Ebene also auf "Animation" nun müsst ihr eurer Fliege einen
Instanznamen geben, nennt sie fly_mc. Beachtet bitte dass ihr keine Leerzeichen sowie sonderzeichen verwenden dürft.

Bilder


Schritt 11:
Klickt nun wieder auf das erste Bild eurer Ebene "Animation" und geht in Aktionen ein. gebt nun folgenden Code ein:

fly_mc.onRollOver = function ()
{
 play();
}


Klickt nun auf Steuerung - Film testen und ihr seht sobald ihr eure Fliege berührt fliegt sie weg.

Bilder


Anmerkung:
Wenn ihr in eurer Ebene 2 "Skript" bei Bild 1 den Stop befehl weglasst fliegt die Fliege automatisch
zum ersten stop Punkt. Wer die fla Datei möchte kann sie sich hier downloaden:

Flash 8
fliege.fla

Flash MX 2004
fliegeMX.fla

Und nun wünsche ich euch viel Spass

Bis zum nächsten Tutorial

Lexia


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von monochrome
  • 23.10.2011 - 17:20

cool. danke. ist echt ne schöne idee^^)

Portrait von kudraschka
  • 14.05.2011 - 16:35

sehr schön.danke.werde es gleich ausprobieren

Portrait von nellynelly
  • 08.02.2011 - 06:00

Danke, sehr gutes tutorial, werde ich noch heute ausprobieren

Portrait von vdvaart23
  • 31.01.2011 - 14:33

sehr gutes tutorial! danke

Portrait von guantanamera
  • 23.12.2010 - 00:52

gute Animation, konnte aber die letzte action script nicht durchführen. Könnte mir jemand die scripte für (maus Oben) in CS4. Danke

Portrait von ProdigyFaith
  • 12.10.2010 - 12:17

Bin ein wenig verwirrt, in AS2 gibt es kein Bewegungstween und wäre das Tut für AS3 bräuchte man einen EventListener, komisch ôO.
Hab es jetzt mit einem Klassischentween gelöst und es funktioniert :)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 17.09.2010 - 12:31

würde mich mal über eine vorschau deines endprodukts freuen
das würde vlt einige noch mehr motivieren dein tut nachzumachen
ansonsten sehr schön danke

Portrait von ollif
  • 20.07.2010 - 16:31

super erklärt und nachzuvollziehen. danke dir

Portrait von COM2000
  • 15.05.2010 - 18:11

funzt mit CS5 iwie anders ... :(

Portrait von Punisher797
  • 07.05.2010 - 19:17

sehr gut und verständlich - Danke dir :)

Portrait von Morano
  • 16.04.2010 - 12:39

Sehr gut beschrieben - funktioniert 1A

Portrait von yocuss
  • 19.03.2010 - 13:04

Hallo, ist mein 1. Tutorial, was ich nachgearbeitet habe, prima, mehr davon!

Portrait von areto
  • 28.12.2009 - 20:20

Danke, es hat mir sehr geholfen :)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 26.12.2009 - 13:31

Hört sich sehr gut an. Werde es ausprobieren. Vielen Dank für deinen Beitrag

Portrait von Bonanza
  • 21.12.2009 - 14:23

Danke, hat sehr geholfen und nach dem ich auf Action Script 2.0 gestellt habe ging es auch :-)

Portrait von dezent_verwirrt
  • 08.12.2009 - 18:59

erster versuch mit flash ;D
echt intressant, u gut erklärt
hatte auch das problem, dass die fliege nur bis zum ersten stop flog u danach nur durch drücken von enter. vl klappts ja beim nächsten versuch :)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 02.12.2009 - 15:14

witzige sache :) versuch das nachher mal nachzubaun

Portrait von roan_shryne
  • 08.11.2009 - 17:45

Die Idee ist lustig, aber auch nicht überragend. Tutorial ist ganz solide geworden, man kann es gut nachvollziehen.

Portrait von wood89
  • 10.09.2009 - 09:32

sehr schönes Tutorial... find die Fliege lustig. für nen langweiligen Infounterricht genau das richtige

Portrait von SnowDragon
  • 26.08.2009 - 14:45

Is gut geworden, bei mir hats aber erst beim 2ten Versuch geklappt :-)

x
×
×