By midnight tomorrow, December 21st, please publish your final files online, and post the links in the comments section of this week’s blog post. Please included the following:

• Your final project swf, embedded in an html file
• A zip file of your final .fla file, plus any unusual fonts and any remotely loaded images, music or video
• Remember to credit any one else’s code that you used in the comments of your Actionscript in your .fla file. Failure to do so constitutes plagiarism and may cause you to fail the class. Provide the url where you found the code.

Have a great break!

For those of you doing a game where you want scoring, here’s a tutorial. It’s for FlashMX, so using Actionscript 2, but the principle of what you need to do is the same:

Games – Keeping Score

Next week is an in class work session. Your goal for next week should be to get all your interface elements set up in Flash, and to code to a point where you hit a problem you are not sure how to solve.

We have three more classes after today!

• Class evaluations
• Final Project Concept Presentations
• Final Project Next Steps
• Using third party libraries: Tween Lite

Final PRoject: Project Planning

The next step in your final project is to create a detailed plan. For next class (after Thanksgiving!) you need to produce the following:

1. Project Brief
2. Process Flow
3. Storyboards

1. Project Brief– This is a text description of your project. It should include the following:

• Overview: A few sentence summary of the project.
• Audience: Who is application for? Include age range, gender, anticipated technical skills, language capability.
• Platform: How do you envision this application being used? Is it part of a larger Web site? A mobile application? Part of an installation?
• Functionality requirements: Describe how the application will operate. How many distinct states or screens or pages will it have? How will a user interact with it?
• Technical requirements: Describe as best you can what code elements will be required for the application.

 2. Process Flow – This is a bit like a site map for a Web site. A process flow visualizes the way a user would move through the application from a high level.

Every distinct state or page of the application should be represented by a rectangle, connected by diamond shaped decision points.

3. Storyboards

Take your process flow and turn everything that is represented there into a fully designed interface for each step represented there. Design these in whatever tool you are most comfortable with (Photoshop, Illustrator, Flash itself, a combination) but turn the storyboards into a single PDF that you will present to the class after Thanksgiving. You should be able to fully walk us through the functionality of your Flash application with these storyboards. They should represent the near final design of your application. The more time you put into this step, the more time you will have for animation and coding. You are going to need it!

FYI, this is how the final project grades will break down:

Final Project Grading:

• 30% Concept and Planning
• 30% Interface and Graphic Design
• 30% Code and Functionality

Using third party libraries: Tween Lite

Third part libraries are code created by companies or individuals to extend the capabilities of Flash or make common tasks easier. These libraries arenot part of the core actionscript packages but can be imported into your Flash project for use in your applications. We’re going to look at one popular library today.

Tween Lite – A more robust tweening engine than the built in Tween class.

Here are the detailed instructions that we’re going to follow today to use Tween Lite

There is also a good tutorial on importing third party libraries here

Topics

• Loading Video
• Final Project

Loading Video

Loading video is similar to loading audio, but it needs a few more objects because video is loaded into the video object as a stream rather than the whole file at once. Here’s some good reference on the video playback:

Livedocs > Working with Video

Final Project

Now comes the time to start thinking about your final project! Next week I want you to come to class with a concept that you are prepared to discuss with the class, with the following parameters in mind:

• Your Flash application can take many forms – it can be a game, an art piece, and educational tool, an interactive animation, or something else that you invent
• Your application should be interactive – something a user can really play with. A passive slideshow isn’t going to cut it.
• It should serve a purpose beyond pure entertainment – it should inform and educate. Choose a subject matter than you are passionate about and think about how your Flash application could evoke the same enthusiasm in the user.
• Think about who the application is for – how old are they? what are their technical skills? language skills? what form is going to most engage them?
• Last, this application should showcase the skills you have learned throughout the class

• Loading Audio
• Loading XML – An XML Photo Gallery

>> Week 9 examples

Loading Audio

Loading external audio files is similar to loading image or swf files, but you use the Sound and SoundChannel objects instead of the Loader. These objects also let you play and stop the playback.

