Advanced Audio

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

 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);

Adding Video To Your Project

Flash has several options for adding video to your project.

Supported Formats

Flash supports it’s own FLV Video formats as well as Quicktime movies that are H264 encoded. There is a list of supported codes here.

There is also a good article about using H264 video here

Using Adobe Media Encoder

You can also convert just about any video format to FLV using Adobe Media Encoder, which is included with Flash Professional. Generally speaking, using FLV in your Flash applications is going to be a smaller file, and better looking and functioning experiences for the user.

However, in order to play an FLV video, you need to create a .swf to act as a player. There are two ways you can play video through a .swf, either by importing it to the Timeline / Library, or using a video component or ActionScript to load in an external file.

Importing Video to the Timeline or Library

I can’t stress enough that you should only use very short video that has no audio track with this method. Video will significantly increase the size of your .swf and load times and this method has serious audio sync issues.

Under the File > Import menu is an Import Video option. When you choose this, you will see the following dialog:

To use video directly in the timeline, choose the “Embed FLV in SWF and play in timeline” option. Note the warning! Also note that you can launch Adobe Media Encoder right from here.

Next choose the embedding method. You can choose to place the embedded video directly on a layer of the timeline, or as a movieclip or graphic symbol.

Using Video Components to Load Video Remotely

Loading video from an external file is a much preferred method, and Flash makes it easy. Choose the “Load external video file with playback component” option from the Import Video panel instead, or you can also drag a FLVPlayback component from the Components (Window > Components) panel directly to the stage:

Under the Video Folder you’ll see several playback component options, as well as the individual elements of the playback component. Drag the component to the stage to add it to the Timeline and your Library.

You can set the appearance and source video of the playback component in the Properties Panel:

Other Options

Because the FLV video must be embedded in a swf player, it has the same platform limitations as any application that uses the Flash Player (ie – no iOS devices). So, if all you need is video playback within a Web site, consider these options:

• Host the videos on a site like YouTube, Vimeo, or blip.tv and copy and paste their embed code into your html
• Use a third-party player like JWplayer that detects the users operating system and browser and delivers the appropriate player for that configuration (note, this requires having video in multiple formats)

Topics:

• Homework Review: MadLibs
• Final Project Concept Review
• Advanced Events:
• Enter Frame
• Drag and Drop

