Anzeige
Tutorialbeschreibung

Flash Grundlagen Teil 1

Flash Grundlagen Teil 1

Diese Tutorial ist für alle gedacht die sich mit dem Programm noch nicht soooo gut auskennen.

Ich habe wie immer viele Bilder zur Veranschaulichung benutzt. ;-)

Hier geht es um das Bewegen eines Kreises...


Also ich versuch jetzt mal so ausführlich wie möglich zu sein:


Zuerst erkläre ich mal alles was es so in Flash gibt:
Bilder


1. Das sind alle Werkzeuge, mit denen man nur auf der Bühne arbeitet. In diesem Tutorial benutzen wir eines von den Werkzeugen.

2. Das ist die Zeitleiste. Auf ihr kann man neue Ebenen erstellen oder Schlüsselbilder erstellen um Animationen zu erstellen.

3. Das sind die Eigenschaften. Die Eigenschaften können auch anders aussehen wenn man z.B. etwas auf der Bühne gemaltes anstreicht, wird die genaue Position und die Größe angezeigt.

4. Das ist die Bibliothek. Dort werden alle MovieClips, angezeigt und alle Elemente die man importiert hat.




Also wollen wir mal anfangen:

Öffnen sie ein neues Flash Dokument. (Bild)
Bilder



In diesem Tutorial möchte ich ihnen zeigen wie man ganz einfach mit Flash zeichnet und eine kleine Animation erstellt.
Und da diese Animation auch flüssig laufen soll, müssen wir die Dokumenteigenschaften verändern.


Dafür müssen sie das Fenster in dem diese Eigenschaften verändert werden erstmal öffnen.
Die Eigenschaften (im unterem Bereich) müssten eigentlich immer zu sehen sein.
Wenn nicht drücken sie STRG + F3. Drücken sie auf Folgendes:
Bilder


In diesem Fenster müssen sie nur eine Eigenschaft verändern: Stellen sie die Bildrate auf 30 Bilder pro Sekunde. (Bild)
Bilder


So.

Jetzt können wir mit dem Eigentlichen anfangen.

Wir wollen einen Kreis hin und her bewegen lassen.
Das ist ganz einfach, es gibt aber zwei verschiedene Möglichkeiten um diese Animation zu erstellen.
Ich nehme mal die (von mir aus gesehne) bessere Variante.

Drücken sie einfach O um das Ellipsen-Werkzeug zu benutzen.
Drücken und ziehen sie auf der Bühne einen Kreis. Achten sie darauf das es ein richtiger Kreis wird, keine Ellipse, das sehen sie an dem Kreis der angezeigt wird wenn es ein normaler Kreis werden könnnte. (Bild)
Bilder



Lassen sie die Maustaste einfach los, und sie haben einen einfachen Kreis auf der Bühne.

So, jetzt machen sie daraus einfach einen MovieClip.
Streichen sie den ganzen Kreis an und drücken sie F8.
Jetzt erscheint ein Fenster  indem sie Eigenschaften vom mc (kurzform von MovieClip den ich ab jetzt immer verwenden werde) einstellen könnnen. Lassen sie die Einstellungen so und klicken sie auf OK.

Jetzt zentrieren sie den MovieClip horizontal und vertikal,
das heißt, sie setzen ihn genau auf die Mitter der Bühne.
Klicken sie unter Ausrichten auf Folgendes:
Bilder


Mein Kreis ist 100px hoch und breit.
Um die Animation zu erstellen gehen sie in die Zeitleiste und markieren das 15 Bild. (Bild)
Bilder


Jetzt drücken sie einfach F6 um ein Schlüsselbild zu erstellen.
Jetzt können sie den mc verändern und in den 14 Bildern davor bleibt der mc so wie sie ihn vorher eingestellt haben.
Man könnte den mc jetzt einfach ein bisschen nach rechts verschieben, aber dann sieht das nicht so gut aus weil man 2 Dinge beachten muss:
1. Bewegt sich der mc kein Stück und ist sofort in Bild 15 kurz auf der Stelle wo sie ihn hingeschoben haben.
2. Wenn der mc sich bewegen soll dann ist es schöner wenn er auch wieder zurückgeht und nicht sofort wieder an der Vorherigen Stelle ist.

