Foundation flash


Published on

Basic Flash

Published in: Design, Technology, Art & Photos
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • The stage, the large white area in the center of the screen, is where the action happens. A good way of regarding the stage in relation to Flash is this: if it isn’t on the stage, the user isn’t going to see it. On the left side of the screen is a set of tools that will allow you to draw, colour, and otherwise manipulate objects on the stage. At the bottom of the interface is the Property inspector. This panel will become a very important place for you.
  • At the top of the interface is the timeline . This is the place where action occurs. As you can see, the timeline is broken into a series of boxes called frames. The best way of regarding frames is as individual frames of a film. When you put something on the stage, it will appear in a frame. If you want it to move from here to there, it will start in one frame and end in another a little further along the timeline. That red box you see in frame 1 is called the playhead . Its purpose is to show you the current frame being displayed. When a Flash movie is playing through a browser, the playhead is in motion and the user is seeing the frame where the playhead is located. This is how things appear to move in Flash. Another thing you can do with the playhead is drag it across the timeline while you are creating the Flash movie. This technique is known as scrubbing the timeline, and has its origins in film editing.
  • On the right side of the interface are the panels. Panels are used to modify and manipulate whatever object you may have selected on the stage or to even add an object to the stage. These objects can be text, photographs, line art, short animations, video, or even interface elements called components. You can use the panels and the menus to change not only the characteristics of the objects, but also how the objects behave on the stage. Panels can be connected to each other (docked) or they can float freely in the interface (floating).
  • Select Modify > Document. Press Ctrl+J (PC) or Cmd+J (Mac). Right-click (PC) or Ctrl-click (Mac) and select Document Properties from the context menu. Double-click the box that shows 12 fps under the timeline. The Title and Description boxes are where you can add a name for the document and write a brief description of the movie. The text you add to these two input boxes is used as the metadata that search engines can use to search your site. You can access this metadata by selecting Show Report in the Publish Options dialog box when the file that goes in the web page is created—the file is called a SWF (pronounced swiff). The Dimensions input area is where you can change the size of the stage. Enter the new dimensions, press the Enter (PC) or Return (Mac) key, and the stage will change. The Match area is commonly used to shrink the stage to the size of the content on the stage. You can also change the stage color and how fast
  • The Property inspector is designed to make your life easy. When you select something on the stage, or select the stage itself, the panel will update to reflect the properties that can be changed in regard to what was just selected. As you become more proficient and comfortable with Flash, this panel will become an indispensable aid to your workflow. The panel is positioned, by default, at the bottom of the screen. You can move it elsewhere on the screen by simply dragging it into position and releasing the mouse. There are locations on the screen where you will see a shadow or darkening of the location when the panel is over it. This colour change indicates that the panel can be docked into that location. Otherwise, the panel will “float” above the screen. When an object is placed on the stage and selected, the Property inspector will change to reflect the properties of that object that can be manipulated.
  • When somebody visits your site and an animation plays, Flash treats that animation as a series of still images. In many respects, those images are comparable to the images in a roll of film or one of those flip books you may have played with when you were younger. The ordering of those images on the film or in the book is determined by their placement on the film or in the book. In Flash, the order of images in an animation is determined by the timeline. The timeline, therefore, controls what the user sees, and more importantly, when he or she sees it.
  • Foundation flash

    1. 1. Foundation Flash By : Mohd Faizol Sulaiman
    2. 2. Introduction <ul><li>Welcome to Flash live. You have seen a lot of the great stuff Flash can do and it is now time for you to get into the game. I also suspect you are here because Flash can be one great big, scary application to those unfamiliar with it. </li></ul>
    3. 3. What we’ll cover in this session: <ul><li>Exploring the Flash interface </li></ul><ul><li>Using the Flash stage </li></ul><ul><li>Working with panels </li></ul><ul><li>Difference between a frame and a keyframe </li></ul><ul><li>Using frames to arrange content on the stage </li></ul><ul><li>Using layers to manage content on the stage </li></ul><ul><li>Adding objects to the library </li></ul><ul><li>Testing your movie </li></ul>
    4. 4. <ul><li>What we are going to do to begin with is take a walk through the authoring environment - called the Flash interface -pointing out the sights and giving you an opportunity to experiment with the features. By the end of the stroll, you should be fairly comfortable with this tool called Flash and have a fairly good idea of what tools you can use and how to use them as you start creating a Flash movie. </li></ul>
    5. 5. The Start page and Creating a Flash document <ul><li>The first thing you see when you launch Flash is the Start page. This interface, common to all of the Adobe CS3 applications, is divided into three areas. The area on the left side shows you a list of documents you have previously opened. Click one of them, and that document, provided it hasn’t been moved to another location on your computer, will open. The Open link at the bottom of the list lets you navigate to a document that isn’t on the list. </li></ul>
    6. 6. The Start Page
    7. 7. <ul><li>The middle area of the page is where you can choose to create a variety of new Flash documents. Your choices include a blank Flash document, a project aimed at a mobile phone or PDA (a mobile document), a series of code-based documents, and a Flash project. </li></ul><ul><li>The major change in this panel is the ability to select a new document based upon which version of ActionScript will be used in the document. Flash Professional CS3 marks the latest version of the Flash programming language named ActionScript. The previous version of this language, used in Flash MX 2004 and Flash 8, was ActionScript 2.0. </li></ul><ul><li>The right area of the screen is reserved for a variety of templates you can use. </li></ul>
    8. 8. <ul><li>The Extend area at the bottom of the Start Screen contains a link to the Flash Exchange. This is a hyperlink that takes you to a page on the Adobe site where you can download a variety of tools and projects that are available for free or a nominal cost. </li></ul>
    9. 9. What Can a Flash Animation Include? <ul><li>Vector-based graphics </li></ul><ul><ul><li>Has the ability to &quot;tween&quot; </li></ul></ul><ul><ul><ul><li>Automatically generates fill-in frames between a beginning and an ending image </li></ul></ul></ul><ul><li>Bitmap-based graphics </li></ul><ul><ul><li>Can be moved & rotated </li></ul></ul><ul><li>Embedded fonts </li></ul><ul><ul><ul><li>Can be moved, resized, skewed, rotated, recolored </li></ul></ul></ul><ul><li>Sound </li></ul><ul><ul><li>Can synchronize sounds with animation frames </li></ul></ul>
    10. 10. Flash Environments <ul><li>Flash authoring environment </li></ul><ul><ul><li>Design environment (graphics tools) </li></ul></ul><ul><ul><li>Scripting environment (create program code) </li></ul></ul><ul><ul><li>You can download a free trial version at </li></ul></ul><ul><li>Flash player </li></ul><ul><ul><li>Users must have this installed on their workstations </li></ul></ul><ul><ul><li>If not present, automatically prompted to install when they start your animation </li></ul></ul>
    11. 11. Flash Files (&quot;Movies&quot;) <ul><li>Authoring file </li></ul><ul><ul><li>.fla extension </li></ul></ul><ul><ul><li>This file creates the design version of your animation </li></ul></ul><ul><li>Published file </li></ul><ul><ul><li>.swf extension (&quot;swiff&quot; file) </li></ul></ul><ul><ul><li>Can't be edited </li></ul></ul><ul><ul><li>Can play on most operating systems </li></ul></ul><ul><ul><li>Fairly small files </li></ul></ul>
    12. 12. Flash CS3 Authoring Environment Flash Stage Tools Panels Timeline Menus Layers Properties
    13. 13. Flash 8 Workspace Tools panel Timeline Panels Property inspector Stage Current scene Layers Workspace
    14. 14. <ul><li>Tools create the content of a movie. </li></ul><ul><ul><li>Tools: Draw, paint, create text, select objects, modify objects, and erase objects </li></ul></ul><ul><ul><li>View tools : Zoom and pan </li></ul></ul><ul><ul><li>Color tools : Set stroke and fill colors </li></ul></ul><ul><ul><li>Options : Modify the currently selected tool </li></ul></ul>Tools Views Colour Options
    15. 15. Timeline You can organize and control the content of a movie over time. Layers Frames Playhead Frame rate
    16. 16. Panels <ul><li>Panels provide additional tools for creating and editing movies. </li></ul><ul><ul><li>Click the options menu to view additional options for the current panel. </li></ul></ul><ul><ul><li>You can hide or show panels by using the options on the Window menu. </li></ul></ul>
    17. 17. Document Properties
    18. 18. <ul><li>1. Enter the following values into the Document Properties dialog box: </li></ul><ul><li>Title: Pond </li></ul><ul><li>Description: My first Flash exercise </li></ul><ul><li>Width: 400 </li></ul><ul><li>Height: 300 </li></ul><ul><li>Background colour: #000066 </li></ul><ul><li>2. Click OK and the stage will shrink to the new dimensions and change colour to a dark blue. These changes will also be shown in the Property inspector. </li></ul>
    19. 19. Stage <ul><li>You compose movie content on the Stage. </li></ul><ul><li>Set Stage size to match a specific browser size </li></ul>Screen Resolution Display Area in Microsoft Internet Explorer 640 x 480 620 x 318 800 x 600 780 x 438 1024 x 768 1004 x 606 1280 x 1024 1260 x 862
    20. 20. The Property Inspector Document Size Access the Publishing Settings Background Colour Frame Rate Movie Name
    21. 21. Zooming the Stage <ul><li>There will be occasions when you will discover that the stage is a pretty crowded place. In these situations, you’ll want to be sure that each item on the stage is in its correct position and is properly sized. Depending on the size of the stage, this could be difficult because the stage may fill the screen area. Fortunately, Flash allows you to reduce or increase the magnification of the stage through a technique called zooming. Zooming the stage has no effect upon the actual stage size. </li></ul>
    22. 22. <ul><li>Select a zoom level using the Magnification dropdown. </li></ul>
    23. 23. Exploring the Panels in the Flash Interface <ul><li>Panels can be moved around and opened or closed depending upon your workflow needs. We will now take a closer look at the more important panels that you will use every day. They include the following: </li></ul><ul><li>Timeline </li></ul><ul><li>Library </li></ul><ul><li>Property Inspector </li></ul><ul><li>Actions panel </li></ul><ul><li>Tools panel </li></ul><ul><li>Help panel </li></ul>
    24. 24. The Timeline <ul><li>There is a fundamental truth to becoming proficient with Flash: master the timeline and you will master Flash. </li></ul><ul><li>At its most basic, all animation is movement over time, and all animation has a start point and an end point. The length of your timeline will determine when animations start and end, and the number of frames between those two points will determine the length of the animation. As the author, you control those factors. </li></ul>
    25. 25. Frames and Keyframes <ul><li>Frames: Like films, Flash movies divide lengths of time into frames, which are organized on the Timeline. </li></ul><ul><li>Keyframes: Frames that define a change in what is displayed in a movie or include frame actions to modify a movie. When you open a new blank movie document, it contains one layer with one blank keyframe. </li></ul>
    26. 26. Frames and Keyframes Keyframe with content Blank keyframe Empty frames Empty slots for new frames
    27. 27. Layers <ul><li>Layers are like multiple film strips stacked on top of each other, each with a different element that appears on the Stage. </li></ul><ul><ul><li>Graphics </li></ul></ul><ul><ul><li>Animations </li></ul></ul><ul><ul><li>Text </li></ul></ul><ul><ul><li>Sounds </li></ul></ul><ul><ul><li>Buttons </li></ul></ul><ul><ul><li>Frame actions </li></ul></ul>
    28. 28. Symbols and Libraries <ul><li>Symbols are elements you reuse within a movie to reduce file size. </li></ul><ul><li>Types of symbols include graphics , buttons , movie clips , sound files , and text . </li></ul><ul><li>A library is where you store and organize symbols. </li></ul><ul><li>When you drag a symbol from a library to the Stage, you create an instance of the symbol. </li></ul>
    29. 29. Symbols <ul><li>Symbol: reusable object </li></ul><ul><ul><li>Save an animation image as a symbols </li></ul></ul><ul><ul><li>This saves file space because the symbol is only saved once </li></ul></ul><ul><li>Types of symbols: </li></ul><ul><ul><li>Graphics (can't be shape tweened) </li></ul></ul><ul><ul><li>Movie clips (self-contained animation within a movie) </li></ul></ul><ul><ul><li>Buttons (Up, Down, Over, OverWhileDown states) </li></ul></ul>
    30. 30. Saving Symbols <ul><li>Create a graphic in Flash then convert it to a symbol </li></ul><ul><ul><li>Right-click the graphic – Convert to symbol </li></ul></ul><ul><li>Import an existing graphic into a Flash symbol library </li></ul><ul><ul><li>File – Import – Import to Library </li></ul></ul><ul><li>To view your symbol library: Window - Library </li></ul>
    31. 31. Advantages of Using Symbols <ul><li>Easy editing : If you change the symbol in the library, all instances of the symbol are updated automatically. </li></ul><ul><li>Smaller file sizes : Symbols are downloaded only once, regardless of the number of instances you’ve included in the movie. This reduces the size of your published movies and decreases download times. </li></ul>
    32. 32. <ul><li>When you open Flash, your timeline will be empty, but you will see a series of rectangles - these are the frames. You may also notice that these frames are divided into groups. Most frames are white and every fifth frame is gray. </li></ul><ul><li>Flash movies can range in length from 1 to 16,000 frames, although a Flash movie that is 16,000 frames in length is highly unusual. The thing you need to keep in mind is that a frame shows you the content that is on the stage at any point in time. </li></ul>The timeline is nothing more than a series of frames.
    33. 33. <ul><li>The content in a frame can range from one object to hundreds of objects, and a frame can include audio, video, code, images, text, and drawings either singly or in combination with each other. When you first open a new Flash document, you will notice that frame 1 contains a hollow circle. This visual clue tells you that frame 1 is waiting for you to add something to it. </li></ul>
    34. 34. Creating Flash Animation <ul><li>Types of animation: </li></ul><ul><ul><li>Shape: uses shapes you create in Flash </li></ul></ul><ul><ul><ul><li>Can change shape position and/or properties </li></ul></ul></ul><ul><ul><ul><li>Creates straight-line animation between a start position and an end position </li></ul></ul></ul><ul><ul><ul><li>Can only be used with vector images </li></ul></ul></ul><ul><ul><li>Motion: uses symbols you create or import into Flash (bitmaps) </li></ul></ul><ul><ul><ul><li>Can create straight-line animation between a start position and an end position </li></ul></ul></ul><ul><ul><ul><li>Can change the position or rotation of a symbol </li></ul></ul></ul><ul><ul><ul><li>Can &quot;kind of&quot; make a symbol morph into a different symbol </li></ul></ul></ul>
    35. 35. Creating a Motion Tween <ul><li>Same as shape tweening, but uses a symbol rather than a shape </li></ul><ul><ul><li>Allows you to use bitmaps </li></ul></ul><ul><ul><li>Can be moved, resized, rotated, morphed to a different symbol </li></ul></ul>
    36. 36. Motion/Classic Tween <ul><li>The way motion tweens used to be done </li></ul><ul><li>Allows more than one object to be tweened at a time </li></ul><ul><li>Allows frame scripts over the tween span </li></ul>
    37. 37. Animation with Tweening <ul><li>Tweening : A series of frames that change incrementally to create smooth movement or change over time. </li></ul><ul><ul><li>You can set the beginning and ending frames and have Flash automatically create the frames in between. </li></ul></ul><ul><ul><li>Flash has theree types of tweening: shape tweening and motion tweening , guide tweening , </li></ul></ul>
    38. 38. Shape Tween <ul><li>Used for morphing shapes </li></ul><ul><li>Cannot be applied to symbols </li></ul><ul><li>Can be used for broken-apart text (You have to select the text and do Modify/Break apart twice, or apply Ctrl-B twice). </li></ul>
    39. 39. Shape and Motion Tweening <ul><li>In Flash, a shape is a vector-based object. You create a shape by using the drawing tools or by importing a vector drawing from another program. </li></ul><ul><li>Use shape tweening to animate one shape into another. You cannot shape-tween grouped objects, bitmaps, text that has not been broken apart, or symbols. </li></ul><ul><li>Use motion tweening to animate symbols, groups, and text blocks. </li></ul>
    40. 40. Creating a Shape Animation <ul><li>Create a new layer </li></ul><ul><ul><li>Draw the shape at the start position </li></ul></ul><ul><li>Create a keyframe at the start time </li></ul><ul><li>Create a keyframe at the end time </li></ul><ul><ul><li>With the end keyframe selected, modify the shape to its end size, position, & properties </li></ul></ul><ul><li>Select any frame between the beginning and ending keyframes and then create a &quot;tween&quot; </li></ul>
    41. 41. Create the layer Create the keyframes Create the tween Create the initial shape With the ending keyframe selected, create the final shape
    42. 42. Shape and Motion Tweening Shape Group Symbol Text Block Broken- apart Text Shape Tween yes no no no yes Motion Tween no yes yes yes no
    43. 43. Adding Sounds <ul><li>Create a sound layer </li></ul><ul><li>Create a keyframe when you want the sound to play </li></ul><ul><ul><li>With target keyframe selected, drag the sound onto the stage </li></ul></ul>
    44. 44. Sound <ul><li>First, import a sound file into the library. </li></ul><ul><li>Add sound to a movie by dragging an instance of the sound into a frame. </li></ul><ul><li>To minimize file size, loop shorter sounds (to make them repeat). </li></ul>
    45. 45. Actions <ul><li>ActionScript statements instruct a movie to do something while it is playing. </li></ul><ul><ul><li>Frame action: An action attached to a frame is triggered when the movie plays that frame. </li></ul></ul><ul><ul><li>Object action: An action attached to an object is triggered when the viewer interacts with the object, such as moving the pointer over a hotspot or clicking a button. </li></ul></ul>
    46. 46. Stopping an Animation <ul><li>By default, animations play continuously when published </li></ul><ul><li>To configure an animation to play once: </li></ul><ul><ul><li>Select the frame in which you want the animation to stop, right-click, click Actions </li></ul></ul><ul><ul><li>In the ActionScript window, type stop(); </li></ul></ul>
    47. 47. Stopping an Animation Layer Frame number Command
    48. 48. Publishing <ul><li>Save distribution files </li></ul><ul><ul><li>File – Publish Preview – Flash or HTML to preview </li></ul></ul><ul><ul><li>File – Publish Settings to view file types </li></ul></ul><ul><ul><ul><li>.swf, .html, .gif, etc. </li></ul></ul></ul><ul><ul><ul><li>Select desired settings </li></ul></ul></ul><ul><ul><li>File – Publish to actually save files </li></ul></ul><ul><li>Use HTML to create a new HTML document </li></ul><ul><li>Use Flash (.swf) file to insert into an existing HTML document </li></ul><ul><ul><li>In Dreamweaver, Insert – Media - Flash </li></ul></ul>
    49. 49. Using Flash to Create Embedded Multimedia <ul><li>You can embed audio and video files in Flash documents and then publish them on Web pages </li></ul><ul><ul><li>Advantages: </li></ul></ul><ul><ul><ul><li>Most people have a Flash player installed on their computer </li></ul></ul></ul><ul><ul><ul><li>Gives you more control over object's appearance </li></ul></ul></ul>
    50. 50. Creating Embedded Flash Audio <ul><li>Import the audio file to a Flash document </li></ul><ul><li>Create a timeline to stop the audio </li></ul><ul><li>You can also create buttons to start and stop it, and add commands so it doesn't automatically play… </li></ul>
    51. 51. Creating Embedded Flash Video <ul><li>File – Import – Import Video </li></ul><ul><li>You can import either a file or a URL to a streaming server </li></ul><ul><li>You can also create buttons to start and stop it, and add commands so it doesn't automatically play… </li></ul>