Week 11

Topics: Smart Applications and Clever Devices, Using Flash to build interfaces
Studio Experiment: C
reate a “sketch” of an interface of a mobile app for your final website project. Think about the features of  Smart Applications and Clever Devices. (*See the notes below) You may also want to include some aspect of “social” or “new” media. I’d like you to explore solutions that lie outside of our current experiences so work on developing a concept we perhaps haven’t seen before. Post your thoughts and decision-making process for this exercise on your WP blog. Bring your sketches to our next class.

Assignment For Next Week
Complete Studio Experiment above.
Read through the notes below
Complete the assignment outlined at the end of the notes (you may want to complete this  assignment after watching the videos below)
Watch the following video chapters (and all their subchapters) from “Flash CS4 Professional Essential Training with: Todd Perkins” on lynda.com. (Access lynda.com through inside.artcenter.edu)
Chapter 4. Working with Symbols
Chapter 5. Working with the Timeline
Chapter 6. Creating Shape Tweens
Chapter 7. Creating Motion Tweens
Chapter 12: Using Sound
Chapter 14: Introduction to ActionScript 3.0
Useful but optional: Entire video or selected chapters from Flash Mobile Essential Training with: Arthur Phillips on lynda.com

*Smart Applications and Clever Devices
Designing for Adaption

People use three primary ways to make devices and applications their own: customization and personalization, adaptation, and hacking.

Customization: users alter the appearance of an object or application.

Personalization: user alters the functionality of an entity to better reflect individual choices.

Adaptation: Changes in the form, content, and functionality of devices based on how and where they are used.

: is the re-purposing of a product for a task that it was never intended to perform.

Please review the chapter from our book detailing the concepts above: Smart Applications and Clever Devices (pp. 151-171)

Mobile Apps

Below are examples of mobile application demonstrations:


Student Project: Whole Foods
Student Project: Bonfire Guitar Academy

The two student project above are also good examples of demonstrations using Snapz Pro.

Resources to use for research

List of digital distribution platforms for mobile devices

iPhone apps

Blackberry apps

Using Flash to build interfaces

We will use Flash to add interactivity to our website projects and also to prototype mobile devices. Please be sure to read through the notes, complete the assignment outlined at the end of the notes, and watch the lynda.com video listed above under “Assignment for Next Week.”

Please note: The notes below are written based on using ActionScript 2.0. The videos above Flash CS4 are based on ActionScript 3.0. Note that when you first create a new Flash file you can create either a Flash file (ActionScript 2.0) or Flash file (ActionScript 3.0).

Flash introduction
Flash is an authoring tool for creating animation and interactivity with a focus on vector graphics. Flash is designed for the web, but can also be used to create stand-alone animations and interactive applications in CD-ROMs, kiosks, and other non-web mediums.

Flash is a flexible system that can be used for many different applications, including:

  • Complete websites
  • Website interface elements
  • Animations
  • Comics
  • Games
  • Interactive training systems
  • Prototypes of interactive products

Flash specializes in vector graphics, which are particularly suited to the web and other low bandwidth applications which need small files. Vector graphics (like those created in Illustrator) describe the shape of a graphic in a resolution independent way, without including information about every pixel. This usually creates small files compared to bitmap images like those created in applications like Photoshop.

Advantages of vector graphics:

  • Typically smaller files when compared to bitmap graphics
  • Resolution independent so images can be made larger or smaller without degradation of the image

Note that Flash also supports bitmap graphics, and can import files from Photoshop. In addition, Flash supports video. So Flash can be used to combine a variety of media in a single application. Just be careful of the file size created, because bitmap graphics and video do not compress as well as vector graphics.

Flash Web Critiques:





Flash resources

Learning Flash and ActionScript
Flash Overview:

Flash Resource Sites:

Adobe Flash Support:

Introduction to Flash:

Help available from within Flash:
FLASH > HELP — Good starting point for basic information and tutorials

Flash Quick Reference Guide

Sounds & music:


Basic features :

Flash has two main authoring features, the Stage and the Timeline, which enable the user to assemble graphics and make them animate over time.
The Stage: The area on the screen where you create, edit, and position graphics. Graphics objects are drawn, imported, edited and positioned on the stage for each keyframe in the movie. The user can set the pixel dimensions of the stage to determine the default display size of the Flash movie. The stage is composed of a number of layers (similar to those in Photoshop), which allow the user to determine how objects display in relation to each other.

