Welcome to GRPH 394: Interactive Media

These pages are provided as an outline for GRPH:394 Interactive Media. At right you will find links to the material covered each week throughout the course, as well as links to each weeks assignments, distributed via Adobe PDF files. Though this site is updated frequently, all materials and assignments are subject to change at Instructor’s (Todd Roeth’s) discretion.

Things to know, remember, and understand.

This material is a supplement to class and does not replace class attendance and participation. For more information regard attendeance policies, please refer to the Marietta Student Handbook.

Assignments for class are assigned on a weekly basis, and delivered as printable .pdf documents available at right. Due dates are assigned in class.

Review Syllabus

Class Text: Macromedia Flash Professional 8 Hands-On Training (Hands on Training (H.O.T)

Supplemental Text (Not Required): Macromedia Flash Professional 8 Beyond the Basics (Hands-On Training)

Hard Drive: Many files will be generated in and out of this class. Students are responsible for saving, organizing, and archiving their own work. Personal file storage is required; an external thumb drive or hard drive is recommended. The following links are suggested drives, depending on student need and scenario;

Lexar Jump Drive

SmartDisk FireWire Drives

Lacie Desktop Drives

Final Project:

The final project for this course is a self promotion website, hosted live on the World Wide Web. Each student is responsible for all aspects of the site- Content, Presentation, Production, and Maintenance. Each Student will be required to purchase a Domain Name and Web Hosting. The final project & all work prior to the final Website will be delivered via student Websites.

›Purpose
›Feel
›Be aware of the impression it makes
›Begin gathering and organizing your artwork

Purpose of final Flash Site is essentially a “book” online. It should be an effective, appropriate, and efficient display of your work and a memorable and professional first impression of you.

Trends and Techniques for Animation and Interactivity on the Web

The Internet, like a child has matured in the last decade. The styles, strategies, and sensibilities have also matured.

1998
This website was groundbreaking design when it came out. Notice how linear the navigation is.

Moosesyrup, Mike Hansen Portfolio
A personal flash portfolio site. This site is a strong contrast to the nonlinear navigation. This allows the user to access information.

Matt Mahon Portfolio
Another contemporary media rich environment. Notice the engaging use of sound and video.

Alix Northrup Portfolio
This is a good example of a personal portfolio website designed in this class.

What is Flash?

Flash is a vector based animation software that is widely used on the web to create advertisements, movies, and websites.

VECTOR vs. BITMAP

Read: Adobe’s Explanation of Bitmap and Vector Graphics.

Flash’s various roles in multimedia

Flash is deployed for a variety of purposes, from CD-ROM packages, linear animation, interactive kiosks at museums & airports, content rich web applications, and personal art portfolios…

History of Flash

Flash started in the 1980s from some ideas Jonathan Gay had during high school, college, and while working for Silicon Beach Software. Charlie Jackson, Jonathan Gay, and Michelle Welsh started a small software company in January 1993, called FutureWave Software. Their first product was SmartSketch, a drawing application designed to make creating computer graphics as simple as drawing on paper. As the Internet began to grow, FutureWave realized the potential for a vector-based web animation tool that might challenge Macromedia’s slow-to-download Shockwave technology.

In 1995, FutureWave modified SmartSketch by adding frame-by-frame animation features and re-released it as FutureSplash Animator on Macintosh and PC. The product was offered to Adobe and was used by Microsoft in its early (MSN) work with the Internet.

In December 1996, Macromedia bought the rights to the vector-based animation software and later released it as Flash 1.0.

In 2007, Adobe bought the rights from Macromedia and has recently released it as Adobe Flash CS3.

Read: Jonathan Gay’s The History of Flash

What is a Domain Name?

A domain name is the web address for a web site (i.e. www.toddroeth.com).
One’s domain name is a separate registration from one’s hosting.

To find out if a domain name is available, www.networksolutions.com is a good place to search. There are many strategies in picking a URL. Establishing a personal identity on the net gives ownership and accountability to individuals and their work.

Read: The Internet Corporation for Assigned Names and Numbers (ICANN)

What is a Host?

A web host is the server space where one’s site is saved and accessed by internet users.
A hosting service is separate from a domain name. However, many hosting plans will register a domain name for an additional cost.

Different hosting servers offer differences in speed, reliability, customer service, and traffic. Be a smart shopper when purchasing hosting services.

A List of Reliable Hosting Companies:

› www.ideanode.com (requires separate domain name registration)
› www.mediatemple.com
› www.bluehost.com

To Register Your Domain Name Separately

Domain Name Registration (for use with ideanode.com or to just buy a name independent of hosting): www.godaddy.com

Good Advice: http://www.cnet.com/4520-10192_1-5510570-1.html

In-Class:

Have students shop for a Domain name and host.

Uploading your work to the Web: FTP

File Transfer Protocol is standard developed to upload data to a website.

Read: FTP 101 – A Beginner’s Guide

Manage Sites

To log back into one’s site, goto Site > Manage Site…
In order to manage one’s site he or she must be on the specific computer that the site was created on.

Transferring Files

To transfer files goto Window > Files or press F8.

This button expands or collapses the File window to show both Local and Remote files.

This button connects to the Remote server.

Once the panel is visible files can then be dragged from Local to Remote folders or vise versa. This COPIES files to the remote server.

Different hosts configure sites differently. Some are set up in /htdocs or /public. All files must be within a folder.

Path names (addresses) are simply the names of file directories on your server, delinatred with a ”/”

In-Class

Login to student websites, explore directory organization, and upload Quote Animation Assignment to their Websites, and email the path for grading.

Design for Music Video

For you rmusic videa assignment start planning by finding a site or sites, take a screen capture, (Shift + Ctrl + Apple + 4). This screen shot can be inspected in Photoshop to determine:

› Stage size
› Color palate
› Basic layout

Flash Music Video Examples

See: http://korpps.free.fr/radiohead_creep.swf

Assignments For this Week:

Assignments #3 (.pdf)

Find a site-

Reminder: BRING AUDIO CD TO NEXT CLASS…

Basic Frame by frame animation:

Both the interface and metaphor for working within Flash takes place in two hemispheres. The Timeline and the Stage. In Flash, users create in both Time (timeline; animation) and Space (stage; graphic design).

In-Class:

Pair up and teach each other how to make a shape move and change color across the screen.

A) Key framed animation spelling out student name:

By experimenting with Flash’s type tool on the stage and on the timeline above, basic typewriter effects can be achieved.

B) Make a circle layer, draw a circle and use frames to animate.

By experimenting with Flash’s shape tools and the timeline above, basic animations can be achieved.

Using Tweens to Animate in Flash

Analogy: Like shipping any object through the Postal Service, your item needs an envelope or a box to be shipped in.

Suppose a package of carrots is put in a container to ship. The container is called a symbol in Flash. The Symbol is the container and its contents can be changed within the Symbol.

1) All objects that are to be animated need to be on their own layer.
2) All objects that are to be animated then need to be Converted to a Symbol (F8)
3) All symbols are stored in Flash’s Library, and can be used over and over. Each time a symbol is placed from the Library to the stage, it is called an Instance, and can be modified independently from other instances of the same symbol.

Tweening

Analogy: the USPS and sending a package from Ventura to NYC.

Any object(s) on the stage can be converted into a Symbol. When the object(s) is converted into a symbol it is automatically added to the Library. This then enables the object(s), which is now a symbol, to then be Tweened.

To make any object or group of objects a symbol: Convert to Symbol (F8)

Correct Tween

Incorrect Tween

Untweened Group of Keyframes

Rules to consider when doing Motion Tweening:
› Every object must be converted into a symbol
› Every symbol must be on a separate layer
› When tweening between keyframes, both keyframes must have same symbol.

Tweening Options:

Easing:
› Easing In starts slow and ends fast (denoted in negative numbers).
› Easing Out starts fast and ends slow (denoted in positive numbers).

Rotate:
Symbols can be rotated Clockwise and Counter Clockwise. Times specifies how many times the symbol will be rotated.

Color Options: (Alpha, Tint, Brightness)
Color options can be accessed only when a symbol is selected while on its specific keyframe.
› Alpha: Changes the opacity of a symbol
› Tint: Changes the color of a symbol
› Brightness: Enables a symbol to absorb more white or black

In-Class:

Explore Tweening by illustrating and animating the “Postal Service” metaphor.

Publishing Movies in Flash

.fla vs. .swf

There are two distinct file types that Flash makes. The first, .fla is the editable flash file. It keeps all layers, tweens, keyframes, Library assets, etc. The second, .swf is a compressed, read-only, web-ready file.

