We’ll be doing final project presentations today.

Also, please remember to upload your html and swf files, and a zip file of your .fla and any supporting files (fonts, remotely loaded images, video or music) to your Web server, and post a link to those files on the blog here by midnight tonight. You will not get credit for your project if you fail to do this, and if you miss the deadline I will deduct from your grade.

This week we are going to review your project storyboards.

Next week is a work session, your goal for that class is to have your interface built, and a substantial amount of your code written. Come into class with a problem you aren’t sure how to solve!

>>Week 11 examples

Topics:

• Final Project concept presentations
• Using Audio
• Drag and Drop Events
• Final Project Requirements
• Creating a Project Brief and Sitemap

Using Audio

There are a number of different ways you can play audio through Flash, each has it’s advantages and disadvantages.

Supported Audio types

Many audio types are supported in Flash, but you’ll have best luck with .aiff or .mp3 files. All audio is published out of Flash in the mp3 format, so this is a good format to start with.

Import to Library

You add audio to your Flash movie the same way you import other media assets. You can use either “Import to Library” or “Import to Stage” but either way the audio file will end up in your library, but not on the stage.

Select an imported audio file in the library, and you will see a visual representation of the sound file, in addition to tiny little play and stop buttons to the top and right that allow you to preview the audio file.

To see additional properties of the sound file, double-click the speaker icon next to the filename.

Check your file size! This is going to impact the total size of your swf. You can adjust the compression settings here for this file only or in the Publish Settings panel for the whole movie.

Adding Audio to the Timeline

You add audio to a keyframe on the timeline, in the properties panel when you have a frame selected. The audio will start playing when the swf hits that frame.

Choose the sound you want to add with the “Name” pulldown in the sound section of the properties panel.

Once you do this, you will see the waveform of the sound in the timeline.

Increase the height of the layer by control or right clicking the layer name and changing the layer height:

How the file will playback depends on how the Sync property is set. There are two primary settings you should concern yourself with here:

Event – Plays whole audio file. If you don’t want this, you can do some minor editing in the sound properties. This should be reserved for very short sounds, or you will get awkward echoing as the movie loops and continues to play the sound again and again.

Stream – Plays the sound only as long as the timeline. You can set the repeat and loop settings for replay, but this will always stop a previously playing sound before starting the next one.

The problem with both of these methods is that you aren’t giving the user any control over the playback of the sound. I generally avoid timeline sound in favor of one of the methods below.

 Playing Audio from the Library

In order to play an audio file from the library, you have to give it a class name. Control or right click on the file name in the library and open the file properties. On the sound properties panel, click the “Advanced” Button in the bottom right of the panel. In the section that opens up, click the “Export for Actionscript” and “Export in Frame 1″ boxes, and give the file a class name. The name of the audio file will automatically get filled in, but you should change this, having the extension in the name will cause problems.

Now you must create a new instance of this sound in your code, using the class name that you set above:

var track:myTrack = new myTrack();

This won’t automatically start the sound playing, however, you have to tell it to play:

track.play();

If you want to stop the sound, things become a little more complicated, as the stop method is actually part of a different object – the SoundChannel class. So you’ll need an instance of this, and you will need to assign that channel to the playback of your file:

var channel:SoundChannel = new SoundChannel( );
channel = track.play();
channel.stop();

This still isn’t the most ideal way to play audio, however, because the audio file becomes part of the .swf and adds to the file size and download time. Any audio file that is more than a few seconds, you should load into the .swf much in the same way that we did with images.

Loading External Audio Files

This works similarly to the library example, except that we load the sound into a blank generic sound object, using the URLRequest object to hold the value of the audio file name:

var track:Sound = new Sound();
var request:URLRequest = new URLRequest(filename.mp3);
track.load(req);

Drag and Drop Events

Any named movieclip instance on the stage can be made “draggable” with the startDrag( ) method.

myObject.startDrag();

Usually this is triggered with an event listener on the MOUSE_DOWN event on the instance. Once startDrag is called, the object will follow the mouse movement. To stop this behavior, you use the stopDrag( ) method, usually implemented on MOUSE_UP.