Also:
Markieren sie Bild 30 und drücken sie wieder F6 für ein Schlüsselbild.
Jetzt müssen sie einfach in ein Bild zwischen 15 und 29 gehen und dort den mc verschieben:
Bilder

in dem Bild zeige ich auf welche Position (405.9) ich den mc angezeigt habe und in welchem Bild ich ihn bearbeitet habe wie schon oben gesagt.

Jetzt müssen sie noch eine wichtige Sache machen um den mc zu bewegen:
Machen sie aus den Bildern ein Bewegungs-Tween.
Dazu streichen sie einfach bild 14 und 15 an und gehen unter den Eigenschaften auf Bewegungstween. (Bild)
Bilder


Wenn sie das Dokument mit STRG + ENTER testen müsste das rauskommen:


Das kann man jetzt noch verfeinern.
Zum Beispiel das die Beschleunigung vom mc verändert.

Das geht so.
Klicken sie in der Zeitleiste auf ein Bild vor dem 15.
Dort ist unter den Eigenschaften ja schon Bewegungstween eingestellt.
Jetzt gehen sie auf Beschleunigung und stellen den Wert auf 100.

Gehen sie auf ein Bild nach dem 15 und vor dem 30.
Stellen sie unter den Einstellungen unter Beschleunigung den Wert auf -100.

Jetzt bewegt es sich dynamischer:


in den Schlüsselbildern kann man alles verändern. Von Unsichtbarkeit (Alpha) und Farbe, bis einigen schönen Effekten z.B. das der mc ein bisschen unscharf wird.

Sie können alles in dem mc reinmachen, eigene Bilder, Grafiken usw.

Ich zeige jetzt noch ein Beispiel mit dem Alphawert also die Unsichtbarkeit.
Gehen sie auf Bild 15 in der Zeitleiste und klicken sie einmal auf den mc um ihn anzuwählen.
Jetzt können sie unten unter den Eigenschaften den Alphawert verändern.
Gehen sie auf Farbe --> Alpha und stellen sie den Wert auf 0. (Bild)
Bilder


Sie können den mc jetzt auch nicht mehr sehen da er ja völlig unsichtbar ist.
So siehts jetzt aus:


Ihr könnt ja mal mit den Farbeigenschaften herumspielen ;-)

Natürlich kann man alle möglichen Elemente die man auf die Bühne zeichnen kann in einen mc verwandeln und bewegen.
Man kann auch mehrere Elemente in einem mc benutzen. (Das ist sehr praktisch)

Die andere Art Kreise zu bewegen werde ich ein anderes mal erklären.
Da muss man morphen eine ähnliche Art wie das BewegungsTween. (wer logisch nachdenkt weiß wo man das jetzt finden könnte^^)
Aber das werde ich ein anderes mal erklären

Das ist wie schon gesagt eine GANZ einfache Animation, um mc´s zu bewegen.
Das braucht man sehr oft, also wenn man´s behält wär nicht schlecht ;-)

So das reicht erstmal für den Anfang meiner Grundlagen Tutorials *g*

Ich hoffe man konnte alles verstehen.

Hier sind noch ein paar Beispiele was man machen kann:


Farbe auf Rot verändert.


Mehrere Bewegungen erstellt.



|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
v

THIS TUTORAL IS FROM:


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von PENo1
  • 17.01.2014 - 13:37

An sich find ich das Tutorial sehr gut, allerdings was mir fehlt, was mir allerdings auch bei vielen Fachbüchern und Tutorials fehlt , sind Erläuterungen zu den Funktionen die eingesetzt werden. Es ist schön zu wissen was Du gemacht hast und wie Du es gemacht hast, schöner wäre zu wissen , warum Du es so gemacht hast, um es später auf eigene ähnliche Probleme übertragen zu können.
Nur mal so als Beispiel, es wird erklärt, dass man ein Schlüsselbild erstellt in dem und dem Frame, aber nicht warum, warum ich das zwingend brauche , diese Infos würd ich mir persönlich noch wünschen, dann wär es perfekt.

Portrait von waer
  • 17.01.2014 - 17:33

