CITYCLOUDS

Hello.

german version

To create this nice fragmentation effect like the one from Andy Foulds`s homepage, i have written this little AS3 Class. The first part of the tutorial will mainly focus on how to get this effect running. The second part shows a way to get an arbitrary DisplayObject onto the fragmentation layer to create a cooler transition effect.

The example code uses a DocumentClass wich is just executed by “FragmentExample.fla”. So don´t be confused if you do not find any AS3 in the *.fla file.

To start the effect from Flash you have to follow these steps:

1. Import Packages:

1

import de.ehrhardt.fragment.*;

2.  Create new fragmentation layer:

2
3
4
5
6
7
8
9
10
11

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. Define RectSize:

13

your_mc

…should be replaced from your DisplyObject´s instance name. You have to take care that the dimension

s of the object are mapped exactly, because this feature is not introduced here. E.g. a MC with dimension of 220×110 pixels should have rectSize = 10 because of incorrect covering.

4. Set Frame Rate:

More than 25 Frames per second are recommended for proper animations. You find it in Flash under the designation “Properties”.

(optional:)
5. Manual effect start, e.g. after a MouseClick Event:

14
15
16
17
18
19
20

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

In addition you have to set the variable startNow to “false” :

21

var startNow:Boolean = false;

Done.
We have finished the first part. How to put an image onto the Fragmentation-Layer to create a nicer transition, i´ll show in the next part.

Download Sources

•