Flash Basics: Part 1
For too long I’ve put off learning Flash because I never liked the layout of the program, but I decided today that like it or not, flash is a very popular front-end development tool. Being a front-end developer it’s important to know every tool and technology to some extent and understand the inner workings of each technology and how to integrate them with other markup and programming. So let’s dive into some screenshots and descriptions and learn Adobe Flash.
Getting to know the program
Create a new Flash File (Actionscript 3.0)
- Create a new Flash File by going to File > New > Flash File (Actionscript 3.0)
- Change the document size and frame rate to your liking (Modify > Document), I used 640 x 310 and 18 fps
- Use the Rectangle tool and draw a rectangle on Layer 1 with the color you’d like
- Create any other layers or draw any other objects or place text. I created a text object on top of the rectangle
- Name “Layer 1″ to “Background” and create a new layer named “Code”
- Save the Document
Create a new Actionscript File
Paste in the code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 | /* Blurry Lights Animation */ package Classes { /* Import required classes */ import flash.display.MovieClip; import flash.filters.BitmapFilter; import flash.filters.BlurFilter; import flash.events.Event; public class Lights extends MovieClip { /* Vars */ private var lightsNumber:int; private var xSpeed:int; private var ySpeed:int; private var lightsDir:String; private var areaW:int; private var areaH:int; private var lights:Array = new Array(); /* 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 { /* Set variables */ areaW = areaWidth; areaH = areaHeight; lightsNumber = numberOfLights; lightsDir = dir; /* Use a for to create the parameter-specified number of 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(); /* Set a position based on the params specified */ light.x = Math.floor(Math.random() * areaWidth); light.y = Math.floor(Math.random() * areaHeight); /* Add blur, we declare the var here to get a new blur w/every light */ var b:int = Math.floor(Math.random() * 10) + 5; var blur:BitmapFilter = new BlurFilter(b,b,quality); var filterArray:Array = new Array(blur); light.filters = filterArray; /* Change alpha */ light.alpha = Math.random() * 0.6 + 0.1; /* Scale */ light.scaleX = Math.round(((Math.random() * (1 - minimumScale)) + minimumScale) * 100) / 100; light.scaleY = light.scaleX; /* Add the lights */ addChild(light); /* Store lights in an array to use it later */ lights.push(light); /* Check for lights direction */ checkDirection(); } } /* Check direction */ 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("Something weird just happened!"); } } } /* Move Up function */ 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); } } } } |
- Note the line “package Classes” near the top. This is the name of the folder that will contain your class file. Make sure you have this folder in the same directory as your other flash file and that the name of the folder matches the name of the package.
- Save the file inside your “Classes” directory
Add your Actions to your Flash File
You’ve created the ActionScript file and Lights class, now all you need to do is call that class and pass the parameters to the script. Do this by going to Window > Actions and pasting in the code. Save and preview / publish and you’re done!
import Classes.Lights; var light:Lights = new Lights(); light.init(640, 310, 10, 300, 0xFFFFFF, 0.5, 1, 1, "up", 2); addChild(light);





