Adobe Flash CS3 Revealed Chapter 1 - GETTING STARTED WITH FLASH

1.Understand the Adobe Flash workspace 2.Open a document and play a movie 3.Create and save a movie 4.Work with the Timeline 5.Distribute an Adobe Flash movie 6.Plan an application or a Web site Chapter 1 Lessons Chapter 1

 What is Adobe Flash?  An animation and interactive authoring program  Has tools for complex animation, as well as excellent drawing tools Using Adobe Flash Chapter 1

 What can Flash be used for?  Web sites  Web-based applications  CD-Rom and interactive applications  Video Using Flash Chapter 1

Optimized for the Web  Flash uses vector images  Vectors are scalable  Reduces the size of graphic files  Flash provides for streaming content over the Internet  Does not need to wait for entire contents of Web page to load to start playing Chapter 1

Understanding the Adobe Flash Workspace  You can customize your workspace  Flash works on a movie metaphor  Create scenes on a stage  Scenes run in frames on a timeline  Create a movie by arranging objects on the stage  Play the movie on the stage using VCR- like controls Chapter 1

Understanding the Flash Workspace  Three parts to the development workspace  Menu bar  Stage  Timeline  One or more panels may be displayed Chapter 1

Fig. 1: Flash Workspace Chapter 1

The Stage  Contains all objects that are seen by the viewer in the final movie  You can draw objects on, or import objects to the stage Chapter 1

The Timeline  Used to organize and control the movie’s content by specifying when each object appears on the stage  Contains images within frames  Units of the timeline  Has separate layers  Has a playback head Chapter 1

The Tools Panel  Panels are used to view, organize, and modify objects and features in a movie  Most commonly used:  Tools  Properties  Libraries Chapter 1

The Tools Panel  Tools, View, Colors, Options  Arranging tools:  Dock panels together  Stand alone  Stacked above or below  Floating Chapter 1

Fig. 2: Arranging Panels Stand alone Floating Grouped Stacked Chapter 1

The Blue Drop Zone  The blue drop zone is the area to which the panel can move and is indicated by either a blue line or a rectangle with a blue border.  A single blue line indicates the position for stacking a panel above or below another panel.  A rectangle with a blue border indicates the position for grouping panels.  If you move a panel without using a drop zone, the panel becomes a floating panel and is neither grouped nor stacked with other panels. Chapter 1

Fig. 3: Grouping Library Panel Rectangle with blue border Chapter 1

Fig. 4: Ungrouping Library Panel Close button Collapse to icons button Blue line indicating drop zone Collapse button Chapter 1

Fig. 7: Document Properties Chapter 1

Fig. 8: Completed Changes to Document Properties Chapter 1

Opening a Movie in Flash  The.fla extension is native, and can only be opened in Flash  Flash exports Web-ready files as.swf .swf files should be tested before being published  Always keep the original.fla file for modifications Chapter 1

Previewing a Movie  Flash movies can be previewed in the workspace by directing the playhead to move through a timeline  Use control menu commands  Play, rewind, step forward, step backward  Use the Controller  Toolbar command on the Window menu Chapter 1

Keyboard Shortcuts  Play: [Enter] (Win) and [Return] (Mac)  Rewind: ([Ctrl] [Alt] [R] (Win)) and ([Option] [R] (Mac))  Step Forward (.) moves the playhead forward progressively  Step Backward (,) moves the playhead backward progressively Chapter 1

Testing a Movie  When previewing a movie, some interactive functions do not work unless the movie is played using the Flash Player  Use Control > Test Movie to test using the Flash player Chapter 1

Fig. 9: Control Menu Commands DVD-type commands Chapter 1

Fig. 10: Playhead Moving across Timeline Playhead Chapter 1

Creating a Flash Movie  Movies are created by:  placing objects on the stage  editing these objects  animating them  adding interactivity  You can create graphics in Flash or import them from another program such as Photoshop Chapter 1

