Advertisement
Effects

Create Flash Screen Transition Effects Entirely With Code

by

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

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.

Related Posts
  • Game Development
    Implementation
    Write Once, Publish Everywhere With HaxePunk: Making a GamePreviewretinaimage
    You've probably had this experience before: you hear about an awesome game, but then you find out that it's only coming out on the one platform that you don't own. It doesn't have to be this way. In this tutorial, you will learn how to use Haxe to make a game in one development platform that can target multiple gaming platforms, including Linux, Mac, Windows, iOS, Android, and Flash.Read More…
  • Code
    JavaScript & AJAX
    Using CreateJS - EaselJSCreatejs retina preview
    In this tutorial we will be exploring the CreateJS suite of libraries. CreateJS is suite of JavaScript libraries and tools for building rich, interactive experiences with HTML5. The CreateJS suite is divided into four libraries.Read More…
  • Web Design
    HTML/CSS
    How to Animate Festive SVG Icons With CSSAnimated icons retina
    'Tis the season, so in this tutorial, I'll walk through creating some CSS animated, holiday-themed, SVG icons. There are some great icons on Iconmelon, a site which hosts many free vector icon sets for you to sink your teeth into. The icons I'm using come courtesy of designer Sam Jones. So grab yourself a cup of eggnog, pull your laptop up to the yule log, and let's gets started!Read More…
  • Game Development
    Implementation
    How to Make Your First Roguelike400px
    Roguelikes have been in the spotlight recently, with games like Dungeons of Dredmor, Spelunky, The Binding of Isaac, and FTL reaching wide audiences and receiving critical acclaim. Long enjoyed by hardcore players in a tiny niche, roguelike elements in various combinations now help bring more depth and replayability to many existing genres.Read More…
  • Game Development
    Implementation
    An Introduction to Spritesheet AnimationKandi preview 400px
    Spritesheets have been used in games for a long time. Classic games such as Legend of Zelda: A Link to the Past and even modern games like Cut the Rope have used them. In this article, we'll talk about what spritesheet animation is and how to code it, and we'll also demonstrate how they can be used in a small game. I'll be using JavaScript for the code, but you should be able to follow along in any language.Read More…
  • Code
    JavaScript & AJAX
    Working With IndexedDB - Part 2Indexeddb retina preview
    Welcome to the second part of my IndexedDB article. I strongly recommend reading the first article in this series, as I'll be assuming you are familiar with all the concepts covered so far. In this article, we're going to wrap up the CRUD aspects we didn't finish before (specifically updating and deleting content), and then demonstrate a real world application that we will use to demonstrate other concepts in the final article.Read More…