1 / 30

Flash - Introduction

CT1514. Flash - Introduction. What is Flash. One of Adobe Products also called Adobe Flash  is a multimedia platform used to add animation, video, and interactivity to web pages. Flash Uses. Flash is frequently used for advertisements games  flash animations for broadcast.

calvindavis
Download Presentation

Flash - Introduction

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CT1514 Flash -Introduction

  2. What is Flash • One of Adobe Products also called Adobe Flash •  is a multimedia platform used to add animation, video, and interactivity to web pages

  3. Flash Uses • Flash is frequently used for • advertisements • games •  flash animations for broadcast

  4. Flash Features • It manipulates vector and raster graphics • It Provides animation for • Text • Drawings • Images • It supports bidirectional streaming of audio and video. • It can capture user input via mouse, keyboard, microphone, and camera. • It contains an object-oriented language called Action Script 

  5. Adobe Flash Player • The Adobe Flash Player is software for viewing multimedia, Rich Internet Applications and streaming video and audio, on a computer web browser or on supported mobile devices. • Flash Player runs SWF  (see Table 1) files that can be created by the Adobe Flash

  6. FLA Vs. SWF File types Table 1: .fla file extension vs. .swf file extension

  7. Macromedia Flash MX Interface

  8. Group of Plates(also called panel) 4.Timeline panel 3.Tool box 1.Stage Zoom Box 2.Properties panel

  9. 1.Stage • The Stage in Adobe Flash is the rectangular area where you place All the graphic contents. • The gray area surrounding the stage is called “Work Area” • The work area my contain graphical items also BUT only the ones on the stage will appear in the final flash file

  10. 2.Properities Panel • Use to setup some of the flash file properties such as : • Size • Background color • Frame rate • Flash player version • File name • “It’s important to know that the functions of this panel changes with the change of the used tool from tool box (Later)”

  11. 3.Tool Box • Consist of : • Drawing Tools • Typing Tool • Selection Tools • Free Transform Tool • View Tools • Colors • Tool Options

  12. 4.Timeline • The Timeline organizes and controls a document’s content over time in layers and frames • Like films, Flash documents divide lengths of time into frames. • Layers are like multiple film strips stacked on top of one another, each containing a different image that appears on the Stage.

  13. 4.Timeline • A flash document consist of Layer(s) • Each layer consist of Frames

  14. 4.Timeline Panel Figure 1 Left side: Layers Right side

  15. 4.Timeline Panel: Left side Figure 2 Layer Visibility Layer Lock Layer Outline Delete Insert layer folder Add motion Guide Insert layer

  16. Timeline Panel: Left side • Type of layers • Guide • Motion Guide • Normal Figure 3

  17. Timeline Panel: Guide Layer • What is Guide Layer? • Helps in aligning objects when drawing; create guide layers and align objects on other layers to the objects you create on the guide layers. • Guide layers are not exported and do not appear in a published SWF file. • Any layer can be a guide layer. • Guide layers are indicated by a guide icon to the left of the layer name ( )

  18. Timeline Panel: Guide Layer • How to create a Guide Layer? • Select the layer and Right-click  Guide from the context menu. • To change the layer back to a normal layer, Right-click  select Guide again.

  19. Timeline Panel: Motion Guide Layer • What is Motion Guide Layer? • Controls the movement of objects in a Motion tween animation • How to create a Motion Guide Layer? • Click on the Note: the created motion Guide layer will guide a selected layer ( an usually appears above that layer). How to make it guide another layer or several layers? (Hint: Drag-drop)

  20. Timeline Panel: Normal Layer • What is Normal Layer? • A layer contains objects, drawings, texts, bitmap images..etc • How to create & manage a Normal layer • From the layer panel as seen in figure 2

  21. Timeline Panel: Right side Left side: Layers Right side

  22. Frames:Types Key Frame Normal Frame Empty Frame Figure 4

  23. Frames: Types[11] • Key Frame: Any time your wish that your animation to undergo a visual change or you want an action to occur, you must use a keyframe at that point on the timeline • Empty Frame: Ready to contain a change and/or action A keyframe with content visible on the stage is identified by a solid black dot; a blank keyframe is identified by a hollow dot; and a keyframe with an attached action is identified with a small a (Later). • Normal (Regular) Frame: A keyframe on the timeline denotes a change; the regular frames that follow a keyframe determine the duration of that change. Thus, Regular frames always follow keyframes and contain the same content as the last keyframe on the same layer

  24. Frames: Delete or modify a frame or keyframe • Delete a frame, keyframe, right-click select Remove Frames. Surrounding frames remain unchanged. • Move a keyframe or frame sequence and its contents, select it(use shift for multiple frames) and drag to the desired location. • Extend the duration of a keyframe, Alt‑drag it to the final frame of the new sequence. • To copy and paste a frame or frame sequence, select it (use shift for multiple frames)then right-click Copy Frames. Select a frame or sequence to replace then right-click Paste Frames

  25. Frames:Delete or modify a frame or keyframe (Cont.) • To copy a keyframe or frame sequence by dragging, select it and Alt‑drag • To convert a keyframe to a frame, select the keyframe then: • select Modify > Timeline > Clear Keyframe or , • right-click it and select Clear Keyframe. • Important: The cleared keyframe and all frames up to the subsequent keyframe are replaced with the contents of the frame preceding the cleared keyframe.. • To change the length of a tweened sequence, drag the beginning or ending keyframe left or right. • To reverse an animation sequence, select the appropriate frames in one or more layers then: • select Modify  Timeline Reverse Frames or • Right-click Reverse Frames • Keyframes must be at the beginning and end of the sequence.

  26. Timeline Basic components Figure 5

  27. Timeline Basic components • A- Playhead: indicate the current frame displayed on the stage • B- Empty Keyframe: a keyframe that may contain changes in the future • E- Frame view pop-up menu Change the display of frames in the Timeline

  28. Timeline Basic components • F- Frame by Frame animation: see (Frame_by_Frame.fla) file • G- Tweened Animation: a keyframe that may contain changes in the future • H- Scroll to Playhead: Center the timeline on the current frame • I- Onion Skinning Button:  see (Onion_Skinning.fla) file to view incremental changes between each keyframe . Useful with • Frame by frame animation • Motion tween

  29. Timeline Basic components • K- Frame Rate indicator: • L- Elapsed time indicator:

  30. References • [1]http://en.wikipedia.org/wiki/Macromedia_Flash • [2]http://www.lanoie.com/classes/Flash/Toolbox/lectures/lectureD.html • [3]http://www.peachpit.com/articles/article.aspx?p=605038&seqNum=28 • [4] http://www.informit.com/articles/article.aspx?p=131047 • [5]http://help.adobe.com/en_US/Flash/10.0_UsingFlash/WSd60f23110762d6b883b18f10cb1fe1af6-7f84a.html • [6] http://www.dummies.com/how-to/content/creating-and-using-guide-layers-in-flash-cs3.html • [7]http://help.adobe.com/en_US/Flash/10.0_UsingFlash/WSd60f23110762d6b883b18f10cb1fe1af6-7d8aa.html • [8]http://www.adobe.com/devnet/flash/learning_guide/animation/part04.html • [9]http://www.adobe.com/devnet/flash/learning_guide/animation/part05.html • [10] http://www.adobe.com/devnet/flash/articles/concept_shape_tween.html • [11] http://www.adobepress.com/articles/article.asp?p=30346&seqNum=4

More Related