english version

Um hübsche Zersplitterungs-Effekte  wie beispielsweise auf Andy Foulds`s Homepage hinzubekommen, habe ich eine AS3 Klasse entwickelt um deren Beschreibeung es hier im ersten Teil gehen wird. Es handelt sich jetzt eher um eine Anleitung als um ein ausführliches Programming Tutorial. Der zeite Teil wird allerdings in ebendiese Richtung gehen, da wir uns dann dem Problem stellen, wie man ein beliebiges DisplayObject (Bild/MovieClip/etc.) auf den Fragmentation Layer legt um dieses dann ansprechend zersplittern zu lassen.


In den Sources verwende ich eine DocumentClass, die einfach von der “FragmentExample.fla” gestartet wird, also nur nicht wundern wenn in der *.fla kein Code

Zum starten des Effektes aus Flash heraus sind ein paar notwendige Dinge anzugeben:


1. Package importieren:

1

import de.ehrhardt.fragment.*;

2.  Einen neuen Fragmentation Layer erstellen:

1
2
3
4
5
6
7
8
9
10

var rectSize:int = 10;
var updateRate:int  = 30;
var fxDirection:String  = "left";
var bgColor:int = 0xCCCCCC;
var borderColor:int = 0xCCCCCC;
var borderSize:Number = 0.2;
var startNow:Boolean = true;
 
var fragLayer:FragmentLayer = new FragmentLayer (your_mc, rectSize, updateRate,
                               fxDirection, bgColor, borderColor, borderSize, startNow);

3. RectSize definieren:

1

your_mc

…durch den gewünschten Instanznamen ersetzen. Es sollte darauf geachtet werden, die Dimension des DisplayObjects genau zu mappen, da ich diese Funktion hier nicht vorstelle. Als Beispiel: für einen MC mit 220×110 sollte die rectSize = 10 betragen, da es sonst zu unvollständigen überdeckungen kommt.


4. Frame Rate setzen:

Mehr als 25 Bilder pro Sekunde sind für eine flüssige Animation empfehlenswert. Zu finden in Flash unter “Properies” bzw. “Eigenschaften”.


(Optional:)
5. Effekt manuell starten, z.B. nach MouseClick Event:

1
2
3
4
5
6
7

your_mc.addEventListener (MouseEvent.CLICK, clickActionHandler);
 
function clickActionHandler (e:Event):void
{
    fragLayer.startEffect();
    e.target.removeEventListener(MouseEvent.CLICK, clickActionHandler);
}

Dazu noch die Variable startNow auf “false” setzen:

1

var startNow:Boolean = false;

Fertig.
Damit ist der erste Teil abgeschlossen. Wie man nun ein Bild auf den Fragmentation-Layer legt um eine nette Transition zu erzeugen, erleutere ich genauer im 2 Teil.


Download Sources

Bookmark It

Hide Sites