Flash, Smartclips und die üblichen Verdächtigen.

Posted on by

Dieser Artikel erklärt das Prinzip der Smartclips in Flash. Als Beispiel wird ein Smartclip programmiert, der viele der derzeit üblichen Effekte erzeugt.
(Dieser Artikel erschien im Buch “Dr. Web 2.0” von drweb.de.)

Flash…

Mit Flash hat Macromedia ein kleines Kunststück geschafft. Designer, die nie zuvor eine Zeile Programmcode geschrieben haben, verwandeln sich auf einmal zu richtigen Programmierern. Das Zauberwort dafür heißt Actionscript. Diese Programmiersprache ist einfach gehalten, man erreicht also schnell erste Ergebnisse. Und wer sich mehr mit der Programmierung beschäftigt, hat trotzdem sehr viele Möglichkeiten. Erinnerte Actionscript in Flash 3 und 4 noch sehr an “Malen nach Zahlen”, ist es mit der Version 5 zu einer richtigen Programmiersprache gewachsen, mit allem, was dazu gehört: Schleifen, Funktionen, Arrays, etc. Jetzt lassen sich selbst komplexe objektorientierte Strukturen in Flash erzeugen. Eines der wichtigsten neuen Features für die tägliche Arbeit sind die Smartclips, welche ich in diesem Kapitel vorstellen werde.

Was machen wir: Wir schreiben einen eigenen Smartclip. Damit Sie auch etwas davon haben, wird dieser Smartclip viele der derzeit üblichen Flash-Effekte erzeugen. Zum Schluß verpassen wir unserem Smartclip noch eine schicke Oberfläche.

Was brauchen wir: Flash 5, gute Kenntnisse von Actionscript und die Tastenkombination Apfel+E (für Windows-User: Strg+E). Damit schalten Sie nämlich das Actionscript-Fenster in den “Profimodus”, was nichts anderes heißt, als daß man den Code per Tastatur eingeben kann und nicht wie bisher umständlich mit der Maus zusammenklicken muß.

Zu diesem Artikel gibt es ein paar Dateien, die Sie am Ende herunter laden können.

  • ueber.fla enthält den fertigen Smartclip
  • ueber_gui.swf enthält die Bedienoberfläche für den Smartclip (diese beiden Dateien müssen immer im gleichen Verzeichnis stehen)
  • ueber_gui.fla die offene Flash-Datei für die Bedienoberfläche
  • ueber_beispiel.swf ist ein Beispiel für den Smartclip
  • ueber_beispiel.fla ist die offene Flash-Datei für das Beispiel

…Smartclips…

Macromedia hat es zwar geschafft, daß immer mehr Designer programmieren, aber sie haben eines vergessen: Es sind immer noch Designer. Und als solchen fehlt ihnen die wichtigste Eigenschaft eines Programmierers: Faulheit! Und zwar die richtige Art von Faulheit. Bevor ein Programmierer die gleiche Zeile Programmcode ein zweites Mal schreibt, schreibt er lieber zehn Zeilen Code, mit denen er die gewünschte Funktion dynamisch zwei Mal im Programm aufrufen kann. Es gibt also einen Unterschied zwischen sparsamer Programmierung und Copy&Paste.

Ein Beispiel: Nehmen wir an, wir hätten in Flash fünf Buttons, die alle das gleiche machen. Wenn man sie anklickt, springt der Flash-Film immer auf den gleichen Marker. Dazu haben wir einen Button, den wir fünf mal kopieren. Folglich liegt auf dem Button auch immer das gleiche Script. In der Library ist dieses Script einmal vorhanden. Jetzt wollen wir aber, daß diese fünf Buttons zu fünf unterschiedlichen Markern springen. Die einfachste Methode wäre, das Script fünf mal zu kopieren und in jedem Script das Ziel des Sprungbefehls zu ändern. Das ist auch die schlechteste Methode, weil wir in diesem Fall den gleichen Code mehrmals in unserem Projekt hätten. Wenn wir ihn später ändern wollten, müßten wir fünf mal den gleichen Code ändern. Und das nur, weil sich ein Wort pro Script unterscheidet, nämlich der Name des Markers.

