Flash is one of many tools used to create interactive experiences on the Internet. The Internet, by it’s own virtue, is interactive – unless one tells it to do something, (click a button to go load a new page) it won’t do anything. This seems self evident, especially due to the internet’s rapid adoption over the last decade, but there are fundamental differences with traditional media “passive” or cool media and the concepts of how people interact with, not only the Internet, but products and tools as well.
For thoughts on interaction design, read: http://voice.aiga.org/content.cfm?ContentAlias=%5Fgetfullarticle&aid=2256903
What is Interactivity?
In a primary example, a conversation between two people is Interactivity.At it’s most basic level, one person asks a question; the other responds.
On a more advanced level, the conversation progresses according to a series of responses between two (or more) people. Each question, or statement, is derived from the previous response. The effect creates a new train of thought, or a new experience, during the conversation.
Interactivity is a unique from of communication; the sender of a message is also a receiver, where the speaker is also the listener, the reader is also a writer, the giver is also a taker.
Interactivity on the Web
Without a user the World Wide Web would never change pages. It requires a person to use the Web to access other information. Similar to a conversation between two people, one person’s interaction with the Internet is a spontaneous and unplanned experience with new information (words, pictures, sounds, ideas) that even the user themselves are not prepared for until the process starts.Some Rules & Models for Interactivity on the Internet
Unlike a conversation with another person, the Internet is not human. Instead it is a tool, and needs to be designed as such.User Expectations: Simply put, if a user decides to click on a link, whatever appears next ought to satisfy their expectations.
Global Navigation: Because the Internet is not human, it needs to be designed to accommodate any decision at any given time. Global navigation means that all decisions can be accommodated at any time during a website’s use. More to the point, all buttons should always be accessible at all times, on all pages.
Non-Linear CommunicationUnlike a book, a T.V. show, or movie that tells a story in one unchangeable way, the Internet is designed to be an individual story, depending on the user’s interaction. The story can be told in any order according to the user’s method of interaction.
Flash as an Interactive Tool
In addition to Flash’s Animation abilities, it also employs ActionScript, a way to write instructions to control both the timeline and symbols on the stage. By using the mindset of an interactive designer, Flash can be used to create timelines, symbols, and use ActionScript to create an interactive, non-linear tool for showing and communicating information.Actions on the Timeline
In traditional Flash Animation, the timeline plays chronologically from left to right, uninterrupted. As the playhead moves, it simply displays the visual elements on the stage as they appear in time.Actions are commands, written with ActionScript. These actions, when placed on the timeline (select a keyframe on the timeline, and press F9), can control the playhead. Actions can stop, play, and jump to other keyframes before or after the playhead’s current position.
Actions on Symbols (Buttons)
Another use of actions is to write them “on” symbols (select a symbol on the stage, and press F9). Most often, when actions are used on symbols they are treated like buttons used as “remote controls” to move the playhead to another section of the movie.When applying actions to symbols to make buttons, there are several often used actions which have been “pre-fabricated” and ready to use via the Behaviors Palette.
For more on Actionscript: http://www.actionscript.org/
More on Actionscript: http://www.adobe.com/devnet/flash/articles/actionscript_guide.html
How to Build a Button
Timeline
When a button is created in Flash, a new type of timeline is created. The four keyframes within a button are the up, over, down and hit keyframes.
UP: This keyframe determines what happens when the button area is undisturbed by the mouse while sitting on the stage.
OVER: This keyframe determines what happens when the mouse is overtop of the button area.
DOWN: This keyframe determines what happens when the button is clicked on. (the brief moment the mouse is held down)
HIT: This keyframe determines the surface area of the button itself. This keyframe is never seen on the main stage, it only determines when the up, over, and down keyframes should be activated. Usually, when making text into a button, a solid rectangle overtop of the text is preferred when creating a hit state for that button.
Behaviors
Behaviors tell a button what to do. These commands are done through ActionScript, which is basically a form of code. Behaviors are a shortcut within ActionScript. For those who are not familiar with writing code, the Behaviors palette is an easy way to get around not having to write a majority of the code.
Step 1: To give a button a behavior, click on the button while it is on the main stage.
Step 2: Open the Behaviors Palette by hitting shift+F3 or by going to Window > Behaviors.
Step 3: Once the Behaviors Palette is open, click on the plus or minus button to add or remove a behavior.
Step 4: When the Add a Behavior button is selected, a list of behavior options is displayed. Most of the behaviors that will be used in this class can be found within the Movieclip option.
Step 5: Once a behavior is selected another window will open asking where to navigate within the Timeline. At the bottom, the frame number or the frame label can be entered, telling the Timeline, specifically, where to go.
Step 6: Once the Behavior is set up, they can then be found in the Actions Palette (option+F9 or Window > Actions). There the behaviors can be modified further.
In-Class
Become familiar with Actions on both the timeline in the creation of buttons, and discuss ways to have them work in tandem to create an interactive slideshow.Planning your Portfolio Website
Revisit the original plans and vision of the self-promotional Web Site that was thought out in prior classes. Using illustration and design skills, as well as animation techniques, and some explorations into interaction design and methodology, begin planning the final project.While creating the site plan, bear these things in mind:
Information Architecture
Read: http://www.digital-web.com/articles/ia_as_an_extension_of_web_design/Usability
Learn from Mistakes, See: http://www.webpagesthatsuck.com/Personal Tone and Style
You can learn a lot from this. (No joke. Almost.): http://www.dowslane.org/Personality.htm← 05: Animation Techniques | 07: Design for the Web →
← Return to Main Page...
Commenting is closed for this article.