myObject.stopDrag();

This behavior also has a property associated called dropTarget. The dropTarget is the object that is under the draggable object when the stopDrag method is called. To get the name of the drop target, you must access its name property.

myObject.dropTarget.name;

Final Project Requirements

Your final project should include the following:

• Timeline animation
• Code control of timeline playback
• At least one dynamic text field whose value is changed by code
• At least one input text field
• At least one button that responds to a mouse event

Planning your project

For next week you are going to produce two documents that will help you define your project.

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.

>> Week 10 Examples

Topics

• Conditional Statements
• Understanding Text Fields
• Classic Text
• TLF Text
• Embedding Fonts
• Reading and Writing to Text Field Contents with ActionScript
• Using Keyboard and Focus Events

Conditional Statements

When you are dealing with user actions, it’s useful to react condtionally to user input, in other words, have Flash do something different based on different actions by the user. This is a job for conditional statements! If you ever had to take logic in high school, you’ll recognize these.

The most common conditional statement is the if … else statement, which says, if something (a condition) happens do something, if it doesn’t happen, do something else. A simple if statement looks something like this:

if (something is true) {
   //doSomething();
}

You could just stop it there, but if you want to add behavior to handle if that condition doesn’t happen, you add the else clause:

if (something is true) {
   //do something
}else{
  //do something else
}

Understanding Text Fields

There are methods for dynamically manipulating the properties of text fields with code, but this requires understanding the different types of text in Flash.

Classic Text vs TLF Text

Pre-CS5, there was only one kind of text framework in Flash, what is now referred to as “Classic Text”. If you are using a CS4, this is the kind of text you will be using. If you are making an AS2 application, you will also use Classic Text. Other than that, you will probably want to stick to TLF text, although remember that you will be limited to OpenType and TrueType fonts.

Classic Text Types

• Static: Non-editable or selectable by user, not readable or writable by actionscript
• Dynamic: Selectable by user, readable and writable by actionscript
• Input: Selectable and editable by user, readable and writable by actionscript

TLF Text Types

• Read only: Same as Static
• Selectable: Same as Dynamic
• Editable: Same as Input

Font Embedding

When you are working with dynamic text of any kind, and using anything besides standard Web fonts, you need to “embed” the font in your Flash file. Otherwise, if the viewer doesn’t have that font installed, they will see a system default font. To embed a font, select the text field and click the embed button in the Character section of the properties panel.

In the Font Embedding panel that pops up, you name give the font a name and choose which characters to embed with your file. When you embed a font, it increases the file size of your swf, so you should only embed the characters you need. I usually choose Basic Latin to cover the bases but not load more characters than I need.

Reading and Writing to Text Field Contents with Code

All dynamic text fields have a property called “text” that holds the, well, text.

To access the current text in a text field:

myTextField.text;

To set the text of the text field:

myTextField.text = "some other text";

Make sure you put the text in double quotes!

 Keyboards Events

>> Capturing Keyboard Input

You can respond to a user pressing and releasing key on the keyboard just as you can with mouse events. These are called keyboard events. There are two events you can listen for KEY_DOWN and KEY_UP:

//Keyboard Event Listens
addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
addEventListener(KeyboardEvent.KEY_UP, onKeyUp);

These events include the information about what key was pressed. This comes in two forms, the keyCode and the charCode. Each of these are numbers that are mapped to characters, but they are a little bit different from each other – a key code value represents a particular key on the keyboard (the 1 on a keypad is different than the 1 in the top row, but the key that generates “1” and the key that generates “!” are the same key) and the character value represents a particular character (the R and r characters are different). Which one you will use will depend on what you are using it for.

function onKeyDown(evt:KeyboardEvent):void {
  trace("onKeyDown: " + evt.keyCode);
  trace("ctrlKey: " + evt.ctrlKey);
  trace("keyLocation: " + evt.keyLocation);
  trace("shiftKey: " + evt.shiftKey);
  trace("altKey: " + evt.altKey);
}

function onKeyUp(evt:KeyboardEvent):void {
            trace("keyUpHandler: " + evt.keyCode);
}