Das ist nicht die Art von Faulheit, die ich meine! Ein Programmierer behilft sich mit anderen Tricks. Unser Ziel ist es, ein einziges Script auf mehrere Buttons zu legen, welches aber für jeden Button unterschiedlich reagiert (es springt zu unterschiedlichen Markern). Der Vorteil ist klar: Sollte sich das Script später ändern, müssen wir es nur einmal umschreiben und diese Änderung gilt automatisch für alle Buttons. Dazu kommt, daß diese Methode Platz spart und das soll uns im Internet nur recht sein.

Schon in Flash 4 gab es verschiedene Tricks, mit denen sich das bewerkstelligen ließ. Man könnte mit dem Script den Instanz-Namen des Movieclips mit dem Button auslesen und abhängig davon zu verschiedenen Markern springen. Man könnte auch in jedem Button eine Variable mit dem Namen des Markers definieren und diese mit dem Script auslesen. Wenn der Pfad vom Script zur Variable relativ ist, erhalten wir so für jeden Button eine andere Variable. Aber das sind alles Work-arounds und Kniffe, das hat mit sauberer Programmierung nichts zu tun.

Ich hoffe, Sie verzeihen mir dieses konstruierte Beispiel, aber so kommen wir zum Thema des Kapitels: Mit Smartclips haben wir die Möglichkeit, einem Script Parameter zu übergeben. So kann man für jeden Button das gleiche Script verwenden, ihm aber in Flash unterschiedliche Parameter, in unserem Falle Markernamen, zuweisen. Die Zahl der möglichen Parameter ist dabei ebensowenig beschränkt, wie die Art der Parameter. Sie können Strings, Zahlen, Arrays oder Objekte übergeben. Sie können auch Standardwerte vorgeben, die eingesetzt werden, falls einem Parameter kein Wert zugewiesen wurde. Für diese Parameter gibt es in Flash eine eigene Palette, sie heißt “Sequenzparameter”. Man kann für diese Palette auch eine eigene Oberfläche erstellen, so daß die Parameter nicht nur mit der Tastatur eingegeben werden, sondern auch mit der Maus, beispielsweise über Schieberegler. Diese Oberfläche ist wiederum ein eigener Flash-Film, das heißt Flash steuert Flash! Ziemlich beeindruckend, oder?

Das Ergebnis ist sauberer Code und ein platzsparender Flash-Film. Ein viel wichtigerer Effekt macht sich aber bei Ihrem nächsten Projekt bemerkbar: Sie können Smartclips in anderen Projekten wiederverwenden. Wenn Sie also eine bestimmte Funktion mit einem Smartclip realisiert haben, können Sie beim nächsten Projekt den Smartclip in Ihre Library ziehen und er steht als Funktion zur Verfügung. Um den Code brauchen Sie sich nicht mehr zu kümmern, Sie steuern den Smartclip über seine Oberfläche.

Auf diese Weise können Sie Smartclips auch mit anderen Designern teilen. Macromedia bietet mit “Macromedia Exchange” selbst ein Programm zum Austausch von Smartclips an. Vielleicht darf ich an dieser Stelle Werbung für die kostenlose Weitergabe machen. Sie haben den Smartclip zu diesem Kapitel umsonst erhalten, vielleicht können Sie Ihre eigenen Funktionen ja auch umsonst zur Verfügung stellen? Langfristig profitieren alle davon, auch Sie selbst

… und die üblichen Verdächtigen.

Ich möchte Smartclips nicht nur theoretisch erklären, sondern mit Ihnen ein praktisches Beispiel entwickeln. Ich denke, daß man auf diese Weise eine Funktion am ehesten lernt. Am Ende dieses Kapitels erhalten Sie einen Smartclip, mit dem Sie viele der derzeit im Netz immer wieder zu sehenden Effekte ganz schnell selbst in Flash erzeugen können. Ich nenne ihn den “Übersmartclip”.