To publish a movie (make a .swf file) in Flash:
After saving an .fla version, press [Option + Return] at any time to Publish a .swf file with the same name to the same folder.

Flash as an Animation Tool

Flash can be used to create a visceral experience when used effectively. Mature and effective design will have a clear, but not overstated character to the work.

The Challenge in Flash (and all visual communication), is how to effectively convey both the Message and the Meaning. Designers need invent a way to communicate the idea, as well as a proper tone and/or emotion to the message. Without overstating your movie, how do you emotionally move someone?

Flash can establish TEMPO, MOVEMENT, TONE, AND TYPE through animation.

Examples of Flash Slideshows and Animation that establish a mood and tone:

› Getty images
› www.sofake.com
› www.rawpower.tv
› www.eminem.com
› www.bullseyeart.com

Animation & Images: Making Slideshows

One approach to animation in Flash is to create Slideshows. Like Vector Artwork – and some the examples above – Flash can animate bitmapped images.

› Stage Size and Frame Rate
› Movie, stage size, frame rate.
› Find a site you like, view source to see movie size, EMBED SRC=and see height and width

Vector Drawing In and Out of Flash

Flash is, among many things, a drawing tool. But not all artwork has to created natively.

Using Illustrator

Illustrator is a more robust tool for drawing artwork. Artists often render their artwork in Illustrator.

› There are different options when exporting files into Flash. In some situations one can copy and paste simple objects into Flash.
Read and Watch Video: Adobe Tips & Tricks for Exporting .swf files from Illustrator

› Show import options into Flash

In-Class:

SlideShow #1: build a 3 image (3 layer) movie and fade in and out the images with alpha tween

SlideShow #2: build a 3 image (3 layer) movie and fade in and out the images with a fader box on top of the images.

Be sure to experiment with keyframing, tweening, and easing.

Shape Tweens

Like motion tweening, Flash can automate transitions between vector shapes in between keyframes. Shape tweening can also rely on hints to control the way or order in which shapes change.

Guide Layers

Tweening symbols doesn’t have to be applied in a straight line between keyframes. By using a ‘Guide Layer’ designers can draw a line in any shape on it. By placing a symbol on a ‘Guided Layer’ below it, the symbol will follow the line drawn, much like a rail car moves on train tracks.

Masking

Masking is a technique in flash that can be applied to vector and bitmap artwork. By specifying a particular layer order and layer properties, symbols on a ‘Masked’ layer can be revealed or partially hidden by ‘Mask’ layer above it.

Movie Clips: Nested Clips

As we know, Flash uses symbols, organized in the Library to control and animate within the Flash movie file.

Each symbol within Flash has it’s own timeline. (Button symbols have a unique timeline. More on buttons later.) When objects are converted to symbol, Graphic Symbols and Movie Clip Symbols can have an additional timeline inside of the Symbol. Movie Clip Symbols use animation that runs independently of the main timeline.

In our first animation exercise, we used the analogy of mailing a box in the Post across the country. Now imagine a nested movie clip as a package that has a wind-up toy or a music box inside of the package: as the box moves across the country, the toy inside the box also moves (spins, cranks, plays…) while moving within the package.

Example: A movie clip symbol can have an animation of a man with his legs moving as if walking in place, on a treadmill. Once the movie clip of the moving man is placed on the main timeline, it can be tweened across the stage to give the appearance of a figure walking.

In-Class

In Class: Create an animation with a nested movie clip.

File Size vs. File Quality

The game all web designers play is “How low can I go?”. The strategy in delivering content to the Web, be it photos, audio, or video, is reducing the file size for download speed, while minimizing loss of quality. The catch 22 is this: your work can be superb, but if it takes too long to download your audience will not wait to see it. Conversely, your material can download fast to the user’s computer or device, but if the quality is poor, the message is still lost and the user has wasted their time.

Question: Which is worse, big download times but quality work, or fast download times but overcompressed work?

Answer: Both.

There is a constant trade-off in Web design between file compression and its effect on file quality. A balanced and educated decision is needed of designers and producers to find the right balance.

Audio in Flash

Considering Flash as producing files for Web delivery, designers need to be very conscientious of file size and its effect on sound quality.

File Format

Generally, audio files are recorded and distributed in .aiff format when on CD. While this format allows for good sound quality, it is too big of a file to use on the Web. (An average store bought CD track can be as big as 50Mb.)

