Tutorial Details
- Program: Flash
Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Activetuts+. This tutorial was first published in May, 2009.
Using ActionScript 3.0, we’ll create a cool Animated Background that we can use in Menu Screens or as a Music Visualizer.
Final Result Preview
Let’s take a look at what we’ll be working towards:
Step 1: Brief Overview
We’ll create a Class that will take care of the whole effect. When you call the class, you’ll be able to change the number of lights, color, alpha, size, direction, speed and the quality of the Blur filter. In this way it’s possible to achieve many different results when using it. Also, you can use any background you want.
Step 2: The .fla Document
Create a new ActionScript 3.0 document (File > New…). Set the Stage size to your desired dimensions, I’ve used 600 x 300 px.
Step 3: Your Background
Add or draw an image to use as the background, I’ve used a simple blue gradient (#02C7FB, #1F63B4).
Step 4: Layers
Rename the first layer to “Background” then create another one and name it “Code”. You can lock the “Code” layer to avoid placement of unwanted drawings in there.
Step 5: ActionScript
Save your work and let’s get into the code!
I’m assuming you already have a basic understanding of ActionScript 3.0, if you have any keyword specific doubts please refer to the Flash Help (F1).
Create a new ActionScript file (File > New…).
Step 6: Importing Required Classes
package Classes
{
/* Import required classes */
import flash.display.MovieClip;
import flash.filters.BitmapFilter;
import flash.filters.BlurFilter;
import flash.events.Event;
Here we import the Classes that we’ll use, remember that the word next to “package” is the name of the folder where our Class is located.
Step 7: Extending the Class
//We need to extend the class so we can use the addChild() method.
public class Lights extends MovieClip
{
Extending the MovieClip class will allow our class to inherit all of the methods, properties and functions that the MovieClip has, in this case we use it to get access to the addChild() method.
Step 8: The Variables
Although they have pretty much self explanatory names I’ll add short comments on each var to make sure it’s clear. They get their values from the parameters of the Main function.
private var lightsNumber:int; //The number of Lights on Stage
private var xSpeed:int; //The horizontal speed the Lights have
private var ySpeed:int; //Vertical Speed
private var lightsDir:String; //Direction the Lights are going, this can be Up, Down, Left or Right
private var areaW:int; //The width of the area where the effect will take place
private var areaH:int; //Height
private var lights:Array = new Array(); //This array will store all the Lights MovieClips so we can use them outside the For where we are going to create them.
Step 9: Main Function
/* Main function */
public function init(areaWidth:int, areaHeight:int, numberOfLights:int, lightSize:int, lightColor:uint, minimumScale:Number, hSpeed:int, vSpeed:int, dir:String, quality:int):void
{
areaW = areaWidth;
areaH = areaHeight;
lightsNumber = numberOfLights;
lightsDir = dir;
This is the function that we need to start the effect, we also set the variable values in this code.
Step 10: Creating the Lights
for (var i:int = 0; i < numberOfLights; i++)
{
/* Create the specified number of lights */
var light:MovieClip = new MovieClip();
/* Set random speed to x and y based on the params */
xSpeed = Math.floor((Math.random() * (hSpeed - -hSpeed + 1)) + -hSpeed);
ySpeed = Math.round((Math.random() * vSpeed) + 0.5);
light.xSpeed = xSpeed;
light.ySpeed = ySpeed;
/* Create lights */
light.graphics.beginFill(lightColor);
light.graphics.drawCircle(0, 0, lightSize / 2);
light.graphics.endFill();
In this code we use a “For” statement to create the number of Lights the user sets in the parameter and calculate a semi-random speed for every Light.
Step 11: Position
This sets a random start position for the Lights based on the Area parameters.
light.x = Math.floor(Math.random() * areaWidth); light.y = Math.floor(Math.random() * areaHeight);
Step 12: Blur Filter
var b:int = Math.floor(Math.random() * 10) + 5; //Calculates a random Blur between 0-9 and adds 5 to the result. var blur:BitmapFilter = new BlurFilter(b,b,quality); //The BlurFilter object. var filterArray:Array = new Array(blur); //To apply the filter we need an array of filters. light.filters = filterArray; //Sets the filters array to the Light
The above code applies the Blur. Remember that this code is still part of the For, so the Lights get different Blurs.
Step 13: Alpha
light.alpha = Math.random() * 0.6 + 0.1;
An easy one; this sets the alpha property between 0.1 and 0.6.
Step 14: Scale
light.scaleX = Math.round(((Math.random() * (1-minimumScale)) + minimumScale) * 100) / 100; light.scaleY = light.scaleX;
This sets the scale of the Lights between the original size and the minimum scale parameter. We use a round method to save processor.
Step 15: Adding the Lights to the Stage
addChild(light); /* Store lights in an array to use it later */ lights.push(light); /* Check for lights direction */ checkDirection();
This adds the Lights to the Stage, then we save them in an Array to use them later. It also the checkDirection function to see in which direction the Lights will go.
Step 16: Check Direction Function
private function checkDirection():void
{
for (var i:int = 0; i < lights.length; i++)
{
switch ( lightsDir )
{
case "up" :
lights[i].addEventListener(Event.ENTER_FRAME, moveUp);
break;
case "down" :
lights[i].addEventListener(Event.ENTER_FRAME, moveDown);
break;
case "right" :
lights[i].addEventListener(Event.ENTER_FRAME, moveRight);
break;
case "left" :
lights[i].addEventListener(Event.ENTER_FRAME, moveLeft);
break;
default :
trace("Invalid Direction!");
}
}
}
Here we use a for to get access to all the Lights in the Array, then check the direction variable to determine where to move the Lights. Depending on the direction we add the listener to the corresponding function.
Step 17: Move Functions
This next section may seem a little complicated, but it’s easier than you think. Basically, it moves the Light depending on the speed calculated in the Main function, then checks if the Light has “left” the Area of the effect. If that is the case, it sets a random position contrary to the direction the Light is heading.
private function moveUp(e:Event):void
{
e.target.x += e.target.xSpeed;
e.target.y-=e.target.ySpeed;
/* Reset light position, Y first, then X */
if (e.target.y + (e.target.height / 2) < 0)
{
e.target.y = areaH + (e.target.height / 2);
e.target.x=Math.floor(Math.random()*areaW);
}
if ((e.target.x + e.target.width / 2) < 0 || (e.target.x - e.target.width / 2) > areaW)
{
e.target.y = areaH + (e.target.height / 2);
e.target.x=Math.floor(Math.random()*areaW);
}
}
/* Move Down function */
private function moveDown(e:Event):void
{
e.target.x+=e.target.xSpeed;
e.target.y+=e.target.ySpeed;
/* Reset light position, Y first, then X */
if (e.target.y - (e.target.height / 2) > areaH)
{
e.target.y = 0 - (e.target.height / 2);
e.target.x=Math.floor(Math.random()*areaW);
}
if ((e.target.x + e.target.width / 2) < 0 || (e.target.x - e.target.width / 2) > areaW)
{
e.target.y = areaH + (e.target.height / 2);
e.target.x=Math.floor(Math.random()*areaW);
}
}
/* Move Right function */
private function moveRight(e:Event):void
{
e.target.x+=e.target.ySpeed;
e.target.y+=e.target.xSpeed;
/* Reset light position, Y first, then X */
if (e.target.y - (e.target.height / 2) > areaH || e.target.y + (e.target.height / 2) < 0)
{
e.target.x = 0 - (e.target.height / 2);
e.target.y = Math.floor(Math.random()*areaH);
}
if ((e.target.x - e.target.width / 2) > areaW)
{
e.target.x = 0 - (e.target.height / 2);
e.target.y = Math.floor(Math.random()*areaW);
}
}
/* Move Left function */
private function moveLeft(e:Event):void
{
e.target.x-=e.target.ySpeed;
e.target.y-=e.target.xSpeed;
/* Reset light position, Y first, then X */
if (e.target.y - (e.target.height / 2) > areaH || e.target.y + (e.target.height / 2) < 0)
{
e.target.x = areaW + (e.target.width / 2);
e.target.y=Math.floor(Math.random()*areaH);
}
if ((e.target.x + e.target.width / 2) < 0)
{
e.target.x = areaW + (e.target.width / 2);
e.target.y=Math.floor(Math.random()*areaW);
}
}
}
}
Step 18: Calling the Function
Save your class (remember that the file has to have the same name as the Class) and let’s get back to the Fla. Open the Actions Panel and write:
import Classes.Lights; var light:Lights = new Lights(); light.init(600, 300, 40, 60, 0xFFFFFF, 0.3, 3, 3, "up", 2); addChild(light);
That’s it! Test your movie to see your nice animated background!
Conclusion
Playing with the parameters in the class will result in a lot of different effects, try changing the background, set slower or faster speeds, use more Lights, less Blur and so on!
I hope you learned something you can use, thanks for reading!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Carlos Yanez
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Activetuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
brilliant – impressed!
Wow, this is really nice. Reminds me of the Envato site. A good introduction to classes & AS3, I still feel a bit reluctant to move from AS2.
:(
BR: AS2 will be dead soon, AS3 is the new, try to keep up :) honestly, you wont look back!
I agree!!!
For me, AS1 and AS2 is already dead…
+1
i started with as3 when pv3d became a topic. now i dont want to miss my Flex builder and AS 3 :)
Really cool effect! I like it :)
This effect + the background and text effects on Abduzeedo’s tutorial found here:
http://abduzeedo.com/awesome-background-light-effects-flash-3-flasheff-component-giveaway
would really make something awesome.
This was a really nice tutorial. Simple, but beautiful and effective. And the code is very well written and customizable. Thanks!
Nice effect…
But i am still sad to see that people didnt learn to use the Sprite instead of MovieClip when they dont use timeline…
And i am still sad to see that people uses a lot of code when they could use less than half to do the samething…
Yeah I agree, seems like a ton of code for a simple effect.
Still nice effect though.
http://www.4shared.com/file/106706191/3f270fe5/blurlights.html
Almost the same effect, but with much less code, and works with the whole stage size and fullscreen too =).
Just an example how we can make the thinks less coded.
And with TweenLite engine would be much better, but i made withoud using any kind of third party scripts
PEOPLE PLEASE READ THIS:
Sorry for the uppercase, but i really don’t like people that talks just because they can. I’ve compared the code of the class in this tut and the code of the classes that André did (i used a code beautifier in both). This tut class is 111 lines, André’s file is 91, since when 20 lines of code is “a ton more” and 91 is “less than a half” of 111.
Plus, this tut class has several parameters, i’m reading: number of lights, color, alpha, size, direction, speed and the quality of the Blur filter. You can make a lot of different files or effects with this single class and changing the background, for 20 lines, i think it’s worth it.
There’s clearly a mitake in using a MovieClip without using a timeline, but for some reason he is using a variable stored in the MC ( light.xSpeed = xSpeed;), i don’t know why but at least is using the MC for something.
I’m NOT trying to be offensive and sorry if i did, but you really have to see why the code is like that and give an advise, not just criticize everyone’s job. Everyone makes mistakes.
Here are the codes if someone wants to check. http://www.filesavr.com/codes
Wow, if you really want to compare the lines of the code… start ignoring the document class, since this tut doesnt have one… and remove the import gs.TweenLite; and import gs.easing.*; since i didnt use it anymore…
So i got 59 lines here…
If you want to dry a little bit more the code, instead of draw a gradient filled circle, draw a normal circle and apply a blur filter, like in this tut, it represents about 3 lines less, but more processor usage. 56 lines…
And if you want to dry a little bit more, but the object will be running event not in stage, remove all the event listeners when added to stage, i really didnt count how many lines less will be, but about 4 to 6, and add the parameters… will be less tham 10 lines, but lets round… 66 lines
also if you want to remove the shortcut for random values (private function random in Light class), and make the calculations direct in the lines, will be 4 lines less… 62 lines
I´d like to know from the managers of this site, if i send a tut today, how many days will take to put the tut online? because i am finishing a tut on how to use the pixel bender to create custom filters and blend shaders, also how to use with flash…
Just an example on http://www.djsorbara.com.br/slideshow
(use the arrows to go to next slide faster or right click to select the slide)
Very cool effect Andre!!!
I will be glad to looking yours tut.
sorry for my english
Erema,
The tut is almost done, but when i send to the tutsplus staff i dont know when will be posted here, i will also provide some ready to use custom filters and classes.
But, what i am trying to say here, is that everbody when create a tut, can be less complex, use less code for better learning… for example you can put the “moveLeft, moveRight, moveUp and moveDown” functions in just ONE function…
and i say everytime about document class, because its the most right way to code in AS3…
Cool tutorial, lots of helpful comments. Ive been trying to get it to run full screen and use a symbol from the library instead. Is the code that was on
http://www.4shared.com/file/106706191/3f270fe5/blurlights.html
still available?
Thanks
Cool effect like envato background. Simple and nice.
Love the effect. Quick question though, I was always taught that your constructor function in AS3 should be the same name given to the class… in your case it would be:
public function Lights():void { … }
Am I incorrect in my understanding?
Yes, it is, but he didnt use a constructor function, just used a init function that he call after create the instance for the object…
This is a fantastic tutorial! Thank you.
Is there any way to set the lights to render at a certain level rather than on top of everything else?
Is there an easy way to avoid using an external as file? I’d like to use this for something but unfortunately need stand alone swfs…
Just curious
thanks!
When you publish the movie and therefore create the .swf, you don’t need to upload the .as to the server. Everything is included in the swf (or swf’s).
all the animations relies on the external AS…
Curious: It doesn’t rely on the external .as after you compile / publish it. The code gets compiled into the single swf file. Go ahead, try it for yourself.
is this work flash cs3? i tried to do manuel but cant figure it out..
ii made it works..
thanks..
Cool… very cool.
Nice!!!!!!!!!
wow…looks fantastic even though I haven’t finish this tut,
I will check this out,after doing some stuff of mine
thanks again :)
Very nice, will digg into the code later as it seems quite complicated. Thx 4 sharing!
That’s beautiful! Really cool!
Probably going to use this on a side project.
Great code, but the lights seem to always be ver top of any other element I place on the timeline. Is there a way to make this a real background so other layers in the timeline sit on top?
Very nice, sure this will come in useful one day!
Awesome! thanks for this tut. I appreciate it when flashtuts has tutorials that use external classes.
How can i use this as a background of a website>?
I’m a flash newb, but looking at the code, wouldn’t it be simpler to make the moveUp, moveDown, MoveLeft and MoveRight into one function? The x and y speed values can be positive or negative to allow for up and down, left and right. I’m not sure about flash and vector maths, but couldn’t you make the speed into a 2 dimensional vector, which could then be simply added to the position?
Looking great thanks
I really like this code and decided to use it in a project of mine with a different background.
However, I have added context on top of the background, and sometimes the lights are on top of my content on the first few slides, yet not the rest. Any ideas why and how I can always have it behind my content?
The link to my project is here – http://cite.nwmissouri.edu/projects/flash/FreshmanSeminar/
Thanks!
hey how do u apply the gradients on adobe flash??
Wow cool!
Maybe in the future I can use this…
Tnx!:D
Nice effect
This is really very cool
I don’t remember anything this simple ever taking this much code. I’ve made snowfall, rainfall, moving bubble animations in AS2 with like 1/3 this much code.
cool effect ,and i will try
Hi Carloz,
very nice script you got going there, I really like it!
I have one remark though to get better performance:
Your function call checkDirection(); at the end of the init() function
runs every time you create a new light! The direction is then finally assigned when you create the last light. If you have 1000 lights the code runs through the for(…) loop and the switch statements 1000 times just to override the direction of every light in the last call.
This is very inefficient, and computationally costly.
Thus its a lot of overhead, and makes things slow!
You should either assign a direction at the creation of each light, or assign a direction at the end of the creation of all instances. There are several ways to do this.
I have modified your code and added another function that adds random direction to each light:
public function addDirection():void
{
trace(lights.length);
for (var i:int = 0; i < lights.length; i++)
{
trace(i);
switch ( Math.floor(Math.random()*10)%4 ) //returns a number 0-3
{
case 0 :
lights[i].addEventListener(Event.ENTER_FRAME, moveUp);
break;
case 1 :
lights[i].addEventListener(Event.ENTER_FRAME, moveDown);
break;
case 2 :
lights[i].addEventListener(Event.ENTER_FRAME, moveRight);
break;
case 3 :
lights[i].addEventListener(Event.ENTER_FRAME, moveLeft);
break;
default :
trace(“Something weird just happened!”);
}
}
}
Then I call your class as follows in the .fla:
light.init(800, 600, 50, 40, 0xFE12F2, 0.3, 3, 3, “left”, 2);
light.addDirection(); // add random direction to each light once (due to public function we can call addDirection once for all lights here)
addChild(light);
cheers and keep up the good work
Hey Carlos,
I am a bit raising my eyebrows about this line of code of yours:
xSpeed = Math.floor((Math.random() * (hSpeed – -hSpeed + 1)) + -hSpeed);
What are you trying to acomplish there, and why are you doing it so complicated.
Wouldn’t
xSpeed = Math.floor((Math.random() *((hSpeed*2)+1) ) -hSpeed);
do the exact same? Why (– +-). Learn a bit of arithmetic, otherwise you will confuse a lot of people out there and won’t bring your point across.
kindly Subu
Alright, I am a designer who is trying to learn a bit of AS 3.0. I followed your tutorial line for line, but now as I try to test it I’m getting some syntax errors. I thought it may have been a type-o, but I’m not finding any errors in my limited knowledge.
Now, I went back, copied and pasted all of your code into the program and I’m getting the same errors. Has anyone else successfully done the tutorial? I want to figure out if the error is mine or in the code itself.
Thanks!
Hy, great tutorial!
I have some doubts, how I make this effect within on moviclip?
Its pretty straight forward you just have to set the actionscript linkage for the movieclip to the lights class
please convert this to work with as2! please!
AS2 is dead ;) No reason to work with as2 ^^
beautiful work Carlos – does anyone know how to change Lights.as so it can be used with a movieclip from the librarby instead of a circle?
Thank you very much for taking the time out to do this, its a great tutorial and i learned a lot.
When this loops it keeps adding more and more circles making until it crashes.
On frame 1 type
var count=1;
On frame 2 type
if (count==1) {
//call the lights as normal
}
On the last frame type
count=0;
gotoAndPlay(2);
Now it will only add the circles once no matter how many times your movie loops.
I am using this as a background element on my website, but the circles are ontop of everything. is there anyway to assign them to a bottom layer?
Thanks so much.
Brian
call the lights as normal and then after addChild(light); add
setChildIndex(light,1);
This worked for me, as I have an image for my background (in position 0) so sitting it in position 1 sits it on top of the bg and then under everything else.
you are the best dude
Yes, brilliant, thanks!
need some help article owner….cz tis i oni can use 1 keyframe…if i need it as a product background and need around 160 keyframes then where should i add it in? need help urgently..thx
thanks nigga!
hmm.. nice effect..
i added it to fav. will use it..
thanks
thanks :D
How do i convert it to 1000px X 250px ? ..thanks.
When your importing the class change the numbers in this line as follows:
light.init(your height, your width, 40, 60, 0xFFFFFF, 0.3, 3, 3, “up”, 2);
so in your case it would be
light.init(1000, 250, 40, 60, 0xFFFFFF, 0.3, 3, 3, “up”, 2);
Thanks for a great job of helping this good work
Thanks to your efforts to a good working
Thanks are excellent
Very nice tutorial. Whenever I try to add text over this, it just turns the stage black. When I preview the movie I just see my text over a black background. What am I doing wrong?
This is just wonderful!! Thanks!