Sie kennen den Effekt: Ein Objekt bewegt sich über den Bildschirm von A nach B. Es springt aber nicht dort hin, sondern es bewegt sich schnell, bremst kurz vor dem Ziel ab um dann ganz weich am Ziel zu landen. Oder es bewegt sich auf das Ziel zu, schießt etwas über das Ziel hinaus und pendelt sich dann am Zielpunkt ein; es “wobbelt”. Oder ein Objekt wird ganz langsam eingeblendet. Oder ein Objekt wird vergrößert, springt etwas über seine neue Größe hinaus und pendelt sich dann bei der Zielgröße ein.

Bisher haben Sie die Position eines Movieclips über Actionscript so gesteuert:

mymovieclip._x = 200;
mymovieclip._y = 150;

Um den beschriebenen Effekt zu erzeugen, werden Sie in Zukunft den Smartclip in den betreffenden Movieclip legen und den Code wie folgt abändern:

mymovieclip.new_x = 200;
mymovieclip.new_y = 150;

Sie sehen, wir weisen einem Objekt nicht mehr direkt seine Position zu, sondern wir geben nur die gewünschte Position an. Daß das Objekt von seiner aktuellen Position zur gewünschten Position gelangt, darum kümmert sich der Smartclip. Inklusive Verzögerungs- und “Wobbel-” Effekt. Der Übersmartclip funktioniert für die Position, Skalierung, Größe, Rotation und Transparenz eines Movieclips.

Jetzt aber los!

Genug der Theorie, fangen wir an. Öffnen Sie Flash und erstellen Sie einen neuen, leeren Film. Größe, Farbe und Framerate sind egal, uns geht es nur um den Smartclip. Speichern Sie den Film unter dem Namen “ueber.fla” ab.

Fügen Sie ein neues Symbol ein (Apfel+F8). Geben Sie als Namen “uebersmartclip” ein und wählen Sie als Option “Filmsequenz”. Öffnen Sie die Library (Apfel+L) und doppelklicken Sie auf dem “uebersmartclip”. Sie sehen den leeren Movieclip. Fügen Sie in der Zeitleiste noch zwei weitere Keyframes ein (F6), so daß nacheinander drei Keyframes stehen. Im ersten Frame wird der Smartclip initialisiert. Im zweiten wird die Bewegung berechnet und ausgeführt. Der dritte Frame springt nur immer wieder zum zweiten, damit die Bewegung kontinuierlich abläuft.

Wie wird der Smartclip smart?

Wir wollen dem Smartclip zwei Parameter übergeben: “Delay” ist eine Zahl zwischen 1 und 20. Sie bestimmt den Grad der Verzögerung der Bewegung. “Wobble” ist eine Zahl zwischen 0 und 0,9. Sie ist für das Einpendeln zuständig. Je größer die Zahl, desto stärker pendelt der Movieclip um seine Zielposition. Klicken Sie dazu in der Library mit der rechten Maustaste (bzw. Ctrl-Klick) auf dem Movieclip und wählen Sie die Option “Sequenzparameter definieren”. Es öffnet sich ein Fenster mit einer Liste von Parametern. Mit dem Plus-Button fügen Sie einen Parameter hinzu, mit dem Minus-Button löschen Sie ihn wieder aus der Liste und mit den Pfeil-Buttons ändern Sie die Reihenfolge der Parameter. Für jeden Parameter können Sie einen Namen, seinen Standardwert und den Typ des Parameters angeben.

Noch ist diese Liste leer. Fügen Sie jetzt zwei Parameter ein. Den ersten nennen Sie “delay”, er hat einen Standardwert von 1. Der zweite heißt “wobble” und ist standardmäßig 0. Beide Parameter sind vom Typ “Default”, das heißt, sie können sowohl Zahlen als auch Buchstaben enthalten. Diese beiden Parameter stehen uns innerhalb des Movieclips als Variablen zur Verfügung. Darum kümmert sich Flash, wir brauchen weiter nichts tun. Klicken Sie auf OK und Sie sehen, daß sich das Symbol des Movieclips verändert hat. Er ist jetzt ein Smartclip.