Now, this doesn’t do you much good if you don’t know what numbers correspond to what keys, there’s a list on this page.

Focus Events

A focus event happens when an a user switches between one object and another … like clicking in a text field. You set these up just like any other event, with a listener and a handler.

Homework

Using what you learned about text fields today, make a “MadLib” where a user types in words on one screen, and then reads the Madlib on the next. It should function something like this, although you don’t need as many words to input (10 should do it) and you don’t need the “send” functionality.

Final Project

For next week, I’d like you to come up with a concept for your final project that we will discuss in the class. Here’s the parameters for the project:

1. Choose a subject or cause you are passionate about and have a good level of knowledge or expertise in.
2. Create a simple Flash application that is a tool to educate others about your subject. This could take many forms …. An animated story book, an interactive quiz, a simple game, a puzzle … be creative! Think about who the target audience is for this application. What will be most engaging to them? Consider age, technical skill, language comprehension, attention span.

Next week we will discuss more specific requirements for the project, and the stages that you will go through to develop it, but for now I just want you to come up with a general idea.

Topics:

• Variables Explained
• Loading External Assets

Variables

A variable in a programming language is a way to store a value that may or may not be known at the time the program runs, and may change over the life of the application. You can store all kinds of values in a variable – numbers, text, true/false values, the names of objects on your stage or objects you create with code. You can also pass variables as function parameters.

A simple variable declaration looks like this:

var variablename:Type;

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:

>> Loader Example

Homework

Create a Simple Image Gallery

Using what you have learned today plus the timeline navigation we learned last week, create a simple image gallery using your own images that loads one image at a time onto the stage, and allows you to navigate back and forth through a series of images, as well as jump to the beginning and end, just as you did with last week’s exercise. For this assignment, choose a sequence of images that tell a story. Also think about the design of the buttons. How can you communicate their function to the widest variety of users — very young or older users, non-English speakers, etc.

Publish your files to your website, and post the link to the html file in this page. Remember that you must upload your image files as well as your .html and .swf files. Also bring your .fla files to class next week so I can look at them if I need to.

Topics

• How to Set up your Files for AS3 applications
• Targeting an object in AS3
• Creating Custom Functions
• Creating an Interactive Button in AS3
• Using ActionScript to Control Playback

How to Set up your Files for AS3 applications

As I’ve mentioned, you cannot add ActionScript directly to objects in AS3. Instead, you can add code to any frame or sequence of frames on the Timeline. This includes the timelines of symbols.

While you can add code to any layer on the timeline, including layers that have symbols or other objects on them, it is much cleaner to designate a single, empty layer for your code. This will prevent you accidentally erasing code or objects when working with one or the other, and it will also make it easier for you or another developer working on the code to find it later.

With this goal in mind, I want you to place all your ActionScript on a single layer at the very top of your timeline called “actions”. So, the first thing you do now when creating a new file is to make this layer, then open the Actions panel and pin this layer so that it is always easy to get to it.

Targeting objects on the stage with aS3

Because you are no longer able to add behavior directly to objects, you need to be able to tell actionscript which object on the stage you are adding behavior to. In order to do this, you must target the object using its instance name. That means that every object on the stage that you want to be interactive must have an instance name!

Then, when you want to refer to that object in your ActionScript, you can call it by name, using object notation:

buttonone.dosomething();

You can also find named objects on the stage using the target button in the Actions panel:

Creating Custom Functions

ActionScript 3 has many built in functions, like the trace function which we’ve already used. You can also create your own functions, to hold code that you want to be able to reuse anywhere in your project. First you define the function:

function functionname(parameter1,parameter2):return {
    //do something
}

Then, when you want to use the code in the function, you call it using the function name like this:

functionname (value1,value2);

The values in the parentheses are parameters, extra information you can pass into the function when you call it. For example, when you call the trace function, the parameters are whatever you put between the parentheses that you want to send to the output window.

Creating an Interactive Button in ActionScript 3

When creating a button or other interactive object in ActionScript 3, there are two steps you must create: an event listener, and an event handler. You can add event listeners and handlers to Button and MoveClip Instances but not Graphic symbols.

