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

Create a Scratch card game in Actionscript 3.0

January 26th, 2009

OK Flash games are so much fun not only to create but also for the end user as they make the web so interesting. So here I am going to show you how to create a simple Actionscript 3.0 scratch card game that can be used for an ad or game or just for fun.

The first elements are the movieclips which are going to be used in the game. Now for my version I am going to use three panels which will be displaying one of three different images. This is very simple and after creating the actual images themselves, you need to create a movieclip which would contain each of these images on their own frame. This movieclip would then need to be associated with a class file. So in the linkage section (right click on the movieclip in the library and choose linkage) add a name for your associated class, in my case I just called it Image. We then create an actionscript file called “Image.as” to add some variables and functions to so that we can control which frame it would stop on each time the swf is opened. This is very easy and is done like so:

PLAIN TEXT
Actionscript:
  1. public class Images extends MovieClip
  2.     {
  3.        
  4.         public var frameNumber:uint = (Math.ceil(Math.random() * 3));
  5.        
  6.         public function Images()
  7.         {
  8.             this.gotoAndStop(frameNumber);
  9.         }
  10.     }

This just creates a random number between 1 and 3 and gets the movieclip to stop on that frame, Simple. This movieclip then needs to be added to a parent movieclip by putting three instances of it onto the stage and then converting them into one movieclip. Each instance will then need to be given their own instance name, I have just called them image_one, image_two etc.
Now we need to create the scratch card effect so that the user can scratch the screen to reveal the images "underneath". To do this I have created a movieclip which is the same size as the images and made it look like a silvery wax by adding a nice grey / dark grey gradient fill. This would then need to be added to its own parent movieclip, exactly the same as the previous images were, spaced evenly and similarly to the images so that if they were laid over the top they would cover them nicely. We then need to create a new movieclip with two layers. On the bottom layer we need to put the movieclip containing the silvery circles and on the top layer we need to put the movieclip containing all of the Images movieclips. This whole movieclip then needs to be linked to so that we can control it with actionscript.
To get the effect of the "wax" being scratched off we simply add a new sprite to the class file and add it as the top layer images mask like so:

PLAIN TEXT
Actionscript:
  1. public function All_Images_mc()
  2.         {
  3.            
  4.             addChild (Mask);
  5.        
  6.             Images_Masked.mask = Mask;
  7.            
  8.             Mask.graphics.moveTo(mouseX, mouseY);
  9.            
  10.             addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
  11.             addEventListener(MouseEvent.MOUSE_UP, MouseUp);
  12.         }

What essentially is going to happen here is that we have added an event listener so that when the mouse is clicked over the movieclip it wall start to draw some graphics to the screen, as the "mask" starts off as an empty sprite and a masked image is shown in the graphics displayed within its masker, the images start off displaying nothing and as the graphics are drawn the images are shown, giving the illusion that the layer below it is actually being scratched off.

PLAIN TEXT
Actionscript:
  1. private function Scratch (e:Event):void
  2.         {
  3.             Mask.graphics.beginFill(0xff00ff);
  4.             Mask.graphics.drawCircle(mouseX, mouseY, 10 + (Math.random() * 20));
  5.             Mask.graphics.endFill();
  6.         }

The mouse up listener has been added so that when the user releases their mouse it checks to see which frame number the images are on and looks to see which ones match to display a winner or loser message.

PLAIN TEXT
Actionscript:
  1. private function MouseUp(event:MouseEvent):void
  2.         {
  3.             removeEventListener(Event.ENTER_FRAME, Scratch);
  4.  
  5.             if(Images_Masked.image_One.frameNumber == Images_Masked.image_Two.frameNumber ||
  6.                 Images_Masked.image_Two.frameNumber == Images_Masked.image_Three.frameNumber ||
  7.                 Images_Masked.image_One.frameNumber == Images_Masked.image_Three.frameNumber)
  8.             {
  9.                 parent.parent.gotoAndPlay("Win");
  10.             }
  11.             else
  12.             {
  13.                 parent.parent.gotoAndPlay("lose");
  14.             }
  15.         }

If the user loses they are given an opportunity to restart, which has simply and crudely been done by sending the application back to frame one which is just a blank frame, thus re-adding and re-setting everything.
Get the source and FLA here

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