Course
Information

Course
Resources

The Basics

Basics Although Flash is often associated with animation, it can be used to create a wide range of rich content containing text, graphics, audio, video, animation that can run from a web browser, CD, or on the desktop of computers and hand-held devices.

Projects are developed in the Flash software and can be saved or exported for different purposes.

Source versions are the original Flash files. They contain the *.fla file extension and can only be viewed and modified by someone using Flash development software. These files contain the basic media, Timeline, and script information.

Compressed versions called Flash movies are viewed with FlashPlayer that can be downloaded for free. These files are compiled and compressed so they take up less storage space and download quickly. These are the types most often embedded on web pages and viewed with a web browser. The end user goes to a web page with the *.html file extension. The published version of the Flash movie (*.swf) is embedded in the code of this page.

Executable versions of the files can also be developed that embed the FlashPlayer in the program, so no special software is needed. Since these files require more space, executables are most often found when the projects are shared on CD.

The main file types associated with Flash projects include .fla - holds the source material for a Flash program, .swf - aka ShockWave Flash' movies / compiled and published files that cannot be edited with Adobe Flash, .as - the ActionScript source code, and .flv - Flash video file. Learn about the software program, its history, other file forms and much more at Adobe Flash at Wikipedia.

The following links take you to the resources on this page.

Working with Flash
Working with Graphics
Building Graphic Elements for a Flash Project
Learn More

Return to the Top

Working with Flash

Flash uses an IDE (Integrated Development Environment) where developers work with the Stage, Timeline, Media Objects, ActionScript code, and other elements (Click the image on the right to enlarge).

Stage. Your main work area is called the Stage. This is the area where you will be working with the visual aspects of your project.

Timeline. Like an electronic spreadsheet, the Timeline is set up in rows representing layers and columns and time by individual frames.

Media Objects. Generally media objects resources such as graphics, audio, and sound are imported into the Flash Library. Instances of these objects are then dragged onto the Stage as they are needed on particular keyframes. Media objects may also be accessed through ActionScripts.

ActionScript code. An object-oriented scripting language is used to add interactions and controls to your project.

Note: Most of the linked resources on this page will open up in another tab on your browser, allowing you to keep this page in active view.

Explore some of Adobe's online resources at What's New in Flash Professional CS5 and What's New in Adobe Flash Professional CS5. These two webpages provide an overview to Flash files, workspace, tools, and preferences.

Also examine Getting Started with Flash Professional CS5 to save startup time.

Most of the following tutorials from Adobe contain step-by-step instructions and many connect to additional webpages or video tutorials on related topics:

Creating Your First Flash Professional CS5 Document
About Drawing
Drawing Modes and Graphic Objects
Drawing Preferences
Draw Simple Lines and Shapes
Draw with the Pen Tool
Drawing Patterns with the Decorative Drawing Tool
Apply Patterns with the Spray Brush Tool
Reshape Lines and Shapes
Transforming Objects
Combining Objects
Selecting Objects
Arranging Objects
Snapping Art into Position
Moving and Copying Objects
Delete Objects
Colors, Gradients, and Strokes
3D Graphics

Remember that drawing in Flash is much the same as drawing using the Adobe Illustrator software.

Try It!
Explore the sample files at Learning to Publish (Flash) at University of Texas at Austin. Download the *.fla files and examine the Stage, Timeline, and Media Objects. These show some basic Flash examples. You'll be able to make these soon! Keep in mind that this is an older version of Flash, so they may not open perfectly on your system.

cliiptv clip Watch It!
If you're the type of learner who likes to watch videos, try some of Adobe Flash Professional resources at Adobe TV (The following video tutorial clips at Adobe TV are by Todd Perkins and are in the lynda.com collection);

Getting Started (GS): What is Flash Professional CS5? (Length: 0.59 min)
GS-01 - Understanding the Flash Environment (1:12 min)
GS-02 Understanding Frames and Keyframes (2:54 min)
GS-03 Understanding the Library Panel (3:57 min)
GS-04 Using Symbols (2:04 min)
GS-05 Nesting Symbols (1:37 min)
GS-06 Understanding Movie Clips (2:16 min)
GS-07 Understanding Object and Merge Drawing (3:30 min)
GS-08 Distributing Stage Content to Layers (1:42 min)
GS-10 Introducing the Text Layout Framework (2:01 min)
GS-11 Using the Text Tool to Create TLF Test (6:04 min)
GS-12 Creating Button Symbols (2:42 min)