Um diesen Smartclip später anzuwenden, legen Sie ihn in die Zeitleiste eines Movieclips. Wenn die Zeitleiste länger als ein Frame ist, stellen Sie sicher, daß sich der Smartclip über die ganze Länge erstreckt. Der Smartclip arbeitet immer mit dem Movieclip, in dem er liegt, also seinem unmittelbaren _parent.

Die Effekte

Die beschriebenen Effekte funktionieren alle nach dem gleichen Schema. Nehmen wir als Beispiel die Position eines Movieclips. Der Movieclip hat den Instanz-Namen “mymovieclip” und der Übersmartclip liegt in diesem Movieclip, also ist die X-Position des Movieclips _parent._x. Wir wollen jetzt die Position des Movieclips verändern. Anstatt mit mymovieclip._x die Position direkt zu setzen, führen wir eine neue Variable ein, nämlich mymovieclip.new_x. Wir geben also nicht mehr die Position an, sondern die gewünschte Position. Der Smartclip vergleicht jetzt die aktuelle Position _x mit der gewünschten Position new_x und bewegt den Movieclip ein Stück in Richtung der gewünschten Position. Das macht er so lange, bis der Movieclip an der gewünschten Position angekommen ist.

Doppelklicken Sie auf dem zweiten Frame des Übersmartclips und geben Sie folgendes als Framescript ein: 

if (_parent._x != _parent.new_x)
{
  dif_x = (_parent.new_x - _parent._x) / delay;
  _parent._x = _parent._x + dif_x;
}

Die erste Zeile vergleicht die aktuelle Position mit der gewünschten. Wenn diese nicht übereinstimmen, wird der Code in den geschweiften Klammern ausgeführt. In der dritten Zeile wird die Differenz zwischen aktueller und gewünschter Position berechnet und in der Variable “dif_x” gespeichert. Damit der Movieclip nicht sofort zu seiner Endposition springt, wird die Differenz durch den Wert der Variable “delay” geteilt. In der vierten Zeile wird schließlich der Movieclip um diese Differenz, also um “dif_x”, verschoben.

Sie sehen , wenn wir den Parameter “delay” auf 1 setzen, springt der Movieclip sofort. Er verhält sich so, als würden wir die Position direkt setzen. Je höher der Wert von “delay”, desto langsamer bewegt sich der Movieclip vorwärts. Bitte beachten Sie, daß “delay” nicht 0 sein darf, sonst hätten wir eine Division durch 0.

Das “Wobbeln” ist auch nicht weiter schwer. Der Trick ist, daß in “dif_x” immer die Geschwindigkeit des Movieclips gespeichert ist. Jetzt setzen wir die neue Geschwindigkeit nicht nur auf einen Teil der Differenz, sondern erhöhen sie zusätzlich auch noch um einen Teil der alten Geschwindigkeit. Ändern Sie die dritte Zeile also wie folgt ab: 

dif_x = (_parent.new_x - _parent._x) / delay + dif_x * wobble;

Der Parameter “wobble” ist eine Zahl zwischen 0 und 0,9. Wenn er 0 ist, pendelt der Movieclip gar nicht. Je höher die Zahl, um so stärker pendelt der Movieclip. Achtung: Wenn diese Zahl 1 wäre, würde der Movieclip dauernd pendeln und nicht mehr zum Stillstand kommen.

Das ganze funktioniert natürlich nicht nur für die X-Position, sondern auf für die Y-Position. Das fertige Script von Frame 2 sieht also so aus:

if (_parent._x != _parent.new_x)
{
  dif_x = (_parent.new_x - _parent._x) / delay + dif_x * wobble;
  _parent._x = _parent._x + dif_x;
}
if (_parent._y != _parent.new_y)
{
  dif_y = (_parent.new_y - _parent._y) / delay + dif_y * wobble;
  _parent._y = _parent._y + dif_y;
}

Das ist die Bewegung der Position. Damit der Smartclip sauber funktioniert, müssen wir noch zwei Scripts eingeben. In Frame 1 initialisieren wir die Variablen “new_x” und “new_y” einmal, damit der Movieclip nicht ungewollt über die Bühne springt: 

