We think you have liked this presentation. If you wish to download it, please recommend it to your friends in any social system. Share buttons are a little bit lower. Thank you!
Presentation is loading. Please wait.
Published byKade Mowry
Modified about 1 year ago
© 2010 Delmar, Cengage Learning Chapter 1: Getting Started with Flash
© 2010 Delmar Cengage Learning Chapter 1 Lessons 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
© 2010 Delmar Cengage Learning Using Adobe Flash What is Adobe Flash? –An animation and interactive authoring program –Has tools for complex animation, as well as excellent drawing tools –Popular because Flash is optimized for the web
© 2010 Delmar Cengage Learning Using Flash What can Flash be used for? –Web sites –Web-based applications –CD-Rom and interactive applications –Video
© 2010 Delmar Cengage Learning 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
© 2010 Delmar Cengage Learning 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 movie controls (play, stop, rewind, etc.)
© 2010 Delmar Cengage Learning Understanding the Flash Workspace Three parts to the development workspace –Menu bar –Stage –Timeline One or more panels may be displayed
© 2010 Delmar Cengage Learning Fig. 1: Flash Workspace Object on the Stage Object in Library panel Playhead Selecting frame 1 displays the object (car) on the Stage Pasteboard Drawing, paint, editing and selection tools Tools panel Properties and Library panels grouped with Library panel displayed
© 2010 Delmar Cengage Learning 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
© 2010 Delmar Cengage Learning 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 playback head
© 2010 Delmar Cengage Learning The Tools Panel Panels are used to view, organize, and modify objects and features in a movie Most commonly used: –Tools –Properties –Libraries
© 2010 Delmar Cengage Learning The Tools Panel Tools, View, Colors, Options Arranging tools: –Dock panels together –Stand alone –Stacked above or below –Floating
© 2010 Delmar Cengage Learning Fig. 2: Arranging Panels Grouped panels Stand-alone panel Stacked panels Floating panel
© 2010 Delmar Cengage Learning 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.
© 2010 Delmar Cengage Learning Fig. 3: Grouping the Library Panel Rectangle with blue border
© 2010 Delmar Cengage Learning Fig. 4: Ungrouping Library Panel Toggle between Collapse to Icons and Expand Panel button Close button
© 2010 Delmar Cengage Learning Fig. 7: Changing the Size of the Timeline Panel Double-headed pointer
© 2010 Delmar Cengage Learning 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
© 2010 Delmar Cengage Learning 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, loop playback Use the Controller –Toolbar command on the Window menu
© 2010 Delmar Cengage Learning 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
© 2010 Delmar Cengage Learning 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
© 2010 Delmar Cengage Learning Fig. 8: Control Menu Commands DVD-type commands
© 2010 Delmar Cengage Learning Documents, Movies, Applications Flash document and Flash movie are synonymous. Products such as games and educational software, as well as online advertisements and product demonstrations, are referred to as applications. Applications usually contain multiple Flash documents or movies that are linked.
© 2010 Delmar Cengage Learning Fig. 10: Playhead Moving across Timeline Playhead
© 2010 Delmar Cengage Learning Fig. 12: Document Properties This option may be selected Background color swatch
© 2010 Delmar Cengage Learning Fig. 13: Completed Changes to Document Properties Resized document (Stage) Gray background color This value might differ These sections may be open
© 2010 Delmar Cengage Learning 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
© 2010 Delmar Cengage Learning 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
© 2010 Delmar Cengage Learning Fig. 14: Circle Object in Frame 1 Object on the Stage is on Layer 1 frame 1 on the Timeline
© 2010 Delmar Cengage Learning Fig. 15: Motion Animation Blue shading indicates a motion tween animation Dotted line indicates the path the object will follow during animation
© 2010 Delmar Cengage Learning Motion Tween Animation Process The process is to select an object on the Stage, then select the Motion Tween command from the Insert menu. –Timeline shows tween span –Motion path from beginning to ending frame
© 2010 Delmar Cengage Learning Motion Presets Flash provides several preconfigured motion tweens that you can apply to an object on the Stage. For example: –Bounce an object across the Stage –Fly-in an object from off the Stage –Cause an object to pulsate and to spiral in place
© 2010 Delmar Cengage Learning Fig. 17: Motion Presets Panel
© 2010 Delmar Cengage Learning 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 –Size –Transparency
© 2010 Delmar Cengage Learning Fig. 20: Creating a Marquee Selection Use the Selection tool to draw a marquee, which selects the entire object
© 2010 Delmar Cengage Learning 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
© 2010 Delmar Cengage Learning Fig. 30: Elements of the Timeline Layers Playhead Current frame Frame rate Elapsed time Status bar Frames Frames view icon
© 2010 Delmar Cengage Learning 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
© 2010 Delmar Cengage Learning Fig. 31: Understanding Layers
© 2010 Delmar Cengage Learning 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
© 2010 Delmar Cengage Learning 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
© 2010 Delmar Cengage Learning 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
© 2010 Delmar Cengage Learning 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
© 2010 Delmar Cengage Learning Fig. 32: Timeline of a Movie with a Second Object
© 2010 Delmar Cengage Learning Fig. 36: Changing the View of the Timeline
© 2010 Delmar Cengage Learning Fig. 37: Changing the Frame Rate Pointer changes to double- headed arrow
© 2010 Delmar Cengage Learning 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)
© 2010 Delmar Cengage Learning Other Publishing Options Stand-alone Projector Files Quicktime.mov files
© 2010 Delmar Cengage Learning Fig. 39: HTML Code
© 2010 Delmar Cengage Learning Fig. 40: The Three Layers Files after Publishing Your files may be listed in a different order
© 2010 Delmar Cengage Learning 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?
© 2010 Delmar Cengage Learning Plan an Application or Web Site Step 3: Determine the Treatment –The look and feel –Tone –Approach –Emphasis
© 2010 Delmar Cengage Learning Plan an Application or Web Site Step 4: Develop the Specifications and Storyboard –Playback System –Elements to Include –Functionality –User Interface
© 2010 Delmar Cengage Learning Fig. 44: Sample Storyboard
© 2010 Delmar Cengage Learning 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
© 2010 Delmar Cengage Learning 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
© 2010 Delmar Cengage Learning 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
© 2010 Delmar Cengage Learning Fig. 45: Flash Help Categories
© 2010 Delmar Cengage Learning Fig. 46: Flash Help Search Feature Search term
© 2010 Delmar Cengage Learning Chapter 1 Summary 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 website
Adobe Flash CS3 Revealed Chapter 1 - GETTING STARTED WITH FLASH.
Understand the Macromedia Flash environment Open a document and play a movie Create and save a movie Work with layers and the timeline Plan a Web site.
Macromedia Flash MX 2004 – Design Professional Macromedia Flash MX GETTING STARTED WITH.
Dm 11 – Intro. To Flash Macromedia Flash MX GETTING STARTED WITH.
Macromedia Flash CS4. What is Flash CS4? –Animation and interactive authoring program –Tools for complex animation, as well as excellent drawing tools.
© 2011 Delmar, Cengage Learning Chapter 1 Getting Started with Flash.
Chapter 1 Getting Started with Flash. Chapter 1 Lessons 1.Understand the Flash workspace 2.Open a document and play a Flash movie 3.Create and save a.
Macromedia Flash Design Professional Macromedia Flash GETTING STARTED WITH.
Chapter A FLASH LESSON 1: INTRODUCTION BASIC MOTION TWEEN 1.
Getting Started with Flash Chapter 1 Understand the Flash workspace Lesson 1.
CIS 205—Web Design & Development Flash Chapter 1 Getting Started with Adobe Flash CS3.
Adobe Flash CS3 Chapter 1 Spring Adobe Flash Adobe Flash is a development tool that allows you to create compelling interactive experiences, often.
Introduction to Flash Animation CS 318. Topics Introduction to Flash and animation The Flash development environment Creating Flash animations Layers.
© 2011 Delmar, Cengage Learning Chapter 3 Working with Symbols and Interactivity.
Adobe Flash CS4 – Illustrated Unit A: Getting Started with Adobe Flash.
Week 11 Hands on Flash Pelekanou Olga INF221 INTRODUCTION TO MULTIMEDIA.
Chapter 3 Working with Symbols and Interactivity.
ADOBE FLASH CS5 Chapter 3 Working with Symbols and Interactivity.
© 2010 Delmar, Cengage Learning Chapter 3: Working with Symbols and Interactivity.
Adobe Flash Professional CS5 – Illustrated Unit A: Getting Started with Adobe Flash Professional.
XP Tutorial 1 Introduction to Macromedia Flash MX 2004.
XP Tutorial 3 Creating Animations. XP New Perspectives on Macromedia Flash MX Elements of Animation Layers are used to organize the content of.
© 2011 Delmar, Cengage Learning Chapter 11 Adding Sound and Video.
© 2010 Delmar, Cengage Learning Chapter 6: Preparing and Publishing Movies.
Macromedia Flash MX Design Professional Macromedia Flash MX GETTING STARTED WITH.
1-1 OBJ Copyright 2003, Paradigm Publishing Inc. Dr. Joseph Otto Silvia Castaneda Christopher deCastro CSULA Macromedia Flash MX Introduction.
© 2012 Adobe Systems Incorporated. All Rights Reserved. Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® INTRODUCTION TO FLASH ANIMATION.
Chapter 1 Getting Started With Dreamweaver. Explore the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.
® Copyright 2010 Adobe Systems Incorporated. All rights reserved. ® ® 1 INTRODUCTION TO ADOBE FLASH PROFESSIONAL CS5.
INTRODUCTION TO FLASH CS5 Understanding the Workspace (Review: Animation Key Terms)
Chapter 11 Adding Sound and Video. Chapter 11 Lessons 1.Work with sound 2.Specify synchronization options 3.Modify sounds 4.Use ActionScript with sound.
© 2010 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.
© 2010 Delmar, Cengage Learning Chapter 4: Creating Animation.
1 Flash and Animation Presented by : Behzad Sajed Khosrowshahi.
UNDERSTANDING ADOBE FLASH. The Flash Interface The flash interface provides you with: A menu bar Panels A work area: stage.
Create slices and hotspots Create links in Web pages Create rollovers from slices Create basic animation Add tweening symbol instances to create animation.
© 2011 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.
Adobe Flash CS3 Revealed Chapter 3 - WORKING WITH SYMBOLS AND INTERACTIVITY.
Tutorial 3 Creating Animations. XP Objectives Learn the different elements of animation Create frames and layers Organize frames and layers using the.
Frame(GIF) and Vector Animation. Two Applications for Creating Animations 1.Photoshop – GIF Animation 2.Flash – Vector Animation.
Introduction to Animation In animation, a series of images are rapidly changed to create an illusion of movement.
Creating Buttons – Lesson 71 Creating Buttons Lesson 7.
Chapter 17 Putting It All Together. Viewing the Preloader To view the preloader, 1.CTRL-Enter to test the movie. 2.View > Simulate Download.
CIS 205—Web Design & Development Flash Chapter 3 Appendix on Using Buttons.
Adobe Flash CS5 Introduction. What is Flash? Flash is a multimedia platform used to add animation, video, and interactivity to Web sites. It is often.
Getting Started with Adobe Dreamweaver CS6. Unit Objectives Define web design software Start Adobe Dreamweaver CS6 View the Dreamweaver workspace Work.
Chapter 4 Dreamweaver: Part II The Web Warrior Guide to Web Design Technologies.
Tutorial 1 Introducing Adobe Flash CS3 Professional.
Introduction to Macromedia Flash 8. © 2005 Macromedia, Inc. 2 Flash Workspace Tools panelTimeline Panels Property inspector Stage Current scene Layers.
© 2017 SlidePlayer.com Inc. All rights reserved.