Flash is most compatible with many types of audio files, but some formats allow for better compressed files, allowing for realistic download time.

Of them the mp3 format is preferred.

(Much) more on the mp3 format: http://www.iis.fraunhofer.de/amm/techinf/layer3/

Audio file compression

There are many ways to compress sound files into the mp3 format, of the simplest is iTunes.

When compressing an audio file there are three basic points to know:

Bitrate: Measured in kilobytes per second (kbps) the bitrate determines the dynamic range, the amount of detail preserved in the high and low (loud and quiet) parts of the audio.

*Flash only works with sampling rates of 11.025 kHz, 22.05 kHz, and 44.1 kHz

Sample Rate: This measurement dictates the accuracy of the sound as it gets compressed. the higher the number, measured in Hz, the more accurate (and thus, larger files) the sound. Standard for mp3 files is 128kHz, but basic audio such as voice files can go lower. (again: “How low can you go?”)

Channels:This refers to Mono and Stereo sound. (Note: Mono does not mean the sound only comes out of one speaker, but the same sound plays in both.

In-Class

Use iTunes to Import a song from a CD.

Importing audio to Flash

› Import sounds into Flash by choosing Import to Library from the File menu. The following audio file formats can be imported into Flash: WAV, AIFF, MP3

When you import an mp3 audio file to Flash do not place the file directly on the timeline. Use the inspector palette to access the audio from the Library. Be sure to the streaming option in the Inspector palette.

Images in Flash

There are two types of graphic formats flash uses best, .jpeg and .png

Jpeg compression

› Open Bridge and view Images
› Open sample file and resize to a medium stage. (Note: Image Resolution can be kept at higher the 72 ppi, as it has no bearing in file’s data size.)
› use photoshop screen sketches or ‘Rula’ to determine pixel size.
› consider browser bars and scrolls
› In Photoshop Select ‘Resample Image’ from Image Size dialog box, use ‘Bicubic Sharper’ when downsizing.

› Convert Color Profile to sRGB1998
› Image>Mode>Convert to Profile>sRGB1998
› sRGB is a smaller color space (RGB vs sRGB), but more vibrant

› Save File as an intermediate stage. Make a separate folder to store these images. They will not be the final files you import into flash and load on the web, but they are already significantly smaller then the original image.

› In Photoshop, View>Proof Setup>Windows RGB

› Color Correct and Sharpen for the Web.
› Photoshop and Flash Compression will result in loss of color saturation. To compensate, an oversaturation up to + 15 in Photoshop is recommended. (Apple + U)

› Adjustment Layer- Curves/Levels: Over contrast with S Curve slightly to compensate for web compression.

› Save For Web: Go to File > Save for Web, for web options, and save to a New Folder (i.e. “Ready”) that is ready to import into flash.

If the results are unacceptable, revert to the medium sized image reapply the curves etc. This workflow of saving a ‘Medium’ and a ‘Ready’ Folder will save tons of time as you backtrack through your design process to re-edit and retouch your photos until they are as clean, small, and dramatic as possible. (Remember: Photo quality is paramount- it is the reason you have a site in the first place…

Png compression

The png 24 file format allows for high quality image files with transparency. The png file format is not yet compatible in all Web browsers, but when imported into Flash, these files maintain transparency with an alpha channel, allowing for soft and feathered edges on artwork that fades to a transparent background.

Using a similar work established for jpg compression, create a .psd file with a transparent area. (A file with the checkerboard background in the Photoshop document.)

› Save For Web: Once your file is prepared and saved as a layered .psd, Save for Web and select the PNG-24 format.

When this file is then imported into Flash, the transparent ‘checkerboard’ area will be respected.

Bitmap Compression in Flash

Flash also has it’s own internal compression schemes and methods for handling several formats of image files. Most of Flash’s compression happens when the movie file is published. At that time, an additional round of compression is applied.

Design theory for the Internet

›Fads: http://209.209.36.178/B1/home.html
›Function and an enjoyable/meaningful experience.
›Rhythm

Some Sample Flash Portfolio Sites

www.moulsari.com
www.marcatlan.com
http://www.carolyndrake.com/
www.joewigdahl.com
www.joachimladefoged.com
www.louisehyatt.com
www.mattisimo.com
www.disorange.com
www.iso50.com
www.kourtneyhoffman.com

Learning from Mistakes

http://www.thisisbroken.com/b/webtech/index.html

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

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