The Timeline: This section of the program enables the user to navigate to specific time points in the Flash movie. When a point in time (a frame) is selected, the stage displays all the objects currently active and visible for that frame. The user can set the frame rate (i.e. how many frames display per second), extend the timeline by inserting frames, and create keyframes where (graphic, audio, or interactive) events occur.
Brief tour of flash :
Main Windows to review

  • Main Window: Contains the Stage and Timeline
  • Window>Tools: Contains the controls for drawing and editing graphics on the stage
  • Window>Properties>Properties: Shows properties for the currently selected object. If nothing is selected, properties for the movie
  • Window>Library: Shows the graphics and other elements used in the current and other open movies
  • Window>Common Libraries>Buttons These are standard buttons that come with Flash
  • Window>Actions: (F9) Where you can write and see ActionScript code

Flash movie settings. Set the following items here: Modify>Document

  • Frame rate: Defines how many frames per second the animation runs at. E.g. 12fps.
  • Dimensions: Defines the pixel size of the Flash movie.
  • Background color: Sets the color of the stage behind any graphics.
  • Publish settings: Determines the version of the Flash player required, along with many other settings

Timeline :

The timeline is a simplified display of the frames that compose the movie. Each division represents one frame of the movie, and the numbers across the top show the frame number for each position.

  • Layers: The timeline is divided into separate sections, where independent animations take place. These layers run in parallel, with the graphics on them layered from top to bottom, where the topmost layer is in the foreground, and the bottom most layer is in the background. New layers can be added by clicking on the add “+” layer icon on the left, below the layer names. The new layer is put on top, “in front” of the layer that was clicked on.
  • Keyframes: Click a point on the timeline in a layer. Use F6 or INSERT>TIMELINE>KEYFRAME to insert a Keyframe at this location. If there are no frames at this location, the layer’s time will be extended to this point. If there is a frame at this location, the frame is converted to a keyframe. Keyframes are points in the timeline where you can make changes to an element in the movie. Note that when you insert a keyframe, all of the contents in that layer are copied from the previous keyframe into the new keyframe (unless you use INSERT>TIMELINE>BLANK KEYFRAME).
  • Frames: Click a point on the timeline in a layer. Use F5 or INSERT>TIMELINE>FRAME to insert a Frame at this location. If there are no frames at this location, the layer’s time will be extended to this point. If there are frames at this location, a new frame will be inserted at this point, pushing all frames to the right ahead by one frame. NOTE: If a frame (not a keyframe) is selected, and you draw or edit a graphic, you are actually changing the previous keyframe, not the current frame.
  • Onion Skin: It is possible to view the graphics on multiple frames in the timeline. Click on one of the two onion skin buttons under the timeline, at the left. Two brackets at the top of the timeline determine the number of frames displayed. Onion-skinning shows a range of frames both before and after your current frame, progressively fading them out as if they’re layered on translucent paper on top of each other, or “onion-skinned”.
  • Edit multiple frames. There are often times when you want to move elements on many frames at a time. Rather than selecting each frame and moving the element on that frame, set the the Edit Multiple Frames button below the timeline, just to the right of the Onion Skin buttons.

Labeling keyframes

It’s important to label any keyframe you want to be to be able to navigate to. For example, you might have keyframes labeled:

home, portfolio, resume, contact

This way you can create a navigation system that allows the user to go to any of these pages and see the corresponding content. It is better to use labels than the frame number, because you might move the contents of a keyframe to a different frame–with a frame label, your navigation will continue to work, even though the contents of the page are on a new frame.

To add a label to a keyframe, click on the keyframe, and in the property inspector type in the name for the label and hit return.

