Introduction

FLASH…

…is frequently used to design portfolio sites. Visitors to portfolio sites are looking for something artistic, unique, and visually stimulating. When designing an information space, however, keep in mind that visitors are often annoyed by Flash design. The key is to enhance communication and user experience without gratuitous effects that impede users from finding information quickly. Here are a few examples of web sites designed in Flash:

In the last lesson if you decided to explore the Flash interface you practiced working with drawing tools and creating simple tween animations. In this lesson we continue our exploration of Flash, focusing on the use of symbols and instances.

CINEMAGRAPHS…

…are looping images made from videos, and only feature movement in the image where the creator wants to direct the most attention.

CC BY 2.0 by Johan Blomström
Created: 10 May 2011

Objectives

In this lesson you will learn:

  • how to create and edit symbols
  • how to create and modify symbol instances
  • how to make alpha transformations

After completing this lesson you should understand and appreciate:

  • the advantages of using symbols
  • the difference between symbols and instances
  • the difference between exporting and publishing a Animate/Flash file

Reading

Read the documents linked below for either Flash or cinemagraphs depending on what interests you most.

Activities

Lecture

Flash Terms and Concepts

A key feature of Flash is its ability to output small file sizes. One of the ways Flash accomplishes this feat is through the use of symbols. A symbol is a “master object” that can be stored once and re-used multiple times in a Flash movie without significantly increasing file size. Each use of a symbol within the file is called an instance. Symbols are stored in a library within the Flash document. (Other items can be stored in the library as well, including sounds, video clips, and bitmap graphics. Items in the library–symbols as well as other items–are called assets.)

All symbols are located in the library. Instances are created by dragging a symbol from the library onto the stage. When you see a symbol on the stage, you’re actually not looking at the symbol, but at an instance of the symbol. This distinction is important, because the appearance of an instance can be altered without changing the original symbol. There are two ways to alter instances:

  1. transformation (rotation, scale, skewing, distortion)
  2. color (brightness, tint, opacity/alpha)

You transform an instance on the stage by using the free transform tool. You change the color of an instance by adjusting the color effect settings in the property panel.

When you edit a symbol (rather than transforming or applying color effects), all instances of the symbol change as well. You edit a symbol by double-clicking it; you can double-click a symbol in the library, or you can “edit in place” by double-clicking an instance on the stage.

Publishing Flash Files

The native Flash file format is FLA (pronounced flaw). This is an authoring file format; it includes tools, panels, and timeline (the interface we’ve been exploring). FLA files cannot be viewed on the web. In order to generate usable content from Flash you must either export or publish your Flash movie.

SWF (pronounced swiff) is the end-user version of a Flash file. Unlike FLA files–which require the purchased Flash software application–SWF files can be viewed using the free Flash Player. Flash Player works as a browser plugin, making SWF files viewable online. SWF files cannot be edited; they are akin to an optimized png file that has been flattened for use on the web. If you want to continue editing a Flash movie you must use the original FLA file.

To generate a Flash movie you can either export or publish. Publish is a more full-featured option; it not only creates the Flash movie (swf), it also creates an html file with all the necessary coding to play the Flash movie. Before using the publish command, you need to select publish settings (File > Publish Settings…). Publish settings are saved with the document; Flash remembers and uses the same settings each time you publish from that FLA file. Export settings are not saved. Export is a one-time action that allows you to quickly generate a single item (such as a swf, a Quicktime movie, or an animated gif).

You’ll find more information about publishing and exporting on Adobe’s help site:

Flash Activity

We’ll be building a small banner with Flash. You can find the tutorial for this project here, or in the “Tutorials” section of this site. While working on this activity we will be covering the following concepts:

  • Importing images
  • Organization using layers
  • The library
  • Creating Symbols
  • Tweens
  • Working with text
  • Publishing

Cinemagraph Terms and Concepts

Cinemagraph animations are a bit different from the types of animation that you would create with Animate. Cinemagraphs isolate movement from a video clip and freeze all other movement around it, forcing focal attention to one area of a composition. To begin creating your own cinemagraph, you must first have a video that contains some small moment of movement, usually no longer than 2-6 seconds, that you can isolate from the rest of the video loop. The final exported file you will end up with when creating a cinemagraph is an animated GIF.

Cinemagraph Activities and Practice

Creating a cinemagraph in Photoshop

Supplemental Reading on Alternative Animation with Photoshop

Considering the Homework

Do one or the other:

  1. FLASH
    Your homework for this lesson is to create an animated web banner, optimize it, and submit two versions: both the HTML file and SWF or GIF file.
  2. CINEMAGRAPHS
    Your homework for this lesson is to create a cinemagraph and optimize it for the web by converting it to an animated GIF.

Read the requirements and complete Assignment 8.