Creating an Animation  A basic animation requires two keyframes  The first keyframe sets the starting position  The second keyframe sets the ending position  The number of frames between two keyframes determines the length of the animation  Once the two keyframes are set, Flash automatically fills in the frames between them, with a process called motion tweening Chapter 1

Fig. 12: Oval Object in Frame 1 Object on the stage is in Frame 1 on the timeline Chapter 1

Adding an Effect to an Object  In addition to animating an object’s location, you can also animate an object’s appearance  Shape  Color  Brightness  Transparency Chapter 1

Fig. 13: Motion Animation Chapter 1

Fig. 14: Object Drawing Option Object drawing option is not selected Chapter 1

Fig. 16: Creating a Marquee Selection Chapter 1

Understanding the Timeline  Organizes and controls a movie’s content over time  Determine and modify what is happening in a movie frame by frame  Which objects are animated  What types of animation to use  Which objects will appear on top of others  How fast movie will play Chapter 1

Fig. 18: Elements of the Timeline Chapter 1

Using Layers  Layers are like transparent acetate sheets of content stacked on top of one another  Each layer can contain one or more objects  Adding a layer causes it to be placed on top of the other layers  Can be re-ordered by dragging up or down Chapter 1

Fig. 19: Understanding Layers Chapter 1

Using Frames  The timeline is made up of individual units called frames  Content is displayed in frames as the playhead moves over them when the movie plays  Frames are numbered in increments of five for easy reference  The status bar indicates current frame the playhead is on Chapter 1

Using the Playhead  The playhead indicates which frame is playing  Can be dragged left or right  Dragging back and forth allows you to check some animations in Flash without exporting to.swf Chapter 1

Understanding Scenes  Are a way to organize long movies  Each scene has its own timeline  Give scenes descriptive names for faster editing  Manage your flash movie production Chapter 1

Working with the Timeline  By studying a timeline you can determine  If different objects are on different layers  If there is motion in any of the layers by looking for the motion arrow  The length of the animation  The frame rate  Where the animation is in its sequence Chapter 1

Fig. 20: Timeline of a Movie with a Second Object Chapter 1

Fig. 23: Changing the View of the Timeline Bar used to change the length of the timeline Frame view icon Chapter 1

Fig. 24: Changing the Frame Rate New frame rate Chapter 1

Distributing a Flash Movie  Flash generates both the swf and HTML files when you use the publish feature .html (The HTML document) .swf (The Flash Player file) Chapter 1

Other Publishing Options  Stand-alone Projector Files  Quicktime.mov files Chapter 1

Fig. 25: HTML Code.swf file extension indicates a Flash player Code specifies color and size Chapter 1

Fig. 26: The Three Layers Files after Publishing Chapter 1

Plan an Application or Web Site  Step 1: State the purpose or goals of your site  What do we want to accomplish?  Step 2: Identify the target audience  Who will use this application or Web site? Chapter 1

Plan an Application or Web Site  Step 3: Determine the Treatment  What is the look and feel?  Tone  Approach  Emphasis Chapter 1

Plan an Application or Web Site  Step 4: Develop the Specifications and Storyboard  Playback System  Elements to Include  Functionality  User Interface Chapter 1

Fig. 30: Sample Storyboard Chapter 1

Using Screen Design Guidelines  Balance: distribution of optical weight in the layout  Unity: how objects relate  Intra-screen  Inter-screen  Movement: the way the viewer’s eyes move through the objects on the screen Chapter 1

Using Interactive Design Guidelines  Make it simple, easy to understand, easy to use  Build in consistency in the navigation scheme  Provide feedback  Give the user control Chapter 1

The Flash Workflow Process  Step 1: Create and/or acquire the elements to be used in the application  Step 2: Arrange the elements and create the animations  Step 3: Apply special effects  Step 4: Create the interactivity  Step 5: Test and publish the application Chapter 1

Chapter 1 Tasks 1.Understand the Adobe Flash workspace 2.Open a document and play a movie 3.Create and save a movie 4.Work with the Timeline 5.Distribute an Adobe Flash movie 6.Plan an application or a Web site Chapter 1