Flash ActionScript v 2.0 & 3.0

2010-01-20T02:42:00.001-08:00

2010-01-10T20:58:00.000-08:00

2009-07-12T23:15:00.001-07:00

Creating Dynamic Tween Variables In a Timed Sequence

2009-07-09T00:36:00.000-07:00

Say you want to have a number of tweens perform in a sequence but you don't want to type out all the tweens. Here is how you do it using a timer to animate some menus one at a time with a delay of 50 milliseconds between each:

import fl.transitions.Tween;

import fl.transitions.easing.*;

import fl.transitions.TweenEvent;

var timerCounter:uint=0;

var theTimer:Timer=new Timer(50,6);/

theTimer.start();

theTimer.addEventListener(TimerEvent.TIMER, display);

function display(e:TimerEvent):void {

timerCounter++;

var thisLoopNode:Object=menu_mc.getChildByName("node"+timerCounter);

this["tweenx"+timerCounter]=new Tween(thisLoopNode,"x",Regular.easeOut,0,100,1,true);

this["tweeny"+timerCounter]=new Tween(thisLoopNode,"y",Regular.easeOut,0,timerCounter*10,1,true);

this["tweenalpha"+timerCounter]=new Tween(thisLoopNode,"alpha",Regular.easeOut,0,1,1,true);

}

Loading external images and reacting to load complete and smoothing bitmap

2009-07-09T00:34:00.001-07:00

var slideLoader:Loader=new Loader();

csHostRef.addChild(slideLoader);

slideLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, slidePreloaded);

slideLoader.load(new URLRequest(xml.slide[currentSlide].mediaURL));

function slidePreloaded(){

//do stuff here now that pict has loaded

//...and this will smooth the bitmap so it doesnt look crappy scaling

var smoother_bm=Bitmap(slideLoader.content);

smoother_bm.smoothing=true;

}

Slideshow with autoplay and reset delay

2009-07-08T21:52:00.001-07:00

This code starts with a long pause then starts looping through images. If the user interacts with the slideshow, the timer is reset then starts playing again later if the user hasnt interacted.

//setup---------------------------------------------

var resetTime:uint=5000;

var pauseBetweenSlides:uint=5000;

var slideCounter:uint=1;

var prevSlide:uint=0;

var startShowTimer:Timer=new Timer(resetTime,1);

startShowTimer.addEventListener(TimerEvent.TIMER, setUpTimer);

var slideShowTimer:Timer=new Timer(pauseBetweenSlides,0);

slideShowTimer.addEventListener(TimerEvent.TIMER, autoAdvance);

//auto advance

function autoAdvance(e:TimerEvent):void {

nexttSlide();

}

//next

function nexttSlide():void {

prevSlide=slideCounter;

slideCounter++;

if (slideCounter==6) {

slideCounter=1;

}

goToSlide();

}

//prev

function prevvSlide():void {

prevSlide=slideCounter;

slideCounter--;

if (slideCounter==0) {

slideCounter=5;

}

goToSlide();

}

//display next slide and hide previous