Also view these Adobe Flash video tutiorials at YouTube from Lil Red Head Studios:
Free Transformation Tool Explained, The (6:41 min)
How to Merge Layers (1:07 min)
New Text Engine (4:31 min)

All IUPUI and IU students, faculty, and staff have access to lynda.com’s award-winning online training library.The lynda.com library has more than 650 video-based elearning courses on Adobe CS5 applications. Go to IT Training's Lynda page to get started. After exploring the entry page, proceed to the lynda.com tutorials (link near top of entry page; will redirect to login page). There are several tutorial courses for Flash CS5. Note also that there are numerous other tutorials for programs including Dreamweaver, Illustrator, Photoshop, and many more. If you need more instruction, recommend that you examine the following series:

Flash Professional CS5 Essential Training with Todd Perkins (Listed / linked on 2nd page of the index - within the Adobe CS5 section).
This is the entire series that has many more videoclips than those above from the Adobe website.

Return to the Top

Working with Graphics

Once you've installed the software, begin by creating some media objects using the drawing tools. There are two kinds of graphics used in Flash projects: bitmaps and vector.

Bitmaps are made of many dots that form a picture. Photos and many of the clipart files you see are bitmap. They take up lots of space and don’t enlarge very well. However it’s okay to import these if they’re important to your project.

Vector graphics are made of individual lines, shapes, and locations. They are infinitely scalable and look good reduced or enlarged. They also don’t take up much space. Flash created vector-based graphics.

Since Flash lacks some of the power of other graphics programs, you may wish to do your graphic work in another program and bring it into Flash. If you have access to the entire Adobe Creativity Suite, then you could work in Adobe Fireworks.

If you don't have access to a commercial program, consider open source software that can be accessed at no cost. For image manipulation such as retouching photos, image composition and image authoring, try GIMP or ImageMagicK.

Explore / skim the Graphic Effects Learning Guide for Flash from Adobe.
This article explores some of the cool graphics features in Flash.

Try It!
Helen Triolo's flash-creations website contains the following short tutorials:
Drawing and Editing Shapes in Flash
Make and Edit Gradients
Couple More Drawing Tips, A
Import Graphics and Sound
Create a Sample Scene

Return to the Top

Building Graphic Elements for a Flash Project

As you create your first projects, keep it simple. You might start with projects that involve stick figures, suns, trees, and houses. These things are all easy to create using the basic draw tools. Spend some time experimenting with lines, shapes, and colors.

Like all software, it's helpful to use the keyboard shortcuts. You can examine a Flash CS5 Keyboard Shortcuts (Mac) or Flash CS5 Keyboard Shortcuts (Windows) from Noble Desktop. Notice the link for the PDF / printable version on right side of the webpage.

Learn the basics and get started using the software and creating basic Flash graphics.

Try It!
After reading and completing the QuickStart (PDF document. Note: Even though some sections mention CS4 version, those particular processes and instructions can be done the same way for version CS5) and Chapter 2: The Basics (PDF document) from AIM your Flash Project. Start your own Flash project. Create some graphic elements on the Stage.

For a quick look at the differences between Flash CS5 and earlier versions, visit the Flash Professional Upgrade Chart.

Return to the Top

Learn More

You can find websites that contain tutorials or help with getting started and using Flash for developing graphic images. Explore some of these for added ideas:

CS5 Tutorials at Flash Tutorials: Learning Flash (Blogsite)
Flash Basics at IncredibleTutorials - series of outstanding Flash tutorials
Flash CS5 at IncredibleTutorials - series of outstanding Flash CS5 tutorials
Flash CS5 at Layers: The How-To Magazine for Everything from Adobe
Flash Tutorials (Flash tutorial components) (length 54:08 min) at Cartoon Smart
- Flash Drawing Tutorial (58:56 min)
VectorKid contains many great tutorials for creating different types of graphics
Search for 'Flash CS5 Tutorial' on YouTube and you'll find man

Return to the Top