flash by stariya


									The following is a brief tutorial on developing your own Flash animation programs. Be warned that you
won’t learn much about the programming language here, this is more to get you to use a development tool
to write and compile flash programs. You will be given several programs to use rather than trying to
write your own. In some exercises, you will be able to make changes to some of these programs.

Flash is a multimedia platform used to add animation, video and general interactivity to webpages. It can
also be used to develop stand-alone programs that will run in a flash player. These programs might
contain video, animation, or computer games.

Flash itself is a platform. To develop flash animations, you can either use a tool and perform “drag and
drop” type operations, the tool then generates code for you, or you can write the code yourself using the
language ActionScript. ActionScript is currently at version 3. This is an object-oriented language which
looks something like Java or C#, and so also looks somewhat like JavaScript.

First step, getting an IDE (Integrated Development Environment) for Flash and ActionScript. There are
many available, but we will use a fairly simple open source (free) version called FlashDevelop. Here are
downloading and installation steps. This is for Windows-based computers only.

    1. Go to the following URL. http://www.flashdevelop.org/community/viewforum.php?f=11
    2. Click the link, FlashDevelop 3.3.0RTM released (there is a newer release but these notes were
       written for the 3.3.0 release, so use it to ensure it will match these notes). You may read the
       information in the install message if you wish to do so.
    3. At the bottom of the page is a link for “Download FlashDevelop 3.3.0 RTM”. Click on this link.
    4. Save the file to your hard disk. Once saved, run this file.
    5. The install wizard will appear. Leave the defaults as is and only change the install directory if
       you want. Otherwise, just click the next button each time it appears until the installation is
    6. Once installation is complete, you should have a new desktop icon for FlashDevelop. Double
       click it to start the environment. You will see the FD window which looks like this:
There are three areas that you will need to work with. The large pane in the upper left is your
editing/programming area. You will type or edit your code here. The large pane on the right will show
you the files available to you. The pane at the bottom will deliver any syntax error messages.

Let’s start by creating a very simple AS (ActionScript) program which will just display text and nothing
else. To create a flash program, follow these steps:
    1. Open Flash
    2. Under the Projects menu, select New Project. The following pop-up window will appear:

    3. Under Location, select a location for this project. You should create a new directory that is
       currently empty. Under Name, enter the name of your project. Make sure Flash IDE Project is
       selected in the upper left portion of this window. Click on OK.
    4. You will see in the right hand pane now a box with the name of your project followed by (AS3).
       Right click on this and select Properties… from the pop-up window.
    5. You will see “No output, only run pre/post build commands.” Is checked. Unselect it. Now the
       Output file box is available. Type in an output file name (use the same name as your project).
       You can also alter the dimensions, background color and frame rate if desired. You will explore
       these options later. Click on OK.
    6. Again, right click on the project name in the right window pane and select Add and from the
       submenu, New Class… A pop-up window asks you for the name, type in simple.as (the .as
       should already be there) and click OK. Now you will see that simple.as has been added to the
       project on the right and code appears on the left. The code is just a skeleton that starts with the
       word package, includes the public class simple definition and the public function simple( )
       definition. All we have to do is fill in the function simple to write a program.
    7. Notice in the right pane, your class item is indicated with a red circle. Right click on the name of
       the class and select Always Compile. That red circle changes to a green down arrow. Now write
       the program. Here we will do a simple “Hello World” style program:
           a. After package { add these two lines:
                        import flash.display.Sprite;
                         import flash.text.TextField;
            b.    Between the { } in your function, write the following:
                         var text:TextField = new TextField( );
                         text.x = 50;
                         text.textColor = 0x000000;
                         text.text = “Hello World”;
    8. Now you are ready to try to compile the program. To compile and run the program, press <cntrl>
        + <enter> (note: you can also do this in two steps, first select Build Project form the Project
        menu and then Run Movie from the Project menu). If you have syntax errors, the compiler will
        list them in the Output window and the program will not run. Running this simple program will
        display the text “Hello World” in black font (000000) starting at x location 50. Close your Adobe
        Flash Player when done.
    9. Now make these changes:
             a. add text.y = 100;
             b. change the color to 99FF33
             c. add text.backgroundColor = 0x0000FF;
             d. add text.background = true;
             e. add text.border = true;
        Again, compile and run this and see what happens now.
    10. Close out of this project by selecting Close All from the File menu and Close Project from the
        Project menu. If asked to save the project, select yes. Also, click on the X in the Project window
        (right hand pane).

Open a web browser and download these two files from the web site:

Now that you have done a simple project, try this more elaborate one. Follow the same steps above 1-6
except that you should save the new project in a new directory and with a new name. NOTE: you can
start a new project by clicking on Create a New Project in your right hand pane window. Once you have
the new project created and have clicked off the “No output, only run pre/post build commands.” and
specified an output file name, right click on the project’s name in the right pane and select Add and the
submenu item Existing File… Select the first file you downloaded. Repeat this for the second file.
Double click on each file name in the right pane and the code will appear in your left pane. The
FirstCircle.as file specifies how to create 10 circles and place them in your flash screen. The
MovingCircle.as defines a single circle and how to move it. You might notice that the FirstCircle class
calls upon the MovingCircle class. In the right pane, right click on FirstCircle.as and select “Always
Compile”. Now press <cntrl> + <enter> to compile and run FirstCircle. You should see 10 yellow
circles that move on the screen.

Once it runs, close the Adobe Flash Player window. In FirstCircle, you can change the number of circles
created in the for loop that reads: for (var a:int = 0; a < 10; a++) by changing a < 10 to some other
number such as a < 20 for 20 circles or a < 5 for 5 circles. You can always modify the circles themselves
in MovingCircles.as by changing the beginFill color, the size of the circle in drawCircle (the third number
specifies the size of a circle), and the speed of the circles. Make some changes, press <cntrl> + <enter>
and see what happens. When you are done experimenting with the code, close the project and the files.

Now move on to the two exercises for this set of material.

To top