Create Flash Screen Transition Effects Entirely With Code

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:

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:

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 scaled

currentSquares - the current value indicating which squares should be attached and/or scaled

pauseTime - a simple integer to give a slight pause in between transitions and removing itself

tempNum - used to check what numbers in the array are to be scaled

fading - a string to check if the transition is fading in or out

fadeinTimer - a timer that is called to begin the fading in of the current value of currentSquares

fadeoutTimer - another timer that is called to begin the fading out of the current value of currentSquares

fadeArray - the 3D array that contains all the transition patterns

squaresArray - 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:

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).

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:

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:

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:

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:

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:

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:

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:

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.