Loading XML

XML stands for eXtensible Markup Language. This is a special document format that Flash can read, and is a relatively simple way to load any kind of data into your Flash application. Today we are going to look at an image gallery that gets all its info from an XML file.

Homework

Combine the two exercises today to make an audio player that can play mutliple tracks. The track info should come from an xml file. The player should have buttons to play and stop the current track, and navigate to the next and previous tracks. Note: If you use the method in the example, when you hit the stop button and then the play button, your track will always start over. For the purposes of this exercise, that’s ok!

• Loading External Assets
• Using Tweens and Transitions
• Third Party Libraries: Tween Lite

>>Example files

Loading External Assets

As you could see from the banner ad exercise, file size adds up quickly when you are bringing graphics into your library. Even if you don’t have the kind of size restrictions that the banners do, an overly large file is going to take forever to download and start playing in the viewer’s browser. One way to minimize this is to load the assets as you need them when the Flash movie is playing. This is similar to the way you include images in a Web page. It also means that you have to upload those images to your Web server along with your swf and html files in order for them to load and display.

Step 1: Create the Loader

You can load images (jpeg, png, or gif only) or other swf files. First you need to create a container to hold the image you are going to load. This container is a special object called a Loader. This is how you create a loader:

var myLoader:Loader = new Loader();

In this example, “myLoader” is a variable Name that you decide, everything else is set.

Step 2: Add the Loader to the Stage

When we create an object like this with ActionScript 3, it doesn’t automatically add that object to the stage. Adding the loader is simple:

addChild(myLoader);

Even though the loader is now part of the stage, you won’t see it. Loaders have no appearance of their own, they are just an empty container to put things into.

Step 3: Identify the asset to load

Next we need to create an object to hold the path to the image or swf that we want to load into the loader. This object is called a URLRequest.

URL stands for “Uniform Resource Location”, which is just a fancy way of saying Web address. In other words, URLs are what you see in the address field of a Web browser. The URLRequest is going to show the path to the asset on our local machine or the server.

There are two ways to represent this path, relative or absolute.

In an absolute path, you give the full address on the local machine or Web server: http://www.domainname.com/subdirectory/filename.ext

In a relative path, you only give need to give the path relative to the swf file the image will be loaded into: subdirectory/filename.ext

It’s best to use the “relative” path to the asset, because this will be the same when you are working on your local machine as when you publish to the Web server. To simplify things and stay organized, keep your assets in a subdirectory (folder) in the same directory (folder) as your Flash files.

So, if you had an image called “my_image.jpg” in a subdirectory called “images” the relative path to it would be “images/my_image.jpg”

You create the URLRequest like this:

var myImage:URLRequest = new URLRequest(imagePath);

In this example “myImage” and “imagePath” are variables. You can either put the image path directly in to the parentheses after URLRequest or create another variable to hold it.

Step 4: Loading the Asset into the Loader

Now that you’ve created the empty container, and identified the asset to go into it, it only remains to load one into the other:

myLoader.load(image);

If you test your movie, you will now see it on the stage. Here’s a couple things to note about the loader object:

Positioning Loaded Content

The loader is placed at the 0,0 coordinates on the stage, so you may want to reposition it. You can do this by accessing it’s x and y properties:

myLoader.x = xposition;
myLoader.y = yposition;

Scaling Loaded Content

The image is loaded into the the loader at 100%. You can scale with code with the scaleX and scaleY properties, but like importing into the library, it’s better to resize it outside of Flash. The larger the asset is, the longer it will take to load, and you don’t want to make the viewer wait around unecessarily. The scale property is a percentage expressed as a decimal between 0-1, so .5 represents 50%. You can scale above 100%, but you’d be blowing a bitmap up larger than its pixel dimensions, which is never recommended!

myLoader.scaleX = myLoader.scaleY = yposition;

Now let’s look at an example that puts the loading code into a function so that you can reuse it for multiple loaders. This will help you get started on the homework:

Tweens

The Tween class allows you to animate the same properties you could using a Motion Tween on the timeline:

Tween Reference

Now, with these objects, for the first time we are using Flash packages that are not automatically imported when we publish the file, so we have to do that first:

import fl.transitions.Tween;
import fl.transitions.easing.*;

Transitions

There are a number of transitions designed to bring content on or off the stage in the fl.transitions package. The Transition Manager class allows you to access these transitions:

Transition Manager Reference

Homework

Create an image gallery / slideshow that does the following:

• Loads at least 10 external images
• Automatically loads a new image every 10 seconds (slideshow)
• Stop button to stop the slideshow
• Play button to play the slideshow
• Has buttons or some other navigation element to move to the previous and next images, one by one

Extra credit: Add either a tween or a transition to switch between images

Creating Drag and Drop Elements

The Sprite class has built into it several methods for allowing user input to grab an object on the stage and drag it to another location. These methods are called startDrag and stopDrag, can be used with any Sprite or MovieClip, and are generally triggered by mouse events. These methods are tied to a specific display object and triggered within an event handler.

The startDrag is called when the initial user event is dispatched, and causes the target object to be draggable. This method takes two optional arguments:

• lockcenter – this is a Boolean that determines whether the Sprite is locked to the center of the mouse position (true) or to where the user first clicked on it (false). The default value is false.
• bounds – specifies a boundary rectangle for the Sprite, beyond which in cannot be dragged. The default value is null.

The stopDrag method is called when the terminal user event is dispatched, and causes the target object to cease being draggable. This method takes no arguments.

There is a property of the Sprite object that is related to these functions, called the dropTarget. This specifies the object which the sprite was dragged and released onto.

Homework

Create a simple shape matching game, such as you might give to a young child. There should be at least 5 shapes and 5 matching shape targets. Create the code such that:

• If the user drags the shape to the wrong target, it snaps back to its original position and displays a message that tells the user that is incorrect
• If the user drags the shape to the right target, a message is displayed that tells them they made the correct

Have fun with this and be creative! Create something that would be appealing to a kid, and easy to understand.

• Frame-based events
• Timers
• Hit Testing

So far we’ve been working with user-generated Mouse Events. Today we’re going to explore some non-User events that allow us to animate and react with code.

>>Week 6 Examples

Frame-based Events

Now that we are comfortable with working with and creating display objects, and using event listeners and event handlers, we can also create animation entirely from code, without involving the timeline. To do this, we use a new event type, onEnterFrame, or ENTER_FRAME event.

You might think that you could use a for loop for animation, like this:

for(i = 0; i < 500; i++){
    ball.x = i;
}

Where “ball” is a display object that you have defined elsewhere. You might think that this code would move the ball 1 pixel 500 times, and in a sense you would be right. The problem is that you would only see the result of the last loop, because all 500 loops are executed before the frame is rendered.

To get around this, you need to introduce time between loops, which is where ENTER_FRAME comes in. The ENTER_FRAME event is dispatched at the frame rate of the .swf.

This is how you set up an enter frame event:

instancename.addEventListener(Event.ENTER_FRAME, eventHandler);

function eventHandler(event:Event):void {

            //do something
 }

Timer Events

You can also set up an event that will happen at regular intervals in your code. This is called a Timer Event. A timer is actually an object, so first you need to create a new Timer instance, then add an event listener and handler to it, and last, start the timer!

//create the timer instance
var myTimer:Timer = new Timer(500, 10);

//add the timer event to it
myTimer.addEventListener(TimerEvent.TIMER, eventHandler);

//start the time
myTimer.start();

function eventHandler(event:TimerEvent):void {
    //do something
}

Hit Testing

It can be useful when creating dynamic code based animation to be able to detect when one display object collides with another. This is called “Hit Testing”. You can hit test two ways, with two objects or with an object and a point on the stage.

To hit test two objects, use the hitTestObject method:

object1.hitTestObject(object2)

To hit test and object and a point, use the hitTestPoint method:

object.hitTestPoint(xcoordinate,ycoordinate)

 Homework