_parent.new_x = _parent._x;
_parent.new_y = _parent._y;

Und in Frame 3 springen wir wieder zu Frame 2, damit das Script immer wieder ausgeführt wird: 

gotoAndPlay (2);

Jetzt ist übrigens ein guter Zeitpunkt, den Übersmartclip zu speichern.

Und Action!

Probieren Sie es aus: Erstellen Sie einen neuen Flash-Film mit einem Movieclip, der eine beliebige Graphik enthält. Ziehen Sie diesen Movieclip auf die Bühne und geben Sie ihm einen Instanz-Namen, z.B. “mymovieclip”. Öffnen Sie den Übersmartclip und kopieren Sie ihn in die Library des neuen Flash-Films. Öffnen Sie den Movieclip und ziehen Sie den Smartclip auf die Zeitleiste des Movieclips. Klicken Sie den Smartclip auf der Bühne an und wählen Sie im Menü “Fenster” => “Bedienfelder” die Option “Sequenzparameter”. Geben Sie als “Delay” 4 und als “Wobble” 0.7 ein (Achtung: Punkt statt Komma!).

In der Hauptzeitleiste des neuen Films erzeugen Sie drei Keyframes. Der erste bleibt leer, der dritte erhält einen einfachen stop (); -Befehl und in den zweiten schreiben Sie

mymovieclip.new_x = 200;
mymovieclip.new_y = 150;

Wenn Sie diesen Film starten, sollte der Movieclip von seiner aktuellen Position auf die Position 200/150 springen und sich dann langsam dort einpendeln.

Und jetzt alle zusammen

Analog zur Position funktionieren auch die anderen Eigenschaften, ich werde also nicht mehr im einzelnen darauf eingehen. Öffnen Sie wieder den Übersmartclip. Das fertige Script in Frame 1 sieht wie folgt aus:

// Werte initialisieren
_parent.new_x = _parent._x;
_parent.new_y = _parent._y;
_parent.new_xscale = _parent._xscale;
_parent.new_yscale = _parent._yscale;
_parent.new_width = _parent._width;
_parent.new_height = _parent._height;
_parent.new_rotation = _parent._rotation;
_parent.new_alpha = _parent._alpha;

Frame 2 ist für die Bewegungen zuständig. Bitte beachten Sie, daß bedingt durch das Format dieses Buches Zeilenumbrüche auftreten, die Sie nicht übernehmen dürfen. Jede Zeile endet mit einem Semikolon (mit Ausnahme der Kommentare).

// Position
if (_parent._x != _parent.new_x)
{
  dif_x = (_parent.new_x - _parent._x) / delay + dif_x * wobble;
  _parent._x = _parent._x + dif_x;
}
if (_parent._y != _parent.new_y)
{
  dif_y = (_parent.new_y - _parent._y) / delay + dif_y * wobble;
  _parent._y = _parent._y + dif_y;
}
// Skalierung
if (_parent._xscale != _parent.new_xscale)
{
  dif_xscale = (_parent.new_xscale - _parent._xscale) / delay + dif_xscale * wobble;
  _parent._xscale = _parent._xscale + dif_xscale;
}
if (_parent._yscale != _parent.new_yscale)
{
  dif_yscale = (_parent.new_yscale - _parent._yscale) / delay + dif_yscale * wobble;
  _parent._yscale = _parent._yscale + dif_yscale;
}
// Groesse
if (_parent._width != _parent.new_width)
{
  dif_width = (_parent.new_width - _parent._width) / delay + dif_width * wobble;
  _parent._width = _parent._width + dif_width;
}
if (_parent._height != _parent.new_height)
{
  dif_height = (_parent.new_height - _parent._height) / delay + dif_height * wobble;
  _parent._height = _parent._height + dif_height;
}
// Rotation
if (_parent._rotation != _parent.new_rotation)
{
  dif_rotation = (_parent.new_rotation - _parent._rotation) / delay + dif_rotation * wobble;
  _parent._rotation = _parent._rotation + dif_rotation;
}
// Transparenz
if (_parent._alpha != _parent.new_alpha)
{
  dif_alpha = (_parent.new_alpha - _parent._alpha) / delay + dif_alpha * wobble;
  _parent._alpha = _parent._alpha + dif_alpha;
}