function goToSlide():void {

slideshow_mc["slide"+slideCounter+"_mc"].gotoAndPlay("show");

if (prevSlide>0) {

slideshow_mc["slide"+prevSlide+"_mc"].gotoAndPlay("hide");

}

//pause slideshow and reset timer

function resetTimer():void {

slideShowTimer.stop();

startShowTimer.reset();

startShowTimer.start();

}

//called when reset pause is finished

function setUpTimer(e:TimerEvent):void {

startShowTimer.reset();

slideShowTimer.start();

}

resetTimer();

goToSlide();

//Controls--------

function showControls():void {

slideShowPrev_mc.gotoAndPlay("show");

slideShowNext_mc.gotoAndPlay("show");

}

function hideControls():void {

slideShowPrev_mc.gotoAndPlay("hide");

slideShowNext_mc.gotoAndPlay("hide");

}

slideShowNext_mc.addEventListener(MouseEvent.CLICK, invokeNextSlide);

function invokeNextSlide(e:MouseEvent):void {

resetTimer();

nexttSlide();

}

slideShowPrev_mc.addEventListener(MouseEvent.CLICK, invokePrevSlide);

function invokePrevSlide(e:MouseEvent):void {

resetTimer();

prevvSlide();

}

AS3 full screen mode

2009-07-08T03:49:00.000-07:00

Heres a function to toggle full screen mode using AS3. Note that in fullscreen mode that only the "non-printing" keys work (arrows, shift, etc).

function toggleFullScreenMode(e:MouseEvent):void {

if (viewingFullScreen==false) {

viewingFullScreen=true;

navsNorthMultiPage_mc.tween_mc.eastButtons_mc.fullScreenAnim_mc.gotoAndPlay("full");

navsSouthMultiPage_mc.tween_mc.eastButtons_mc.fullScreenAnim_mc.gotoAndPlay("full");

stage.displayState="fullScreen";

} else {

viewingFullScreen=false;

navsNorthMultiPage_mc.tween_mc.eastButtons_mc.fullScreenAnim_mc.gotoAndPlay("out");

navsSouthMultiPage_mc.tween_mc.eastButtons_mc.fullScreenAnim_mc.gotoAndPlay("out");

stage.displayState="normal";

}

Blur Using AS3

2009-07-08T03:48:00.000-07:00

var blur:BlurFilter = new BlurFilter();

blur.blurX=20;

blur.blurY=20;

blur.quality=BitmapFilterQuality.LOW;

displayObjectToBlur_mc.filters=[blur];

2009-07-07T23:30:00.000-07:00

Flash Mouse Trailer with Stars

This Flash and ActionScript 3 tutorial shows you how to create a cool mouse trail effect with stars. Check out the final result! The look and feel is very easy to change to fit your needs.

Note: You need TweenMax in order to complete this tutorial.

Setting up the environment

1. Create a new Flash document of size 300×300.

2. Using the PolyStar tool , draw a star without any stroke. Use the following settings (fill color doesn’t matter).

3. Make the star of size 10×10.

4. Convert the star to a movie clip. Name it “My Star” and set the registration point to the center. Linkage the movie clip to a class named “MyStar”.

5. Give the star movie clip an instance name of “myStar”.

Moving to ActionScript

6. In the actions panel, type the following ActionScript code.

//Import TweenMax import gs.*;   //Hide the mouse Mouse.hide();   //The starting color var currentColor:uint = 0xffffff;   //This timer calls the changeColor() function every 0.5 seconds var colorTimer:Timer = new Timer(500, 0); colorTimer.addEventListener(TimerEvent.TIMER, changeColor); colorTimer.start();   //This timer calls the createStar() method every 0.01 seconds var trailTimer:Timer = new Timer(10, 0); trailTimer.addEventListener(TimerEvent.TIMER, createStar); trailTimer.start();   //Add an ENTER_FRAME listener so we can move the myStar addEventListener(Event.ENTER_FRAME, moveStar);   //This function is called in each frame function moveStar(e:Event):void {    //Set the myStar coordinates to match with the mouse coordinates  myStar.x = mouseX;  myStar.y = mouseY; }   //This function is called by the colorTimer function changeColor(e:Event):void {    //Assign a new random color  currentColor = Math.random() * 0xffffff;    //Tween the myStar to the currentColor  TweenMax.to(myStar, 0.2, {tint: currentColor});     }   //This function is called by the trailTimer function createStar(e:Event):void {    //Create  a new star  var newStar:MyStar = new MyStar();    //Set the newStar coordinates to match with the myStar coordinates  newStar.x = myStar.x;  newStar.y = myStar.y;    //Calculate random target x and y coordinates  var targetX:Number = newStar.x + Math.random() * 64 - 32;  var targetY:Number = newStar.y + Math.random() * 64 - 32;    //Calculate a random rotation  var targetRotation = Math.random() * 360 - 180;    //Add the newStar to the stage  addChild(newStar);    /*  Now we tween different properties of the newStar mc using TweenMax.  I call the "TweenMax.to()" multiple times so it's easier to read this code.  All of this could also be accomplished with one line.  Note that we call the function removeStar() when the tweens are finished.  */  TweenMax.to(newStar, 3, {alpha: 0, scaleX: 5, scaleY: 5, tint: currentColor});  TweenMax.to(newStar, 3, {rotation: targetRotation, x: targetX, y: targetY});  TweenMax.to(newStar, 3, {blurFilter:{blurX:3, blurY:3}, onComplete: removeStar, onCompleteParams: [newStar]});  }   //This function is called when a star's tween is finished function removeStar(star:MyStar):void {    //Remove the star from the stage  removeChild(star); }

7. We are done, test your movie! I hope enjoyed this Flash and ActionScript 3 tutorial and learned something new from it!

Download .fla

2009-07-07T23:28:00.000-07:00

Create a Dynamic Slideshow with ActionScript 3.0 and XML

byNAuman

In this screencast I'll show you how to create a dynamic slideshow using ActionScript 3.0 and how to grab the images from an xml file. We'll keep the FLA empty except for the path to our Document Class and also create a custom class that will act as the engine for the slideshow. This is a file you can use over and over again, I hope you find it useful!

Author: Nauman

View Screencast

2009-07-07T23:27:00.001-07:00

Controlling the Timeline with ActionScript 3

CATEGORIES: Flash, Tutorials

Flash CS3 allows you to create either an ActionScript 2 or ActionScript 3 document. There are a number of ways ActionScript 3 is different from version 2. One of the first changes designers is no longer being able to attach a script to a button instance. In the following steps you’ll learn how to control buttons using ActionScript 3 while creating a guide for selecting perennials.

Step 1. Create a Flash Document

Launch Flash. On the welcome screen click Flash File (ActionScript 3.0). It’s located under the Create New column. Choose Window > Workspace > Default to open the panels you’ll be using. In the Properties panel enter 15 in the Frame Rate field. Click the Background color swatch and select black for the background color.

Step 2. Setting up the Timeline

Insert two layers in the Timeline by clicking the Insert Layer button. Starting with the top layer, name the layers: actions, flowers, and text. Extend the Timeline by selecting Frame 25 in all of the layers and pressing F5.

In the actions layer insert a Keyframe (F6) in Frames 2, 5, 12, and 20. Next, starting with Frame 2, label each frame respectively: hut, lily, paradise, and cone. To label a frame first select it. In the Properties panel enter the name of the label in the Frame Label field.

Step 3. Creating Symbols

The flower and hut images were created using the built-in symbols from Illustrator CS3. You can draw your own images in Flash or import them from another program. If you choose to import images, select the flowers layer and choose File > Import to Stage. If you choose to draw your images select the flowers layer before you start drawing. Draw a hut or building and three different flowers. The flowers used in the tutorial are cone, lily, and paradise.

Next, convert all of the images to a Button symbol. Start by selecting a flower and pressing F8 to open the Convert to Symbol dialog. Enter cone in the Name field, select Button for the type and click OK. Double-click the symbol to edit its Timeline. Insert a Keyframe (F6) in the Hit frame. Using the Rectangle tool (R) specify the hit area by drawing a filled rectangle over the flower. Return to the Main Timeline by clicking the Scene 1 button. Repeat this process to convert the rest of the images to buttons.

Step 4. Naming Button Instances

An Instance must have a name before Actionscript can be used to control it. The Instance names for the flowers are cone, lily, and paradise. If you choose to use different names, you’ll need to use the Instance names you assigned when you add Actionscript.

On the Stage select the coneflower button. In the Properties panel enter “cone” in the Instance name field. Select the paradise flower button and enter “paradise” in the Instance name field. Repeat the process for the lily and hut buttons. Arrange the buttons on the Stage as seen in Step 2’s graphic.

Step 5. Adding Text

Move the Playback head to Frame 1. Click the text layer to select it. Use the Text tool (T) and select a font and color from the Properties panel. Using the font and color of your choice type the name of your garden center and suggest the user try some perennials.

Step 6. Arranging the Screens

Move the Playback head to Frame 5 (lily). Select both the flowers and text layers and insert a Keyframe(F6) Arrange the buttons on the Stage as shown in the graphic. Rewrite the text on the text layer to describe the lily. Place an Instance of the lily button on the right side of the screen. With button still selected choose Graphic from the dropdown menu in the Properties panel.

Repeat this procedure to change the contents in Frame 12 (paradise) and frame 20 (cone). Warning, if you forget to change the behavior from button to graphic your movie will not work as expected after you’ve added the ActionScript. Flash will also display a warning and error description in the Output panel.

The movie should stay on the first frame until the viewer clicks a flower. However, without a stop action in the first frame of the Timeline the movie automatically plays. We’ll fix this now.

Select the first Keyframe of the actions layer. Choose Window > Actions or press F9 to open the Actions panel. Make sure the Script Assist is turned off. In the Script pane, type stop();

Step 7. Adding ActionScript

Select Frame 1 of the actions layer. In the Script pane add the following: (You should already have stop(); in the pane.)

Test your movie by choosing Control > Test Movie.

In ActionScript 3 event listeners and handlers are used to control interactions. In our movie we created a function, event listeners to listen for when the user clicks the mouse and an event handler to perform an action when the mouse is clicked.

2009-07-07T23:17:00.001-07:00

Caching Animation Frames VS Spritesheets

Apparantly drawing each frame of an animation to a single bitmap and then selecting a region to display is better for memory and speed than keeping each frame in its own bitmapData object.

The issue i’ve had is that for larger animations a sprite sheet of 2880×2880 is a little restrictive. To counter this ive modified bit101’s BigAssCanvas to allow a copyPixels of a rect, in order to get our frame data from a BIG Sprite sheet. This makes the test a little unfair, but small spritesheets are not an option for us.

view the test >

The results are as follows:

uncached: ~16fps
cached as frames: ~120fps
cached on spritesheet: ~70fps

memory usage:

frames: 249 856
spritesheet: 270 336

so caching each frame seems the way to go for us. There doesnt seem to be any advantage in the spritesheet. It might run faster if it was a single bitmapData object and direct coptyPixels - but who’s to say

download the source >

2009-07-07T23:14:00.001-07:00

Playing with Particles

For a new game I’m designing, I’ve been learning a little about particles. Its actually really simple to get some great effects. I found a good as3 lib http://flintparticles.org - but in the aim of learning, and due to the fact that i need to use haxe not as3 (planning to target iphone) i’ve started from scratch. Ive only implemented a Gravity Well, and Gravity - but plan to add some magnets, simple collisions, brownian motion and maybe particle to particle attraction.

A few important things are:

Rendering direct to bitmap- not using MovieClip or Sprite - as they kill performance
Using copyPixels over draw - again for performance
Using an Object Pool, for less memory and garbage collection issues in the future
Created an ‘effectors’ interface for applying multiple effects to particles
Frame independant (time based) motion for more predictable performance

so lets see a test:

Update: Here’s another example - not in the source, but just adding a colorTransform- fun fun!

heres the haxe code: download

cheers,