Simulate the game of Pong! Create an animation that uses enter frame to animate the properties of at least 3 objects and a hit test between them, and incorporates a timer.

Also, turn your drawing app homework in again with comments, so that I know you understand how it works!

Note: Next week we are going to have an in class quiz on the material we have covered so far. If there is anything you are unclear on, now is the time to ask questions. The quiz will be on paper, and you will not be allowed to look things up on the internet

Topics

• Variable Scope
• Creating a Custom Cursor
• Working with the Drawing API

Variable Scope

This is something we haven’t talked about specifically, but is important to understand as you start to write more complicated code.

A variable’s scope refers to where in the code it is defined. A variable is either global or local. A global variable is available to all code within the program. A local variable is only available to the function or statement where it is defined. For the most part, we’ve been dealing with global variables. However, variables that we’ve defined within conditional statements or loops are confined in scope to those statements.

Let’s take the example of the addMe Function from an earlier class:

function addMe(var x:Number, var y:Number):Number {
 var z:Number = x + y;
 return z;
 }

In this case, the variables x, y, z are all local to the addMe function. The problem with this is that the function returns the value of z, but there is no way to access this value, because it only has meaning within the function. Instead, you might want to define z outside the function:

var z:Number;
function addMe(var x:Number, var y:Number):Number {
z = x + y;
return z;
}

Now, when you call this function you will have access to the returned value of z. Note, however, that x and y are still local variables, because you defined them within the parameters of the function.

We’ll look at this issue more specifically in the next example.

Creating a Custom Cursor

There may be cases in a application where you want to display a different cursor icon than the standard arrow or hand that your computer usually uses. In flash, this icon is a property of the Mouse object. There is no direct way to replace this icon, what you do instead is hide the default icon, and then attach a new symbol in Flash to the position of the mouse.

To hide the mouse is a simple method of the Mouse object:

Mouse.hide();

Then it’s a simple matter of creating the new instance of the cursor symbol, adding it to the display list, and pinning it’s x and y coordinates to the position of the mouse. You can get the position of the mouse with these properties:

• mouseX
• mouseY

The Drawing API

If you are using simple shapes in your application, you can avoid creating library symbols completely and instead use ActionScript 3.0’s Drawing API to create vector graphics.

The Drawing API (Application Programming Interface) is part of the Graphics class. Any Sprite or Shape instance you create includes a graphics instance that you can draw within. There are a number of methods you use to draw and fill vector shapes.

> Live Docs > Graphics Class

Setting a Line Style

The graphics.lineStyle method takes three arguments – thickness, color, and alpha:

graphics.lineStyle(1);

Drawing Straight Lines

To draw a straight line from the last point that the “pen” landed, use lineTo, which takes two arguments, x and y coordinates.

graphics.lineTo(50,0);

Moving the Pen

To move the pen position without drawing a line, use moveTo, which also takes x,y coordinates.

graphics.moveTo (-50,50);

Drawing Curved Lines

A curved line requires four points of reference – controlx, controy, anchorx, anchory

graphics.curveTo(0,-50,0,0);

Primitive Shapes

There are built in methods for creating circles, ellipses, rectangles and rounded rectangles in ActionScript 3.0. They take various arguments depending on the shape:

• drawCircle(x:Number, y:Number, radius:Number)
• drawEllipse(x:Number, y:Number, width:Number, height:Number)
• drawRect(x:Number, y:Number, width:Number, height:Number)
• drawRoundRect(x:Number, y:Number, width:Number, height:Number, ellipseWidth:Number, ellipseHeight:Number)

Fills

To fill in lines or shapes created with the drawing API, you define a fill style with beginFill, which takes two arguments, color and alpha:

graphics.beginFill(0xFFFF00,1);

All shapes will be filled with this style until you invoke the endFill method:

graphics.endFill();

Homework

1. Using just the Drawing API methods (no Library symbols or objects drawn on the Stage) draw a self-portrait.
2. Make a drawing application that lets the user draw on the screen using the mouse. (Hint: You can use the custom cursor example as a starting point for this application)