Tuesday, January 5, 2010

Flash develop for beginners !

Questions

So you have done gone ahead and downloaded all the free stuff from here.  So what do I do now.  Well its time to make your first  flash program.  Its going to be a simple Hello world app but we are going to do it Flash Style and  in ActionScript 3.  So go ahead  and open up flash developer and make sure that you have it pointing to the Flex SDK.  If you not sure go to Project Menu and click on properties.  Click on the “Complier Options” Tab and you should see a line that says Custom Path to Flex SDK, go ahead and enter the location of where you unzipped the SDK files.  

Go ahead and start a new ActionScript 3 project form the Project Menu.  On the right hand side you should see something that says project.  This is your project explorer, go ahead and expand the src  folder and double click on main.as  You should see something like this in your editor


package 
{
import flash.display.Sprite;
import flash.events.Event;

/**
* ...
* @author bnh
*/
public class Main extends Sprite
{

public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}

private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
// entry point
}

}

}


You could go ahead and press F5 to test the movie but it would be pretty boring.  So lets go ahead and make it a little interesting by add a square to it.  First thing we need to do is import the graphics class you do this by typing in 



import flash.display.Graphics;



You place this right under the other import statements.  This allows you use graphics methods(functions).  the one that we are going to use is the drawRect, method.  This is allows us to draw Rectangles and squares.  So you need to change



private function init(e:Event = null):void 
{

removeEventListener(Event.ADDED_TO_STAGE, init);


// entry point
}


To this



private function init(e:Event = null):void 
{
removeEventListener(Event.ADDED_TO_STAGE, init);
graphics.beginFill(0x0000ff);
graphics.drawRect(0, 0, 100, 100);
graphics.endFill();

}


The graphics.beginFill(0x0000ff) determines what the fill color of square is going to be.  Remember that colors are in hexadecimal format.  If you want to find out what the hex value of a color is you can go here.  Just remember to place 0x before you hex number.



The graphics.drawRect(0, 0, 100, 100) says draw a rectangle at point (0,0) and make it 100 pixels wide and make the height a 100 pixels.  So if you wanted to draw a square that was 200w x 200h and point (20, 20). You would do graphics.drawRect(20, 20, 200, 200);



The graphics.endFill() says hey I am done using this color and draw it please.



So once you have placed your code or copy and pasted it in.  Your class should look like this



package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.display.Graphics;

/**
* ...
* @author bnh
*/
public class Main extends Sprite
{

public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}

private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
graphics.beginFill(0x0000ff);
graphics.drawRect(100, 100, 100, 100);
graphics.endFill();

}

}

}



Go ahead and press F5 to test the movie and you should see a blue square



And that’s it. You have created your first Flash program and it didn’t cost you a dime except time :)

1 comment:

Anonymous said...

Thanks for the tutorial, it help me out alot