Anzeige
Tutorialbeschreibung

Bilder freirubbeln (AS-Effekt)

Bilder freirubbeln (AS-Effekt)

Version: ab Flash MX
Niveau: Einsteiger
Vorkenntnisse: Grundlagen Flash, Grundlagen AS (attachMovie, Math.random, Math.ceil)
Lernziele: Bilder dynamisch aus der Bibliothek einfügen lernen

Flash ist ein wunderbares Tool, um Webseiten mit simplen Effekten aufzupeppen. Dazu zählt etwa das sukzessive Freilegen von Bildern, die durch MovieClips verdeckt sind. Um den Effekt interessanter zu gestalten, sollen die Bilder zufallsbedingt angezeigt werden. Damit ist es leicht möglich, die Bilder auszutauschen und bei jedem Neustart ein anderes Motiv zu verwenden. Das externe Laden der Bilder wäre ebenfalls möglich, soll aber in einem anderen Workshop behandelt werden. 

  1. Besorgen Sie sich 10 verschiedene Bilder gleicher Größe und im Format jpg. Die nachfolgend verwendeten Bilder sind 320 x 240 groß.
  2. Erstellen Sie einen neuen Film (1024 x 768, schwarz, 18 Bps) und speichern ihn als „rubbeln“ ab.
  3. Importieren Sie die Grafiken in die Bibliothek.

Um sie von dort aus per Actionscript auf die Bühne zu bekommen, müssen sie erst in einen MovieClip eingefügt werden, der einen Verknüpfungs- oder Exportnamen erhält.

  1. Erzeugen Sie mit <strg><F8> einen leeren MovieClip (Bibliotheks- und Verknüpfungsname „mc_bild1“), in den eine importierte Grafik hineingezogen wird.
  2. Setzen Sie den Registrierungspunkt, angezeigt durch ein kleines schwarzes Kreuz auf der Bühne, auf die linke obere Ecke. Dazu verschieben Sie die Grafik so, daß ihre linke obere Ecke das Kreuz berührt. Alternativ (und präziser) können Sie auch im Eigenschaftsfenster die x- und y-Koordinaten jeweils auf 0 setzen.
  3. Verfahren Sie mit den übrigen 9 Bildern ebenso („mc_bild2“ bis „mc_bild10“). Anstatt jedesmal einen neuen, leeren MovieClip zu erstellen, können Sie auch in der Bibliothek den ersten MovieClip neunmal duplizieren und die entsprechenden Namen zuweisen. Anschließend öffnen Sie die neuen MovieClips im Symbolbearbeitungsmodus und tauschen das Bild 1 gegen die jeweils benötigte Grafik aus.

 

Bilder

Verdeckt werden diese Bilder später auf der Bühne von einem kleinen MovieClip, den wir gekachelt darüber legen.

  1. Erstellen Sie ein Rechteck (40x40, Füllung heller Orangeton, Rahmen dunkler Orangeton) und wandeln es in einen MovieClip (Bibliotheks- und Exportname „mc_recht“, Registrierungspunkt links oben) um. 
  2.  Löschen Sie alle Objekte, die sich auf der Bühne befinden. Wir werden sowohl die Kacheln wie auch die Bilder per Skripting einfügen.
  3.  Benennen Sie die einzige Ebene der Hauptzeitleiste um in „actions“.
  4.  Fügen Sie in Frame 1 der Ebene „actions“ folgendes Skript ein:

this.createEmptyMovieClip("box", 1);
box.attachMovie("mc_bild1","bild",1);

Zunächst wird ein lerer MovieClip namens „box“ erzeugt, der als Behälter für das einzufügende Bild und später auch für die Kacheln dient. Das hat den Vorteil, daß sich, falls notwendig, alle Objekte auf einmal löschen oder verschieben lassen, indem die entsprechenden Befehle auf „box“ angewendet werden anstatt sie sowohl dem Bild wie auch den Kacheln einzeln zuzuweisen. In „box“ wird das erste Bild eingefügt, das den Instanznamen „bild“ erhält. Als Ergebnis zeigt Flash links oben das Bild an. Wünschenswerter wäre allerdings eine mittige Position.

  1. Ergänzen Sie daher nach attachMovie:  

box._x = (Stage.width-box._width)/2;
box._y = (Stage.height-box._height)/2;

 

Bilder

Beim Testen kann es sein, daß das Bild nicht mittig angezeigt wird. Dazu müssen Sie die Datei entweder direkt im Flash-Player aufrufen oder das dargestellte Fenster verkleinern. Wenn Sie aus der Autorenumgebung heraus im Vollbildmodus testen, wird für die Bühnengröße der vollständige sichtbare Bereich verwendet, also auch der im Flashplayer nicht sichtbare Randbereich.

