Weniger ist mehr :)(AS-Teil)

Oder "Wie baue ich ein ansprechendes Menü, ohne die ressourcenfressenden Tweenings einzusetzen"
 ActionScript

Weiter unten wird der Aufbau vom MC "zeichner" und die Buttons-Aktionen erklärt.




 MC "zeichner"
Der MC "zeichner" ist in unserem Film für die Animation und die Kurvendarstellung verantwortlich. Er besteht aus 3 Keyframes.

Keyframe 1:

1
 Set Variable: "div" = (div > 0 and t < 1 or t = 0) * 0.01 - (div < 0 or t = 1) * 0.01
2
 Set Variable: "t" = t + div
3

Call ("bezier")
4

Set Property ("/ball", X-Position) = X

5

Set Property ("/ball", Y-Position) = Y

6

Set Property ("/point", X-Position) = X
7

Set Property ("/point", Y-Position) = Y
8

Duplicate Movie Clip ("/point", "/point" & (t * 100), (t * 100))

Erklärung:

Zeile 1. Es wird eine Variable "div" deklariert. Dabei wird ihr der Wert "0.01" zugewiesen, wenn die Bedingung in erster Klammer erfühlt ist. Wenn die Bedingung in der zweiten Klammer zutrifft, wird "div"= - 0.01 gesetzt.
Zeile 2. Es wird eine Laufvariable "t" deklariert, die den Wert "t+div" zugewiesen bekommt.
Zeile 3. Ein "externer" Script wird aufgerufen, welcher sich im Keyframe mit der Bezeichnung "bezier" befindet.

Zeile 4.

 Der X-Position des MC's "ball" wird der X-Wert aus dem "bezier"-Script zugewiesen
Zeile 5. Der Y-Position des MC's "ball" wird der Y-Wert aus dem "bezier"-Script zugewiesen
Zeile 6. Der X-Position des MC's "point" wird der X-Wert aus dem "bezier"-Script zugewiesen
Zeile 7. Der Y-Position des MC's "point" wird der Y-Wert aus dem "bezier"-Script zugewiesen
Zeile 8. Der MC "point" wird dupliziert. Die neuen Instanzen sollen den Namen bekommen, der sich aus "/point" und (t*100)-Wert zusammensetzt. Die neuen MC's werden auf (t*100) Ebenen verteilt.

Keyframe 2 enthält nur die Anweisung "Go to and Play (1)", um eine Schleife zu erzeugen.

Keyframe 3 "bezier": In diesem Frame ist die Kurvenformel enthalten.

1
 Set Variable: "x1" = GetProperty ("/P1",_x)
2
 Set Variable: "x2" = GetProperty ("/P2",_x)
3

Set Variable: "x3" = GetProperty ("/P3",_x)
4

Set Variable: "x4" = GetProperty ("/P4",_x)
5

Set Variable: "y1" = GetProperty ("/P1",_y)
6

Set Variable: "y2" = GetProperty ("/P2",_y)
7

Set Variable: "y3" = GetProperty ("/P3",_y)
8

Set Variable: "y4" = GetProperty ("/P4",_y)
9

Set Variable: "X" = (((1 - t) * (1 - t) * (1 - t)) * x1) + ((3 * t) * ((1 - t) * (1 - t)) * x2) + (((3 * (t * t)) * (1 - t)) * x3) + ((t * t * t) * x4)
10

Set Variable: "Y" = (((1 - t) * (1 - t) * (1 - t)) * y1) + ((3 * t) * ((1 - t) * (1 - t)) * y2) + (((3 * (t * t)) * (1 - t)) * y3) + ((t * t * t) * y4)

Erklärung:

In den Zeilen 1 bis 8 werden die Variablen deklariert, die für die Formel notwendig sind. Den Variablen werden X- bzw. Y-Koordinaten der MC's zugewiesen (von P1 bis P4). In den Zeilen 9 ud 10 werden die ermittelten Variablenwerte in die Formel eingesetzt. Ja, ich weiß, die Formel sieht jetzt noch wilder aus, als auf dem Bild :) Man könnte die Zeilen vereinfachen, wenn man z.B eine Variable deklariert, die den Wert (1-t) zugewiesen bekommt. Die errechneten X- und Y-Werte (Zeilen 9 und 10) werden im Keyframe1 gebraucht. Wenn man etwas genauer die Kurve betrachtet, sieht man, daß die einzelnen Punkte an einer Stelle der Kurve dichter beieinander liegen. Dieser Punkt dürfte wohl der Scheitelpunkt der Kurve sein :).

 





 Buttons in den MC's (P1-P4)
Hier wird der AS-Code für die Buttons in den Begrenzungs-MC's (P1-P4) erklärt.

1 On (Press) Hier wird bestimmt, was passieren soll, wenn man auf einen der Punkte klickt
2 Start Drag ("/P1", lockcenter) Es wird eine Ziehoperation gestartet ("Schwester,... Skalpel und Tupfer... und absaugen, bitte" :) )
3 End On  
4 On (Release) Was passiert, wenn die Maustaste losgelassen wird?
5 Stop Drag Ziehoperation beenden ("Zeitpunkt des Todes...")
6 End On  

Ich hoffe, es ist klar, daß der Code oben in den MC "P1" gehört :) Für die anderen MC's sollte der Code abgeändert werden (ist besser :) )

Einige werden sich fragen, was nun mit den restlichen Buttons los ist? Nun ja, damit werden einfach die vorher von mir festgelegten Werte den X- bzw. Y-Koordinaten der Begrenzungs-MC's zugewiesen.




So, das ist es gewesen. Oder hab ich was vergessen? Manch einer wird wohl sagen, daß es zu aufwendig ist, aber versucht es erst mal mit Tweening und dann nach dieser Methode zu machen - Ihr werdet den Unterschied merken :) Vor allem, wenn es darum geht, die Bewegungskurve dynamisch zu verändern oder eine "Beschleunigung" einzubauen.