Archive for the ‘Class’ Category
ActionScript 3.0: exploring GTween post 01: the ColorAdjustPlugin
if you want an easy access to adjust the colors of your Objects in Flash, why not consider the ColorAdjustPlugin in GTween.. well, I did, and here’s a couple of examples on how it works.
saturation:
taking saturation from 0 to -100 drags the colors from the Object,
this example shows how the saturation is changed from 0 to -100 in 3 seconds
and
this example shows how the saturation is changed from -100 to 0 in 3 seconds
but saturation ranges from -100 to 100 so
this example shows how the saturation is changed from 0 to 100 in 3 seconds
and for the sake of funkiness,
this example shows how the saturation repeatedly is changed from -100 to 100 and back in 1 second
contrast:
the contrasts of the colors in the picture can be taken to the extreme (100) og the opposite (-100), adding contrast intensifies the effect of saturation
this example shows how the saturation repeatedly is changed from -100 to 100 and back in 3 seconds – while contrast is changing from 0 to 100
possibilities:
the ColorAdjustPlugin handles tweening an Object based on the “brightness”, “contrast”, “saturation”, and/or “hue” tween values, so go on, try it for yourself.
ActionScript:
the ActionScript for the last example can be grabbed here
import com.gskinner.motion.GTween;
import com.gskinner.motion.plugins.ColorAdjustPlugin;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.MouseEvent;
public class GTweenColorAdjust extends MovieClip {
public var image:Sprite;
public var myButton:MovieClip;
public function GTweenColorAdjust() {
ColorAdjustPlugin.install();
myButton.mouseChildren = false;
myButton.buttonMode = true;
myButton.addEventListener(MouseEvent.CLICK, doTheAnimation, false, 0, true);
}
private function doTheAnimation(e:MouseEvent):void {
new GTween(image, 3, {saturation:-100, contrast:100}, {repeatCount:0, reflect:true});
}
}
}
more on GTween will surely follow..
btw, the amazed guy in the picture is my friend and former colleague Rasmus Mikkelsen.
Rasmus was also a part of this scary videobanner-project
showcase: New Years Eve 2009 invitation
invited our friends to a lovely new years eve with this online New Years Eve invitation
the invitation is build with ActionScript 3.0, using Tweener and TextAnim.
graphics are bought at ActiveDen, then slightly altered.
ActionScript 3.0: creating text animation with textures using TextAnim
when using TextAnim you can add any texture bitmap as pattern for the text.
check out an example of TextAnim animating text
yes, I know, impressive..
but what if replacing the blue color of the text with this texture?
check out an example of TextAnim animation text with a texture bitmap as pattern
the code for the texture example:
import flupie.textanim.TextAnimBlock;
import flupie.textanim.TextAnimTools;
import caurina.transitions.Tweener;
//set your text
myTextField.text = "TextAnim is truly amazing, it rocks rocks ROCKS! TextAnim is truly amazing, it rocks rocks ROCKS! TextAnim is truly amazing, it rocks rocks ROCKS! TextAnim is truly amazing, it rocks rocks ROCKS! TextAnim is truly amazing, it rocks rocks ROCKS!";
//Create a bitmap with library linkage instance.
var pattern:Bitmap = new Bitmap(new TABMD(0, 0));
//Configuration
var anim:TextAnim = new TextAnim(myTextField);
TextAnimTools.setPattern(anim, pattern);
anim.interval = 65;
anim.effects = myEffect;
anim.blocksVisible = false;
anim.start(300); //delay to start
function myEffect(block:TextAnimBlock):void {
block.alpha = 0;
block.x = block.posX + 80;
block.scaleX = block.scaleY = 8;
Tweener.addTween(block, {alpha:1, x:block.posX, scaleX:1, scaleY:1, time:.5, transition:"easeoutsine"});
}
new to TextAnim?
be sure to read this on the very basic usage of TextAnim:
ActionScript 3.0: creating text animation with textures using TextAnim
ActionScript 3.0: the TextAnim class; a great resource for animating text in dynamic TextFields
wow, this TextAnim class makes it so much easier to animate text inside of dynamic TextFields.
first of all, take a look at this example:
very basic use of the TextAnim class, example 01
in the example above, I’ve added a dynamic TextField to stage, instancenamed it “textfield”, embedded the characters, and added this code:
import flupie.textanim.TextAnimBlock;
import caurina.transitions.Tweener;
var anim:TextAnim = new TextAnim(textfield);
anim.animMode = TextAnim.ANIM_TO_LEFT;
anim.breakMode = TextAnim.BREAK_IN_WORDS;
anim.interval = 100;
anim.effects = effectFunction;
anim.blocksVisible = false;
anim.start();
function effectFunction(block:TextAnimBlock):void {
block.alpha = 0;
Tweener.addTween(block, {alpha:1, time:.5});
}
let’s try altering this animation.
let’s change the way the text in the TextField is shown.
right now it’s animated in from right to left, because we use this animMode:
anim.animMode = TextAnim.ANIM_TO_LEFT;
instead of this ANIM_TO_LEFT we can use any of these:
ANIM_TO_RIGHT
ANIM_TO_LEFT
ANIM_TO_CENTER
ANIM_TO_EDGES
ANIM_RANDOM
they are very self-explaining, we’ll go with the ANIM_RANDOM instead.
another thing to change is the breakMode of the content of the TextField.
now we’re using the BREAK_IN_WORDS, but all of these are selectable:
BREAK_IN_LETTERS
BREAK_IN_WORDS
BREAK_IN_LINES
again, no need to explain, we’ll go with the BREAK_IN_LETTERS instead.
last thing to change is the interval of the animation.
so far we’ve used 100 a the interval parameter.
this means that every 100th millisecond a word would be added in the right-to-left word animation above.
if we change this parameter to 60 in our new animation, a letter would be animated in randomly every 60th millisecond.
let’s see what these 3 changes do to our animation:
very basic use of the TextAnim class, example 02
and here’s the code for the second example:
import flupie.textanim.TextAnimBlock;
import caurina.transitions.Tweener;
var anim:TextAnim = new TextAnim(textfield);
anim.animMode = TextAnim.ANIM_RANDOM;
anim.breakMode = TextAnim.BREAK_IN_LETTERS;
anim.interval = 60;
anim.effects = effectFunction;
anim.blocksVisible = false;
anim.start();
function effectFunction(block:TextAnimBlock):void {
block.alpha = 0;
Tweener.addTween(block, {alpha:1, time:.5});
}
I’ll be doing more on this TextAnim class in the days to come, so keep an eye on this blog 
last; things to be aware of:
the text in the Textfield in the examples above is set to be selectable, but the text isn’t selectable, and the Textfield is set to show a border around it, but the border isn’t shown..
and again, remember to embed your characters!
ActionScript 3.0: the FadeGridPicture class
some old experiments left me wanting to be able to make that effect again, quickly.
so I ended up creating this FadeGridPicture Class.
shortly; this class accepts 5 parameters and returns a picture that fades in.
the parameters you can send to the class are:
- the picture
- number of tiles you want horizontally
- number of tiles you want vertically
- how long you want the fade to last
- if the order of the tile fading in is random or not.
in this example, I’ve added the following parameters to the Flash:
“paranormal.jpg”, 17, 12, 16, true
check out how the ActionScript 3.0 FadeGridPicture class reacts to these parameters here:
quite nice, right?
so lets change that last random parameter to true:
“paranormal.jpg”, 17, 12, 16, false
see what effect this change has on the FadeGripPicture class here:
now the last tile in the grid fades in over 16 sec, every other tiles nearer the upper left one quicker.
let’s have a last version of this.
this time we want a new picture, a quicker fade, fewer tiles and random fade-in order:
“paranormal.jpg”, 10, 9, 6, true
see this last example of the FadeGridPicture class here:
here’s the main class using the FadeGridPicture class:
import BitmapStuff;
import caurina.transitions.Tweener;
import flash.display.Sprite;
import flash.events.Event;
import MonsterDebugger;
public class BMDPictureContent extends Sprite {
private var _thePicture:String;
private var _hor:Number;
private var _ver:Number;
private var _speed:Number;
private var _random:Boolean;
private var _md:MonsterDebugger;
private var _bitmapStuff:BitmapStuff;
private var _myFGP:Sprite = new Sprite();
public function BMDPictureContent() {
//init();
}
public function init(somePicture:String, hor:Number, ver:Number, speed:Number, rand:Boolean):void {
_thePicture = somePicture;
_hor = hor;
_ver = ver;
_speed = speed;
_random = rand;
trace("_thePicture passed to the loaded flash = "+_thePicture);
_md = new MonsterDebugger(this);
setupBitmapPicture();
}
private function setupBitmapPicture():void {
_bitmapStuff = new BitmapStuff();
_bitmapStuff.FadeGridPicture(_thePicture, _hor, _ver, _speed, _random); //picture, hor, ver, speed, random
_bitmapStuff.addEventListener("fgpReady", fgpReady, false, 0, true);
}
private function fgpReady(e:Event):void {
//place it on stage!
trace("function fgpReady");
addChild(e.currentTarget._fgpSprite);
}
}
}
and the FadeGridPicture class:
import caurina.transitions.Tweener;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Loader;
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.Matrix;
import flash.geom.Rectangle;
import flash.geom.Point;
import flash.net.URLRequest;
public class BitmapStuff extends Sprite {
private var _fgp:String;
private var _hor:Number;
private var _ver:Number;
private var _speed:Number;
private var _random:Boolean;
private var _fgpHolder:Loader;
public var _fgpSprite:Sprite = new Sprite();;
public function BitmapStuff() {
//
}
//MODTAG ET BILLEDE, SKAB ET FADEGRID OG RETURNER MOVIECLIP
public function FadeGridPicture(s:String, hor:Number, ver:Number, speed:Number, rand:Boolean):Sprite {
_fgp = s;
_hor = hor;
_ver = ver;
_speed = speed;
_random = rand;
loadPicture();
return _fgpSprite;
}
private function loadPicture() {
_fgpHolder = new Loader();
_fgpHolder.load(new URLRequest(_fgp));
_fgpHolder.contentLoaderInfo.addEventListener(Event.COMPLETE, setupFadeGridPicture);
}
private function setupFadeGridPicture(e:Event):void {
trace("_fgpHolder.width = "+_fgpHolder.width);
trace("_fgpHolder.height = "+_fgpHolder.height);
var copywidth:Number = (_fgpHolder.width / _hor);
var copyheight:Number = (_fgpHolder.height / _ver);
var placeringX:Number = 0; //placeringen på x hvor mit nye billede skal tegnes
var placeringY:Number = 0; //placeringen på y hvor mit nye billede skal tegnes
var xBilledet:Number = 0;
var yBilledet:Number = 0;
var myTime:Number;
var i:Number;
var matrix:Matrix = new Matrix();
var bitmap:BitmapData = new BitmapData(_fgpHolder.width, _fgpHolder.height, true, 0);
bitmap.draw(_fgpHolder, new Matrix());
//
for (i = 0; i < (_hor * _ver + 1); i++) {
trace("i = "+i);
var copy:BitmapData = new BitmapData(copywidth, copyheight, true, 0);
var rect:Rectangle = new Rectangle(xBilledet, yBilledet, copywidth, copyheight);
var pt:Point = new Point(0, 0);
copy.copyPixels(bitmap, rect, pt);
var bm2:Bitmap = new Bitmap(copy);
_fgpSprite.addChild(bm2);
bm2.alpha = 0;
if(_random) {
myTime = Math.random()*_speed;
} else {
myTime = _speed / (_hor * _ver) * (i - 1);
}
Tweener.addTween(bm2, {alpha:1, time:myTime, transition:"easeInQuad"});
bm2.x = placeringX;
bm2.y = placeringY;
xBilledet = xBilledet + copywidth;
placeringX = placeringX + copywidth;
if (i > 0 && (i % _hor) == 0) {
//disse tal har med de nye billeders placering at gøre
xBilledet = 0;
yBilledet = yBilledet + copyheight;
//
placeringX = 0;
placeringY = copyheight * (i / _hor);
}
}
//when ready, dispatch the event
dispatchEvent(new Event("fgpReady"));
}
}
}
the picture used in these examples is from the forthcoming horror movie: Paranormal Activity.
a movie I look very much forward too!
if interested in other BitmapData-experiments, please read:
ActionScript 3.0: creating dynamic background using BitmapData
ActionScript 3.0: the Mosaic Class, different tests
ActionScript 3.0: bitmap.smoothing
ActionScript 3.0: the Mosaic Class, different tests
randomly surfing I stumbled upon this Mosaic.as class written by Julian Kussman.
in Julians own words, this class “allows you to create a pixellated copy of any display object”.
cool.
so I had just had to play around with it.
here’s what I came up with:
the simplest version is simply a question of adding a DisplayObject to stage, and then pixelating it using the class:
check out the pixelated picture here
pixelation can be modified using the .pixelSize parameter, here’s a version with bigger pixels:
check out the even more pixelated picture here
using a Timer along with the class, the pixelation can be done over time:
check out pixelation over time here
not sure how to use a Timer?
then check out these earlier posts on using Timers.
how to use a Timer, part 1
how to use a Timer, part 2
back to the Mosaic Class, when using a Timer de-pixelation can be achieved the same way too:
check out de-pixelation over time here
Tweening the alpha of a pixelated picture on top of a normal picture would look like this:
using a normal picture and a pixelated picture together
as this Class works on any displayObject, you can load your picture dynamically using a Loader, and just pixelate the Loader.
nice!
so I decided to load a large picture, slice it in 25 parts and place it on stage.
on top of each part I put the pixelated version of the picture, and added some interaction, so that every part could be revealed if the pixelated version was “wiped” away.
check out the 25-part pixelated, interactive picture here
the entire code for this last example:
import caurina.transitions.Tweener;
var _placeringX:Number = 0;
var _placeringY:Number = 0;
var _myDelay:Number = 0;
var _bitmap:BitmapData = new BitmapData(1000, 750, true, 0);
var matrix:Matrix = new Matrix();
var rectDrawing:Sprite = new Sprite();
var _loader:Loader = new Loader();
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, picLoaded);
_loader.load(new URLRequest("1000x750.jpg"));
function picLoaded(e:Event):void {
_bitmap.draw(_loader, new Matrix());
var i:Number = 0;
while (i < 25) {
var copy:BitmapData = new BitmapData(200, 150, true, 0);
var rect:Rectangle = new Rectangle(_placeringX, _placeringY, 200, 150);
var pt:Point = new Point(0, 0);
copy.copyPixels(_bitmap, rect, pt);
var bm2:Bitmap = new Bitmap(copy);
bm2.x = _placeringX;
bm2.y = _placeringY;
_myDelay = _myDelay + 0.1;
addChild(bm2);
var myMoz:Mosaic = new Mosaic(bm2);
myMoz.x = _placeringX;
myMoz.y = _placeringY;
var _pixelSize = 16;
myMoz.addEventListener(MouseEvent.MOUSE_OVER, fadeMozOut);
myMoz.addEventListener(MouseEvent.MOUSE_OUT, fadeMozIn);
addChild(myMoz);
myMoz.pixelSize = _pixelSize;
myMoz.render();
_placeringX = _placeringX + 200;
i++;
if (i == 5 || i == 10 || i == 15 || i == 20 || i == 25 ) {
_placeringX = 0;
_placeringY = 150 * (i / 5);
}
}
}
function fadeMozOut(e:MouseEvent):void {
Tweener.addTween(e.target, {alpha:0, time:0.8});
}
function fadeMozIn(e:MouseEvent):void {
Tweener.addTween(e.target, {alpha:1, time:0.8, delay:6});
}
hope this was useful, comments or other examples are very welcome!
ActionScript 3.0: ExtractBox Class version 2
a while ago I had found an .as-file that I moderated, so I could use it as I wanted on any regular quadrilateral picture.
see what I ended up with here:
ExtractBox.as version 1
now I’ve worked a bit more on this class so that it works on any rectangular picture, and have ended up with this new version:
check out version 2 of the ExtractBox.as file on a passport photo shoot of my 2 youngest kids here:
the entire code for making this happen:
var eb1:ExtractBox = new ExtractBox("600x450.jpg", 10, 10, 450, 600, 4, 0x000000, 0xFFFFFF);
addChild(eb1);
import caurina.transitions.properties.ColorShortcuts;
import caurina.transitions.Tweener;
import flash.display.Graphics;
import flash.display.Loader;
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLRequest;
public class ExtractBox extends Sprite {
private var _myImg:Loader = new Loader();
private var _imageHolder:Sprite;
private var _borderBox:Shape;
private var _interactionBox:Shape;
private var _interactiveBox:Sprite;
private var _maskBox:Shape;
private var _scale:Number;
private var _mySize:Number;
private var _myHeight:Number;
private var _myWidth:Number;
private var _myBorder:Number;
private var _myURL:String;
private var _myOffColor:Number;
private var _myOnColor:Number;
function ExtractBox(theURL:String, theX:Number, theY:Number, theHeight:Number, theWidth:Number, theBorder:Number, theOffColor:Number, theOnColor:Number) {
_myURL = theURL;
//_mySize = theSize;
_myHeight = theHeight;
_myWidth = theWidth;
_myBorder = theBorder;
_myOffColor = theOffColor;
_myOnColor = theOnColor;
x = theX+(_myWidth/2);
this.y = theY+(_myHeight/2);
setup_imageHolder();
draw_borderBox();
drawPictureBox();
draw_interactionBox();
add_imageHolder();
ColorShortcuts.init();
_scale = _maskBox.scaleX;
}
private function onPictureBoxOver(e:MouseEvent):void {
Tweener.addTween(_borderBox, {_color:_myOnColor, time:1.6});
Tweener.addTween(_maskBox, {scaleX:0.95, scaleY:0.95, time:1.6});
}
private function onPictureBoxOut(e:MouseEvent):void {
Tweener.addTween(_borderBox, {_color:_myOffColor, time:1});
Tweener.addTween(_maskBox, {scaleX:1, scaleY:1, time:1});
}
private function setup_imageHolder():void {
_imageHolder = new Sprite();
}
private function draw_borderBox():void {
_borderBox = new Shape();
_borderBox.graphics.beginFill(_myOffColor);
_borderBox.graphics.drawRoundRect(-(_myWidth/2),-(_myHeight/2),_myWidth,_myHeight,0);
_borderBox.graphics.endFill();
_imageHolder.addChild(_borderBox);
}
private function drawPictureBox():void {
_myImg.load(new URLRequest(_myURL));
_myImg.x = -(_myWidth/2)-2;
_myImg.y = -(_myHeight/2)-2;
_imageHolder.addChild(_myImg);
_maskBox = new Shape();
_maskBox.graphics.beginFill(0xFF9999);
_maskBox.graphics.drawRoundRect(-(_myWidth/2)+_myBorder,-(_myHeight/2)+_myBorder,(_myWidth-(_myBorder*2)),(_myHeight-(_myBorder*2)),0);
_maskBox.graphics.endFill();
_imageHolder.addChild(_maskBox);
_myImg.mask = _maskBox;
}
private function draw_interactionBox():void {
_interactionBox = new Shape();
_interactionBox.graphics.beginFill(0x000000);
_interactionBox.graphics.drawRoundRect(-(_myWidth/2),-(_myHeight/2),_myWidth,_myHeight,0);
_interactionBox.graphics.endFill();
_interactionBox.alpha = 0;
_interactiveBox = new Sprite();
_interactiveBox.addChild(_interactionBox);
_imageHolder.addChild(_interactiveBox);
_interactiveBox.addEventListener(MouseEvent.MOUSE_OVER, onPictureBoxOver);
_interactiveBox.addEventListener(MouseEvent.MOUSE_OUT, onPictureBoxOut);
}
private function add_imageHolder():void {
addChild(_imageHolder);
}
}
}
ActionScript 3.0: mouseOver effect on loaded jpg
so, while randomly browsing through topics at FlashForum.dk I stumbled upon this .as-file, and I had to try it out. I instantly fell for the idea, and I made some adjustment to the .as-file, so that it fit my temper.
all pictures are by Dimitri Castrique, thanks for the wonderful pictures Dimitri.
I like this very much.
it’s so very simple, it simply displays a picture with a simple frame that interacts on MouseOver/Out.
but it’s so smooth and exactly the kind of eyecandy that takes an ActionScript project from average to good.
here’s the ActionScript making it all happen:
import ExtractBox;
var eb1:ExtractBox = new ExtractBox("dimitri_c01.jpg", 0, 0, 300, 4, 0x000000, 0xFFFFFF);
var eb2:ExtractBox = new ExtractBox("dimitri_c02.jpg", 310, 0, 300, 4, 0x000000, 0xFFFFFF);
var eb3:ExtractBox = new ExtractBox("dimitri_c03.jpg", 620, 0, 300, 4, 0x000000, 0xFFFFFF);
var eb4:ExtractBox = new ExtractBox("dimitri_c04.jpg", 0, 310, 300, 4, 0x000000, 0xFFFFFF);
var eb5:ExtractBox = new ExtractBox("dimitri_c05.jpg", 310, 310, 300, 4, 0x000000, 0xFFFFFF);
var eb6:ExtractBox = new ExtractBox("dimitri_c06.jpg", 620, 310, 300, 4, 0x000000, 0xFFFFFF);
addChild(eb1);
addChild(eb2);
addChild(eb3);
addChild(eb4);
addChild(eb5);
addChild(eb6);
import caurina.transitions.Tweener;
import flash.display.Graphics;
import flash.display.Loader;
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLRequest;
public class ExtractBox extends Sprite {
private var _myImg:Loader = new Loader();
private var _imageHolder:Sprite;
private var _borderBox:Shape;
private var _interactionBox:Shape;
private var _interactiveBox:Sprite;
private var _maskBox:Shape;
private var _scale:Number;
private var _mySize:Number;
private var _myBorder:Number;
private var _myURL:String;
private var _myOffColor:Number;
private var _myOnColor:Number;
function ExtractBox(theURL:String, theX:Number, theY:Number, theSize:Number, theBorder:Number, theOffColor:Number, theOnColor:Number) {
_myURL = theURL;
_mySize = theSize;
_myBorder = theBorder;
_myOffColor = theOffColor;
_myOnColor = theOnColor;
x = theX+(_mySize/2);
this.y = theY+(_mySize/2);
setup_imageHolder();
draw_borderBox();
drawPictureBox();
draw_interactionBox();
add_imageHolder();
_scale = _maskBox.scaleX;
}
private function onPictureBoxOver(e:MouseEvent):void {
Tweener.addTween(_borderBox, {_color:_myOnColor, time:1.6});
Tweener.addTween(_maskBox, {scaleX:0.95, scaleY:0.95, time:1.6});
}
private function onPictureBoxOut(e:MouseEvent):void {
Tweener.addTween(_borderBox, {_color:_myOffColor, time:1});
Tweener.addTween(_maskBox, {scaleX:1, scaleY:1, time:1});
}
private function setup_imageHolder():void {
_imageHolder = new Sprite();
}
private function draw_borderBox():void {
_borderBox = new Shape();
_borderBox.graphics.beginFill(_myOffColor);
_borderBox.graphics.drawRoundRect(-(_mySize/2),-(_mySize/2),_mySize,_mySize,0);
_borderBox.graphics.endFill();
_imageHolder.addChild(_borderBox);
}
private function drawPictureBox():void {
_myImg.load(new URLRequest(_myURL));
_myImg.x = -(_mySize/2)-2;
_myImg.y = -(_mySize/2)-2;
_imageHolder.addChild(_myImg);
_maskBox = new Shape();
_maskBox.graphics.beginFill(0xFF9999);
_maskBox.graphics.drawRoundRect(-(_mySize/2)+_myBorder,-(_mySize/2)+_myBorder,(_mySize-(_myBorder*2)),(_mySize-(_myBorder*2)),0);
_maskBox.graphics.endFill();
_imageHolder.addChild(_maskBox);
_myImg.mask = _maskBox;
}
private function draw_interactionBox():void {
_interactionBox = new Shape();
_interactionBox.graphics.beginFill(0x000000);
_interactionBox.graphics.drawRoundRect(-(_mySize/2),-(_mySize/2),_mySize,_mySize,0);
_interactionBox.graphics.endFill();
_interactionBox.alpha = 0;
_interactiveBox = new Sprite();
_interactiveBox.addChild(_interactionBox);
_imageHolder.addChild(_interactiveBox);
_interactiveBox.addEventListener(MouseEvent.MOUSE_OVER, onPictureBoxOver);
_interactiveBox.addEventListener(MouseEvent.MOUSE_OUT, onPictureBoxOut);
}
private function add_imageHolder():void {
addChild(_imageHolder);
}
}
}
hope you like it.
ActionScript 3.0: loading an Array of jpg’s
again and again I find myself adding jpg’s into an Array, loading the pictures and then adding each Loader into a new Array. so I thought; “hey! why not make this a bit easier in the future?”.
so I dared making this .as-file, that would accept an Array of .jpg’s and return an Array of Loaders containing the loaded .jpg’s.
here’s how it’s set up:
main as-file / PictureArrayToLoaderArray.as
import flash.display.Sprite;
import flash.events.Event;
import ArrayStuff;
public class PictureArrayToLoaderArray extends Sprite {
private var _pictureArray:Array = ["testpic01.jpg", "testpic02.jpg", "testpic03.jpg"];
private var _arrayStuff:ArrayStuff;
public function PictureArrayToLoaderArray() {
init();
}
public function init():void {
_arrayStuff = new ArrayStuff();
_arrayStuff.convertToLoaders(_pictureArray);
_arrayStuff.addEventListener("loaderArrayReady", loaderArrayReady);
}
private function loaderArrayReady(e:Event):void {
_pictureArray = e.currentTarget._loaderArray;
trace(_pictureArray)
}
}
}
and here the ArrayStuff.as file:
import flash.display.Bitmap;
import flash.display.Loader;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.net.URLRequest;
public class ArrayStuff extends Sprite {
private var _loader:Loader;
public var _loaderArray:Array = [];
private var _numLoadedItems:Number = 0;
private var _arrayLength:Number;
public function ArrayStuff() {
//
}
public function convertToLoaders(a:Array):Array {
trace("a = "+a);
var i:Number = 0;
_arrayLength = a.length;
while(i < _arrayLength) {
_loader = new Loader();
_loader.alpha = 1;
_loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, showLoading);
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, doneLoading);
_loader.load(new URLRequest(a[i]));
_loaderArray.push(_loader);
i++
}
return _loaderArray;
}
private function showLoading(e:Event):void {
trace("preloading");
}
private function doneLoading(e:Event):void {
var bit:Bitmap = e.target.content
if(bit != null){
bit.smoothing = true;
}
_numLoadedItems++;
if(_numLoadedItems == _arrayLength){
_loader.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS, showLoading);
_loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, doneLoading);
dispatchEvent(new Event("loaderArrayReady"));
}
}
}
}
here’s a short explanation:
the _pictureArray contains the .jpg’s.
the _arrayStuff.convertToLoaders-function handles the loading of the jpg’s in the _pictureArray.
an eventListener awaits the custom Event loaderArrayReady.
when the loaderArrayReady function is fired an array of Loaders is returned and is set equal to the _pictureArray.
all files can be downloaded here:
any ideas of improvement?