Flash 8 transitions effects

Filters

All of this transitions works based on two BitmapData objects holding current and next images. In the example the images are embedded inside the movie, but you can load them externally if you need. The workflow is based on a setInterval that call one image after another, applying the effect selected from combobox. Each effect manipulate the base image copying little pieces to move around, except the dissolve effect, that use the build in pixelDissolve method.Here's the general setup:

import flash.display.* import flash.geom.* //Effects availables var effects:Array = new Array({label:"Pixels", data:"pixels"}, {label:"Disolve", data:"cuadritos"}, {label:"Turn out", data:"tiras"},{label:"Turn radial", data:"tiras"}) myCombo.dataProvider = effects //combo listener effectListener = {} effectListener.ref = this effectListener.change = function(evt:Object){ var action:String = evt.target.selectedItem.data this.ref.transition = action //set transition clearInterval(run) //re-create set Interval var t = (action=="cuadritos") ? 5000 : 2000 //Disolve needs more time //call inmediatly nextImg(this.ref) //set Interval run = setInterval(nextImg, 5000, this.ref) } myCombo.addEventListener("change", effectListener) //Gallery array, bitmaps on library var images:Array = new Array("img1", "img2", "img3", "img4", "img5") var current:Number = 0 //image counter //general holder a = BitmapData.loadBitmap(images[current]) w = a.width h = a.height container = this.createEmptyMovieClip("container", 1) container.createEmptyMovieClip("holder", 1) container.holder.attachBitmap(a, new Matrix()) container.holder._x = 10 container.holder._y = 25 //Set mask container.setMask(foto) //default transition transition = "pixels"; //Begin gallery showcase run = setInterval(nextImg, 3000, this) function nextImg(where){ where.current = ((where.current+1)>where.images.length-1)?0 : where.current+1 where[where.transition](where.current) }

Dissolve effect

The dissolve effect breaks the image in little squares that randomly fly out. Since the image size is 500 x 300 px, and the pieces 10 x 10 px, this effect use 1500 MovieClips and 1500 BitmapData objects. This is the most demanding effect, and you probably note that the first time it fires. First we divide the image in columns and rows (the image area should be divisible by the squares area), then use a couple of for loops for creating MovieClips, BitmapData objects, copy 10x 10 grids to this BitmapData objects and finally attach it to created MovieClips. We use fixed levels to replace MC and objects in each iteration of this filter (leaving old MC around will be overkill, that's because we don't use getNextHighestDepth) The direction of the fly out is random and we use a very simple MovieClip prototype for this movement (the Tween class could be a choice also) An array is used to store pointers to each created MC, so we can just use a for in loop to call the movement on each one. At the end of the method, we use dispose method to release memory, because I'm not sure if simply overwriting previous Bitmap object deletes previous data ... probably is not necessary.

//Disolve function cuadritos(nr){ //Bitmap data for next image var trans:BitmapData = BitmapData.loadBitmap(images[nr]) var pieces:Array = new Array() //array to store references to each piece var area:Number = 10 //default, should be divisible by image heigth/width var col:Number = w/area var fil:Number = h/area var p:Point = new Point(0, 0) var counter:Number = 150 // Copy image and show in MovieClips for(var c=0; c<col; c++){ for(var f=0; f<fil; f++){ //Create a bitmapData for each slot this[c+"_"+f] = new BitmapData(area, area, false, 0xFF0000) //Create a container and store in an array t = container.createEmptyMovieClip("MC"+c+"_"+f, counter++) pieces.push(t) //store a random velocity for transition t.velx = int(Math.random()*10)+5; t.vely = int(Math.random()*10)+5; //random direction if(int(Math.random()*2)>0) t.velx = -t.velx if(int(Math.random()*2)>0) t.vely = -t.vely //copy bitmap to MovieClip t.attachBitmap(this[c+"_"+f], 1) //calculate area to copy var px:Number = c*area var py:Number = f*area t._x = container.holder._x + px t._y = container.holder._y + py var zone:Rectangle = new Rectangle(px, py, area, area) //copy pixels on this area this[c+"_"+f].copyPixels(a, zone, p) } } //Load new image container.holder.attachBitmap(trans, 1) //Fires transition for(var i in pieces) pieces[i].linearMove(600) //copy next image a.draw(container.holder) //release memory trans.dispose() }

Turn out and Turn radial effects

Both methods are based on the same, the only difference is the final tween. For this, we copy pixels of source in rectangles the same width as the image and 10 pixels height. Note that we use (as in the previous filter) the Rectangle class. This effect creates 30 MovieClips and 30 BitmapData objects, one below the other covering all the image. After beginning moving the MovieClips, we load the new image so tween discover the next one. This is done using the draw method, a quick way of copying bitmap data from a MovieClip. The turn out effect rotates all rectangles to the same side (using a simple MovieClip prototype), making like a "page turn". If radial is selected, we flip horizontally some of the pieces, so rotation change on both sides.