Anzeige
Tutorialbeschreibung

Flash Grundlagen Teil 10 Equalizer-Animation

Flash Grundlagen Teil 10  Equalizer-Animation

Hi Leute, hier gibts den 10 Teil meiner Grundlagen Serie in Flash.

Diesmal ist es völlig egal ob ihr Flash 8 oder Flash CS3 nimmt, weil ich nichts mit Actionscript mache sondern nur Animation und diese sind in beiden Versionen gleich gut zu bewältigen.

Diesmal gehts um einen Equalizer.

ein ganz kleines bisschen Skript ist drin, aber das dürfte keine Probleme darstellen ;-)


Voreinstellungen:

Framerate auf 30 Bilder  [Wie immer eigentlich^^]

1. Zeichnet ein Quader mit den Maßen 60x15 Px
  --> Klickt auf das Rechteckwerkzeug (Bild)
Bilder

  --> Zieht eine viereckige Form durch drücken und halten der linken Maustaste
  --> In den Einstellungen die richtigen Maße eingeben wenn das Viereck angestrichen ist
  --> Die Farbe ist völlig egal

2. Konvertiert die Form zu einem MovieClip
  --> Streicht die Form mit dem Auswahlwerkzeug an (Bild)
Bilder

  --> Klickt F8 oder Rechtsklick und dann auf "in Symbol konvertieren"
  --> Im nachfolgenden Fenster die Registrierung in die Mitte machen!
 
--> Dann auf OK klicken
  --> Eigentlich ist es egal wo ihr den mc jetzt habt, ich tu ihn immer in die Mitte
    --> Dazu einfach den mc anwählen und auf
Bilder
und
Bilder
bei der Transformierung klicken

so sieht mein Screen jetzt aus:
Bilder

Für Fullscreen klicken


3. Geht in den mc und erstellt erneut einen MovieClip

  --> Für weitere Anweisungen siehe Schritt 2

4. Kopiert den mc, fügt einen ein und stapelt ihn über den anderen mit einem bisschen Abstand, macht das bis ihr 5 übereinander habt.
  --> Wählt den mc an und klickt Steuerung + C
  --> Drückt Steuerung + V
  --> Schiebt den mc auf die gleiche länge wie den ersten mc
  --> schiebt den mc 20px nach oben
  --> macht das bis ihr 5 übereinander habt

Dann siehts so aus:
Bilder

Für Fullscreen klicken


5. Alle mc´s anwählen und verdoppeln.
 --> die mc´s werden nun vervielfacht, sodass wir am ende 30 mc´s haben
  --> alle mc´s auswählen
  --> verschieben auf Position x = -200.9, y = -87.0
  --> Steuerung + C klicken
  --> Steuerung + V klicken
  --> Jetzt werden insgesamt 5mal die mcs eingefügt
  --> in den Eigenschaften unten rechts kann man die x und y Werte eingeben
  --> der 1. kommt auf Position x = -135.5, y = -87.0
  -->2. kommt auf x = -70.0,                           y = -87.0
  -->3. kommt auf x = -5.0,                             y = -87.0
  -->4. kommt auf x = 60.5,                            y = -87.0
  -->5. kommt auf x = 125.5,                         y = -87.0

So siehts aus:
Bilder

Für Fullscreen klicken


6. Teilt alle Symbole
  --> alles anstreichen und dann auf Rechtsklick teilen

7. Erstellt eine neue Ebene
  --> klickt auf das kleine Symbol unten links von der Zeitleiste und erstellt somit eine neue Ebene
  --> am besten sperrt ihr noch die erste Ebene damit ihr nicht zufällig auf sie kommt, weil wir wollen jetzt in der neuen arbeiten

8. Auf der Ebene ein Rechteck erstellen
  --> zieht wieder mit dem Rechteckwerkzeug ein Rechteck
  --> stellt in den Eigenschaften folgende Position und Größe ein:
    --> Größe = 60x95
    --> Position x = -200.9, -87.0

9. Erstellt aus der Form einen MovieClip

  --> weitere Anweisungen unnötig da ich das jetzt schon oft genug geschrieben hab ;-)