Layers :
Each layer contains a separately animating element(s), and can be used to organize your elements. Elements in layers that are higher on the timeline are “in front” of elements in lower layers.

  • Current layer: Select a layer for editing by clicking on the layer name. The layer name area will become darkened, and any subsequent editing will occur on that layer.
  • Layer name: Double click on the layer name to change the name. Naming your layers is an important aspect of documenting your project. You may remember which layer contains what 5 minutes from now, but you will not remember tomorrow!Lock layers: To ensure you don’t select or change elements on a layers, click the dot in a layer under the lock icon. You can lock all the layers by clicking on the lock icon itself.
  • Show/Hide layers: You can show or hide a layer by clicking on the dot in layer under the eye icon.
  • Layer folders: You can group layers (like Photoshop layer sets) with layers folders. Click on the folder icon to create a new folder. Drag layers into it to group them. Click on the folder triangle to open or close it.

Playing/exporting :
You can play the movie directly from the Stage, although not all of the motion, animation, and interactivity will show up. The best way to see how your movie animates is to Test the Movie in true Flash format.

  • Play: You can preview the motion in your movie by clicking on the Play button of the controller window, or selection CONTROL>PLAY.
  • Test movie: To see how the movie will really play, select CONTROL>TEST MOVIE, or press COMMAND + ENTER. This creates a fully compiled movie that will play exactly as it will in a web site or as an external application.
  • Publish movie: To create a flash movie and the HTML go to with it, select FILE>PUBLISH. To adjust the settings that go with the published movie, select FILE>PUBLISH SETTINGS…

There are two files associated with a Flash application:

  • .FLA: This is the authoring file used to edit and change the application
  • .SWF: This is the exported file used to deliver the final application. The .swf file is uploaded to the web server (not the .fla file). Typically, the .SWF file will be contained in an enclosing .html page.

Text in Flash is maintained as vector graphics, and can be edited at any time.

  • Insert text using the Text Tool
  • Select the text type (STATIC, DYNAMIC, INPUT) in the property inspector, and set the size, font, and other attributes of the text
  • Click once to insert a single line text box that expands to the size of the text entered


  • Click and drag to insert a paragraph box that has a fixed width
  • The property inspector is used to modify the entire text box or selections within the box

Make a basic scrolling text box

  • Select the Text Tool, and set the property inspector to dynamic text box, and Multiline
  • Click and drag to create the text box
  • Open WINDOW>COMPONENTS, and drag the User Interface>UIScrollbar onto the side of the text box where you want it to display. It will resize, and attach to that side of the text box.
  • If you want to resize the text box, drag the Scrollbar away from the text box, resize the box, and then drag the Scrollbar back over the text box
  • If you add another scrollbar, drag it from the project Library rather than from the Component window so you don’t duplicate the Scrollbar in the project Library

The tweening capability of Flash is a powerful feature that automatically creates all the frames between any two keyframes you create. If you position a symbol with a start and end position (including any transformations you want to make), Flash will create all the frames in between to create smooth motion. Alternatively, Flash can Tween from one shape to another, creating a “morph”. To make a Tween:

  • To create a MOTION TWEEN, select a layer and create the beginning keyframe
  • Place a symbol (it must be a symbol, graphics won’t tween) on that keyframe, in the beginning position for the animation. It’s important that only one symbol is in the layer to be tweened
  • Now create the ending keyframe, and position the symbol to its end position
  • Select the beginning keyframe, and in INSERT (or right click) choose CREATE CLASSIC TWEEN. Flash will create the in between frames in a straight line between the beginning and ending keyframes
  • To create a complex path, you can place keyframes at each point along a path with tweening set for each keyframe. Or you can create a Motion Path
  • To create a SHAPE TWEEN, or morph, put the initial graphic shape (NOT a symbol) in the first frame
  • In the next BLANK keyframe, place the end shape
  • In the first frame, choose CREATE SHAPE TWEEN

Drawing tools
Flash has many tools for creating graphics, and most of them are similar to those available in Illustrator.

To learn about Flash drawing tools, take advantage of the Adobe video resources here:

Importing images
To import a bitmap or vector graphic, select the layer and frame you want the element to appear on, and select FILE>IMPORT. Any element you import will also be made a symbol and placed in the movie library. You can import a variety of assets into Flash, including sound, video, bitmap images, and other graphic formats (such as PNG, JPEG, AI, and PSD).

  • .png files: Use the PNG file format for importing bitmap graphics with an alpha channel
  • .psd or .jpg files: On the Mac, you can import Photoshop files or jpgs directly.
  • .ai files: You can import Illustrator files into Flash or create the vector graphics right in Flash. The advantage of creating the vector files in Flash is that they can be easily changed or edited.
  • Multiple files: If you have a series of files that are frames of an animation, name them with a number at the end. For example, anim01.png, anim02.png…anim13.png. Flash will import them all, and automatically place them in subsequent frames.