//create the enter frame event
addEventListener(Event.ENTER_FRAME,onEnterFrame;

function onEnterFrame(evt:Event) {
//do something
}

Drag and Drop Events

Drag and Drop Example

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;

Homework

Final Project

Here’s some more details about the final project.

Your final project will take the form of an “Interactive Documentary.” The choice of topic is yours, I suggest something that you are already an expert in or passionate fan of. Your documentary can be instructional (like a ‘how-to’) or informational.

Final Project Requirements

Depending on the focus and execution of your project, it may include more or less of the following components, but must include some of all:

• Timeline animation
• Code control of timeline playback
• Buttons that respond to mouse input
• Dynamic Text fields and Input Text Fields (we’ll learn these next week)

Optionally, you can also incorporate the following:

• Audio / Video (we’re going to learn more audio and video methods next week)
• Drag and Drop Events
• Animating with Code (Enter Frame Events)
• Timer Events

First Steps: 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.

Topics

• 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

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:

Interactive Documentary

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 “how-to”, 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. If you have a project that you are working on for a studio class and it would be appropriate to combine them, I will allow that, as long as it meets the criteria for both classes.

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

Publishing Your Flash Projects 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>

Note: This may look different depending on your version of Flash.

Posting Your Files to the Web

To publish your Flash to the Web, use FTP to move all your files to the Web server. Make sure to upload both your .swf and .html files, and the image files that go with them! All Parsons students have space on the Webspace server, and some of you may have space on the A server. If you know your A server user name and password, use that.

If you want to use your Webspace account, see the instructions here. Your username and password for Webspace should be the same as those you use to log in to My New School.

Homework

Create a Simple Image Gallery

Using what you have learned today about loading external images, 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 now, don’t worry about adding an automatic slideshow type functionality, so don’t include Play/Stop buttons, we’ll talk about how to handle those later.

Publish your files to your Webspace or A server account, 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.

Post a link to your HTML file as a comment on the blog.

>> week 4 examples

Topics:

• Motion Presets
• Using
• Saving
• Easing
• In the Properties Panel
• With the Motion Editor
• Working with Text
• Using Classic Text (CS4)
• Using TLF Text (CS5)
• Masks

More Tweens: Motion  vs. Classic

Last week we talked about Classic Tweens. In a Classic Tween, the tween takes place between two keyframes in a layer. In a classic tween, all properties are tweened at each keyframe.

In a Motion Tween, you select a span to tween, and can place as many property keyframes along it as needed. You can explicitly create keyframes or go to the frame, make changes, and the keyframe will be dynamically created.

With Motion Tweens, you can select which properties are affected by the tween. Properties that can be manipulated are:

• 2D X and Y position
• 3D Z position (movie clips only)
• 2D rotation (around the z-axis)
• 3D X, Y, and Z rotation (movie clips only)
• Skew X and Y
• Scale X and Y
• Color effects
• Filter properties (filters cannot be applied to graphic symbols)

Motion Tweens look like this in the timeline:

A Motion Tween on the Timeline

The first and last keyframes of the tween are represented by black circles, the property keyframes between them are black diamonds.

Motion Paths

These tweens create a motion path that is a visual representation of the path the tweened object takes on the stage. The dots on the motion path represent frames. The closer the dots are together, the slower the object is moving.

You can edit a motion path with pen, selection, subselection and transform tools, just like any other path on the stage.

Join Motion and Split Motion

Under the Modify or contextual timeline menus, these commands allow you to join two contiguous tweens on the same layer, or to split a tween in two.

Week 3 Example Files

Topics:

• Understanding Symbols:
• Symbol Types: Graphics, MovieClips, and Buttons
• Symbols vs. Instances, The Library Panel
• Break Apart
• Nested Animations and Timelines
• Blending Modes and Filters
• Importing Graphic Assets
• Bitmaps vs. Vectors
• Preparing Your Resource Files
• Import Options and Settings
• Distribute to Layers
• More Tweens: Motion  vs. Classic

Understanding Symbols: Graphics, MovieClips, and Buttons

So far we’ve been working with simple shapes on the timeline called drawing objects. The only animation we can do with drawing objects is frame-by-frame or shape tweens, and we’ve created these objects by drawing the in Flash. To do more sophisticated animations and use the additional tween types we need to start using symbols. These will also be necessary when we start to use interactivity.

A symbol is a reusable graphic object within your Flash project. You create a symbol by selecting the objects on the stage and converting them to a symbol by one of these methods:

• Select Modify > Convert To Symbol.
• Drag the selection to the Library panel.
• Right-click (Windows) or Control-click (Macintosh) and select Convert To Symbol from the context menu.
• Use the keyboard shortcut F8

When you convert objects to a symbol, you will be given three choices for the type of symbol it is:

• Use Graphic symbols for objects that will not be interactive. They have a timeline, and you can preview their frames on the main timeline and sync them with other movement.
• Use Button symbols to create interactive buttons that respond to mouse clicks, rollovers, or other actions. They have a timeline with just four frames for the up, down, active and hit states.
• Use Movie Clip symbols to create interactive loops of animation. They have their own multiframe Timeline that is independent from the main Timeline, allowing you to create nested animations. You can also use these for buttons if you want more specialized behavior.

There are also font symbols, we’ll talk about those next week.

When you create a symbol, it is automatically added to your project’s library and will be visible in the library panel.

The Library Panel

You can create a new blank symbol either from the Insert menu, the library panel, or the keyboard shortcut Command+F8

You can edit any symbol by double-clicking on the symbol on the stage, or in the library.

Symbols vs. Instances:

Symbols are stored in the library, and can be used multiple places in a project.

Once you place a symbol on the stage, this is an instance of that symbol.

Edits that you make to that instance on the main timeline, like scaling, only apply to that instance of the symbol.

When you edit the symbol itself, all instances of that symbol change.

If you wish to convert an instance back into drawing objects or groups on the stage, choose Modify > Break Apart or Command+B

Color Effects, Blending Modes and Filters

You can apply these transformations to button or movieclip symbol instances, but not graphics, drawing objects, or groups. All of these properties can be animated over time.

Color Effects include changing the alpha channel, tint, and brightness.

Blending Modes will be familiar from Photoshop and Illustrator.

Filters include blurs, glows, and drop shadows

All of these effects are accessible through the properties panel when you have the symbol selected, and will only affect that instance of the symbol:

Topics:

• Homework Review
• Using the Timeline
• Timeline components and views
• Frames vs. Keyframes
• Selecting, moving, copying and deleting frames
• Creating Frame-by- Frame animations
• Frame by Frame animation
• Extremes and In-betweens
• Onion skinning
• Basic Animation Principles: Squash and Stretch
• Ball bounce in class exercise – Part I
• Using Shape Tweens
• Ball Bounce Part II
• Basic Animation Principles: Walk cycles

Using the Timeline

As we’ve already seen, frames are the basic unit of the timeline, represented as rectangles on the timeline. Each layer has it’s own frames that can be manipulated independently.

A keyframe is a frame on which something changes from the previous frame or frames. This is how we create animation. Keyframes are represented on the timeline by a dot inside the frame’s rectangle.

Inserting Frames

There are two ways you can insert frames or keyframes. First, select the layer and frame of the timeline where you want to insert, then through the Insert Menu:

Insert > Timeline > Frame

or

Insert > Timeline > Keyframe

or

Insert > Timeline > Clear Keyframe

You can also call up a contextual menu (I much prefer this) by right-clicking or Control+click on a frame on the timeline. This gives you access to all the frame controls:

Timeline Contextual Menu

Selecting Frames

Flash offers two different methods for selecting frames in the Timeline. In frame-based selection (the default), you select individual frames in the Timeline. In span-based selection, the entire frame sequence, from one keyframe to the next, is selected when you click any frame in the sequence. You can specify span-based selection in Flash Preferences.

• To select one frame, click the frame. If you have Span Based Selection enabled, Control-click (Windows) or Command-click (Macintosh) the frame. You can enable this in the Preferences panel.
• To select multiple contiguous frames, Shift-click additional frames.
• To select multiple non-contiguous frames, Control‑click (Windows) or Command-click (Macintosh) additional frames.
• To select all frames in the Timeline, select Edit > Timeline > Select All Frames.
• To select an entire span of static frames, double-click a frame between two keyframes. If you have Span Based Selection enabled, click any frame in the sequence.

Moving Frames

To move a keyframe or sequence of frames, click and drag.

To increase or decrease the length of a span, contol+drag.

Topics:

• Introductions
• The Class Blog
• Class Syllabus and Schedule
• Why Flash?
• Introduction to the Flash Interface
• Creating and editing graphics in Flash
• Using the Drawing Tools
• Object Mode vs. Merge Mode
• Selecting and Modifying Shapes
• Grouping objects
• Color Palettes and swatches
• Gradients and gradients editor
• Transformation tools
• Transparency
• Alignment
• Using Layers to Organize Your Project
• Publish Settings, Testing Your Movie
• Saving down to older versions

Introduction to the Flash Environment

1. Opening Flash and Choosing a Document Type
2. The “Stage” and Pasteboard
3. Panels
1. Properties
2. The Toolbar, Toolbar Options
3. Color
4. Align
5. Info
6. Transform
4. Toolbar
5. Timeline

Using the Drawing Tools

1. Shapes -
1. Merge Drawing vs. Object Drawing
2. Regular Vs. Primitives
3. Rectangle
4. Oval
5. Polystar
2. Pen
3. Pencil
4. Brush
5. Line
6. Paint
7. Ink
8. Select
9. Sub-selection
10. Eraser
11. Free Transform

>> Drawing reference from Adobe Help

Using Layers and Folders to Organize your movie

1. Adding Layers
2. Deleting Layers
3. Moving Layers
4. Hiding/Showing/Locking Layers
5. Creating and using Folders

Viewing and Navigating the Stage, Organizing Your Workspace

1. Zooming
2. Hand Tool (Spacebar)
3. Viewing Modes
4. Workspaces and Creating Your Own

Publish Settings and Test Movie

1. Publish Settings
2. Test Movie
3. Publishing your .swf file

In-Class Exercise

Try to recreate this picture using the drawing tools in Flash:

Homework

Using the tools we covered today, create a self portrait in Flash. This drawing should be complex and detailed, using as many objects, layers and groups as necessary. Bring the .fla and .swf files to class next week and be prepared to present your portrait to the class.