The Event Listener

The event listener describes what object to target, and what event to respond to. You do this using the addEventListener method.

This function takes two parameters, the event to respond to (like a mouse click) and the function to run when the event is detected.

The first parameter above describes an event of type MouseEvent, and the CLICK event is the particular event that is being listened for. Here are all the MouseEvents you can listen for:

• CLICK
• DOUBLE_CLICK
• MOUSE_DOWN
• MOUSE_MOVE
• MOUSE_OUT
• MOUSE_OVER
• MOUSE_UP
• MOUSE_WHEEL
• ROLL_OUT
• ROLL_OVER

The Event Handler

The event handler is a function that you must define, to describe what you want to happen when the event happens.

Using Actionscript to Control Playback

So far animation that you have created on the timeline plays automatically and continuously. You can use ActionScript to control when your movie starts and stops, and to jump around the timeline.

There are a number methods that you can use to control playback of your main or MovieClip nested timelines:

• stop( ) – This will stop the movie wherever it appears on the timeline
• play( ) – Starts playback of the movie
• nextFrame( ) – Advances the movie one frame
• prevFrame( ) – Rewinds the movie one frame
• gotoAndPlay(frame) – Goes to the specified frame (either by name or number) and start playing from that point.
• gotoAndStop(frame) – Goes to the specified frame (either by name or number) and stop there.

Homework

Take the original walkcycle exercise or the bone tool exercise you did earlier in the class, and add buttons that make the walker Go, Stop, Move Forward 1 Frame, Move Back 1 Frame, Jump to the End, Go Back to the Beginning.

Today we’re going to review your banner ad designs, and learn how to publish them to the Web.

Publishing Your Flash Movies to the Web

Publish Settings

The publish settings panel has three tabs: Format, Flash, and HTML. Before publishing your final movie, you’ll need each of these appropriately.

Modifying the HTML file

You can edit the HTML file that your Flash is embedded into if you are familiar with HTML and CSS.

Embedding Flash in any Web Page

To embed your Flash movie in another Web page, copy and paste everything in between the <div id=”flashContent”> tags:

<div id="flashContent">
            <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="728" height="90" id="FoodFight_728x90_1_v6_as2" align="middle">
                <param name="movie" value="FoodFight_728x90_1_v6_as2.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#cc3300" />
                <param name="play" value="true" />
                <param name="loop" value="true" />
                <param name="wmode" value="window" />
                <param name="scale" value="showall" />
                <param name="menu" value="true" />
                <param name="devicefont" value="false" />
                <param name="salign" value="" />
                <param name="allowScriptAccess" value="sameDomain" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="FoodFight_728x90_1_v6_as2.swf" width="728" height="90">
                    <param name="movie" value="FoodFight_728x90_1_v6_as2.swf" />
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#cc3300" />
                    <param name="play" value="true" />
                    <param name="loop" value="true" />
                    <param name="wmode" value="window" />
                    <param name="scale" value="showall" />
                    <param name="menu" value="true" />
                    <param name="devicefont" value="false" />
                    <param name="salign" value="" />
                    <param name="allowScriptAccess" value="sameDomain" />
                <!--<![endif]-->
                    <a href="http://www.adobe.com/go/getflash">
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
                    </a>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>

Creating a Static Image for iOS

Flash doesn’t play on iPhones and iPads, so when creating banner ads you should also provide a static frame. If you choose the jpeg option under the format tab in publish settings, when you publish your movie, a jpeg of the frame you last had selected will be created.

Posting Your Files to the Web

To publish your ad to the Web, use FTP to move all your files to the Web server. Make sure to upload both your .swf and .html files!

Homework

1. Create the final versions of your banner ads, both sizes. Make sure they both have invisible buttons that link to cryptozoic.com
2. Publish your ads to the Web, embedded in an html file. If you do not have a place to do this, you will need to establish one. As a CityTech student, you can get discounted Web space from Kionic.
3. Post links to your ads as comments in this post.

Topics:

• ActionScript Basics
• Using the Actions Panel
• Creating a transparent “button”
• Adding Behavior to an object on the stage
• Midterm Project Part 2: Animating Your Banner
•  Strategies for keeping file size low

ActionScript Basics

ActionScript is the language used to program interactivity in Flash. To complete our banner assignment, we’re going to do some simple scripting with ActionScript 2. ActionScript 2 is the previous version of ActionScript. For most projects you will use ActionScript 3, but for the banner ads we need to use AS2 because of the way they are tracked. There are a few things you can’t use if you are working in AS2, because they were introduced with AS3:

• 3D objects and transforms
• TLF Text (use Classic)
• Bone tool armatures

The Actions Panel

Actionscript is adding to your Flash movie through the Actions panel, which you can open either through the Windows menu or Shift+F9 .

The Actions panel will always show you the code for the object on the stage you currently have selected.

We’ll get into the nitty gritty of ActionScript after the midterm project is done, but for now we’re just going to learn how to make a simple, invisible button that links to a URL for your banner ads.

Step 1: Creating the Invisible Button Symbol

1. Create a new layer at the top of your timeline layers
2. On that layer, draw a rectangle on the stage that is the same size as the stage.
3. Convert the rectangle to a Button symbol (not a MovieClip or Graphic!)
4. Give the button symbol on the stage an instance name
5. Open the button symbol to edit it. Copy the rectangle keyframe to the “Hit” frame. Clear all the other frames, so it looks like this:

This will make the button invisible, but clickable. Yay!

Step 2: Adding Behavior to an Object on the Stage

In AS2 (but not AS3) you can add Actionscript directly to a MovieClip or Button instance on the stage via the Properties panel, by clicking the little arrow at the top right of the panel:

This will open the Actions panel for that object.

The code for creating an “on click” behavior in AS2 for your button is as follows:

on (release) {
 // put what you want to happen when the button is clicked here
}

To test whether you’ve added the button and the behavior correctly, you can use the trace function. The trace function will send data to the output window when you are in Flash, but is invisible to the user once the Flash movie is published as a .swf online.

on (release) {
 trace("click");
}

To add a link to the click behavior, use the getURL function:

on (release) {
 getURL("http://www.cryptozoic.com", "_blank");
 }

The first parameter is the full path to the web page you want to open. The “_blank” parameter will force the linked URL to open in a new browser window.

Midterm Project Part 2: Animating Your Banner

The next step in the banner project is to take your storyboard art into Flash to animate it. Remember that you only have 100K to play with for the final swf. Here’s some things you can do to keep the size down.

Strategies for keeping file size low:

• Lower the frame rate. The lower it is, the smaller the file. Warning, if you do this after you start animating, it’s going to speed everything up, and you will have to adjust your animation to compensate.
• Flatten effects in Photoshop. Flash will import layer effects like strokes, drop shadows and glows as separate layers, which really adds up to increase file size.
• Recreate layer effects in Flash, especially if you are planning to scale the objects they are applied to
• Recreate text in Flash, especially if you are planning to scale it
• Adjust publish settings for image compression
• Adjust individual bitmap settings for image compression
• Don’t import bitmap art at a larger size than you need it

Homework

Animate one size of your banner ads (which one is your choice!), and add an invisible button to it. Link the button to the Cryptozoic Web site at: http://www.cryptozoic.com. Next week we’ll review the banners in class, then you’ll have another week to revise them and animate the other size.

Here’s some examples of finished ads:

[swfobj src="http://classes.catherinegarnier.com/f11webmedia1/wp-content/uploads/penny_arcade_300x250_v4_ct.swf" width="300" height="250" align="center" allowfullscreen="false"]

[swfobj src="http://classes.catherinegarnier.com/f11webmedia1/wp-content/uploads/TOG_Set15_banner_728x90_2B_4.swf" width="728" height="90" allowfullscreen="false"]

[swfobj src="http://classes.catherinegarnier.com/f11webmedia1/wp-content/uploads/FoodFight_300x250_1_v6_comp_as2_gen.swf" width="300" height="250" align="center" allowfullscreen="false"]