Am besten läßt sich am konkreten Beispiel darstellen, wie wir mit dieser Formel die richtige Position errechnen: die Eigenschaft Stage.width bezieht sich auf die Bühnenbreite, die in unserem Beispiel 1024 entspricht. Bei einer Bildbreite von 320 ergibt der Klammerausdruck 704. Da sich der Registrierungspunkt beim Bild links oben befindet, würde es exakt am rechten Rand eingeblendet, wenn wir diesen Wert verwenden würden. Sie können das ausprobieren, indem Sie die Divsion durch 2 löschen. Wenn wir dann den verbleibenden Raum von 704 Pixeln durch 2 dividieren und das Bild um diesen Wert nach links verschieben, erhalten wir rechts und links einen gleich großen Rand von 352 Pixeln. Nach dem gleichen Prinzip errechnet sich die vertikale Position des Bildes.

Im nächsten Schritt werden die Kacheln darüber gelegt. Auch hier erzeugen wir einen leeren Behälter, um sie aufzunehmen. 

  1. Ergänzen Sie das Skript nach den bisherigen Zeilen:  

breite = 40;
hoehe = 40;
zeilen = box._height/hoehe;
spalten = box._width/breite;
tiefe=1;
box.createEmptyMovieClip("kacheln",1000);
for(i=0; i < zeilen; i++){
          for(j=0;j<spalten;j++){
                    box.kacheln.attachMovie("mc_recht","k"+tiefe,tiefe);
                    obj = box.kacheln["k"+tiefe];
                    obj._x = j * breite;
                    obj._y = i * hoehe;
                    tiefe++;
          }
}

Wenn Sie testen, wird das Bild vollständig von den Kacheln verdeckt. 

Die ersten beiden Variablen halten die Breite und Höhe einer einzelnen Kachel fest. Diese Werte sind notwendig, um herauszufinden, wieviele Kacheln in horizontaler und in vertikaler Richtung über das Bild zu legen sind. Dazu wird einfach die Breite des Bildes durch die Kachelbreite bzw die Höhe durch die Kachelhöhe dividiert. Danach legen wir in tiefe einfach die Ebene für die erste einzublendende Kachel fest.

Innerhalb von „box“ wird ein weiterer leerer MovieClip erzeugt, in den mit einer verschachtelten Schleife alle benötigten Kacheln eingefügt werden. Die äußere Schleife generiert die Zeilen, die innere die Spalten.

Bilder

Aus Gründen der Vereinfachung speichert die Variable obj die Instanznamen aller Kacheln, um später darauf zugreifen zu können. Die x- und y-Position der Kacheln ergeben sich aus ihrer Breite multipliziert mit j bzw. ihrer Höhe multipliziert mit i. Da i und j am Anfang 0 sind, wird auch die erste Kachel in jeder Zeile auf die X-Position = 0 gesetzt. Das gleiche gilt für die y-Position der ersten Zeile. Als Bezugspunkt gilt hier das Koordinatensystem des MovieClips, in den sie per attachMovie eingefügt werden, also box.kacheln. Daher liegen die Kacheln trotz der 0 für die x- und die y-Position nicht am linken Bühnenrand, sondern direkt über dem Bild, über dem sich ja auch box.kacheln befindet.

Das Wegrubbeln gestaltet sich ebenso einfach. Dazu benötigen wir lediglich ein rollOver, das die Kacheln ausblendet.

  1. Fügen Sie direkt nach der Zeile, in der die Anzahl der Spalten errechnet wird, ein:

alpha = 10;

  1. Schreiben Sie anschließend in die innere for-Schleife vor dem Inkrementieren von tiefe:   

obj.onRollOver = function(){
          this._alpha -= alpha;
          if(this._alpha < 10){
                    this.removeMovieClip();
          }
}

Bilder

Die Variable alpha legt fest, um wieviele Prozent die Deckkraft der betreffenden Kachel reduziert werden soll. Mit diesem Wert können Sie gerne Herumspielen: je höher, desto schneller wird das Bild freigelegt.

Über das RollOver-Ereignis sorgen wir dafür, daß jedesmal die Deckkraft reduziert wird. Wenn Sie kleiner als 10 Prozent ist, löscht Flash die Kachel vollständig.

