Interaktive Fotoshow mit Flash erstellen

Ich glaube, das ist das erste Tutorial in meinem Blog zu Flash. Vielleicht bleibt es auch das einzige, vielleicht aber auch nicht – mal sehen.

Zunächst mal könnt ihr euch hier das Ergebnis anschauen:

1. Öffne ein neues Dokument mit vier Ebenen (Hintergrund, Fotos, Action) und füge deinen Hintergrund auf der Hintergrundebene ein.

2. Dann importierst du deine Fotos auf die Fotoebene. Vorher musst sicher stellen, dass du ihre Größe angepasst hast und ihnen evtl. einen Rahmen verpasst hast.

3. Nun konvertierst du jedes Bild in einen MovieClip. Achte dabei darauf, dass der Punkt im Feld “Registration” genau in der Mitte ist.

4. Nun können wir die Fotos noch mit einem Schatten verschönern. Dazu markierst du dein Foto und wählst Filters aus. Füge den neuen Filter Glow hinzu und setze Blur auf 10. Als Farbe wähltst du schwarz. Dies machst du für jedes deiner Fotos.

5. Um mit dem ActionScript loslegen zu können, brauchst du die Flash Klasse Tweener für ActionScript 3 (Unter Downloads: tweener_1_31_70_as3.zip) . Sie gibt dir die Möglichtkeit Objekte leicht über den ActionScript Code zu bewegen. Entzippe die den Ordner in deinem Projektordner.

6. Nun wählst du Frame 1 auf der Ebene Actions aus. Und dann gehts los:

Zu erst imporitieren wir Tweener.

und dann definieren wir einige Variablen um die Fotoshow später noch besser zu personalisieren.

import caurina.transitions.*;

var photoOriginX:Number = photo1.x;
var photoDestX:Number = photoOriginX + 200;
var speed:Number = .5;
var rotationRange:Number = 10;
var photoCount:Number = 3;
var easeType:String = "easeoutquad";

7. Nun fügen wir zwei Funktionen hinzu. Die erste tritt in Kraft wenn auf ein Bild geklickt wird. Sie bewegt das Foto zu Position x, die wir zuvor definiert haben. Außerdem dreht sie das Foto zu einem zufälligen Wert. Die zweite Funktion macht die Änderungen wieder rückgängig und bringt das Foto zurück auf seinen ursprünglichen Platz.

function photoSlideOut(e:Event):void
{
	e.target.parent.setChildIndex(e.target, e.target.parent.numChildren - 1);
	Tweener.addTween(e.target, {x: photoDestX, time: speed, transition: easeType, onComplete:photoSlideIn, onCompleteParams:[e.target]});
	Tweener.addTween(e.target, {rotation: Math.floor(Math.random()*(rotationRange*2))-rotationRange, time: speed*2, transition: easeType});
}

function photoSlideIn(p:MovieClip)
{
	p.parent.setChildIndex(p, 1);
	Tweener.addTween(p, {x: photoOriginX, time: speed, transition: easeType});

}

8. Nun zum letzten Schritt:

Die Fotos sollen unter die anderen Bilder geschoben werden und wieder in ihre ursprüngliche Form “rotiert” dazu verwendet ihr diesen code:

for(var i=1; i<=photoCount; i++)
{
	this["photo"+i].addEventListener(MouseEvent.MOUSE_DOWN, photoSlideOut);
	this["photo"+i].rotation =  Math.floor(Math.random()*(rotationRange*2))-rotationRange;
}

Mögliche Fehlerquellen:

In dem Code wird der Ausdruck “photo” verwendet. Wenn du deine Bilder nach der deutschen Variante “foto” bezeichnet hast, änder entweder den Code ab oder stelle den instanznamen auf “photo”(und dann die Zahl)

Solltest du einen Fehler beim imporiteren der Bilder haben, überprüfe, dass sich deine .fla bzw. .swf Datei auch in dem selben Ordner befindet wie die tweener Klasse!

Noch etwas: Der Code ist für 3 Fotos geschrieben! In meinem Beispiel (siehe Flash) benutze ich 5 Fotos, dafür müsst ihr der Variablen photoCount den jeweiligen Wert (in meinem Fall 5) zuweisen!

Vielleicht ist das auch interessant für dich:

• Einzigartige Layouts