Animating text fields with Actionscript

March 11th, 2009

The Flash plugin is required to view this object.

Well after a little period of no posts due to being insanely busy, I thought I would share a little technique I discovered through trial and error and a little thought. Ever wanted to tween individual letters from a text field with AS3 rather than on the time line in flash? Well it is incredibly easy!
Firstly you need to create your text in the Flash authoring tool, and then after adding the text field to a container MovieClip or Sprite you simply break it apart once so that the text is separated.
Once this is done either on the main timeline or in your document class you can target the texts by targeting the container sprite's children with getChildAt(); during a for loop:

PLAIN TEXT
Actionscript:
  1. function startAnim():void
  2. {
  3.     for(var j:uint = 0; j <textHolder.numChildren; j++){
  4.         obArray[j] = textHolder.getChildAt(j);
  5.     }
  6.     for(var i:uint = 0; i <obArray.length; i++){       
  7.         holderArray[i] = new MovieClip();
  8.         addChild(holderArray[i]);
  9.         holderArray[i].addChild(obArray[i]);
  10.         holderArray[i].z = -5000;
  11.         holderArray[i].x = 1068;
  12.         holderArray[i].y = 68;
  13.         holderArray[i].filters = [blur, drop];
  14.     }
  15. }

You can then add the children to their own individual container sprite as you can see and then target that sprite in order to transform any property, including filters and its stage position.

PLAIN TEXT
Actionscript:
  1. function next(e:TimerEvent):void
  2. {
  3.     timer.stop();
  4.     timer.removeEventListener(TimerEvent.TIMER, next);
  5.     addEventListener(Event.ENTER_FRAME, loop);
  6.     for(var i:uint = 0; i <holderArray.length; i++){
  7.         var delayTime:Number = Math.random()*4;
  8.         var tween1:GTween = new GTween(holderArray[i], .8,{y: -500,
  9.                             delay: delayTime},{ease:Bounce.easeOut});
  10.     }
  11.     timer =  new Timer(4000, 0);
  12.     timer.addEventListener(TimerEvent.TIMER, init);
  13.     timer.start();
  14. }

Cue another spate of crappy banner ads.......!!!

Get the source here.

Categories: Actionscript 3.0, Text | Tags: , , | 1 Comment

Simple but effective button transition in AS3

February 15th, 2009

The Flash plugin is required to view this object.

Thought I would show you how to create a simple button animation created totally in actionscript, which recreates a button animation I saw posted on a Cartoon Smart.com tutorial which was originally created on the time line. This method is very simple and easily customizable.
The artwork for the button is created in the Flash authoring tool, although it could easily be created with code as it is just a rectangle with rounded corners with a simple gradient fill.
This is exported for actionscript once it is converted to a movieclip and then in the class file I have added a ROLL_OVER event listener, you'll also notice I have added a drop shadow just to make it look cool.

PLAIN TEXT
Actionscript:
  1. private function init():void
  2.         {
  3.             drop = new DropShadowFilter(5, 45, 0x000000, .75, 10, 10, 1);
  4.             this.addEventListener(MouseEvent.ROLL_OVER, over);
  5.             this.filters = [drop];
  6.         }

Now the cool blurring animation is created by defining a variable which sets out my target blurX, this is defined in the variable targetX, which I have set to 80. Now as I want the animation to last one second, which in this case is 40 frames, I have created a variable called bx which is defined by targetX divided by the frame rate. An ENTER_FRAME event listener is added once the mouse rolls over the button and in this loop, bx is added to the blurX each frame thus increasing the amount of blur until it reaches its target blur.

PLAIN TEXT
Actionscript:
  1. private function overloop(e:Event):void
  2.         {
  3.             blurX += bx;
  4.             if(blurX> targetX){
  5.                 blurX = targetX;
  6.                 removeEventListener(Event.ENTER_FRAME, overloop);
  7.                 blurring = false;
  8.             }
  9.             blur = new BlurFilter(blurX, blurY, 1);
  10.             this.filters = [blur, drop];
  11.         }

Then for the Roll out animation, I have just done the opposite by starting the blur y at 50 and then each frame reducing it by a set amount until it rests back at its starting point. Nice and simple and lots of fun to play with.
Source is here

Categories: Actionscript 3.0, Tutorials | Tags: , , , | No Comments

Neon flickering effect in AS3 tutorial

November 25th, 2008

After trawling the Web for various bits of information and tutorials for various ideas I have noticed how amazingly, so many tutorials are still being created for AS2 applications considering the power and superiority of AS3 so I have decided to convert a few of them to AS3 format, partly for myself and for content for this blog but also because I feel that it is important that more of the people that are still clinging onto the old AS2 days start to embrace AS3 and realise how simple to use it really is.