Anstatt jedesmal mit der Maus über die Kachel zu fahren, kann man das Freilegen auch automatisieren.

  1. Ersetzen Sie das rollOver durch folgendes Skript:

          obj.onRollOver = function() {
                    this.onEnterFrame = function() {
                              this._alpha -= alpha;
                              if (this._alpha<10) {
                                        this.removeMovieClip();
                              }
                    };
          }

Jetzt reicht es, einmal über die Kachel zu fahren. Ihr wird dann ein enterFrame-Ereignis zugewiesen, das permanent die Deckkraft reduziert. Auch hier wird die Kachel gelöscht, sobald ihre Deckkraft unter 10 Prozenkt sinkt.

Wir haben es uns insofern einfach gemacht, als sich die Ausmaße des Bildes problemlos durch Kachelbreite und –höhe dividieren lassen und damit die Positionierung der Kacheln exakt auf dem Bild erfolgen kann. Wenn die Kacheln dagegen beispielsweise 50 Pixel breit sind, muß das Skript geändert werden.

  1. Öffnen Sie den Symbolbearbeitungsmodus von „mc_recht“ und ändern dessen Höhe sowie Breite auf jeweils 50 Pixel. Achten Sie darauf, daß der Registrierungspunkt weiterhin oben links bleibt.

Wenn Sie jetzt testen, werden die Kacheln sich gegenseitig teilweise überlagern und sowohl rechts wie auch unten über das Bild hinausragen.

  1. Korrigieren Sie die Variablen breite und hoehe von 40 auf 50.

Zwar überlappen sich die Kacheln nun nicht mehr, aber der überstehende Rand existiert weiterhin.

  1. Ändern Sie das Skript wie folgt (Fettdruck):

breite = 50;
hoehe = 50;
zeilen = Math.ceil(box._height/hoehe);
spalten = Math.ceil(box._width/breite);
offsetX = (spalten*breite-box._width)/2;
offsetY = (zeilen*hoehe-box._height)/2;
alpha = 10;
tiefe = 1;
box.createEmptyMovieClip("kacheln", 1000);
for (i=0; i<zeilen; i++) {
          for (j=0; j<spalten; j++) {
                    box.kacheln.attachMovie("mc_recht", "k"+tiefe, tiefe);
                    obj = box.kacheln["k"+tiefe];
                    obj._x = j*breite-offsetX;
                    obj._y = i*hoehe-offsetY;

                    obj.onRollOver = function() {
                              …
                    };
                    tiefe++;
          }
}

Jetzt ragen alle Kacheln jeweils gleich viele Pixel über das Bild hinaus.

Hinter dem Code steckt folgende Überlegung: Um ein 320 Pixel breites Bild horizontal mit 50 Pixel breiten Kacheln zu bedecken, müssen wir 7 Kacheln nehmen. 6 Kacheln ergeben 300 Pixel, 7 dagegen 350. Die Anzahl der Kacheln läßt sich errechnen, indem wir die Bildbreite durch die Kachelbreite dividieren und auf die nächste Ganzzahl aufrunden. Dasselbe gilt natürlich auch für die Höhe. Aufgerundet wird in Flash mit der ceil-Methode des Math-Objektes, der man lediglich als Parameter den zu verändernden Wert mitgeben muß. Dieser Wert kann aus einer konkreten Zahl oder wie in unserem Beispiel aus einer Berechnung bestehen.

Würden wir ohne weitere Änderungen einblenden, stünden die Kacheln rechts 30 Pixel über das Bild hinaus, da, wie eben gesehen, die Kachelbreite 350, die Bildbreite aber nur 320 beträgt. Wenn wir die Kacheln um die Hälfte dieses Überhangs nach links verschieben, sind rechter und linker Rand identisch. Genau deshalb wird die Variable offsetX benötigt, die innerhalb der inneren Schleife bei der Positionierung abgezogen wird. Wenn z.B. die erste Kachel früher auf x = 0 lag, wird sie jetzt um 15 Pixel nach links verschoben.

Bilder

Jeder Start lädt dasselbe Bild. Abwechslung bringt eine random-funktion.

  1. Legen Sie in der allerersten Zeile fest, wieviele Bilder zur Verfügung stehen:

anzahl = 10;

  1. Ersetzen Sie direkt nach der Erzeugung des leeren box-MovieClips die Zeile box.attachMovie("mc_bild1", "bild", 1); durch:

zufall = Math.ceil(Math.random()*anzahl);
box.attachMovie("mc_bild"+zufall, "bild", 1);

