Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Code
  2. Effects

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:

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:

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:

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:

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:

The next step is to create those two event listeners. We will start with the easier of the two, the enterFrame function:

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:

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

This works much like fadeSquaresInTimer(), though this time we are calling the function fadeSquaresOut():

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:

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():

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.


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.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.