Und Frame 3 springt wieder zu Frame 2:

// Zurueck zum letzten Frame
gotoAndPlay (2);

Speichern Sie den Übersmartclip und probieren Sie es aus. Sie können auch die Datei “ueber_beispiel.fla” öffnen, dort sehen Sie die anderen Effekte in Aktion.

Kleider machen Leute

Jetzt haben wir einen Smartclip, jetzt wollen wir ihm eine eigene Oberfläche verpassen. In der Palette “Sequenzparameter” stehen die Parameter derzeit noch etwas lieblos untereinander, das können wir besser! Ich werde im Folgenden nur das Prinzip von einer derartigen Bedienoberfläche erklären, da der Platz in diesem Buch nicht ausreicht (sonst wäre es nur ein Buch über Smartclips). Sie finden die fertige Oberfläche wie auch die offene Flash-Datei in den Dateien zu diesem Artikel.

Im Prinzip ist die Bedienoberfläche ein ganz normaler Flash-Film. In diesem Film sind zwei Schieberegler, welche die Werte für “delay” und “wobble” regeln. Zusätzlich gibt es einen Spezial-Movieclip auf der Hauptebene, welcher leer ist und den Instanz-Namen “xch” trägt (für “Exchange”). Die Schieberegler schreiben ihre Werte jetzt in den Movieclip “xch” und zwar in die Variablen “delay” und “wobble”. Alles, was in diesem Movieclip an Variablen steht, wird von Flash an den Smartclip weitergeleitet. Diesen Film exportieren Sie als swf-Datei.

Öffnen Sie wieder den Smartclip und öffnen Sie den Dialog “Sequenzparameter definieren” (nicht die Kontrollpalette). Unter der Liste von Parametern finden Sie ein Feld, in dem Sie den Pfad zur benutzerdefinierten Oberfläche angeben können. In unserem Fall ist das “ueber_gui.swf”. Es ist ratsam, hier einen relativen Pfad zu verwenden.

Das ist alles (natürlich in Kurzform). Wenn Sie in Zukunft auf den Smartclip klicken, finden Sie in der Kontrollpalette “Sequenzparameter” den Film mit der Benutzeroberfläche. Wenn Ihnen das jetzt zu schnell ging, schauen Sie sich einfach den offenen Flash-Film “ueber_gui.fla” an.

Und jetzt?

Tja, jetzt sind Sie dran. Ich hoffe, daß Ihnen dieses Kapitel geholfen hat, in Zukunft tolle Projekte mit dem Übersmartclip zu machen. Ich hoffe jedoch noch viel mehr, daß Sie in Zukunft auch Ihre eigenen Smartclips erstellen werden und diese mit anderen Designern teilen. Wenn Sie weitere Fragen haben, lassen Sie es mich wissen oder schreiben Sie in das Forum von Dr. Web.

Ein Wort noch zur Performance des Übersmartclips: Der Code, wie er hier steht, ist sehr einfach gehalten. Es gibt ein paar kleinere Fehler, wenn Sie den Parameter “Wobble” sehr hoch einstellen. Auch könnte man das Script sicher noch optimieren, damit es schneller läuft. Betrachten Sie dies doch einfach als Hausaufgabe und versuchen Sie sich mal daran.

Download

Hier die Dateien zum Smartclip: uebersmartclip.sit oder uebersmartclip.zip (45 KB)

(Nachtrag 2002: Mittlerweile ist Flash bei Version 6 angelangt und die gleichen Effekte lassen sich viel eleganter lösen. Sie können theoretisch ganz auf Smartclips oder Komponenten verzichten und den Code als “on (enterFrame)”-Script für den Movieclip-Prototypen eingeben. Wenn ich mal Zeit habe, werde ich diese Version nachreichen.)