Mar 10, 2012
Posted on Mar 10, 2012 in Hints and Tips | 10 comments
Flash games are very much the bread and butter of indie pop-nerd culture. If you consider the slices of bread the menu and the game itself, what is left? The butter – the very substance that makes the bread taste that much more delicious. And in terms of a Flash game, what comes in between menus and games are the transitions!
Final Result Preview
This is an example pattern of the transition effect that we will be working towards:
Step 1: Setting Up
Per usual we need to create a new Flash File (ActionScript 3.0). Set its width to 400px, its height to 200px, and the frame rate to 30fps. The background color can be left as the default. Save the file; it can be named whatever you please. I named mine Transitions.fla.
Next we need to create a document class. Go to your Flash file’s properties and set its class to Transitions. Then create the document class:
package {
import flash.display.*;
import flash.events.*;
public class Transitions extends MovieClip {
static public var val:Number = new Number();
static public var transitionAttached:Boolean = new Boolean();
public function Transitions() {
val = 0;
transitionAttached = false;
}
}
}
The code just introduced two variables. The first will be used to select the effect’s pattern, and the second will be used to check against having multiple instances of the effect on the stage.
Step 2: Creating the Square Sprite
Our next step is to create the sprite that will be used as each square for the transition. Create a new class and save it as Square.as:
package{
import flash.display.*;
import flash.events.*;
public class Square extends Sprite{
public var squareShape:Shape = new Shape();
public function Square(){
}
}
}
We use the squareShape variable to draw our shape inside the Sprite. Draw a rectangle 40px by 40px (Which is the full size) and set its scale to 0.1, a tenth of its size – this will aid us in the effect later:
addChild(squareShape);
squareShape.graphics.beginFill(0x000000,1);
squareShape.graphics.drawRect(-20,-20,40,40);
squareShape.graphics.endFill();
this.scaleX = 0.1;
this.scaleY = 0.1;
Step 3: Creating the Effect
Create another new class for the effect itself. Once we are finished, adding the effect to the stage will be very simple:
package{
import flash.display.*;
import flash.events.*;
import flash.utils.*;
public class FadeEffect extends Sprite{
public var currentFadeOut:int = 00;
public var currentSquares:int = 01;
public var pauseTime:int = 01;
public var tempNum:int = 00;
public var fading:String = "in";
public var fadeinTimer:Timer = new Timer(100);
public var fadeoutTimer:Timer = new Timer(100);
public var fadeArray:Array = [
//top
[[01,01,01,01,01,01,01,01,01,01],
[02,02,02,02,02,02,02,02,02,02],
[03,03,03,03,03,03,03,03,03,03],
[04,04,04,04,04,04,04,04,04,04],
[05,05,05,05,05,05,05,05,05,05]],
//bottom
[[05,05,05,05,05,05,05,05,05,05],
[04,04,04,04,04,04,04,04,04,04],
[03,03,03,03,03,03,03,03,03,03],
[02,02,02,02,02,02,02,02,02,02],
[01,01,01,01,01,01,01,01,01,01]]];
public var squaresArray:Array = new Array();
public function FadeEffect(){
}
}
}
You are probably thinking “that is a heck of a lot of variables, what all are they used for?”:
currentFadeOut - used as a check for tempNum to see how many squares are to be scaledcurrentSquares - the current value indicating which squares should be attached and/or scaledpauseTime - a simple integer to give a slight pause in between transitions and removing itselftempNum - used to check what numbers in the array are to be scaledfading - a string to check if the transition is fading in or outfadeinTimer - a timer that is called to begin the fading in of the current value of currentSquaresfadeoutTimer - another timer that is called to begin the fading out of the current value of currentSquaresfadeArray - the 3D array that contains all the transition patternssquaresArray - an array for the Square sprites
Our effect will begin by initiating an event listener for fadeInTimer and starting it. We also need to add an event listener to continuously scale all of the sprites to their correct sizes. Use the following code inside the constructor:
fadeinTimer.addEventListener("timer", fadeSquaresInTimer);
fadeinTimer.start();
addEventListener(Event.ENTER_FRAME, enterFrame);
The next step is to create those two event listeners. We will start with the easier of the two, the enterFrame function:
public function enterFrame(e:Event){
for each(var s1 in squaresArray){
tempNum+=1;
if(fading=="in"){
if(s1.scaleX<=1){
s1.scaleX+=0.05;
s1.scaleY+=0.05;
}
}else if(fading=="out"){
if(tempNum<=currentFadeOut){
if(s1.scaleX>=0.1){
s1.scaleX-=0.05;
s1.scaleY-=0.05;
}else{
if(s1.visible == true){
s1.visible = false;
}
}
}
}
}
tempNum=00;
}
It may not make total sense right now, but this should help shed some light.
s1 is the instance name that will be given to the Squares when we create them in a later function.- They are added to an array called
squaresArray to keep track of the number of them and we perform the same operation for every object in the array.
- Next we increase
tempNum (used in the fading out if-statement) which is used to scale the sqaures in the order that they were added to the array. This means it is not pattern dependant and will work with any pattern.
After that…
- We check if
fading is true or not.
- If true, it scales all the squares up until they reach their full size (they begin scaling immediately after currentSquares increases).
- Once it begins fading out things become a little trickier; we only scale down the squares that are lower than the current value of
currentFadeOut (these are the ones that should be scaling, all others should remain at full scale until the value increases).
- Once they have scaled down to a tenth of the size we make those squares invisible (they will be deleted with the whole effect).
It’s time to add the event listener for the timer:
public function fadeSquaresInTimer(e:Event){
fadeSquaresIn(fadeArray[Transitions.val]);
currentSquares+=1;
}
At first glance it looks less complicated, but you should notice that we are calling a function with the fadeArray as the parameter. Which pattern is selected from the array depends on what you set val equal to in the Transitions class; right now it should use the first pattern because val is set to 0.
The next step is to create the fadeSquaresIn function that is called from the previous timer:
public function fadeSquaresIn(s:Array){
for (var row=0; row<s[0].length; row++) {
for (var col=0; col<s.length; col++) {
}
}
}
First thing that we accomplish is iterating through the selected pattern. We start at row 1, colomn 1 and cycle through every colomn until the end of the row has been reached. Then we move onto the next row and repeat the process.
The next thing to do is compare the current item in the array to the value of currentSquares:
if(int(s[col][row]) == currentSquares){
}
If they are equivalent we add a square, position it accordingly, and push it onto the squaresArray so that it can be scaled:
var s1:Sprite = new Square();
s1.x = 20+(row*40);
s1.y = 20+(col*40);
addChild(s1);
squaresArray.push(s1);
We are almost done with this function, we just have to perform a check for when there are the same number of squares as there are items in the pattern. We do so by adding the following if-statement outside both for-loops:
if(squaresArray.length == (s[0].length * s.length)){
fadeinTimer.stop();
addEventListener(Event.ENTER_FRAME, pauseBetween);
}
Self explanatory – we stopped the timer and called an event listener for the pause between fading in and fading out. That function is used to initiate the fading out and may also be used to cause change in your game:
public function pauseBetween(e:Event){
pauseTime+=1;
if(pauseTime==60){
currentSquares=01;
fading="out";
fadeoutTimer.addEventListener("timer", fadeSquaresOutTimer);
fadeoutTimer.start();
removeEventListener(Event.ENTER_FRAME, pauseBetween);
}
}
We won’t spend much time on this function due to its simplicity. Here we increase the value of pauseTime, and once it equals 60 (meaning two seconds have passed) we set the value of currentSquares back to 1, set fading to "out" so that the squares can scale backwards, remove the listener for pauseBetween() itself, and add an event listener for this new function:
public function fadeSquaresOutTimer(e:Event){
fadeSquaresOut(fadeArray[Transitions.val]);
currentSquares+=1;
}
This works much like fadeSquaresInTimer(), though this time we are calling the function fadeSquaresOut():
public function fadeSquaresOut(s:Array){
for (var row=0; row<s[0].length; row++) {
for (var col=0; col<s.length; col++) {
if(int(s[col][row]) == currentSquares){
currentFadeOut+=1;
}
}
}
}
We cycle through, but this time when we find an equivalent item we increase the value of currentFadeOut so that the next item in the squaresArray can begin fading out.
Almost finished now; all that’s left is to stop the timer and remove the effect. Add this if-statement outside of the two for-loops:
if(currentFadeOut == (s[0].length * s.length)){
fadeoutTimer.stop();
pauseTime=01;
addEventListener(Event.ENTER_FRAME, delayedRemove);
}
This checks whether all of the items have begun fading out. If so, it then stops the timer, sets pauseTime back to 1 and adds an event listener for the function delayedRemove():
public function delayedRemove(e:Event){
pauseTime+=1;
if(pauseTime==30){
Transitions.transitionAttached = false;
removeEventListener(Event.ENTER_FRAME, delayedRemove);
stage.removeChild(this);
}
}
Like before we increase the value of pauseTime, and once it equals 30 (1 second) we set the boolean back to false so that the effect can be added once again. We remove this event listener and we remove this effect from the stage.
Step 4: Adding the Effect
Now comes the easy part. Add the following code inside the document class constructor to add the effect:
if(transitionAttached == false){
transitionAttached = true;
var f1:Sprite=new FadeEffect;
stage.addChild(f1);
}
Step 5: Creating More Patterns
Feel free to create your own patterns! It’s extremely simple, just create a new 2D array inside the 3D array. Here is the array that I have created (just replace your 3D array with it). It includes 8 different transitions:
[//top
[[01,01,01,01,01,01,01,01,01,01],
[02,02,02,02,02,02,02,02,02,02],
[03,03,03,03,03,03,03,03,03,03],
[04,04,04,04,04,04,04,04,04,04],
[05,05,05,05,05,05,05,05,05,05]],
//bottom
[[05,05,05,05,05,05,05,05,05,05],
[04,04,04,04,04,04,04,04,04,04],
[03,03,03,03,03,03,03,03,03,03],
[02,02,02,02,02,02,02,02,02,02],
[01,01,01,01,01,01,01,01,01,01]],
//left
[[01,02,03,04,05,06,07,08,09,10],
[01,02,03,04,05,06,07,08,09,10],
[01,02,03,04,05,06,07,08,09,10],
[01,02,03,04,05,06,07,08,09,10],
[01,02,03,04,05,06,07,08,09,10]],
//right
[[10,09,08,07,06,05,04,03,02,01],
[10,09,08,07,06,05,04,03,02,01],
[10,09,08,07,06,05,04,03,02,01],
[10,09,08,07,06,05,04,03,02,01],
[10,09,08,07,06,05,04,03,02,01]],
//top-left
[[01,02,03,04,05,06,07,08,09,10],
[02,03,04,05,06,07,08,09,10,11],
[03,04,05,06,07,08,09,10,11,12],
[04,05,06,07,08,09,10,11,12,13],
[05,06,07,08,09,10,11,12,13,14]],
//top-right
[[10,09,08,07,06,05,04,03,02,01],
[11,10,09,08,07,06,05,04,03,02],
[12,11,10,09,08,07,06,05,04,03],
[13,12,11,10,09,08,07,06,05,04],
[14,13,12,11,10,09,08,07,06,05]],
//bottom-left
[[05,06,07,08,09,10,11,12,13,14],
[04,05,06,07,08,09,10,11,12,13],
[03,04,05,06,07,08,09,10,11,12],
[02,03,04,05,06,07,08,09,10,11],
[01,02,03,04,05,06,07,08,09,10]],
//bottom-right
[[14,13,12,11,10,09,08,07,06,05],
[13,12,11,10,09,08,07,06,05,04],
[12,11,10,09,08,07,06,05,04,03],
[11,10,09,08,07,06,05,03,03,02],
[10,09,08,07,06,05,04,03,02,01]]];
You can change the value of Transitions.val to choose another pattern – for example, if val is 3, the transition will sweep in from the right.
Conclusion
Thanks for taking the time to read this tutorial. If you have any questions please leave a comment below. And if you would like a challenge, try making the effect fade in with one pattern and fade out with an opposing one.
View full post on Activetuts+
