Page 1 :
Working with Flash CS3, , 9, What is Flash?, , Flash is a powerful animation software package developed by Adobe Systems (forme, , erl, Macromedia). Flash provides a versatile and casy way to create animation that consist, , images, sound and video with various effects. Flash is, , a, , vector bascd program, , which mea, an, , that the graphics created in it can be scaled to any size without losing the quality. Flash, , extremely useful for devcloping highly interactive web sites,, , online, , advertisementts, , computer games and contents for various mobile devices. One advantage ot lash is that, u, , We, , can play the movies in any browsecr., , FL, , Opening Flash, , er, , Click on Start > All Programs> Adobe Flash CS3, , Professional., The, , ., , opening screen appears., , Click on Flash File (Action Script 3.0) under Create, New section to open the flash document., , The Workspace, , Opening Window of Flash, , Flash is similar to the Paint software in Windows. It has almost the same tools that Paint us5, but it is mainly used for animation., The, , 'workspace', , is the arrangement of various Flash elements such, , as, , Control panel, Property Inspector Window, etc., , The Stage, The stage is a drawing board where, , MenuBar, , size by selecting View> Zoom in, and View> Zoom Out option., , 70, , Computer Plus-8, , panel, Trbe ba, , 2, , we can create graphics, animation, , and make modifications in it. It is a, Tools, large white space that is present at Panelthe centre of the workspace. By, default, the stage dimensions are, 550x400 pixels. The gray area, surrounding the stage is called the, Work Area, where we can also, place the contents and animate them. Property, We can change the view of the stagee Inspector, Window, , the Tools, , Timeline, , Panel, , Layers Panel, , v, , 4., , Stage, Work Are, , Flash Workspace, , E
Page 2 :
oyou Know, lonathan, as, , the, , (y, , 1S, , Considered, , man programmer, , Visionary of, , animation, , and, , Flash, an, , cditor, , for, , web, , Menu, The, , contains controls for common, functions like opening and, saving files, as, well as specific functions like, menu, , copying, , pages, , panels, , and pasting, calling up, specific, and controlling the overall Flash, , T, , environment., Tools Panel, , The, , Tools panel consists of various tools, , to draw, paint, select and, modity, obiects in the workspace. The Tools panel is divided into four, parts: Tools,, View, Colors and Options., , The Tools section:, , It, , contains tools that, , selecting objects., , are, , used for, , The View section: It consists of tools for, application window., , drawing, painting, , zooming, , and, , panning, , The Colors section : It includes modifiers to select colours for the, draw using Stroke and Fill Color pickeer., The, , shape, , and, the, , you, , Options, , section : It displays modifiers for the, currently selected tools., Modifiers affect the tool's painting or editing operations., , DoyouKnow, The default extension of Flash file is.fla., , The Timeline, , The Timeline is a fixed window that stays on top of every, object in the workspace. It, Organizes and controlsthe content of a document overtime in frames as well as in layers. The, , major component of the Timeline are Frames, Layers and the Playhead. It has a ruler like a, strip called Frames and field labelled as Layer 1., Keyframe, , Layers, , scene, , Frames, , Frame rate, , Timeline, , Frame, , Elapsed time, , Edit symbol, , 1, , Zoom, , Warkspace, , The Timeline, , Aimations in Flash are created with the help of Irames. Frames in Flash can be defined as, ne little, rectangular cells that appear on the Timeline. Each frame has a number, which you, an find on top of the Timeline. Like films, Flash document divides the length of time into, ames. A frame displays the content of the movie at a specific moment on time., , Computer Plus-8, , 71
Page 3 :
Doyou Know, Ditferent versions otFlash have been, to Flash CSo Professional., , releasedAtill, till, , Flash was earlier knoWn as Animator, Macromedia Ine. bought the company which, , Keyframes, eytrames, , now., now, , FutuTa, , evelopedit later on,, , 10, special tyVpes of frames where we define, SOme, change to an object's properties for an aniationlike position. colour. shape. etc. We can easily change the Empty Keyframe, length of a tweened, , animation by dragging, , Layers, Layers are like multiple, , another, each, the stage., , containing, , A, , layer contains its, could be defined as, we, , open, , a, , own, , level., , When, , film, , one, , strips stacked, , a, , keytrame, , on, , top of, , layer., , We, , a, , can, , to, , Keytrame with Cont, , new, , 20, , Two, , timeline with endless frames. It, independent movie ot only one, , Types, , Untitled-1, , Pencil Icon o, Lyer 1, Layer, , of, , 12.0 fps 1, , Keyframes, , Playhead, 10, , 5, , Layers, , add, , Playhead, The Playhead, , left, , 25, , a, , on, , Flash document, it contains, only, more layers to, the, organise, artwork, and animation in a, document. We can draw and edit, objects on one layer without affecting, on another, layer. The active layer is indicated with objects, a, pencil icon next, one, , 15, , in, , one, , different image that appears, , ash1, , Splash unti, developedih,, , are, , the Timeline., , from Flash, , The Playhead, , to a, , indicates the current frame, right through the Timeline., , displayed, , on, , layer, , name, , the stage. The, , in the, , Timeline, , playhead moves troe, , Property Inspector, Property Inspector is a panel that, the, symbol. an image, a line or a shape). displays, properties of the selected objece (ten, The list of, Inspector. You can make changes to the, properties also vary in the rioopern, object or document attributes in the, Inspector., The, , r, , Propertsx Fiters Parameter, Document, , Size:, , FL, Untitled-2, , Publish:, , 550, , x, , 400, , poxels, , Settings..., , Background:, Player: 9, , Document dass:, The Property Inspector, , 72, , Computer Plus-8, , Frame rate:, , ActionScript 3.0, , 12, , fps, , Profile: Defauit, , opert
Page 4 :
Setting Document Properties, , Fach time when we open Flash, the application opens a new file with the default settngs for, can create a new movie, work., properties.We, background, colour and ruler units, we use the following steps, , the, , movie, , as, , To set the frame rale, , we, , Click on File > New. The New Document dialog box is displayed., , Select the Flash File (Action Script 3.0) option in the 'Type list. Cick OK., Select Modify > Document. The Document Properties dialog box appears., , To change the Frame rate, specify the speed of a movie in frames per sccond. By, default the frame rate is 12 fps (frame per second). Type 8 tps in Frame rate box, , To specify the stage size in pixels, enter the values of width and height in the, , Dimensions text box., , DocumentProperties, , Document, General, , Title, , Templates, , Description, , Type, , Fash, Fie (actionacript 3.0), Flash File (ActonScGipt 2.0), , Document vindow. The Publish Settings will be set tor, set up the medie, , Dimensions, , Fiash documents to, Flash Document, Document onscpt, Fliash movies and, stucture30forUse, , Flash File (Mobie), Flash Slide Presentaton, Fash, , Description:, , Create a nev. Flash document (".fla) in the Flash, , applcotions, , Fom Applicaton, , ActionScript File, Actonscrpt, , Dimensions:, , Communicabon File, , 550 px, , 400 p, , (width,, , (height), , Flash JaveScnpt File, Flash Project, , Match:, , Contents, , Printer, , B, , Background color, Frame rate:, Ruler units:, , fps, , 12, , Default, , kground color, Frame rate, , Ruler units, , Pixels, , OK, , Make Defaut, , Cancel, , OK Cancel, Document Properties Dialog Box, , New Document Dialog Box, , colour of the document, choose any colour for the stage from the, Background color swatch., , To set the, , background, , available print, To set the stage size to the maximum, button Printer under Match, area, click the radio, , Quick Key, The shortcut to, , section., , drop-down, OK after specifying the required options., , Select the unit from the, , Click, , on, , list of Ruler units.insert, , With, Drawing an Object and Grouping Outline, , a, , frame, , F5, , Fill, , creates two objectsthe fill and the outline., make a drawing in Flash, it actually, lo manipulate elements as a single object, we need to group them., , When, , we, , Select the Pencil Tool and select brown, stem as shown in the figure., , as, , the Stroke, , color and Fill color. Draw the, , Computer Plus-8, , 73
Page 5 :
Tool, hoose the Selection, , displaycd, the left, , move, , the, is, , tree, , trunk., , A, , below the, , arrow., , Hold down, , on, , ponter, , and, , the, , mouse, , button and, , drag, , curve, , the lines to, Srmooth Mode, , give a proper shapC., Smooth, Select the Pencil Tool and select, , Mode from the Options section., , Mode of Pencil Toni, Selecting the Smooth, , the Stroke and Fill Color, Draw the curves of the tree top as shown, , Select green, , as, , in the figure., Select the Paint Bucket Tool and click, inside tree top. Similarly, fill brown, , colour in the stem., , Select the Selection Tool and doubleclick on the tree top. Drag the tree top, over the tree trunk., , Filling Colour in the Object, , Choose the Selection Tool and then select, the tree by dragging around the tree., , DoyouKnow, Keyframes can be of two types. If a keyframe has, it, then it is represented by a dark circle., An empty circle preceded by a, keyframe, content in, , represents that it is an empty keyframe., , Dragging the Object, , Note, To select, , both the objects, choose the Selection, Tool, hold down the Shift, click on the objects. Then select, >, , Modify Group., , Applying Gradient Fill, Gradient means filling colour in an, object from, to, dark that basically, shade to an object or a light, gives, colour, formed by mixing of two or, more colour in an, object., Select the tree using the, Selection Tool., Select the Paint Bucket, Tool., Click the Fill Color, drop-down arrow to get the, color palette., Select the gradient effect and, object. The gradient colour fills theclick inside the, , 74, , shape., Computer Plus-8T, , key and double, , Fill the Gradient, , Color, , Select Paint Bucket, , Choose Gradient Color, , Applying Gradient Fil
Page 6 :
Creating a, , New, , Gradient, , iash can create two types, , of, , gradients:, , Quick Key, , Linear, , Radial, Linear, , The shortcut, key to, , Gradient changes colour from the, , display Document, Ctrl+J, starting, noint to the end point in a straight line., Properties dialog box, dial Gradient changes colour in an, outward direction, Tocreate a new gradient, follow these, starting from the focal point., steps:, Select the stem of the tree., , Choose Window >Color, the Color Mixer, , Doyou KnoW, Mixer, , to, , panel., , display, , The minimum Stage size is 18x 18 pixels, andmaximum is 2880 2880 pixels., , Click the, , drop-down arrow of Fill Style box and select, Linear or Radial., Double-click on the left colour marker. The, , colour palette appears. Select the brown, , colour., , Select the Paint Bucket Tool and click, on the stem., Double-click on the right colour marker and select the, orange colour., Click, the, , drop-down, , below the Free Transform Tool and select the, Gradient, Transform Tool from the Tools, panel. Click on the stem filled with a gradient fill. The, gradient transform controls the appearance on the stage around the, arrow, , Torotate the, , gradient fill, drag the, clockwise as shown in the figure., Color x Swatches, , Gradient Rotate handle, , object., , to, , rotate the linear, , FillStyle Box, , Type: Linear, , Overflow:, Linear RGB, R::0, G:, B:, , 0, , Alpha: 100%, , #000000, , Gradient Bar, , L, , Left Color Marker, , Right Color Marker, , Gradient Rotate, , Color Mixer Panel, , Computer, , Plus-875, , gradient
Page 7 :
A bound1ng box with, , To scale, , cditing handles appears., gradient or a file, drag the, , linear, square handle at the centre of the boundary box., a, , DoyouKnow, It is not, on, , always required to draw an obe., , the stage and then create, , an, , animas, , jec, , nation, can also, , To change the focal point of a circular gradient, drag the middle circular handle on the bounding, , in Flash. If you want, Flash, used to create animations from exter, , Circle., , images and bitmaps., , be, , ernal, , Modifying a Linear Gradient, Draw a tree on the stage and fill a linear gradient colour in it. Let us now modify the gradien, , filled in the, , ent, , shape by using the, , Gradient Transform Tool., Select the upper portion of the tree., , 7, , Now., select the Gradient Transform Tool in the Tools Panel. Click, the, , object filled with gradient colour in, The shape will appear as shown belowN:, , it., Rotation handle, , This is the centre point of, the gradient, , Width adjustment, handle, , Modifying a Linear Gradient, , Changing the Centre of the Gradient, The centre, , point of the gradient is the place where all the, proportion. To change the centre of a gradient, use the mixing colours, , Bring the pointer over the centre point., Drag the centre point in a desired direction, changes., , Changing, To, , change, , the Width of the, the width of the, , Changing the, Gradient, , gradient, , are, , following steps:, , to, , change, , its, , position, , present in equal, , and, , observe tne, , Centre of the Gradient, , filled inside the, , shape, follow the steps given, Position the pointer over the width, below, adjustment, handle., It, will, arrow, change to a double heau, Drag the adjustment handle to the left or, right to increase or decrease the, width., gradi, 76, , Computer Plus-
Page 8 :
Changing the Width of the Gradient, Rotating the Gradient Fill, , To rotate the gradient colour illed inside a, shape follow these steps:, the, Position, ponter over the Rotation Handle. The, pointer shape, to, Drag the rotation handle clockwise or anticlockwise, to, according the need and observe, , changes, , the changes., , Rotating the Gradient Fill, , Modifying a Radial Gradient, , Likewise, you can modify a Radial gradient color filled inside the tree. Let, the gradient filled in the shape by using the Gradient Transform Tool., , us now, , modify, , Select the upper portion of the tree., , Now, select the Gradient Transform Tool in the Tools Panel and click on the object., The shape will appear as shown below:, Centre ofthe gradient: You can, drag the centre point to change, the starting point of colour, mixing of the gradient., , Width adjustment handie: You can, drag the width adjustment handle, to, , increase/decrease, , the, , gradient, , width., , Rotation handle: You, , can, , drag the, , rotation handle clockwise or, , anticlockwise to rotate the gradient, , Resizing handle You can drag the, , as required., , diagonal resize handle to alter the, gradient size proportionately., , Modifying a Radial Gradient, , Computer Plus-877
Page 9 :
Editing Objects, Selecting Objects, To cdit an object, we have, , to, , the, first select it, otherwise, , command will not be, , Chck the Selection Tool., Click and, , drag, , Double-click, , the selection box around the, , on, , the object, , to select, , object, , button o, object will be sclect, cted, , and release the, , The, both the stroke and fill., , mouse, , Transforming the Shape, scale, rotate. compres,, Using the Free Transform Tool, we can, shapes. To compress the drawing, follow these steps:, Draw a hexagon using the PolyStar Tool., , applicd, , stretch or, , skew lines, , and, , Select the Free Transform Tool in the Tools panel., stroke and fill., the hexagon on the stage to select the both, the hexagon into the, handle of the Free Transform Tool down to transform, , Double-click, , Drag, , centre, , on, , following shapes., , Polygon, , Using Free Transform Tool, , Skewing a Polygon, , Using Free Transform Tool, , Rotating an Object, Follow the given steps to rotate/skew the, Select the object., , object:, , Select, , Modify> Transform > Rotate and Skew., , Click, , on, , the corner handle of the, changes to rotation handle., , Drag, , a corner, , Toend the, , handle, , to rotate, , the, , object,, , the, , pointer, , object., , transformation, click outside the selected object., , An outline of the, , object appears, , as, , Release the mouse button and see, , 78, , you rotate., that the object has, rotated., , Computer Plus-8 E, , Rotating an Object
Page 11 :
Animation in Flash, , Quick Key, , Animation involves a series of still images. usually, , The shortcut key to, , painted or sketched, displayed in rapid sequence., , import a picture, , Then only it appears to show some movement., , Ctrl+R, , to Flash, , Animation in Flash is created by changing the, contentS of successive frames. We can make an object move acrosS the stage, increase, decrease its size, fade in or out, change colour or shape using animation., , There are two methods for creating an animation in Flash:, , Frame-by-Frame Animation, In, , Frame-by-Frame Animation,, , we, , create an, , in every frame., , image, , Tweened Animation, In the Tweened Animation, we create the starting and ending keyframes to animate the, , object. Flash itself creates the motion effects in between the frames., , Tint Tweening, Tint Tweening is used to change the colour of an object. Tint effects work only on symbols, , and cannot be added, To, , create, , a, , to, , the, , symbol,, , object that are, select, , drawn, , Insert >, , directly, , canvas, , of the movie., , Neww, Create New Symbol, , Symbol., Type a name TEXT for the symbol in the, , Name, , the, , on, , Name:, , Iype, , Texd, Movie dipp, , Can0, , Button, , field in the Create New Symbol, box. Select Graphic option in, , Graphic, , dialog, behaviour and click OK., , Create New Symbol Dialog Box, , Select the Text Tool in the Tools panel. Select Text> Font> Arial to set the font type, Choose Text> Size > 48 from the menu to set the font size big. Select Text Stye, , Bold to make the text bold or you can make changes in formatting of text in Properie, dialog box' as shown in the given figure., , Properte: Fiters Parameters, A, , Stabc Tex, , T, , Anai, , 48, , ANormal, W:, , 230.8, , X:, , Ant-alias for readabity, , 131.0, , Autokern, , Properties Dialog Box, 80, , Computer Plus-8
Page 12 :
Now Iype the GenNext n the work area., , e, , GENNEXT, , Soe, , GENNEXT, , GENNEXT, Library-Displayingthe, , GenNext, , Symbol, , Seleet Edit > Edit Symbols. You can change the properties of the text., , Graphic symbol automatically saves in Library., Select the Frame 30 in the Timeline and press F5., Insert a keyframe in Frame 10 and Frame 30. Position the, press F6., , Repeat this step, , on, , pointer, , on, , Frame 10 then, , Frame 30., , To add Tint effect, select Frame, , I and, , click, , on, , text., , 50%, , Color: Tin, Mone, , First:, , 1, , RIGB: Brightness, , Soeme I, , Blend: Alpha, , Adhcanced, , GENNEXT, Selecting Tint Option, , Property Inspector, select, Color option list. Position the, , ln the, ne, , at, , Tint colour from, Tint Amount bar, , 100%. You will get the colour map. Set the, , to Red, , colours, , 255, Green = 0, Blue = 0 (RGB Colours)., , 10, Tint tweening to keyframe, 0., and set the colours R=0, G= 255, B, set the, to keyframe 30 and, Add Tint, , Similarly, add, , =, , tweenting, , GENN, , colours R=0, G=0, B-255., the Timeline at any place, 10 and select, between Frame 1 and Frame, Create Motion Tween option from the drop-, , Right-click, , down menu., , on, , Selecting Create Motion Tween, , Computer Plus-881
Page 13 :
on, , Similarly, right-click, , the, , Timeline at, , any, , place, , betwecn, , Frame, , Tween, , Creating A, , Shape tweening,, , you, , can, , change, , one, , object into, , Text >, and choose, T, Tool, Text, Select the, text thick., , Bold, Text>Style>, You, , the text., , on, , on, , Shape, Simple Text, , With, , Frame, rame 30, , menu., , the drop-down, Tween from, effect, Motion, tweening, choose Create, Tint, the, view, Movie and, Control > Test, Click, , T0 and, , can, , Click, , to make, , another., , Size, , >, , Let, , us, , try:, , main, 44 from the, , the, , from the Properties, size and style, font,, the, also select, panel., in the Properties, color, Text (Fill), , menu, , the, , colour of your, displayed. Select any, , selec, , panel., , The Color, , on, , and, , palette, , will, , be, , choice., , Properts Filters Parameters, 44, , A, , Static Text, , T, , Arial, 0, , Text Tool, , Anti-alias for readability, , A, , Normal, , Autokern, Properties Panel, , Type the, , text, , on, , frame, Timeline. Select, , the first, , the Stage in, of the main, Window, , >>, , select, the To stage button. Click the, Align, Horizontal, Center, button and Align Vertical, , Align., , In the, , Adobe Flash CS3 Profesional- Umtitied-6"1, , ommands (gntroi Debug Windoaw HeP, Ee gdt yew Jvet Mosiy Iext, , DupLate wndow, , Uied4, , Temeare, , ayr 1, , Tools, , ri-At-T, Ci-F2, , Propete, , Align panel,, , Center button. Close the Align, , - Alt-K, , ToolDas, , mmon lanes, , Eehnort, , Workspace, , L a T r Lror, Debu Paneiy, , t-, , Mone txprer, , FLASH, , Output, Ba e c t, , A, , h, , t-f8, , Ct-K, , Selecting Align Option, panel., Move the pointer at Frame 49 and right-click the mouse. Select Insert Keyfram, , option from the pop-up menu., Similarly, Insert Blank Keyframe at Frame 24., Type some new text and then align Horizontal Center and Vertical Center., , Select the text in Frame 24 then select Modify >Break Apart., Break apart the text in Frame I and Frame 49., Adobe Flash CS3 Professional Uneitled-, , Ee fit yew raert Modify Iext ommands Cgmrol Detbug Window Hetp, Uied4, , Sohd, ate, , ese a o e oeen, , aert frame, , emeramet, Irseri Keyrame, , Scene1, , nsert Blark Keyhrame, , Inserting Keyframe at Frame 49, , 82, , Computer Plus-8
Page 14 :
Click between Frame I, Go to Properties panel, , and Frame 24 in the, Timeline., and select, Shape from the Tween, , drop-down menu., Then click between Frame 24 and, Frame 49 and select Shape, again from the Tween, drop-down menu., Select Control> Play option from the main, , menu to, , play your an1mation, , Propertesx Filtlers Parametes, Frame, , Frame Label>, , Label type:, , Tween: None, , Sound: None, , None, , Motion, , Effect: None, , Shape, , Ed, , Repeat 1, , Sync: Event, , Selecting Shape Tween, , Quick Key, The shortcut key to inserta, keyframe is F6., o To, make the Properties panel visible on the screen, press Ctrl+ F3., To group the selected objects, make use, of Ctrl +G key combination., The shortcut of the Pencil Tool is Y and for the Selection Tool is V., o, The shortcut key to use Free Transform tool is, Q., oThe shortcut key to import a picture to Flash is Ctrl+ R., The shortcut key to convert an object to symbol is F8., Ctrl+Enter is the shortcut key to play an animation in Flash., o, , o, , F7 is the shortcut key to insert a Blank Keyframe., , Exercises, A., , Tick ( ) the correct option. (Multiple Choice Questions), 1., , Which of the shortcut key is used to insert a frame?, , b) FS, (a) F2, Which panel acts as a storehouse in Flash?, , 2, , (a) Library, 3., , (c) Properties, , (d) None of these, , (c) Keyframes, , (b) Layers, , (d) Stage, , Which shortcut key is used to play the animation in Flash?, , (a) Ctrl+Alt, 5., , (d) F6, , What are the little rectangular cells called that appear on the Timeline?, , (a) Frames, 4., , (b) Tools, , (c) F10, , ( b ) Shift +, , Enter, , (c) Ctrl+Enter, , (d) None of these, , (c) .fas, , (d) Fas, , Which is the extension of Flash?, , (a).fla, , (b) .flash, , P T Computer Plus-883
Page 15 :
ill in the blanks w ith the correct word., , Work Area, , Workspace, I, , Stage, , package developed, , software, , Flash is a powerful, , Adobe, , Animation, , Timeline, , System, , by, , Is the arrangement of various Flash elements such as the Tools, ols Panel, n, , The, , Panel. Contro, , Panel, Property Inspector and Windows, etc, 3., , 4, , The, , 1S a, , The, , 5., , Is, , fixed window that, , the, , large, , stays, , on, , white space that, , top of every object, , is seen, , at, , the, , centre, , in the, , of the, , workspace., , workspace., , The gray area surrounding the stage IS called the, , State whether the following statements are Irue or lalse., Jonathan Gay is considered as the main programmer and visionary of Flash., 2., , The shortcut key to import a picture is Ctrl + G., , 3., , Radial gradient changes colour in an outward direction starting from the focal pont, , 4., , Rotation handle cannot be dragged clockwise or anticlockwise., , 5., , The default stage size is 550, , 6., , Tools that are used for drawing, painting and selecting objects are present in View, , section of the Tools, , D., , Answer the, , 400, , pixels., , panel., , following questions., , I., , What are the parts of Tools panel? What does the options section of Tools panel display?, , 2., , What are the default stage divisions displayed on the Flash Window?, , 3., , What do you know about Flash?, , 4., , What is the difference between Frame and, What do you know about animation?, , 5., 6., , 7., , What do you understand, What is Tint Tweening?, , by Gradient?, , Keyframe?, , What, , are, , the, , LABHtiuity), , E., F., , types of Gradient? Name them., , Create your school logo in Flash and add it as a symbol., Label the components of the Flash Window shown below., veety, , 84, , Computer Plus-8