Wir erstellen ein dreidimensional erscheinendes Bilderkarussell. Je nach Mausposition drehen sich die angezeigten Grafiken schneller und langsamer. Dieser tolle Effekt eignet sich für Diashows ebenso wie für Website-Navigation. Verschiedene Interaktionen machen aus der reinen Diashow zum Beispiel einen animierten Navigationskreisel.
Ich bin Ihnen noch die mehrfach bereits programmierte „Sprechblase“ schuldig. Erstellen Sie über „Einfügen/Neues Symbol“ ein Movieclip mit dem Namen „sprechblase“. Zeichnen Sie darin auf der unteren Ebene einen schönen Rand und legen Sie in der nächst höheren Ebene ein dynamisches Textfeld darüber. Achten Sie darauf, das Textfeld mit Schriftkonturen auszustatten (im Eigenschaftsinspektor ganz rechts). Das Textfeld bekommt einen Instanznamen, nämlich: „blasenText“.
Der Tooltip erscheint bei Mausberührung und bewegt sich mit dem Bild
Binden Sie auch das MovieClip „sprechblase“ in der Bibliothek an ActionScript, wie Sie das vorher schon mit dem „bild_container“ getan haben. Behalten Sie auch hier den vorgeschlagenen Instanznamen bei. Kehren Sie zurück zu Szene 1.
Was nun folgt, ist recht schnell erklärt, auch wenn viel Code enthalten ist. Es handelt sich um Funktionen für RollOver, RollOut, Mausklick (Öffnen des großen Bilds) und dann bei erneutem Mausklick die Rückkehr zum Ausgangszustand nebst Neustart der Bewegung. Wir starten mit dem RollOver:
function over()
{
home.sprechblase.blasenText.text = this._parent.blasenText;
home.sprechblase._x = this._parent._x;
home.sprechblase._y = this._parent._y - this._parent._height/2;
home.sprechblase.onEnterFrame = Delegate.create(this,moveTip);
home.sprechblase._alpha = 100;
}
Bei Mausberührung wird der zum Bild passende Text in das Textfeld geladen. Beachten Sie, dass die auslösende Instanz „t.rahmen“ ist, somit wird der Text aus „t“ geholt.
Die Positionierung der Sprechblase ist mittig und leicht über dem Bild, wobei der Abstand von der Skalierung bestimmt wird. Die Deckkraft der Sprechblase wird natürlich auf 100 gestellt. Spannend ist natürlich die Zeile dazwischen. Sie aktiviert die Funktion moveTip und nimmt die Eigenschaften des aktuellen Bilds dorthin mit:
function moveTip()
{
home.sprechblase._x = this._parent._x;
home.sprechblase._y = this._parent._y - this._parent._height/2;
}
Der Rollout macht die Sprechblase einfach unsichtbar.
function out()
{
delete home.sprechblase.onEnterFrame;
home.sprechblase._alpha = 0;
}
Klickt der Nutzer auf das Bild, wird es vergrößert und dann durch das größere und zugleich schärfere Motiv abgelöst
Wenn der Nutzer auf ein Bild klickt, passierte jede Menge. Zunächst wird die Sprechblase unsichtbar gemacht und die Position des alten Clip gespeichert, um später zurück zu kehren.
function gedrueckt()
{
home.sprechblase._alpha = 0;
for(var i=0;i<numOfItems;i++)
{
var t:MovieClip = home["bild_container"+i];
//alte Positionen der Clips speichern
t.xPos = t._x;
t.yPos = t._y;
Ebenso die Skalierung:
t.theScale = t._xscale;
delete t.rahmen.onRollOver;
delete t.rahmen.onRollOut;
delete t.rahmen.onRelease;
und die Bewegung verhindert:
delete t.onEnterFrame;
//gewaehltes Bild zentrieren
if(t != this._parent)
{
var tw:Tween = new Tween(t,"_xscale", Strong.easeOut,t._xscale,0,1,true);
var tw2:Tween = new Tween(t,"_yscale", Strong.easeOut,t._yscale,0,1,true);
var tw3:Tween = new Tween(t,"_alpha", Strong.easeOut,100,0,1,true);
}else{
var tw:Tween = new Tween(t,"_width", Strong.easeOut,t._width,415,1,true);
var tw2:Tween = new Tween(t,"_height", Strong.easeOut,t._height,304,1,true);
var tw3:Tween = new Tween(t,"_x", Strong.easeOut,t._x,Stage.width/2,1,true);
var tw4:Tween = new Tween(t,"_y", Strong.easeOut,t._y,Stage.height/2,1,true);
Das Spannende an dieser Funktion ist der Umstand, dass die Tweening-Klassen selbständig arbeiten, bis der angegebene Endwert erreicht wurde. Der Nachteil freilich besteht in der Tatsache, dass ein FlashPlayer 7 erforderlich ist. Für die Bitmap-Zwischenspeicherung bei der Spiegelbildmaske sogar den Flash Player 8.
Die Parameter im Tween-Befehl gliedern sich wie folgt: Tween(Instanz, Eigenschaft, Art des Tweenings, Ausgangswert, Endwert, Zeit in Sekunden). Für die Definition der Zeit in Frames muss die letzte Flagge aus „false“ gesetzt werden. Nun setzen wir das Großbild darüber:
platzhalter._x = 217;
platzhalter._y = 130;
Tauschen die Tiefe, damit es auf jeden Fall oben liegt:
platzhalter.swapDepths(t);
Verwenden die gleiche Größe:
platzhalter._width = 400;
platzhalter._height = 170;
Laden das passende Bild hinein:
loadMovie(t.grossesBild,platzhalter.grosserRahmen);
var s:Object = this;
tw.onMotionStopped = function()
und animieren zunächst den Alphakanal. Das erzeugt einen Scharfzeichnungseffekt.
{
var tw5:Tween = new Tween(platzhalter,"_alpha", Strong.easeOut,0,100,10,true);
Danach animieren wir auch noch die bislang gestaucht dargestellt Höhe zur proportional korrekten Darstellung.
tw5.onMotionStopped = function()
{
var tw6:Tween = new Tween(platzhalter,"_width", Strong.easeOut,platzhalter._width,400,1,true);
var tw7:Tween = new Tween(platzhalter,"_height", Strong.easeOut,platzhalter._height,300,1,true);
tw7.onMotionStopped = function()
{
Jetzt sensibilisieren wir das Objekt auf einen neuen Klickbefehl und schließen alle Klammern.
s._parent.onRelease = losGelassen;
}
}
}
}
}
}
Klickt der Nutzer jetzt auf das große Bild, wird die komplette Prozedur rückgängig gemacht. Der Platzhalter wird wieder unsichtbar, der gewählte Container kehrt an seinen Platz zurück und auch die anderen Container kommen wieder zum Vorschein.
function losGelassen()
{
delete this.onRelease;
for(var i=0;i<numOfItems;i++)
{
var t:MovieClip = home["bild_container"+i];
if(t != this)
{
var tw:Tween = new Tween(t,"_xscale", Strong.easeOut,0,t.theScale,1,true);
var tw2:Tween = new Tween(t,"_yscale", Strong.easeOut,0,t.theScale,1,true);
var tw3:Tween = new Tween(t,"_alpha", Strong.easeOut,0,100,1,true);
}else{
var tw:Tween = new Tween(t,"_xscale", Strong.easeOut,t._xscale,t.theScale,1,true);
var tw2:Tween = new Tween(t,"_yscale", Strong.easeOut,t._yscale,t.theScale,1,true);
var tw3:Tween = new Tween(t,"_x", Strong.easeOut,t._x,t.xPos,1,true);
var tw4:Tween = new Tween(t,"_y", Strong.easeOut,t._y,t.yPos,1,true);
var tw5:Tween = new Tween(platzhalter,"_alpha", Strong.easeOut,100,0,0.5,true);
tw.onMotionStopped = function()
{
for(var i=0;i<numOfItems;i++)
{
var t:MovieClip = home["bild_container"+i];
t.rahmen.onRollOver = Delegate.create(t.rahmen,over);
t.rahmen.onRollOut = Delegate.create(t.rahmen,out);
t.rahmen.onRelease = Delegate.create(t.rahmen,gedrueckt);
t.onEnterFrame = bewegung;
}
}
}
}
}
Sie haben es geschafft. Allerdings könnte es noch eine Menge Feinschliff benötigen, bis das Ergebnis stimmt. So gab es im Test einige Positionierungsprobleme mit dem Bilderclip und dem Spiegelbild.
Doch der Aufwand lohnt sich: Sie erhalten zum Schluss einen winzigen Flash-Film, der aus jedem beliebigen Bilderstapel eine schicke Diashow oder Navigationsleiste macht. Für Letzteres füllen Sie einfach die Funktion „gedrueckt“ mit einem URL-Aufruf und verzichten auf die Funktion „losGelassen“, etwa:
getURL("http://www.drweb.de", "_self");
Material zum Artikel:
- .FLA Datei
- Alles zum Download inkl. Demo (ZIP-Archiv 1,8 MB)