Project structure
Interactive Flash projects require a methodical approach to the project structure. Making the projects easy to create and maintain involves organizing the different pages/scenes as well as organizing the content within each page. In addition, the ActionScript that makes the project interactive and the sounds used should have their own organization.

Keyframes for each page

Typical Flash projects have several “pages” with different content. For example, in a portfolio site, you may have a home page, plus pages for the portfolio, resume, and contact. The best way to structure a project like this is to put all the content for each page in a single frame on the timeline dedicated to this page. Here is an example of a project structured this way:

You can see in the above Flash timeline that frames 1, 5, 10, and 15 are used for each of the pages respectively. The different elements for each page (e.g. page content, sound, page title, and actions/labels) have keyframes at these points. Common elements that exist for every page (e.g. site name, navigation, backgrounds) do not have keyframes at these points so that these same elements are visible and usable throughout the project, on every page.

Layers for each kind of content – graphics, actions/frame labels, sounds

It is best to separate each element of content on its own layer, being sure to name the individual layers in a clear way. Of course, layers also allow you to control how elements display, either in front of or behind each other.

In addition to the visual content of the project, it is best to create separate layers for any ActionScript used in the timeline frames. Typically, frame labels are put in the same layer as the ActionScript, and this layer is usually the top layer to make it easy to find. Sounds should also be placed in their own timeline to make them easier to work with.

Click here to download id1portfolio.fla, a sample Flash file organized as detailed above.

Flash has the capability to respond to the user for navigating to different parts of the flash movie, starting/stopping animations, and many other possibilities. These interactions are controlled by a scripting language called ActionScript. Simple interactions can be created with a fairly simple menu-based interface.

Where does code go?

ActionScript code can go in many different places inside a flash movie, and where it goes affects when the code is run. There are two main kinds of places where code can be placed:

Keyframes – ActionScript code can be attached to any keyframe, either in the main movie timeline, or in the timeline of a MovieClip. Scripts cannot be attached to a normal frame – they must be put on a keyframe.

o Click on the keyframe to add a script to it.

  • A script attached to a keyframe is run upon entry of the timeline into that frame. So if a script is on a keyframe on frame 15, the script will be run when the movie play head crosses that frame. If the movie or MovieClip is stopped before frame 15, that script will not be run.
  • Note that scripts in keyframes are run before any graphics are displayed for that frame. For example, if a script is on the first frame of the main movie, and that script changes the location of graphics on the screen, the user will only see the new locations of the graphics. I.e. the script is run and the graphics are moved before the first frame is displayed.

Buttons and MovieClips – Scripts can be attached to instances of Buttons and MovieClips on the stage. Scripts cannot be attached to the symbols in the library, only to instances on the stage.

  • Click on the Button/MovieClip instance on the stage to add a script to it. You’ll have to specify what event for that object will trigger the script–e.g. “on (release)” specifies that the script will be run when the mouse button is released.
  • A script on a Button or MovieClip is run when some event occurs, regardless of the position of the timeline or if the timeline is playing or is stopped. An event can be a mouse click, the point at when the object first appears, or when some data is finished loading. When associated event occurs, the script is run.

Working with ActionScript

You access the ActionScript capabilities by selecting the keyframe, button or movieclip you want to make interactive, and then opening WINDOW > ACTIONS (or F9). This interface enables you to add the action you want taken by double clicking.

Putting stop() Actions on frames

For our example portfolio project, we need to prevent the Flash movie from playing through all of the pages continuously. To do this, we need to play a “stop()” action on each of the page keyframes. To do this

  • select each page keyframe in the Actions layer
  • in the left side of the actions window, click on Global Functions and then Timeline Control set of actions
  • double click on the “stop” action to add this action to the frame

