html5-img
1 / 84

FLASH

FLASH. Creates entire websites Creates animations Creates games and simulations. STAGE. Contains all the objects that are part of the movie that will be seen by viewers. TIMELINE. Organize and control the movie’s contents by specifying when each object appears on the Stage. FRAME.

zocha
Télécharger la présentation

FLASH

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. FLASH • Creates entire websites • Creates animations • Creates games and simulations

  2. STAGE • Contains all the objects that are part of the movie that will be seen by viewers.

  3. TIMELINE • Organize and control the movie’s contents by specifying when each object appears on the Stage.

  4. FRAME • Images are contained in Frames • When movie is played, a playhead moves from frame to frame on the Timeline, causing the contents of each frame to appear on Stage in sequence

  5. Panels • Used to view, organize and modify objects and features in a movie • Most common: Tools, Properties and Library Panels

  6. FLASH FILES • .fla extension – Flash Files • .swf extension – Flash Player Allows movie to be viewed if viewer does not have the Flash program. Cannot be edited

  7. PREVIEWING MOVIE • Press enter key to start or stop movie • To rewind: Shift , • Step back one Frame: , • Loop Playback: • On control menu • Continues playing repeatedly • Window menu/Toolbar command/Controller • Control menu/Test movie • Period key moves one frame forward • Comma key moves one frame backwards

  8. MOTION TWEEN • Object moving around screen • Select the Object • Select Motion Tween on the Insert Menu • This process changes Object into a Symbol • Can reuse Symbols • Final step is to select ending frame and drage the Object to another location • Identified on Timeline by a blue color

  9. TWEEN SPAN • Equal to one second • EX.: 12 Frames per second • This can be changed

  10. MOTION PATH • Represents the path the object takes from the beginning frame to the ending frame. • Dotted Line

  11. SCENES • When you create a movie Scene 1 appears above the Stage • Can add more Scenes • A way of organizing movies • Each Scene has its own Timeline • Click Insert Menu to add new Scenes

  12. PUBLISHING A MOVIE • File/Publish Movie • Creates two files • HTML files • .html • Contains the code that the browser interprets to display the movie on the web • Flash Player file - .swf file

  13. STEPS FOR PLANNING WEBSITE • Stating the Purpose (Goals) • Identifying the Target Audience • Determining the Treatment (What is the look and feel) • Tone – humorous, serious, light, heavy, formal • Approach – How much direction will be provided to the user? • Developing the Specifications and Stroryboard • Specifications state what will be included in each screen • Storyboard shows the layout of the various screens

  14. INTERACTIVE DESIGN GUIDELINES • Make it simple • Build consistency in the navigation scheme • Provide feedback • Give the user control

  15. FLASH WORKFLOW PROCESS • Create and/or acquire the elements to be used • Arrange the elements and create the animations • Apply special effect • Create the interactivity • Action Script: allows you to develop programming code to control how the media elements behave

  16. BITMAP GRAPHICS • Represents the image as an array of dots called Pixels • When you enlarge the image you get decreased quality • Number of pixels stay the same

  17. VECTOR GRAPHICS • Represent the image using lines and curves • You can resize without loosing quality

  18. TOOL OPTIONS • Appears at the bottom of the tools panel and changes with different tool selections

  19. TOOLS FOR CREATING VECTOR GRAPHICS • Oval • Rectangle • Pencil • Brush • Line • Pen

  20. PEN TOOL • To close an object, be sure to re-click the first anchor point as your last selection

  21. Pencile Tool displays the stroke color • Brush Tool displays the fill color

  22. If you need to redo the drawing use the Selection Tool to draw a marquee around the drawing, then delete the selection

  23. SELECTING • Select fill – click the fill • Select stroke – click the stroke • Select fill and stroke – double click object or draw marquee around it • Select part – drag marquee around that area • Select multiple objects – press shift and hold shift then click each item

  24. LASSO TOOL • Provides more flexibility than the Selection Tool • Can use in a free hand manner to draw any shape that then selects the object within the shape

  25. 2 DRAWING MODEL MODES • Merge Drawing Model • Stroke and Fill are separate • You can select separately • Object Drawing Model • Stroke and Fill are combined • Can break apart by clicking the Modify Menu/Break Apart

  26. GRADIENTS • A color fill that makes a gradual transition from one color to another • The position of the Paint Bucket Tool over the object determines the direction of the gradient fill.

  27. DISTORT & ENVELOPE OPTIONS • Reshapes Objects on the Transform Command • On the Transform command • Distort Option: Drag one corner of object without affecting the other corners of the object • Envelope Option: More than eight handles to allow more precise distortions • Object is its original size when the option Undo Scale in the Edit Menu is no longer available

  28. Selection Tool: used to select the text block • Text Tool: used to selecct and edit the text within the text block

  29. FILTERS • You can copy and paste a filter from one object to another using the clipboard icon in the Filters area of the Properties panel

  30. LAYERS • NORMAL – Default layer type. All objects appear in the movie • MASK – Hides and reveals portions of another layer • MASKED – Contains the objects that are hidden and revealed by the Masked Layer • FOLDER – Can contain other layers • GUIDE – (Standard and Motion) Aligns Objects • Standard: Serves as a reference point for positioning objects on the Stage • Motion: Creates a path for animated objects to follow

  31. FOLDERS • Organizes layers • Select the layer that is to become a Folder Layer • Layers Properties dialog box to specify a Folder Layer • Drag other Layers from the Timeline into that Folder • Click the Folder Layer triangle to open it

  32. SYMBOLS • Original drawing stored in the Library Panel • Drag the Symbol to the Stage which creates an INSTANCE • Instances reduces the movie file size • Flash saves a Link to the Instance not the Instance itself

  33. 3 CATAGORIES OF SYMBOLS • Graphic – can reuse a single image and make changes in each instance of the image • Button – can create buttons for interactivity, such as, starting or stopping a movie • Movie Clip – creates complex animation because you can create a movie within a movie

  34. Symbols • Insert Menu/New Symbol • Modify Menu/Convert to Symbol • File names ex: g_name (graphics); b_name (buttons); m_name (movie) • To help you remember what Symbol they are

  35. Editing Instances • Use Selection Tool to drag marquee around the instance • Click the object once to select • DO NOT double-click the instance when it is on the Stage because you will open an edit window that is used to edit the Symbol NOT the Instance

  36. EDITITNG SYMBOL • Double click the Icon which is before the Symbol name in the Library Panel • Edit Menu/Edit Symbol • New screen will appear with Symbol Name and Icon showing you are in the Edit Window • Click Scene 1 at the top left to leave Edit Window

  37. LIBRARY PANEL • Contains the Symbols and other items, such as, imported graphics, movie clips, and sounds • Provides a way to organize, change name, displays item properties, and add and delete items

  38. BUTTONS • Actions occurs • Four States • Up: how button will appear when mouse pointer is not over it • Over: how button appears when mouse pointer is over it • Down: how button appears after the user clicks the mouse • Hit: defines the area of the screen that will respond to the click.

  39. BUTTONS • Control Menu/Enable Simple Buttons • To preview • New Buttons creates New Timelines • Control Menu/Enable Simple Buttons • Turns off the command

  40. CONTROL MENU/ENABLE SIMPLE BUTTONS • Allows you to test buttons on the Stage without viewing the movie in the Flash Player Window • Pointing to the Signal Button on the Stage • Pointer changes to a hand which means object is clickable • The effect changes to the effect selected for Over State • Pressing mouse on Signal Button • Effect selected for Down State • Moving mouse away • Effect selected for Up State

  41. ACTION SCRIPT 2.0 • You do not need to know scripting language • Action Panel • Allows you to assign basic actions to frames and objects, such as buttons

  42. PROCESS FOR ASSIGNING ACTIONS TO BUTTONS • Select the Button on the Stage • Select the Script Assist Button to display the Script Assist Panel • Click the Add a new item to the script icon to display a list of Action Catagories • Select the appropriate category from drop-down list • Select action • Specify the event that triggers the action

  43. ACTION PANEL • Two Panels • Left Pane (Toolbox Pane) uses folders to display the Action categories • Right Pane (Script Pane) used with the Script assist feature and displays the Action Script

  44. FRAME LABELS • Select the Frame • Use Properties Panel to specify a name • Use the name in the Action Script Code instead of the Frame Number • Buttons are often used to move the playhead to a specific location on the Timeline

  45. F6 or INSERT/KEYFRAME

  46. MOTION TWEENS • Specify the position of the object in the beginning and ending frames. • Selection Tool/Select Object • Insert Menu/Motion Tween • Number of frames in the span equals the frames per second for the movie • Drag object to another position • Drag the tween span to the ending frame

  47. TWEEN SPANS • The onion Skin feature is enabled so that outlines of the objects are displayed for each frame of the animation • The blue highlighted area is called the tween or motion span • By default the number of frames in a tween span is equal to the number of frames in one second of the movie

  48. THINGS TO REMEMBER • Only one object on the Stage can be animated in each tween span • You can have multiple motion tween animations playing at the same time, if they are on different layers • A motion tween is, in essence, and object animation because while several changes can be made in the object’s properties, only one object is animated for each motion tween

  49. TYPES OF OBJECTS THAT CAN BE TWEENED • GRAPHIC • BUTTON • MOVIE CLIP SYMBOLS • TEXT FIELDS

  50. REMOVING MOTION TWEEN • Click the tween span on the Timline • Insert Menu/Remove Tween

More Related