10. Verdoppelt den mc auch wieder 5 mal, sodass ihr insgesamt 6 Instanzen des mc´s auf der Bühne habt

  --> Wieder Steuerung + C, Steuerung + V, und jeweils auf folgende Positionen setzen: (nur den x Wert müssen wir verändern der y Wert bleibt bei allen auf: -87.0)
  --> 1. haben wir schon gesetzt
  --> 2. x = -135.5
  --> 3. x = -70.0
  --> 4. x = -5.0
  --> 5. x = 60.5
  --> 6. x = 125.5

11. Schiebt die erste Ebene nach oben
  --> In der Zeitleiste die Ebene anklicken und nach oben schieben

12. geht wieder in die Ebene 2 und teilt die mc´s auf Ebenen auf

  --> auf die Ebene 2 in der Zeitleiste klicken
  -->  alle mc´s anwählen und dann auf Rechtsklick auf Ebenen aufteilen
  --> danach wird eine leere Ebene angezeigt, das ist die zweite weil darüber ja noch unsere erste Ebene liegt, diese Ebene könnt ihr löschen

13. Macht aus der ersten Ebene eine Maske
  --> auf die erste Ebene in der Zeitleiste klicken
  --> Rechtsklick auf die Zeitleiste und dann auf Maske
  --> Wie der Name schon sagt wird jetzt nur der Bereich angezeigt der auf der Ebene liegt wo die Maske erstellt wird
  --> das Symbol für die Ebene ändert sich auch sofort und man kann genau erkennen welche Ebene eine Maske ist und welche nicht
  --> Alles was unter der Maske liegt sind maskierte Ebenen, im Normalfall müssten jetzt alle Ebenen maskiert sein
  --> Alles was über der Maske liegt ist nicht maskiert und ist eine normale Ebene
  --> Es gibt einen Trick wie man die Ebenen unter der Maske nicht maskiert werden wenn man eine Maske erstellt, man muss dazu die Ebene erst dann erstellen wenn die Maske schon erstellt wurde

So siehts jetzt aus:
Bilder

Für Fullscreen klicken


14. Geht jetzt in eine Instanz von Symbol 3 rein
  --> gegebenfalls entsprechende Ebene entsperren
  --> doppelt auf den mc klicken

Jetzt wird endlich was animiert :-)

15. Erstellt willkürlich Schlüsselbilder ^^
  --> ich habe jetzt einfach mal Folgende Bilder genommen bei denn ich ein Schlüsselbild gemacht hab: 10,15,17,25
  --> Drückt bei dem jeweiligen Bild in der Zeitleiste F6, wenn ihr draufgeklickt habt
  --> Die Bilder sind zwar keine festen Vorgaben, aber wer es genau machen will wie ich...

16. In jedem Schlüsselbild außer im ersten und letzten könnt ihr jetzt die Form transformieren
  --> Benutzt das Transformationswerkzeug um Formen zu transformieren (Bild)
Bilder

  --> Verändert die Höhe von der Form, es ist egal wie ihr die Form nun transformiert, achtet nur dadrauf das die Form auf dem "Boden" behaltet, also nur von oben transformieren


 

  --> zweites Schlüsselbild Höhe:   43.0
  --> drittes Schlüsselbild Höhe: 77.0
  --> viertes Schlüsselbild Höhe:   61.0
  --> Wie schon gesagt sind das nur die Vorgaben, wenn man alles genauso haben möchte wie ich, rumexperimentieren könnt ihr überall ;-)

17. Wählt jetzt alles in der Zeitleiste an und geht unter dem Eigenschaften-Inspektor auf Form-Tween

So sieht meine Animation jetzt aus:




Jetzt gibts noch den kleinen Trick mit AS.

18. Schreibt in Den 15 Frame folgendes Skript (AS2!!!)

a = random(25);
gotoAndPlay(a);


Und ich sage an dieser Stelle, es ist ein richtiges Skript, es ist alles richtig deklariert, und es funktioniert, also nicht meckern!


Somit würde es dann so aussehen:



Jetzt kann man noch ein paar Filter drauflegen usw, und dann kann es so aussehen (Filtereffekte und ähnliches in anderen Teilen der Serie)