Adding navigation to buttons/movieclips

  • insert a button from WINDOW > COMMON LIBRARIES > BUTTONS on the timeline frame where you want to navigate from. Make sure you have chosen “button” from the drop down menu in the property inspector.
  • go back to the original frame, and select the button
  • in the actions panel, click on Global Functions and then Timeline Control set of actions. Click on the “go to” so that you see the menu below. Select the “Go to and stop.” Here you can also change the behavior of the button to “release” or “roll over” and select the frame number or name.

Making a button

Flash includes a set of standard buttons, but often you want to make your own interactive buttons. To do this:

  • select INSERT > NEW SYMBOL… and provide a unique name for the button and select “Button” as the behavior for this symbol
  • then create graphics for each state of the button. States are the different visual displays of the button for the normal, mouse over, and mouse down situations. Often, you will create a common background in one layer that will be the same for all states, and then make a different text color for the normal and over states. Here is the timeline of such a button:
  • button timelines have special kinds of frames to represent each state, plus a frame that can define the shape of the hotspot for the button. In this example, a common gray background is placed in a layer for both Up and Over states. Black text is placed in the Up frame of the text layer, and green text is placed in the Over frame.
  • this produces a button that shows black text in the normal state
  • and green text for the over state
  • when you’ve completed making your button graphics, select Scene 1 from upper left hand corner of the stage to return to editing the main timeline.
  • now you can place copies of the new button on the stage by dragging them out of the main library (WINDOW > LIBRARY) and dropping them on the stage.

Each movie has a library of elements that can be reused throughout the movie. These are called symbols, and are displayed in the LIBRARY window. It’s recommended that symbols be used for any graphics you plan to move or place in multiple sections of the animation. Using symbols saves file size because you are reusing the same graphic everywhere. In addition, only symbols can have scripting attached to them.

Symbols are self-contained objects defined in the library. To use them, you drag a copy (formally named an instance) of the symbol from the library onto the stage. This instance will always reflect the version defined in the library. For example, if you change the shape of the graphic in the library, all instances on the stage will reflect this change.

  • Create a symbol: In the pull down menu in the upper right hand corner of the Library window, select Create Symbol (or select INSERT > NEW SYMBOL). A dialog will be presented which enables the user to set the name and type of symbol. When finished editing the symbol, select the scene name right above the layers (or EDIT > EDIT DOCUMENT) to return to editing the full movie.
  • Convert a graphic into a symbol: select the graphic(s), and select INSERT>CONVERT TO SYMBOL.
    Graphic: This is the simplest type of symbol, used for static graphics or simple animations (that sync with the main movie timeline). Graphic symbols can be a single frame or multiple frames with as many layers as you want. Use the stage to create the graphic. Alternatively, any graphic that’s imported automatically becomes a Graphic symbol.
    Button: A Button symbol responds to button clicks, rollovers and other behaviors. It has 3 frames for the Up, Over, and Down positions of the button. In addition, it has a Hit frame to define the “hotspot” of the button (i.e. the area that is clickable or responsive). Put a graphic in the Up, Over and Down positions, and Flash will automatically display the right frame when the button is used in the full movie. If you want any of the button states to animate, place a Movie symbol in the Up, Over, or Down frame. Draw a simple filled rectangle in the Hit frame to set the hotspot.
    Movie Clip: A Movie symbol is a self-contained movie that can have multiple layers and frames. These animated symbols are complete Flash movies that become objects in the full movie. When placed in a frame in the full movie, they run whether the full movie is playing or stopped (including any interactivity you’ve defined in the symbol). Create and edit a Movie symbol as you would a regular Flash movie
  • Edit a symbol. You can edit a symbol at any time, and the changes will automatically be reflected wherever the symbol is used in the movie. On the stage or in the library window, double click on the symbol to edit it.
  • Place an instance of a symbol: To place a symbol in the full movie, select the desired layer and frame (making sure you are editing the movie and not the symbol). With the Library window open, select the name of the symbol you want, and drag its image from the Library window onto the movie stage. Placing a symbol in a layer creates an instance of the symbol which can be named and addressed individually from other instances of the symbol in the movie.

In addition to any user created symbols, Flash has many standard buttons built-in. To use these, select:
Symbols are efficient

One reason to use symbols is that they save space in the Flash movie, since the same information is used for each instance of the symbol that’s placed on the stage. In addition, it makes your production more efficient because if you decide to make a change to a symbol used throughout the project, you only need to make the change once to the symbol, and all the instances will instantly reflect the changes.