Danke für deine Kritik!
Dass dieses Tutorial nach 7 Jahren noch gelesen wird freut mich!
Ich kann dir auf dein konkretes Beispiel auch antworten: Wenn du im jeweiligem Frame ein Schlüsselbild erzeugst, ist dies der Ausgangspunkt für die Bewegung zum ersten Frame (vorausgesetzt du willst eine Bewegung erzeugen), welcher automatisch auch ein Schlüsselbild darstellt. Wenn ich jetzt bei Bild 15 ein Schlüsselbild mache, dann läuft die Animation wesentlich schneller ab, als wenn ich erst bei Bild 30 ein Schlüsselbild mache. Das hängt natürlich auch von den Bildern pro Sekunde ab. Ich habe immer 30 benutzt, damit das Flash flüssig läuft. Damit kannst du dir auch ausrechnen wielange die Animation andauert wenn du bei Bild 15 ein Schlüsselbild machst. In dem Fall genau eine halbe Sekunde. Das zeigt Flash dir aber auch direkt in der Zeitleiste an. Also zwingend muss du natürlich nicht in dem jeweiligem Frame ein Schlüsselbild erzeugen. Das würde dich dann nur zum selben Ergebnis wie in diesem Tutorial bringen.
Ich hoffe ich konnte dir ein bisschen weiterhelfen. Sag einfach Bescheid wenn du noch weitere Fragen hast :)

Portrait von Bloodkiller
  • 11.12.2012 - 20:05

Nicht schlecht, danke :)

Portrait von painteri
  • 06.01.2012 - 15:47

Verständliche Erklärung, leider hat sich bei der Adobe-Version 5 einiges geändert. Da sind die Adobe-Tuts besser geeignet.

Portrait von boxner
  • 21.12.2011 - 11:14

für cs3 super... kleiner tipp: bei mir hat es geklappt (cs5) indem ich einen klassischen tween eingefügt habe, statt einen bewegungs tween.

Portrait von Taraniel
  • 10.10.2011 - 10:36

Super Tutorial, allerdings scheint ein Bild beschädigt oder verloren gegangen zu sein :(
Es ist das Bild, das nach folgendem Satz im Tutorial kommt:
"Dazu streichen sie einfach bild 14 und 15 an und gehen unter den Eigenschaften auf Bewegungstween."
LG
Tara

Portrait von Luke1990
  • 22.03.2011 - 20:34

super, für Einsteiger Danke :)

Portrait von Belearas
  • 10.02.2011 - 17:42

Cool erklärt, für den ersten Teil auf jeden mal TOP

Portrait von UlLu88
  • 25.01.2011 - 11:39

Supi, danke :) Hat geholfen.

Portrait von mort81
  • 17.01.2011 - 18:58

Schön erklärt. Danke.

Portrait von Pyromania26
  • 11.12.2010 - 00:33

Dankeschön, so kann auch ich das verstehen :)

Portrait von Sermaxima
  • 25.11.2010 - 20:26

danke ist meine erste Animation gewesen.

Portrait von Chris_chris
  • 19.09.2010 - 03:14

Danke, super Einführung,
werde mit deinen Teil 2 auch gleich anschauen :D

Portrait von ZiehDenRotzHoch
Portrait von jr3012
  • 04.08.2010 - 13:40

super, sehr gut erklärt...

Portrait von Jaer
  • 03.08.2010 - 17:22

Mit ein bisschen Suchen hat es auch CS4 geklappt, danke!

Portrait von herrali
  • 24.07.2010 - 12:56

habs mit cs4 auch nicht hinbekommen
hat irgendwer eine ahnung wieso?

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 15.07.2010 - 09:34

Prima, da ich noch garkeinen Plan hatte wo ich in Flash anfangen sollte bietet dieses Tutorial den Perfekten einstieg!!
Alles super erklärt und durch die Bilder gut verständlich!!

Dankeschön dafür!

Portrait von Miina
  • 01.07.2010 - 15:48

Gutes Tutorial zum Starten mit Flash. Habs allerdings mit CS4 einfach nicht hinbekommen, mit CS3 hat dann alles perfekt geklappt.. (hatte zum Glück beide Versionen) hab aber keine Ahnung woran das liegt, hab alles total gleich gemacht..

Portrait von schnoedeltroedel
  • 01.07.2010 - 15:30

Super Tut. für Anfänger gut zu verstehen

x
×
×