Ich hoffe das Tutorial hat euch gefallen. Bis zum nächsten Mal ;-)


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von MedienStudent
  • 13.12.2013 - 14:29

Wie sieht der Code in ActionScript 3 aus? Ich habe Flash CS6 und bei mir funktioniert es leider nicht..

Portrait von waer
  • 13.12.2013 - 21:23

Man kann in CS6 auch auf ActionScript 2 umstellen.
Ich kann leider nicht sagen wie der Code in AS3 aussieht da ich mich damit noch nicht intensiv beschäftigt habe.
Ich hoffe ich konnte dir weiterhelfen.

Portrait von MedienStudent
  • 15.12.2013 - 15:02

Das Problem ist, dass der Equalizer Teil eines Projektes sein soll, das in ActionScript 3 programmiert ist. Mit Umstellen ist es da schwierig. Aber zur Not könnte ich auch auf jeden von den Balken ein Formtween machen oder? Ist dann nicht mehr zufällig, aber wenn man es länger als 25 Frames müsste das nicht wirklich auffallen.

Portrait von waer
  • 15.12.2013 - 16:38

Das ist natürlich eine Möglichkeit, ich würde aber sagen die zwei Zeilen Code sollten für AS3 bei Google schnell gefunden sein. Alternativ könntest du auch den Equalizer als externe swf in dein Projekt einbinden, somit könntest du auch AS2 benutzen. Damit solltest du genug Möglichkeiten haben ;)

Portrait von MedienStudent
  • 16.12.2013 - 17:12

Danke dir. Habe jetzt den Code in AS3 rausgefunden. Für alle, die es interessiert, hier der Code:

var a:Number;

function randomRange(minNum:Number, maxNum:Number): Number{
return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
}

a = randomRange(1,25);
gotoAndPlay(a);

Portrait von Maggou91
  • 08.12.2010 - 12:11

echt geiles tutorials, paar farben mit ins spiel un ab gehts^^

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 24.09.2010 - 09:53

Super Tutorial, hat mir gut gefallen :D

Portrait von Zork
  • 13.01.2010 - 14:59

Danke! gibt auf jedenfall Spielraum für so manche lustige Sachen..

Portrait von putzili2609
  • 12.01.2010 - 17:42

bei mir hat es nicht ganz funktioniert, weder die positionen noch die masken stimmen in diesem tutorial mit meinem projekt überein, obwohl ich die anleitung genau befolgt habe. an einigen wichtigen stellen in diesem tutorial fehlen anschauliche bilder. Schade, sonst bin ich ein Fan dieser Tutorialreihe

Portrait von waer
  • 12.01.2010 - 22:08

Wenn ich dir irgendwie helfen kann, schreib mir einfach eine PM :)

Portrait von empowering
  • 27.10.2009 - 19:42

Ich kann nur sagen, Super! :)

Portrait von paul_schmidt
  • 22.07.2009 - 02:15

Der Titel ist ein bißchen verwirrend gewählt. Ansonsten gutes Tut.
Gruß
Paul

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 04.06.2009 - 20:56

danke! echt genial!
(bei dem titel hatte ich zwar eigentlich eine echte ani zu musik gedacht, wie man es von so manchen playern kennt)

Portrait von waer
  • 07.06.2009 - 13:32

Das wär zu kompliziertes AS welches ich auch noch nicht beherrsche :P

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 02.06.2009 - 16:24

vielen dank , super erklärt ,

grüße liane

Portrait von Kavita
  • 25.03.2009 - 09:03

habe alle 10 Grundlagen ausgedruckt und somit ein supertolles Arbeitsbuch. vielen vielen Dank!

Portrait von waer
  • 28.03.2009 - 18:49

Hey danke, ich hätte nicht gedacht, dass sich jemand meine Tutorials sogar ausdruckt :P

Portrait von Stanislas
  • 07.03.2009 - 07:04

Super Workshop...... den finde ich echt lasse weiter so


Lg stan

Portrait von Nerevar25
  • 20.01.2009 - 17:20

vielen Dank. gut erklärt.

Portrait von dudl
  • 13.11.2008 - 19:44

Cooler Effekt,
nach zehn Tuts hat man schon einiges gelernt.
THX a lot

x
×
×