Symbols can consolidate complex timelines/interactions into a single object

It’s often convenient to create an animation or interactive segment inside of a symbol to make it easier to work with. Since a symbol has its own timeline, all of the animation and interaction are included inside of the single symbol. In this way, you can place a whole animation on the stage as a single object that can be resized, duplicated, and interacted with.

Animated symbols

An example of this in animation would be if you wanted many birds on the stage. You could animate a bird flying once inside of a symbol, and then place multiple copies of the bird symbol on the stage.

Interactive symbols

An example of this for interactive symbols would be creating a self-contained portfolio viewer that has frames for each member of the portfolio. This symbol would have its own navigation buttons to move between the portfolio members within the symbol timeline. Once complete, the entire portfolio viewer symbol can be placed on the main timeline as a single object. Then it will be a complete interactive application on a single frame of the main timeline.

Symbols within symbols

There are times when it makes sense to put a symbol inside of another symbol. In the above portfolio example, the buttons are symbols that are placed inside of the portfolio symbol. Another example is when you want something to animate and move. Say you want to have a bird both flap its wings and fly across the screen. This requires putting on symbol (the flapping animation), inside another symbol (the motion tween across the screen). The symbol with the motion tween is then placed, perhaps multiple times, on the main timeline as single objects.

Here is an example of this principle

Download the file below:

Bird Flight

Sound can add a tremendous impact to any presentation, but designers often seem to forget about the power and importance of sound. These sounds are attached to keyframes and play when the play-head reaches that keyframe.

To import a sound in .mp3, .WAV or .AIFF format, select FILE>IMPORT>IMPORT TO LIBRARY… and locate the file.

Once the sound is in the library, select the keyframe you want the sound to start at, and drag the sound to the stage. Or, you can drag a sound directly to any keyframe in the timeline. Once inserted, you will see the sound located in the timeline. In general, it’s a good idea to create a separate layer for sounds.

You can edit the volume (e.g. for fade-ins or outs) by clicking on the keyframe, and selecting edit in the property inspector.

Sources for sounds and music loops on the Internet include:


Text in Flash is maintained as vector graphics, and can be edited at any time.

  • Insert text using the Text Tool
  • Select the text type (STATIC, DYNAMIC, INPUT) in the property inspector, and set the size, font, and other attributes of the text
  • Click once to insert a single line text box that expands to the size of the text entered


  • Click and drag to insert a paragraph box that has a fixed width
  • The property inspector is used to modify the entire text box or selections within the box

Make a basic scrolling text box

  • Select the Text Tool, and set the property inspector to dynamic text box, and Multiline
  • Click and drag to create the text box
  • Open WINDOW>COMPONENTS, and drag the User Interface>UIScrollbar onto the side of the text box where you want it to display. It will resize, and attach to that side of the text box.
  • If you want to resize the text box, drag the Scrollbar away from the text box, resize the box, and then drag the Scrollbar back over the text box
  • If you add another scrollbar, drag it from the project Library rather than from the Component window so you don’t duplicate the Scrollbar in the project Library

Download the example file for products.fla

Using your own images and design, create a portfolio/product movie that contains portfolio images on a different frame. Also create small boxes as symbols (buttons) that will be the navigation within the movie. These nav boxes should be on a frame that spans all of the frames of the movie (i.e. on their own layer that has only one keyframe). The timeline should look something like this:

Place the images one to a frame, centered in the same location. Place the navigation boxes in a line, being sure they are not overlapped by the images. To easily align all the images, select the Edit Multiple Frames option in the timeline, extend the selected frames to all you’ve used, and then select all the frames. Use MODIFY > ALIGN > HORIZONTAL CENTER and MODIFY > ALIGN > BOTTOM or MODIFY > ALIGN > VERTICAL CENTER as appropriate.

To make the navigation work:

  • select each button and in the ACTIONS palette, click on Global Functions and then Timeline Control set of actions. Click on the “go to” so that you see the menu below. Select the “Go to and stop.” Here you can also change the behavior of the button to “release” or “roll over” and select the frame number or name.


No comments yet.

Add Yours

  • Author Avatar


Comment Arrow

About Author


Instructor for Interactive Design 01