So, I came across this when doing a project for someone, who requested an effect and directed me towards an AS2 tutorial to outline the effect he was looking for.

The desired effect was to produce a neon text, flickering on and then off in a realistic fashion. This is all done in Flash CS3 / CS4.

Firstly the artwork needs to be produced. As flash is vector based it is best and simplest to produce the images in flash itself. This is very simple as it is only text broken apart into shapes. There are just two movie clips the first is the text in its “off” state. So we need to create a new symbol by selecting “Insert / New Symbol” or by pressing Ctrl or Opt / F8. Give it a simple name like neon_off or something. Firstly choose the text tool and in the centre of the stage add the necessary text. Then press Ctrl or Opt / B to break it apart once and separate the letters, then again to break it apart and turn it into shapes. Once this is done you can then with the stroke tool add a stroke to the edge of each of the letters with the settings illustrated.

Now we need to produce the the “neon on” text, this is done in the same way but we need to give the the text a coloured stroke and a white fill so that when the filters are applied it looks like a glowing neon light. Now these MovieClips along with the sound file which will be used when the text is flickering on need to be given a linkage so that they can be modified via ActionScript. This is done by selecting the MovieClips in the library, right clicking and selecting the MovieClip and ticking the box “Export for ActionScript” and giving it a class name.....as illustrated.

Now its time for the fun......the ActionScript.........

In AS3 the script is usually done in a separate file which the FLA links to at compile time and brings the script into the swf. So if we open a new ActionScript file and call it Flicker. We then start the file by the opening Package declaration and by importing the necessary libraries ......

PLAIN TEXT
Actionscript:
  1. package{
  2.  
  3.     import flash.display.*;
  4.     import flash.utils.*;
  5.     import flash.events.*;
  6.     import flash.filters.*;
  7.     import flash.media.*;
  8.  
  9.     public class Flicker extends MovieClip{

We then need to create the variables needed in AS3 as each instance is first created as a variable and then addressed or added in a function. Notice the variables which create instances of the MovieClips we created earlier.

PLAIN TEXT
Actionscript:
  1. private var timerOne:Timer;
  2. private var timerTwo:Timer;
  3. private var maxFlker:Number = .85;
  4. private var sound:Sound = new Neon();
  5. private var soundControl:SoundChannel = new SoundChannel();
  6. private var textOff:MovieClip = new Text_MC();
  7. private var textOn:MovieClip = new Texton_MC();
  8. private var glow:GlowFilter = new GlowFilter(0xFF00FF, 1, 20, 20, 2, 3, false,    false);
  9. private var blur:BlurFilter = new BlurFilter(5, 5, 2);

Now we are going to instantiate the timer which was firstly created as a variable and add an event listener to listen for the completion of the timer and then trigger the flickering this is done like so:

PLAIN TEXT
Actionscript:
  1. private function timerInit():void {
  2.     textOn.alpha = 0;
  3.     timerOne = new Timer(2000, 0);
  4.     timerOne.addEventListener(TimerEvent.TIMER, timerOn);
  5.     timerOne.start();
  6.     }
  7. private function timerOn(e:TimerEvent):void {
  8.     soundOn();
  9.     timerOne.stop();
  10.     timerOne.removeEventListener(TimerEvent.TIMER, timerOn);
  11.     addEventListener(Event.ENTER_FRAME, flickerOn);
  12.     }

Now for the flicker effect. At the moment the coloured MovieClip is on top of the grey one but it is set at an alpha of zero, once the timer has triggered its listener will add and Enter_Frame event listener which does what it says on the tin....each frame it will trigger its function and the function is as follows:

PLAIN TEXT
Actionscript:
  1. private function flickerOn(e:Event):void {
  2.     var ultraAlpha:Number = Math.random() * .9;
  3.     textOn.alpha = ultraAlpha;
  4.     if(ultraAlpha> maxFlker){
  5.         textOn.alpha = 1;
  6.         soundControl.stop();
  7.         removeEventListener(Event.ENTER_FRAME, flickerOn);
  8.         addEventListener(Event.ENTER_FRAME, allFlickerOn);
  9.         addtimerTwo();
  10.         }
  11.     }

What this does is each frame give the alpha of the coloured MovieClip a random alpha, once the alpha reaches a certain level, in this case almost the highest figure it can create, the enter frame listener is removed and another one created whilst the text flickers at a higher alpha ( to give the effect of being on and flickering whilst being on) and another timer is triggered which waits to switch the flickering off and start all over again......Finally of course before we finish we need to make sure that the document class of the fla is set to target the Flicker.as, which is done by adding the document class name in the document properties tab, by just clicking on the stage and opening properties.

As usual all source files and FLA are available here.

Categories: Actionscript 3.0, Tutorials | Tags: , , | 9 Comments