AS3 Tutorials Novice

The educational technology and digital learning wiki
Revision as of 19:16, 31 October 2007 by Widged (talk | contribs)
Jump to navigation Jump to search

Draft

<pageby nominor="false" comments="false"/>

Stage 1 : (Absolute) Novice

I don't know for you. I tend to learn best by doing. What gets me through complex learning is the desire to realize things. Of course, it is very important to take the time to understand complex notions thoroughly. However if you are too much worried about understanding every single aspect of the programming language before writing your first line of code, chances are high that you will give up before reaching that point. If you reach that point, the risk is that your head will be so full of unfamiliar concepts that you will completely unsure about what you should be doing next, what option to take.

Something that I find to work for me is to take a tutorial or book about the language, read it through without trying to understand everything. I do my best to understand the introductory paragraph of each chapter and to browse through the code trying to grasp the gist of how things get done. Then I go back to the beginning and start coding very simple examples. I make sure that I understand them well. I try to produce as many simple variants as I can of these simple examples. I add a new element, then a new one, etc. Once I become familiar enough with the very basic I try to come up with an idea of a little program that I could write that would make use of many of these basic elements. I write the program... I don't give up before I have finished writing it. Even if it takes me 2 or 3 days, I persevere. Once I am okay with writing an original program, I try and come up of ideas of various types of games or activities that I would like to become able to realize. I evaluate which one I can write successfully with what I already know. I evaluate what new concepts I need to master in order to write that program and the likelihood that I can get to learn these concepts in a relatively short amount of time. I go for the most realistic options.

In this view, what we will do next is

  1. provide a simple program that is guaranteed to work (copy/paste/compile/run).
  2. invite you to try and write variants
  3. introduce a small number of examples that each introduce a specific technique
  4. come up with suggestions of mini-games or activities that you could write that use these techniques
  5. take you through a complete example of such a mini-game.

Compiling a first program

There are potentially three ways to compile your first actionscript program:

  1. Compiling with the Flash CS3 Authoring tool
  2. Compiling with Flex Builder
  3. Compiling with the binary mxmlc included in the Flex framework.

Here, we will describe how to compile with mxmlc. This assumes that your Flex framework is properly installed. For information on how to install it on the Adobe Flex page.

Open a text editor, a simple one that will save the text as it appears on the screen, without any formatting. In that new text file, copy the following code:

 package  {

   import flash.display.Sprite;

   public class FilledCircle extends Sprite {

       function FilledCircle():void {

         var circle:Sprite = new Sprite();
         circle.graphics.beginFill(0xFF794B);
         circle.graphics.drawCircle(50, 50, 30);
         circle.graphics.endFill();
         addChild(circle);

       }
    }
 }

Save the file as text and give it the name of "FilledCircle.as". Take good note of the directory in which you save that file. Preferably, put it in a folder quite high up in the hierarchy. We will assume that the file is stored somewhere defined by "\path\to\file\".

On a mac

  1. Open a terminal window. Terminal is an application like any other. To find it, go to the Applications -> Utilities. You should see Terminal.app among the files.
  2. Double click on the application to open it.
  3. At the prompt, type:
 cd \path\to\file\
 mxmlc FilledCircle.as

On a PC

  1. From the Windows start menu, open a command prompt by choosing Start > All Programs > Accessories > Command Prompt.
  2. At the command prompt, change to the C:\Flex SDK 2\bin directory then execute the mxmlc executable on your actionscript file.
 cd C:\Flex SDK 2\bin
 mxmlc C:\path\to\file\FilledCircle.as

The mxmlc executable will compile the program and generate a .swf file name FilledCircle.swf. To run the file, open it in the Flash Player on your desktop or in a web browser that has Flash Player installed. Note that Flash Player 9 needs to be installed to view swf files generated by the Flex compiler.


Let's go exploring!

We have covered step 1 and 2. What remains is to go through step 3 to 5.

  • AS3 simple examples: introduce a small number of examples that each introduce a specific technique