In der Variablen zufall wird eine Zahl zwischen 1 und der zuvor definierten Gesamtanzahl gespeichert. Der Exportname des einzufügenden Bildes setzt sich dann einfach aus unserem Exportnamen „mc_recht“ sowie der Zufallszahl zusammen. Je größer die Anzahl der Bilder, desto höher die Wahrscheinlichkeit, daß bei jedem Neustart ein anderes Bild angezeigt wird.

Der gesamte Code sieht jetzt so aus:

anzahl = 10;
this.createEmptyMovieClip("box", 1);
zufall = Math.ceil(Math.random()*anzahl);
box.attachMovie("mc_bild"+zufall, "bild", 1);
box._x = (Stage.width-box._width)/2;
box._y = (Stage.height-box._height)/2;
breite = 50;
hoehe = 50;
zeilen = Math.ceil(box._height/hoehe);
spalten = Math.ceil(box._width/breite);
offsetX = (spalten*breite-box._width)/2;
offsetY = (zeilen*hoehe-box._height)/2;
alpha = 10;
tiefe = 1;
box.createEmptyMovieClip("kacheln", 1000);
for (i=0; i<zeilen; i++) {
          for (j=0; j<spalten; j++) {
                    box.kacheln.attachMovie("mc_recht", "k"+tiefe, tiefe);
                    obj = box.kacheln["k"+tiefe];
                    obj._x = j*breite-offsetX;
                    obj._y = i*hoehe-offsetY;
                    obj.onRollOver = function() {
                              this.onEnterFrame = function() {
                                        this._alpha -= alpha;
                                        if (this._alpha<10) {
                                                  this.removeMovieClip();
                                        }
                              };
                    };
                    tiefe++;
          }
}


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Litti
  • 05.09.2010 - 17:49

Ich find es gut, volle Punktzahl :-)

Portrait von WebDiver_09
  • 29.08.2010 - 17:29

Klasse Idee!
Liest sich gut, werd's gleich mal ausprobieren.
... und hoffen, dass es noch nicht veraltet ist!
(Daher vorsichtshalber 1 Stern weniger)

Portrait von akpotosufredrick
Portrait von Destruction929
  • 01.06.2010 - 21:34

Gut aber wie bereits beschrieben ... varaltet.

Portrait von buhu
  • 18.05.2010 - 03:36

Gut geschriebenes Tutorial, aber leider ist der Code veraltet und ich als AS-Anfänger war dadurch nicht in der Lage den banner nachzubauen.

Portrait von raphs
  • 31.01.2010 - 15:30

ich sag mal danke für das hat mir ein wenig geholfen ;-)
musste ein bisschen umbasteln aber geht schon
vielleicht schreib ich auch mal ein Turtorial, abwohl ich beim erklären sicher nicht so gut bin wie du
mfg

Portrait von Litti
  • 05.11.2009 - 08:31

eine gute Idee, vielen Dank

Portrait von HeinoBoeckmann
Portrait von videom
  • 18.08.2009 - 12:16

Super!!! Vielen Dank!!!

Portrait von TiniA
  • 14.06.2009 - 18:38

Super! Aber leider ein paar Startprobleme, da ich das CS4 habe. Aber es wird....
Danke!

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 07.06.2009 - 13:09

Genau sowas hab ich schon die ganze Zeit gesucht! Super =) Ich hoffe es klappt auch noch ^

Portrait von robertbit
  • 04.05.2009 - 11:49

Sehr gut erklärt und mit etwas Übung auch nachzubauen.

Portrait von RWProgger
  • 29.04.2009 - 07:59

Gut geführt, dennoch bin ich auf ein erhebliches Problem bei der Umsetzung gestoßen, wlches ich abr noch nicht identifizieren konnte.
Ich denke das dass Problem auch bei meiner Flash anwendung liegen könnte.

Portrait von BlackHawk3
  • 23.12.2008 - 17:00

WOHO sehr n1.... besten dank

Portrait von Azrasha
  • 15.11.2008 - 18:08

Herzlichen Dank fuer das gute Tutorial :)

Portrait von JupSchwupDup
  • 29.10.2008 - 11:47

Super gemacht, Danke für die Erklärung

Portrait von Biljana
  • 28.10.2008 - 20:56

super erklärt, danke

Portrait von JensenJR
  • 21.06.2008 - 15:51

Ein komplexes Thema wird durch dieses tutorial verständlich erklärt.

Portrait von PsKueken
  • 20.04.2008 - 12:55

super interessant ,
lG Küken

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 11.04.2008 - 17:58

Hallo
finde diesen Workshop total super nur leider funktioniert es bei mir nicht :(
kann mir vielleicht jemand seine flash datei schicken mit dem beispiel sodass ich es vergleichen kann?
danke
glg

x
×
×