UNIT 1 INTRODUCTION TO FLASH

Transcription

1

2 Contents UNIT 1 INTRODUCTION TO FLASH 1 Introduction Flash Animation Types of Animation 2 Dimensional Animations Properties Bar Size and Publish Summary Keywords Review Questions Further Readings UNIT 2 SYMBOLS AND LAYERS 25 Introduction Three Types of Symbols Tools Library Insert Layer Motion Tweening Shape Tweening Motion Guide Summary Keywords Review Questions Further Readings UNIT 3 FRAME AND ANIMATION 37 Introduction Frame-by-frame Animation Frames and Keyframes Keyframes Frames and Rates Making Animation Walk Cycles

3 Summary Keywords Review Questions Further Readings UNIT 4 BELLS AND WHISTLES 49 Introduction Scripting ActionScript Drawing with ActionScript Create a Form with Conditional Logic and Send Data Summary Keywords Review Questions Further Readings UNIT 5 MAKING A SPLASH 63 Introduction Making a Splash Making Interactive Buttons Summary Keywords Review Questions Further Readings UNIT 6 INTERACTIVE ADVENTURE 71 Introduction Interactive Adventure Compiling Objects Summary Keywords Review Questions Further Readings UNIT 7 BRINGING MOVEMENT TO THE WEB 75 Introduction Steps to Make Website Creating and Uploading to Web

4 Summary Keywords Review Questions Further Readings UNIT 8 BEYOND THE FRAMES 81 Introduction Understanding Frames Size Optimized Flash Player Summary Keywords Review Questions Further Readings

5 Unit 1 Introduction to Flash Introduction to Flash Unit Structure Introduction Flash Animation Types of Animation 2 Dimensional Animations Properties Bar Size and Publish Summary Keywords Review Questions Further Readings Learning Objectives At the conclusion of this unit, you will be able to: Know the concept of animation Impart a brief overview of history of animation Provide insight into 2 dimensional animation Identify the characteristics of 2D animation Familiarize yourself with the properties bar, size and publish Introduction In this unit, you will learn the concept of flash and animation. We will also discuss the 2 Dimensional Animations, its characteristics and Properties Bar, Size and Publish. Flash is a software originally designed to create animations for display on web pages. It is an authoring tool mainly used by designers and developers to create presentations, applications, etc. It includes simple animations, video content, complex presentations, applications, and everything in between. Flash Flash is a multimedia graphics program especially for use on the Web. Flash enables you to create interactive "movies" on the Web. Flash uses vector graphics, which means that the graphics can be scaled to any size without losing clarity/quality and Flash does not require programming skills. In flash you can create unique text, animations, movies, web applications, games and more. Although flash is somewhat more complex than traditional web development technologies like HTML and CSS, this tutorial will give you the basics you need to immediately get started with designing your own flash projects.

6 2D Animation Flash can also be very computationally intensive making animations and videos look great on your top of the line computer, but visitors with older technology may only see a choppy, sluggish slideshow that leaves them with a bad feeling. An interesting thing is that you need to give instructions to Flash. You will have to tell Flash to stop the movie, play the movie, or jump to a specific place in the timeline. These tasks that Flash will perform at your request are called "actions". Individual pieces of content made with Flash are called applications. You can make media-rich Flash applications by including pictures, sound, video, and special effects. Figure 1.1: Flash 8 User Interface A Flash document has following main parts: 1. Drawing tools: Tools to draw objects and images. 2. Timeline: Where the frames and layers of your Flash application are manipulated. 3. Stage: Where drawings are created, modified, deleted, etc. 4. Panel Sidebar: Contains panels for color palettes, library of symbols, etc. 5. Actions: Where Action Script code is written to your Flash application. 6. Properties: Where properties of the stage and objects on the stage are changed.

7 When you open the Flash workspace, it will look like following screenshot: Introduction to Flash For creating a new flash file, we need to press the new command under File menu available on top of the window. Then by selecting option flash document. Usages Flash is mostly used in Computer Games Comics and Interactive magazines Web site designing For various Plug Ins

8 2D Animation About Flash Files The primary Flash file type, FLA files contain three basic types of information that comprise a Flash document. These include the following: Media objects are the various graphic, text, sound and video objects that comprise the content of your Flash document. By importing or creating these elements in Flash and then arranging them on the Stage and in the Timeline, you define what the viewer of your document will see and when they will see it. The Timeline is the place in Flash where you tell Flash when specific media objects should appear on the Stage. The Timeline is like a spreadsheet that progresses from left to right, with the columns representing time. The rows represent layers, with the content in higher layers appearing above lower layers' contents on the Stage. The timeline provides a view of all the frames and layers in your movie: Layers Similar to other applications like Illustrator. Each layer has its own set of content. Layers are part of the timeline. Layers can be locked, hidden, and organized in folders. Action Script is FlashÊs scripting language and is event-based like VB.Net. Action Script code is the programming code you can add to Flash documents to make them respond to user interactions and to more finely control the behavior of your Flash documents. Flash can be used to work with a variety of file types. Each type has a separate purpose. The following list describes each file type and its uses: FLA files are the primary files you work with in Flash. These are the files that contain the basic media, timeline, and script information for a Flash document. SWF files are the compressed versions of FLA files. These files are the ones you display in a web page. AS files are Action Script files. You can use these files if you prefer to keep some or all of your Action Script code outside of your FLA files. These can be helpful for code organization and for projects that have multiple people working on different parts of the Flash content. SWC files contain the reusable Flash components. Each SWC file contains a compiled movie clip, Action Script code, and any other assets that the component requires. ASC files are files used to store Action Script that will be executed on a computer running Flash Communication Server. These files provide the ability to implement server-side logic that works in conjunction with Action Script in a SWF file.

9 JSFL files are JavaScript files that you can use to add new functionality to the Flash authoring tool. See Extending Flash for more information. FLP files are Flash Project files (Flash Professional only). You can use Flash Projects to manage multiple document files in a single project. Flash Projects allow you to group multiple, related files together to create complex applications. Introduction to Flash Simple Drawing Tools At its basic level, Flash is a drawing program, and in order to use the more advanced features of Flash, basic drawing tool functions must be learned. There are many basic drawing tools available in Flash. Each is detailed below. Also note that many of these tools have additional options or modes that can be changed in the Options area of the Tools panel. The first important tool is the Selection tool. This tool is used to make selections on objects and graphics on the drawing area, or stage. You can either click on individual objects to select them, or click and drag to make a rectangular region and select all the objects in it. The Sub selection tool is used for selecting and modifying anchor points on curves and lines. Clicking once on a line or curve with the Sub selection tool reveals the anchor points. The Line tool is an important drawing tool. It functions like the line tool in other drawing programs. To use it, click on the stage, drag, and release to draw a straight line. The Lasso tool can be used to select objects on the stage. It allows you to create a freeform selection area by clicking and dragging around an area. The Pen tool is used to create precise paths that are either straight lines or smooth curves. Stroke width, style, and color, and fill color (for closed paths) can be changed in the Properties panel. The Text tool allows you to draw text on the stage. Position the cursor on the stage where you want to begin your text and then click and start typing. The text font, size, color and paragraph formatting can be changed in the Properties panel. The Oval tool allows you to create ovals of any shape and size (including circles). Stroke width, style, and color, and fill color for ovals can be changed in the Properties panel. The Rectangle and Poly Star tools allow you to create rectangles and polygons. To switch between the Rectangle and Poly Star tools, click and hold the tool icon on the Tools panel, then select the desired tool from the menu that appears. The Pencil tool is used to create lines and shapes on the stage in much the same way you would use a real pencil. Stroke width, style, and color can be changed in the Properties panel. The Brush tool is used much like a paint brush. Click and drag across the stage to paint. The fill color can be changed in the Properties panel. The Free Transform tool can be used to transform objects in a variety of ways. To use the tool, click on an object on the stage to reveal transform handles. The Fill Transform tool allows you transform gradient and bitmap fills. To use it, click on an object that has a gradient or bitmap fill to reveal transform handles. The Ink Bottle tool allows you to change the stroke color, width, and style of lines and shape outlines. Contd

10 2D Animation The Paint Bucket tool allows you to fill enclosed areas with color. The Eyedropper tool allows you to copy stroke and fill properties from one object to another. The Eraser tool allows you to erase objects on the stage. To quickly erase everything on the stage, double click the Eraser tool icon on the Tools panel. The Hand tool is used for moving the view of the stage. It is especially useful when you have used the Zoom tool to magnify the stage. The Zoom tool is used for magnifying or reducing the view of the stage. To use it, click anywhere on the stage to zoom in by a factor of two. Apart from these tools, the Tools panel allows you to modify the colors that are used to draw strokes and fills. The Stroke color is applied to lines and shape outlines. The Fill color is applied to the interiors of shapes. The overarching purpose of Flash is to add excitement to static and boring web site design. Although you can still make sparkling web pages with images, HTML code, and a bit of hard work you can't really create efficient animations that intrigue and excite your visitor. Macromedia Flash is a multimedia graphics program especially for creating moving images for use on the Web. Flash has opened up a whole new world for digital animators. You can rotoscope with it, but you can also animate directly in Flash. Learning this program can be very motivating for students because they donêt have to be the greatest artists to be successful. The drawing tools in Flash function as a virtual pencil making it easy to create original animated images. Pixels versus Vectors Two kinds of images in the digital world are bitmaps and vectors. Bitmaps are images made up from thousands of tiny dots called pixels (picture elements.) Programs such as Photoshop work with bitmaps. Bitmap images are similar to photographs; if you enlarge them too much; the image becomes grainy or pixilated. Vector files are typically much smaller than bitmap files because these graphics are defined by their geometry, by the curves that make them up. Flash defines an object by a set of curves, allowing you to zoom in or enlarge as far as you like without changing the quality of the image. Vector graphics generated in Flash are great for the Internet because they are small files.

11 Introduction to Flash Note: There are two types of FLASH files:.flash (pronounced flaw ) files contain source material for the flash application. Flash authoring software can edit.flash files and compile them into.swf files..swf (pronounced swiff ) files are completed, published files that cannot be edited. Animation The general definition of an animation is to display several pictures in a rapid movement to create the illusion of movement. Animation is a type of optical illusion; it is the process by which we see still pictures move. It involves the appearance of motion caused by displaying still images one after another at the rate of 24 pictures per second. The most common method of presenting animation is as a motion picture or video program, although several other forms of presenting animation also exist. Often, animation is used for entertainment purposes. In addition to its use for entertainment, animation is considered a form of art. It is often displayed and celebrated in film festivals throughout the world. Also used for educational purposes, animation has a place in learning and instructional applications as well. There are two major forms of computer animation: 2D (hand-drawn) and 3D (CGI). History of Animation Given the influx of digital technology in the 21st century, it comes as no surprise that animations are playing a much larger role in our daily lives. Animation is a wonderful thing and will be important for us always as there is nothing that influences our childhood more than a good animated movie, but 2D animation is losing its grip to the highly advanced 3D animated movies. Cel and Paper Animation Technique By mid-1910s animation production in US already dominated by the techniques of cel and paper. Cell animation was more popularized in America than in Europe because of assembly line Taylorism that had taken America by storm. Cell Animation was most appropriate to the assembly-line style of manufacturing because it took a whole line of persons working on very specific and simple repetitive duties. On the other hand, in Europe where the assembly-line style of work was not encouraged, clay animation and other forms of animation that required only a few individuals working on the set at a time was more popularized. Because the actual set could only afford a limited amount of individuals working at one time together and no more this style and other alternative forms of animation became more widely accepted.

12 2D Animation Disney cell animation draw each image one at a time using onion-skinning technique. Cell Animation Process

13 Traditional cell animation: Drawings created one-by-one animators create the key frame and assistances create in betweens; onion skinning process used to make easier the reference drawing of each additional image. History of Disney Animation Walt Disney did not invent animation, but was the 'king of cartoon' in the United States. He refined animation and thoroughly defined animated feature films. As an accomplished studio, Disney Animation is a good example to use when studying the history and progress of animation. Disney Animation started as a small studio doing a series of Alice shorts that combined live-action and animation and straight animated shorts called Laugh-o-Grams. Disney used new sound technology to produce Steam Boat Willy, the first short featuring Mickey Mouse. Additionally, they created a series of animations called Silly Symphonies which incorporated new colored film technologies. It was DisneyÊs studio that first implemented storyboards in their preproduction process, which set Disney narratives above the rest in their ability to visually represent a story. As DisneyÊs studio grew in terms of staff, finance, and prestige, its animation became more complex and refined. However, the actual process of animating was the same as it had been when Walt Disney started years earlier. The idea of how animation should be viewed and plotted was changing as DisneyÊs studio sought to tell better stories. Eventually, the studio put together its first full-length animation Snow White, Introduction to Flash Non-digital Technology DisneyÊs next feature film, Pinocchio, showed that the Disney animation team could achieve technical brilliance. This was achieved by producing with animation, the kind of camera shots that would not be common in live-action movies until the invention of power-operated zoom lenses Live-action footage was shot for the film to assist animators in achieving believable animation. Multiplane cameras allowed camera technicians to place the animation cels and background on pieces of glass. These pieces were placed at different lengths from the camera, creating a more realistic feeling of depth. These shots were expensive and therefore used sparingly, but they demonstrated the Disney goal to create believable animation. Xerox Enters Figure 1.2: Multiplane Camera Lady and the Tramp, 1955, was the first film to be shot in Cinescope, todayês wide screen, while One Hundred and One Dalmatians, 1961, was the first Disney film to

14 2D Animation use technology to transfer animatorsê sketches to cels ÂUb Iwerks had modified a Xerox camera to transfer animatorsê drawings directly to cels, thus eliminating the inking process and preserving much of the spontaneity of the pencil line. This saved time and money and had a major effect on the way Disney animation would look for the next thirty years. The Xerox camera also allowed the animators to animate one small group of puppies and duplicate them repeatedly to get the eventual ninety-nine puppies. CGI Figure 1.3: The White Eared Puppies in the back are Xerox Copies Twenty-five years later, computer generated imagery was introduced into Disney animation in the low budget film The Great Mouse Detective, Computer generated gears were added to the films climax inside LondonÊs Big Ben Clock Tower. Well-integrated into the film's animation, few realized the huge leap Disney Animation had taken. Oliver & Company, 1988, also used Computer Generated Imagery (CGI) for backgrounds, but overuse caused it to be a bit intrusive. Figure 1.4: Gear Scene from the Great Mouse Detective CAPS Disney AnimationÊs next major advance was taken on another small film. The Rescuers Down Under, 1990, was the first Disney film to use CAPS a computerized production system that allowed hand-made animation drawings to be copied and colored electronically, thus eliminating the need for cels. This, like the Xerox camera,

15 changed Disney animation forever. The Little Mermaid, 1989, was the last movie that depended upon hand painted cels (as modified by the xerography that had been standard for almost three decades). Introduction to Flash Figure 1.5: CAPS Color Model from Aladdin, 1992 With the introduction of CAPS, Disney also streamlined their production method, making more effective use of their top animators. These animators were now considered key character animators and only had to produce rough drawings that clean-up artists would turn into CAPS-ready finished drawings. CGI and CAPS played a large part in DisneyÊs next hit, Beauty and the Beast, The ballroom that Belle and Beast danced in was computer generated and allows for complex moving camera shots that would have been very difficult, if at all possible, with hand-drawn backgrounds. CAPS allowed for complex camera setups that otherwise would be too expensive and complicated to achieve with traditional methods. CGI Character Animation Figure 1.6: Carpet was the First Character CGI Aladdin, 1992, used computer generated imagery for its character, Carpet, and some of its backgrounds. Carpet was the first non-background CGI to be used in a Disney film. The next non-background CGI to be used made possible the wildebeest stampede in The Lion King, 1994 (Finch 223). CGI has been used (like Xerox technology before it) to make possible large crowd scenes such as the festival scene in The Hunchback of Notre Dame, 1996, and the scene involving the attack of the Mongols in Mulan, 1998.

16 2D Animation Figure 1.7: Scott Johnston Working on the Wildebeest Stampede in the Lion King Box 1.1: Synched Sound: Steamboat Willie released November 18, 1928 Disney Disney created the first cartoon synchronized with sound entitled 'Steamboat Willie' At first Disney tried to reach a deal with RCA or Western Electric to record the soundtrack but was turned down. Instead Walt contracted with bootleg Powers Cine phone process and even with a disastrous first recording finally in a session recorded the soundtrack with a 15-piece band and his very own Mickey squeaks.

17 2D Animation actually predates the motion picture for several years; it first appeared in 19th century parlor toys like the zoetrope and the flip book. It fully came into its own with the advent of movies, however, and is irrevocably associated with the film medium. Traditional 2D animation uses colored cells, each once depicting a single frame of film. Animators change each cell slightly for each new frame, giving the resulting image the illusion of movement. Animator Winsor McKay first grasps the possibility of animated films in the early 20th century and produced the medium's first real classics (notably his 1914 film "Gertie the Dinosaur" which depicted a friendly brontosaurus interacting with a live man in front of the screen). His films took a long time to produce, however, since he drew them all by hand. Subsequent animators like John Bray and Raoul produce films more rapidly. The studio system eventually came to dominate 2D animation. A much more successful rival to Disney emerged over at Warner Bros, who used their extensive musical library as the basis for a series of "Looney Tunes" and "Merry Melodies" cartoons in the 1930s. Their characters; Bugs Bunny, Daffy Duck and Porky Pig; adopted a darker and more cynical attitude, with a greater emphasis on slapstick and more adult references. The Warners' model proved extremely durable, and their characters continue to appear in animation today. With the rise of television in the 1960s, 2D animation expanded to fill the new medium. Two-reel shorts vanished from the movie theaters, replaced by half-hour animated shows on Saturday mornings. Early efforts often used cheap techniques and filler storylines the Warners repackaged theatrical shorts for television consumption; but in the 1980s and 1990s, increasingly sophisticated fare arose. Animated television such as "Batman: The Animated Series" catered to grown-ups weaned on the simpler TV animation of the past and helped show audiences what animation could be. Introduction to Flash Table 1.1: Compiled History of Animation 1824 Peter Roget presented his paper 'The persistence of vision with regard to moving objects' to the British Royal Society Dr. Joseph Antoine Plateau (a Belgian scientist) and Dr. Simon Rittrer constructed a machine called a phenakitstoscope. This machine produced an illusion of movement by allowing a viewer to gaze at a rotating disk containing small windows; behind the windows was another disk containing a sequence of images. When the disks were rotated at the correct speed, the synchronization of the windows with the images created an animated effect Eadweard Muybridge started his photographic gathering of animals in motion Thomas Edison started his research work into motion pictures Thomas Edison announced his creation of the kinetoscope which projected a 50ft length of film in approximately 13 seconds George Eastman began the manufacture of photographic film strips using a nitrocellulose base Emile Renynaud, combining his earlier invention of the praxinoscope with a projector, opens the Theatre Optique in the Musee Grevin. It displays an animation of images painted on long strips of celluloid Louis and Augustine Lumiere issued a patent for a device called a cinematograph capable of projecting moving pictures Thomas Armat designed the vitascope which projected the films of Thomas Edison. This machine had a major influence on all sub-sequent projectors J. Stuart Blackton made the first animated film which he called "Humorous phases of funny faces." His method was to draw comical faces on a blackboard and film them. He would stop the film, erase one face to draw another, and then film the newly drawn face. The ostop-motiono provided a starting effect as the facial expressions changed before the viewers eyes. Contd

18 2D Animation 1908 In France Emile Cohl produced a film, Phantasmagorie which was the first depicting white figures on a black background Emile Cohl makes En Route the first paper cutout animation. This technique saves time by not having to redraw each new cell, only reposition the paper Winsor McCay produced an animation sequence using his comic strip character "Little Nemo." 1913 J.R. Bray devised "Colonel Heeza Liar," and Sidney Smith created "Old Doc Yak." 1914 John R Bray applies for a patent on numerous techniques for animation. One of the most revolutionary is the process of printing the backgrounds of the animation Winsor McCay produced a cartoon called "Gertie, The Trained Dinosaur" which amazingly consisted of 10,000 drawings Earl Hurd applies for a patent for the technique of drawing the animated portion of an animation on a clear celluloid sheet and later photographing it with its matching background. [Cel animation] 1917 The International Feature Syndicate released many titles including "Silk Hat Harry","Bringing Up Father", and "Krazy Kat" Pat Sullivan created an American cartoon "Felix the Cat." 1926 The first feature-length animated film called "El Apostol" is created in Argentina Walt and Roy Disney found Disney Brothers Cartoon Studio Walt Disney extended Max Fleischer's technique of combining live action with cartoon characters in the film "Alice's Wonderland" Warner Brothers released "The Jazz Singer" which introduced combined sound and images Walt Disney created the first cartoon with synchronized sound called "Steam Boat Willy" The King of Jazz is produced by Universal. In it is a short animated sequence done by Walter Lantz. It is the first animation done with the two strip Technicolor process 1934 Urb Irwek creates a multi-plane camera. This camera is capable of filming several separate layers of cels giving the final frame a truly three dimensional look John and James Whitney produced "Five Abstract Film Exercises." 1945 Harry Smith produced animation by drawing directly onto film John Whitney used 17 Bodine motors, 8 Selsyns, 9 different gear units and 5 ball integrators to create analog computer graphics John Whitney used differential gear mechanisms to create film and television title sequences Ivan Sutherland and SKETCHPAD at MIT/Lincoln Labs 1964 Ken Knowlton, working at Bell Laboratories, started developing computer techniques for producing animated movies University of Utah, Ed Catmull develops an animation scripting language and creates an animation of a smooth shaded hand. Ref: E. Catmull, "A System for Computer Generated Movies", Proceedings of the ACM National Conference, (In the SIGGRAPH 98 Seminal Graphics collection.) 1972 University of Utah, Fred Parke creates first computer generated facial animation. >Ref: F. Parke, "Computer Generated Animation of Faces", Proceedings of the ACM National Conference, (In the SIGGRAPH 98 Seminal Graphics collection.) 1974 National Research Council of Canada releases Hunger/La Faim directed by Peter Foldes and featuring Burtnyk and Wein interactive key framing techniques. Ref: N. Burtnyk and M. Wein, "Interactive Skeleton Techniques for Enhancing Motion Dynamics in Key Frame Animation", Communications of the ACM, 19(10), October (In the SIGGRAPH 98 Seminal Graphics collection.) 1982 Tron, MAGI, movie with CG premise Contd

19 1983 Bill Reeves at Lucasfilm publishes techniques for modeling particle systems. "Demo" is Star Trek II: The Wrath of Kahn. The paper also promotes motion blur. Ref: W. Reeves, "Particle Systems A Technique for Modeling a Class of Fuzzy Objects", Computer Graphics, 17(3), July (In the SIGGRAPH 98 Seminal Graphics collection.) 1984 Porter and Duff at Lucusfilm publish paper on digital compositing using an alpha channel. Ref: T. Porter and T. Duff, "Compositing Digital Images", Computer Graphics, 18(3), July (In the SIGGRAPH 98 Seminal Graphics collection.) 1985 Girard and Maciejewski at OSU publish a paper describing the use of inverse kinematics and dynamics for animation. Their techniques are used in the animation "Eurythmy." Ref: M. Girard and A. A. Maciejewski, "Computational Modeling for the Computer Animation of Legged Figures", Computer Graphics, 19(3), July (In the SIGGRAPH 98 Seminal Graphics collection.) 1985 Ken Perlin at NYU publishes a paper on noise functions for textures. He later applied this technique to add realism to character animations. Ref: K. Perlin, "An Image Synthesizer", Computer Graphics, 19(3), July (In the SIGGRAPH 98 Seminal Graphics collection.) 1987 John Lasseter at Pixar publishes a paper describing traditional animation principles. "Demos" are Andre and Wally B and Luxo Jr. Ref: J. Lasseter, "Principles of Traditional Animation Applied to 3D Computer Animation", Computer Graphics, 21(4), July (In the SIGGRAPH 98 Seminal Graphics collection.) 1987 Craig Reynolds then at Symbolics (now at Dreamworks SKG) publishes a paper on selforganizing behavior for groups. "Demos" are Stanley and Stella and Batman Returns. Ref: C. W. Reynolds, "Flocks, Herds, and Schools: A Distributed Behavioral Model", Computer Graphics, 21(4), July (In the SIGGRAPH 98 Seminal Graphics collection.) 1988 Willow uses morphing in live action film 1992 Beier and Neely, at SGI and PDI respectively publish an algorithm where line correspondences guide morphing between 2D images. "Demo" is Michael Jackson video Black and White. Ref: T. Beier and S. Neely, "Feature-Based Image Metamorphosis", Computer Graphics, 26(2), July (In the SIGGRAPH 98 Seminal Graphics collection.) 1993 Chen and Williams at Apple publish a paper on view interpolation for 3D walkthroughs. Ref: S. E. Chen and L. Williams, "View Interpolation for Image Synthesis", Computer Graphics Proceedings, Annual Conference Series, (In the SIGGRAPH 98 Seminal Graphics collection.) 1993 Jurassic Park use of CG for realistic living creatures 1995 Toy Story first full-length 3D CG feature film Introduction to Flash Types of Animation There are various types of animation. Some of the following are: Claymation Contd

20 2D Animation Anime Cutout Animation Anime (a style of Japanese animation), Claymation (animating clay figures like Gumby), and cutout animation (such as South Park) are a few examples. Disney animated movies are most Saturday morning cartoons are examples of classic animation. This form of animation is produced by animators drawing figures in sequence with tiny variations between the drawings so that the figure seems to move. This is the most fundamental level of animation and has not changed since the introduction of animation. What has changed are the production and editing methods. With technological changes, animation went from the zoetrope to PixarÊs all-digital feature films. One of the types of animation is classic animation, which is particular to Disney animation. 2 Dimensional Animations 2-D animation is animation in which the characters and surroundings are created on a flat plane of two dimensions. 2D animation is simply making objects move in a two dimensional space. These objects vary from stills, like photographs or logos to more complex objects, like 3D graphics. Following are some characteristics of 2D animation; 2D animation is the making of several different pictures, all in succession to each other, to create the illusion of movement. It is the creation of moving pictures in a two-dimensional environment, such as through "traditional" cel animation or in computerized animation software. It will show vertical and horizontal movement, but is not useful for determining well patterns. Its greatest usage is in determining completion intervals and stratification effects. "2D", short for "two-dimensional", is sometimes also called vector animation ", and is typically done in programs like Macromedia Flash and Macromedia Director. It is also useful in designing interactive interfaces for the web. Usually, when orienting a crosssectional model (commonly called an X-Z model), the cross-section is taken parallel to the fluid movement (up or down dip). This type of model is used for thick, layered

21 reservoirs, water under running, gas segregation, or a series of reservoirs co-mingled in the wellbore. This is done by sequencing consecutive images, or "frames", that simulate motion by each image showing the next in a gradual progression of steps. The eye can be "fooled" into perceiving motion when these consecutive images are shown at a rate of 24 frames per second or faster. 2D animation is shortly summarized showing still pictures in the speed of 12 or 24 frames per second to fool the brain to see movement. By this combined with painted backgrounds and music you can create very powerful successful movies such as Pinocchio and Dumbo. Of course the process of classic 2D animation not done with computers is not something one person would want to do, at least not making a complete movie. It takes a lot of time and money and you are better of embarking on your animating journey with a computer these days. Sadly the classic 2D animation might be a dying genre with 3D animation stealing the show more and more. Hopefully the good old movies like Dumbo and Pinocchio will never be completely lost to us. When talking about the good old classic 2D dying I am then thinking of the big business version of it, I still believe it will live on in the unprofessional Internet artist on sites such as New grounds. As we know that we use 2D animation for better presentation of graphics. 2D animation figures are created and/or edited on the computer using 2D bitmap graphics or created and edited using 2D vector graphics. This includes automated computerized versions of traditional animation techniques such as of tweening, morphing, and onion skinning and interpolated rot scoping. 2D computer graphics is the computer based generation of digital images mostly from two-dimensional models (such as 2D geometric models, text, and digital images) and by techniques specific to them. The word may stand for the branch of computer science that comprises such techniques, or for the models themselves. Introduction to Flash Figure 1.8: Raster Graphic Sprites (left) and Masks (right) 2D computer graphics are mainly used in applications that were originally developed upon traditional Printing and drawing technologies, such as Typography, cartography, technical drawing, advertising etc. In those applications, the two-dimensional image is not just a representation of a real-world object, but an independent artifact with added semantic value; two-dimensional models are therefore preferred, because they give more direct control of the image than 3D computer graphics (whose approach is more akin to photography than to typography). In many domains, such as desktop publishing, engineering, and business, a description of a document based on 2D computer graphics techniques can be much smaller than the corresponding digital image often by a factor of 1/1000 or more. This representation is also more flexible since it can be rendered at different resolutions to suit different output devices. For these reasons, documents and illustrations are often stored or transmitted as 2D graphic files.

22 2D Animation 2D computer graphics started in the 1950s, based on vector graphics devices. These were largely supplanted by raster-based devices in the following decades. The PostScript language and the X Window System protocol were landmark developments in the field. With the resurgence of 2D animation and its booming popularity, software like Toonz Harlequin, CelAction, Anime Studio, Toon Boom Animation, Animaker and Adobe Flash have emerged as the new tools of choice for both amateur and professional animators. However, the principal issue with 2D animation is labor requirements. With advanced software like RETAS and Adobe after Effects, coloring and compositing can be easily done with significantly less time. Additional software is being developed to aid and speed up the process of digital 2D animation, specifically in the area of automatic coloring and in-betweening. One such example is Cacani, developed by Singapore's NTU. Properties Bar Properties Bar Properties bar is one of the best features in Flash. To start with it is important that you are familiar with the interface. Flash can be unnerving the first time you open it but

23 once you are happy with all the areas shown you disregard all other windows or boxes until they are introduced. As with the rest of the Macromedia Suite you can set up and customize the interface to suit, this is the most standard version shown here. If your Version shows extra menus and palettes; click to the left of the box title, where you will find a series of dots, keeping the left mouse button down drag the box out into the middle of the screen and let go. By default your window should then show all the drawing and selection tools to the left of the screen, the document window, which is sometimes referred to as the Stage in the centre, and extra tools and boxes to the right of the screen. The Properties box at the bottom contextualizes with the tools and elements selected in the document window. As flash is an animation package the only extra element is the Timeline which allows you to create animated movies and presentations. Introduction to Flash Size and Publish When you use lots of images/sounds/video in flash your final file size can be huge. What you can do is lower the quality of your images/sounds which can make a big difference on file size, in order to protect yourself from this, follow the settings given below: Go to publish settings (File > Publish Settings or Ctrl+shift+f12) you get this menu here you have many different format you would like to publish you flash with - go to the flash tab, Go down to.jpg quality, here you can assign the quality of your images-mostly use it at 90 which can save you a lot of file size at the end. If you have audio in your files you can set their quality too, click on set for each one and set the bit rate on 32 kbps quality best for both. Note: Remember you can set it as much as you like or prefer, try different settings to see what works best for you keeping in mind quality versus file size. Try this with your files and see how much you can save from your file size at the end. Publish Settings for SWF Files 1. Select File > Publish Settings, click the Flash tab, and select a Player version from the Player pop-up menu. Not all Adobe Flash CS4 Professional features work in published SWF files that target Flash Player versions earlier than Flash Player 10. To specify Flash Player detection, click the HTML tab and select Detect Flash Version and enter Flash Player version to detect. 2. Select the ActionScript version from the Script pop up menu. If you select ActionScript 2.0 or 3.0 and youêve created classes, click Settings to set the relative class path to class files that differ from the path to default directories set in Preferences. 3. To control bitmap compression, adjust the JPEG Quality slider or enter a value. Lower image quality produces smaller files; higher image quality produces larger files. Try different settings to determine the best trade-off between size and quality; 100 provide the highest quality and least compression. To make highly compressed JPEG images look smoother, select Enable JPEG Deblocking. This option reduces typical artifacts resulting from JPEG compression, such as the common appearance of 8x8-pixel blocking of the image. Some JPEG images may lose a small amount of detail when this option is selected. 4. To set the sample rate and compression for all streaming sounds or event sounds in the SWF file, click Set next to Audio Stream or Audio Event and select options as needed.

24 2D Animation Note: A streaming sound plays as soon as enough data for the first few frames downloads; it is synchronized to the Timeline. An event sound does not play until it downloads completely, and it continues to play until explicitly stopped. 5. To override settings for individual sounds specified in the Sound section of the Property inspector, select Override Sound Settings. To create a smaller, lowfidelity version of a SWF file, select this option. Note: If the Select Override Sound Settings option is deselected, Flash scans all stream sounds in the document (including sounds in imported video) and publishes all stream sounds at the highest individual setting. This can increase file size if one or more stream sounds has a high export setting. 6. To export sounds suitable for devices, including mobile devices, instead of the original library sound, select Export Device Sounds. Click OK. 7. To set SWF settings, select any of the following options: (a) Compress Movie: (Default) Compresses the SWF file to reduce file size and download time. Most beneficial when a file is text- or Action Script-intensive. A compressed file plays only in Flash Player 6 or later. (b) Include Hidden Layers: (Default) Exports all hidden layers in the Flash document. Deselecting Export Hidden Layers prevents all layers (including layers nested inside movie clips) marked as hidden from being exported in the resulting SWF. This lets you easily test different versions of Flash documents by making layers invisible. (c) Include XMP metadata: (Default) Exports all metadata entered in the File Info dialog box. Click the File Info button to open the dialog box. You can also

25 open the File Info dialog box by choosing File > File Info. The metadata is viewable when the SWF file is selected in Adobe Bridge. (d) Export SWC: Exports a.swc file, which is used for distributing components. The.swc file contains a compiled clip, the component's ActionScript class file, and other files that describe the component. 8. To use advanced settings or enable debugging of the published Flash SWF file, select any of the following options: Introduction to Flash Generate Size Report Protect From Import Omit Trace Actions Permit Debugging Generates a report listing the amount of data in the final Flash content by file. Prevents others from importing a SWF file and converting it back into a FLA document. Lets you use password protection with your Flash SWF file. Causes Flash to ignore ActionScript trace statements in the current SWF file. When you select this option, information from trace statements does not appear in the Output panel. Activates the Debugger and allows remote debugging of a Flash SWF file. Lets you use password protection with your SWF file. 9. If you are using ActionScript 2.0, and selected either Permit Debugging or Protect from Import, enter a password in the Password text field. If you add a password, other users must enter the password before they can debug or import the SWF file. To remove the password, clear the Password text field. 10. Select the Flash security model to use from the Local Playback Security pop up menu. Specify whether to grant your published SWF file local or network security access. Local Access only lets the published SWF file interacts with files and resources on the local system but not on the network. Access Network only lets the published SWF file interacts with files and resources on the network but not on the local system. 11. To enable the SWF file to use hardware acceleration, select one of the following options from the Hardware Acceleration menu: (a) Level 1 Direct: Direct mode improves playback performance by allowing Flash Player to draw directly on the screen instead of letting the browser do the drawing. (b) Level 2 GPU: In GPU mode, Flash Player utilizes the available computing power of the graphics card to perform video playback and compositing of layered graphics. This provides another level of performance benefit depending on the user's graphics hardware. Use this option when you expect that your audience will have high-end graphics cards. If the playback system does not have sufficient hardware to enable acceleration, Flash Player reverts to normal drawing mode automatically. For best performance on web pages containing multiple SWF files, enable hardware acceleration for only one of the SWF files. Hardware acceleration is not used in Test Movie mode. When you publish your SWF file, the HTML file that embeds it contains a wmode HTML parameter. Choosing Level 1 or Level 2 hardware acceleration sets the wmode HTML parameter to "direct" or "gpu" respectively. Turning on hardware acceleration overrides the Window Mode setting you may have chosen in the HTML tab of the Publish Settings dialog box, because it is also stored in the wmode parameter in the HTML file. 12. To set a maximum time that scripts can take to execute in the SWF file, enter a value for the Script Time Limit. Flash Player cancels execution of any scripts that exceed the limit.

26 2D Animation Some Keywords Term ActionScript Alpha effect Bitmaps Breaking apart Button symbol Component Easing option Frame-by-Frame animation Graphic symbol Keyframe Layer Library Motion guide Motion tweening Shape tweening Symbol Timeline Vector graphic Definition Adds interactivity and/or playback efficiency to a movie via coding. Similar to JavaScript, ActionScript is an object-oriented programming language. Adjusts the transparency of an instance. Images using colored dots, called pixels, arranged within a grid. Typical of most web graphics. Converts symbols into basic shapes so that shape tweening can be used. Used to create interactive buttons in a movie that respond to mouse clicks or other actions. A pre-made movie clip that provides some functionality, such as a button, a scroll pane, or a progress bar. Components allow you to create animations with complex functionality, but with a minimum of effort. By default, the rate of change between tweened frames is constant. Easing creates a more natural appearance of transformation by gradually adjusting the rate of change. An animation technique that involves subsequently creating a slightly altered image in sequence and then playing back the entire sequence. Used for static images and to create reusable pieces of animation that is tied to the Timeline of the main movie. A frame in which a change in an animation is defined. Keyframes are an important part of tweened animation. Helps organize symbols and other separate animation entities by allowing you to draw and edit objects on one layer without affecting objects on another layer. Stores symbols, such as graphic symbols and button symbols, and allows you to view and organize these files as you work. Helps in selecting and copying instances of symbols on the main stage. Lets you draw paths along which tweened instances, groups, or text blocks can be animated from one keyframe to another. To tween the changes in properties of instances, groups, and type, you use motion tweening. Flash can tween position, size, rotation, and skew of instances, groups, and type. Additionally, Flash can tween the color of instances and type, creating gradual color shifts or making an instance fade in or out. In shape tweening, you draw a shape at one point in time, and then you change that shape or draw another shape at another point in time. Flash interpolates the values or shapes for the frames in between, creating the morphing animation. Symbols must be broken apart before using shape tweening. A reusable graphical object that is stored in a Library. You can then create multiple instances of the symbol. There are three symbol types: graphic, button, and movie clip. Organizes and controls a movie's content over time in layers and frames. The major components of the Timeline are layers, frames, and the playhead. Describes images using lines and curves, called vectors, which also include color and position properties. You can move, resize, reshape, and change the color of a vector graphic without changing the quality of its appearance.

27 Student Activity What do you understand by 2D animation? Find out the difference in 2D and 3D Animation. Do you think 2D animation is better than 3D animation? Summary Flash is a multimedia graphics program especially for use on the Web. Flash enables you to create interactive "movies" on the Web. Two kinds of images are in the digital world: bitmaps and vectors. Animation is a type of optical illusion; it is the process by which we see still pictures move. It involves the appearance of motion caused by displaying still images one after another at the rate of 24 pictures per second. There are two major forms of computer animation: 2D (hand-drawn) and 3D (CGI). Walt Disney did not invent animation, but was the 'king of cartoon' in the United States. He refined animation and thoroughly defined animated feature films. As an accomplished studio, Disney Animation is a good example to use when studying the history and progress of animation. There are various types of animation. Some of the following are: Anime, Claymation and cutout animation. 2D animation is animation in which the characters and surroundings are created on a flat plane of two dimensions. 2D animation is simply making objects move in a two dimensional space. These objects vary from stills, like photographs or logos to more complex objects, like 3D graphics. 2D computer graphics is the computer based generation of digital images mostly from two-dimensional models (such as 2D geometric models, text, and digital images) and by techniques specific to them. Properties bar is one of the best features in Flash. To start with it is important that you are familiar with the interface. Flash can be unnerving the first time you open it but once you are happy with all the areas shown you disregard all other windows or boxes until they are introduced. Introduction to Flash Keywords Flash: Flash is a software originally designed to create animations for display on web pages. Media Objects: Media objects are the various graphic, text, sound and video objects that comprise the content of your Flash document. Timeline: The Timeline is the place in Flash where you tell flash when specific media objects should appear on the Stage. Action Script Code: Action Script code is the programming code you can add to Flash documents to make them respond to user interactions and to more finely control the behavior of your Flash documents. Bitmaps: Bitmaps are images made up from thousands of tiny dots called pixels (picture elements.) Vector Files: Vector files are typically much smaller than bitmap files because these graphics are defined by their geometry, by the curves that make them up. Animation: Animation is a type of optical illusion; it is the process by which we see still pictures move. It involves the appearance of motion caused by displaying still images one after another at the rate of 24 pictures per second. 2-D Animation: 2-D animation is animation in which the characters and surroundings are created on a flat plane of two dimensions. 2D animation is simply making objects move in a two dimensional space.

28 2D Animation 2D Computer Graphics: 2D computer graphics is the computer based generation of digital images mostly from two-dimensional models (such as 2D geometric models, text, and digital images) and by techniques specific to them. Review Questions 1. Define flash. Write down the main parts of flash. 2. Differentiate between pixels and graphics. 3. Briefly explain about Flash files and describe each file type and its uses. 4. What is computer animation? What is the difference between computer animation and traditional animation? 5. Explain the two kinds of images are in the digital world. 6. What is animation? Explain the types of animation. 7. Give the history of animation. Also discuss the history of Disney animation. 8. Explain the meaning of 2 Dimensional Animations. Write down few characteristics of 2D animation. 9. Write short notes on the following: (a) Action Script (b) Basic drawing tool functions (c) 2D computer graphics (d) Properties bar (e) Size (f) Publish Further Readings Sandro Corsaro, Richard M Sherman, Clifford J. Parrott, Hollywood 2D Digital Animation: The New Flash Production Revolution, Cengage Learning. Bill Davis, GardnerÊs Guide to Creating 2D Animation in a Small Studio, Garth Gardner Co. Steve Roberts, Character Animation: 2D Skills for Better 3D, Elsevier.

29 Unit 2 Symbols and Layers Symbols and Layers Unit Structure Introduction Three Types of Symbols Tools Library Insert Layer Motion Tweening Shape Tweening Motion Guide Summary Keywords Review Questions Further Readings Learning Objectives At the conclusion of this unit, you will be able to: Impart a brief overview of symbols Provide insight into library and insert layers Familiarize yourself with the motion guide and motion tweening Introduction In unit 1 we have learnt the concept of flash and animation. We have also learnt the 2 Dimensional Animations, its characteristics and Properties Bar, Size and Publish. Now, in this unit we will study the symbols and layers. We will also study the concepts related to library, insert layers and motion guide. A symbol is a reusable object used/created in flash. A symbol can be reused throughout your movie or imported and used in other movies. There are three types of symbols: Graphics, Buttons, and Movie clips. A copy of a symbol used in the movie is called an Instance, which can have its own independent properties (like color, size, function, etc.) different from the original symbol. All symbols used in a flash movie are stored in the Library from where you can drag-and-drop new instances of the symbols into your movie. When a symbol is edited all of its instances get updated, but changing the properties, effects or dimensions of an instance of a symbol does not affect the original symbol or other instances. Three Types of Symbols Movie clip symbols: Use movie clip symbols to create reusable pieces of animation. Movie clips have their own multi-frame Timeline that plays independent of the main movie's Timeline think of them as mini-movies inside a main movie that can contain interactive controls, sounds, and even other movie clip instances.

30 2D Animation Graphic symbols: Graphic symbols are reusable static images that are used mainly to create animations. Any drawn vector/plain text/imported bitmap (photo), or combinations of these, can be converted into a single controllable object: as a graphic symbol. They have only one frame in their timeline. To create graphic symbols: 1. First create/import the object(s) to be converted into a graphic. Import bitmaps onto the stage using Ctrl+R. 2. Select the object(s) and then press F8 (or Modify >> Convert to Symbol). 3. Select the Graphic Behavior and name the symbol, say 'g_home'. 4. To edit it at a later point, double-click the symbol in the library (Ctrl + L) or any of its instances on the stage to switch to its symbol-editing mode as shown below. The name of the symbol will appear near the scene name Button symbols: Button symbols to create interactive buttons in the movie that respond to mouse clicks, rollovers or other actions. You define the graphics associated with various button states, and then assign actions to a button instance. Tools Flash Tools Descriptions Arrow: The Arrow tool lets you select entire objects by clicking an object or dragging to enclose the object within a rectangular selection marquee. Brush: Draw brush like strokes, as if you were painting. You can choose a brush size and shape. Eraser: Use it to removes strokes and fills. Eyedropper: Copy fill and stroke attributes from one object to apply to another object. Fill Transform: You can transform a gradient or bitmap fill by adjusting the size, direction, or center of the fill. Free Transform: Transform objects, groups, instances, or text blocks.

31 Hand: The hand tool letês you click and drag to adjust the view of the Stage. Ink Bottle: To change the stroke color, width, and style of lines or shape outlines, you can use the Ink Bottle tool. Lasso: Use the lasso to select objects by drawing either a freehand or a straight-edged selection area. (Not very precise, not as good as Photoshop) Line, Oval and Rectangle: You these tools to easily create these basic geometric shapes. Paint Bucket: Use it to fill enclosed areas with color or change the color of already painted areas. Pen: Use it to draw precise paths as straight lines or smooth, flowing curves. Pencil: Draw lines and shapes. Sub-selection: Use this tool to drag an anchor point or adjust tangent handles for example. Text: Use this tool to type text. Zoom: You can zoom in or out to adjust the view of your Stage. Note: To convert picture to a symbol, press F8 Using flash symbols is very crucial to the file size of your Flash movie. The Flash file size depends largely on the size of all the graphics and texts used in the movie (both symbols and non-symbols) here the major advantage of using symbols is that a symbol's size is taken into consideration only once even if it is used a hundred times this is the true power of Flash. Unused symbols in your library are not counted in the size of your movie. Symbols and Layers Library If you need to manage graphics, images (such as JPEG, PNG, GIF images) or pictures of any kind, or handle animation in your programs, including writing games, drawing 3D or 2D pictures, you might like to consider the graphics libraries, 3D engines, 2D engines, image manipulation source code (etc) listed here. Some of these are actually production code, used in commercial products. Mono 2D Animation Library What this library does: Provides a consistent framework for drawing onto a form Double buffering Frames per second timing Provides for layers of drawing and sprites (moving graphics) Provides for graphical alterations of sprites Utilitizes.net GDI+ graphics rather than DirectX Tested on.net 2.0/XP,.net 3.5/Vista, Mono on OpenSuse Insert Layer Select a layer and right-click on it and it will pop up a menu. Click "Insert Layer" will insert a new layer above the selected layer. Step 1 Choose File > Open. Open a Flash movie you have created.

32 2D Animation Step 2 Choose File > Export Movie. Step 3 Name the file "somefilename.swf". Choose the location where the file is to be stored (in your Web folder). Click OK. Step 4 Open the HTML page where you want to insert your Flash movie. Working with Layers Open a new flash file (Ctrl+N) New Document window will appear Select General panel and choose Type: Flash Document. Press OK. If your timeline window is not open, press (Ctrl+Alt+T). Now you can see a single Layer called "Layer1" in your timeline Window. Create a Shape Tween on Layer1. Similar to the one in Shape Tween Tutorial. Single click on add new layer button. A new layer gets added. By default it will be named "Layer 2". Create a Motion Tween on Layer 2. Similar to the one in Motion Tween Tutorial. After creating two layers, your timeline will look something like the one shown below. Now press (Ctrl+Enter) to view your motion tween.

33 Motion Tweening Create an animation by filling in the missing frames between a start and an end positions. You will move the eyes of the Crow from left to right and back. Create a separate Eyes layer by clicking on the Create New Layers tool on the on the Timeline panel. Symbols and Layers And follow the above mentioned steps of the motion guide. Shape Tweening Shape Tweening allows us to transform or change or give animations to our concerned shape. For example, if you want to show a simple line with some animations or by tweening shapes, you can create an effect similar to morphing, making one shape appear to change into another shape over time. Flash can also tween the location, size, and color of shapes. Steps to follow: Open a new flash file (Ctrl+N). New Document window will appear Select General panel and choose Type: Flash Document. Press OK. If your timeline window is not open, press (Ctrl+Alt+T). Now you can see a single Layer called "Layer1" in your timeline Window. Select the first frame. Now go to your working area and draw any object. To start off with, you can draw a circle/line etc. This is going to be your initial object.

34 2D Animation Select frame 20 and press F6 to insert a new key frame. Still keeping play head on frame 20, delete the object present in your working area. Now draw a different object, may be a square. In the above demonstration, I have drawn a long line. Select any frame between, 2 to 19 and select Shape from the tween pop-up menu in the Property inspector. Now your Layer will look something like the one shown below. Now press (Ctrl+Enter) to view your motion tween. Motion Guide Motion Guide is nothing but moving your symbol in a predefined path such as curves or circles. A Motion Guide layer is similar to a Motion Tween but the guide layer gives you more flexibility in that the animation will follow the line drawn in the Guide Layer. Flash motion guides allow you to draw a preset path for an object to follow. You can then animate that object using a motion tween. The guide is not visible in the final Movie. Learn the following steps to understand more. Step 1 Step 2 Step 3 Step 4 Step 5 Step 6 Step 7 Step 8 Step 9 On your Flash stage, either select the object that you wish to animate or create a new object to animate. The object must be a symbol. It must also be on its own layer. Right-click on the layer containing the symbol in your Timeline area. Then, select "Add Motion Guide." The layer containing the symbol will indent beneath a new layer labeled "Guide Layer" with an icon showing a red dotted line. This is the layer that will contain your motion guide. Use the line tool or the pen tool to draw a path on the Guide Layer outlining the course you want your animated symbol to follow. Select the symbol and move it until the registration point at the center snaps to the beginning point of the motion guide path. Copy the key frame containing the symbol to a new frame further down the timeline. Copy the key frame containing the motion guide to a new frame further down the timeline. It is on the same frame number as the second key frame for the symbol but on its own layer. On the symbol's second key frame, move the symbol (do not move the motion guide) across the stage until the registration point at its center snaps to the ending point of the motion guide's path. On the layer for the symbol, right-click on the timeline between the first and last key frames. Select "Create Motion Tween." Click enter on your timeline to watch your symbol animate. Watch it slide along a path following the motion guide that you created. Although the motion guide is a visible line on the stage when working in Flash, it will be invisible when the movie is published with a Shockwave Flash (SWF) file of any other format.

35 A motion guide is a line you have drawn with the pencil tool on a guide layer. You can attach your object or character to the line to make it follow that path. This can save time, particularly when doing an animation sequence that involves substantial movement. Step 1: To insert 30 frames in your movie with the mouse: Symbols and Layers Click frame 30 in layer 1 on the timeline then press F5. Step 2: Now you need to find the element you want to tween. (It can be any element you like). Choose Libraries > Graphics in the menu. Library Graphics opens. Find Bird (crow) and with the mouse, drag it into the canvas. Step 3: Now enter a key frame in frame 30. To do this, first click frame 30 in layer one on the timeline. Then press F6.

36 2D Animation Step 4: Next, double click the keyframe in frame 1. A frame Properties Box pops up. Choose "Tweening", and in the Tweening drop-down menu choose "Motion". Click OK Step 5: Right click on Layer 1. A pop-up menu appears. Choose Add Motion Guide. Flash now inserts a new layer on top of layer 1, with the Motion Guide icon to the left of the layer's name.

37 This new layer is called a motion guide layer. Motion guide layers are used to draw lines that you want an animated symbol to follow. Step 6: Click on the Motion Guide Layer to make sure it is the active layer. (Click on the layer name, where it says "Guide: Layer 1"). Choose pencil in the toolbox. (Or press P on the keyboard) Make sure pencil mode is set to "Smooth". Symbols and Layers With the pencil, give the shape of your choice, it may be straight line, square, rectangle etc. Step 7: Now adjust the frame pointer so it points to frame 1. Make sure the Snap button is activated (or choose View > Snap in the menu, to activate snapping). With the mouse, place the bird so that its center is at the beginning of your motion guide. (The center is indicated by a small + when selected). A black circle appears when the bird is attached to the motion guide. It can sometimes be hard to get the symbol to snap to the guide. Eventually it will though. Try zooming in or out if you just can't get the bird to snap to the guide. Release the mouse button when the bird is snapped to the guide.

38 2D Animation Note: If say, your motion guide was a circle, you would have the bird fly in a thrilling loop. However it would look kind of odd, since the bird would only follow the circle, but not actually point the nose in the direction of the circle. During the entire loop the bird would have its head pointing to the right. Eventually the bird would fly backwards. Quite a thrill may be but not too realistic. If you want the bird to actually follow the circle, not only in movement, but also in direction, you should double click the key frame in frame 1 on layer 1. This will reopen the frame properties box. Choose the "tweening" option. Select the "Orient to path direction" option, and click ok. Student Activity 1. Open graphics of your choice and Tween it with a help of motion guide. Demonstrate shape tweening, Motion Twining and Text morphing with different Images/graphics. 2. Demonstrates how animation is created by using the motion guide function in Flash Explain how to add a motion guide by selecting a key frame and drawing it in. Summary A symbol is a reusable object used/created in Flash. A symbol can be reused throughout your movie or imported and used in other movies. There are three types of symbols: Graphics, Buttons, and Movie clips. There are three types of symbols; Movie clip symbols, Graphic symbols and Button symbols. Graphic symbols are reusable static images that are used mainly to create animations. Any drawn vector/plain text/imported bitmap (photo), or combinations of these, can be converted into a single controllable object: as a graphic symbol. If you need to manage graphics, images (such as JPEG, PNG, GIF images) or pictures of any kind, or handle animation in your programs, including writing games, drawing 3D or 2D pictures, you might like to consider the graphics libraries, 3D engines, 2D engines, image manipulation source code (etc) listed here. Some of these are actually production code, used in commercial products. Motion Guide is nothing but moving your symbol in a predefined path such as curves or circles. A Motion Guide layer is similar to a

39 Motion Tween but the guide layer gives you more flexibility in that the animation will follow the line drawn in the Guide Layer. Shape Tweening allows us to transform or change or give animations to our concerned shape. Keywords Symbol: A symbol is a reusable object used/created in Flash. A symbol can be reused throughout your movie or imported and used in other movies. Movie Clip Symbols: A movie clip symbol is used to create reusable pieces of animation. Graphic Symbols: Graphic symbols are reusable static images that are used mainly to create animations. Button Symbols: Button symbols are used to create interactive buttons in the movie that respond to mouse clicks, rollovers or other actions. Motion Guide Layer: A Motion Guide layer is similar to a Motion Tween but the guide layer gives you more flexibility in that the animation will follow the line drawn in the Guide Layer. Shape Tweening: Shape Tweening allows us to transform or change or give animations to our concerned shape. Symbols and Layers Review Questions 1. What is symbol? Explain the three types of symbols. 2. What are different tools in symbol? Briefly describe the Flash Tools. 3. What is a use of library? Explain Mono 2D animation library. 4. Briefly discuss how we work with Layers. 5. What is motion guide? Is Motion Guide layer is similar to a Motion Tween? 6. Shortly explain the following: (a) Motion Tweening (b) Shape Tweening Further Readings Sandro Corsaro, Richard M Sherman, Clifford J. Parrott, Hollywood 2D Digital Animation: The New Flash Production Revolution, Cengage Learning. Bill Davis, GardnerÊs Guide to Creating 2D Animation in a Small Studio, Garth Gardner Co. Steve Roberts, Character Animation: 2D Skills for Better 3D, Elsevier.

40 Unit 3 Frame and Animation Frame and Animation Unit Structure Introduction Frame-by-frame Animation Frames and Keyframes Keyframes Frames and Rates Making Animation Walk Cycles Summary Keywords Review Questions Further Readings Learning Objectives At the conclusion of this unit, you will be able to: Explain the concept of frame by frame animation Discuss the key-frame animation Understand frames and rates Familiarize yourself with the making of animation and walk cycle Introduction In unit 2 we have learnt the concept symbols and layers. We have also learnt the library, insert layers and motion guide. Now, in this unit we will study the frame and animation. We will also study the concepts related to frame rate and animation making. The pictures made with 2D animation software are called frames, which are much like the frames of a traditional, non-computer-based movie. A movie is created by painting a series of virtual frames. Each frame displays graphical objects representing characters or scenery. These objects can move slightly from one frame to the next, which produces the illusion of motion when the frames are shown rapidly in sequence. Many 2D animation programs save time by computing frames. With such programs, only the frames where a new action starts or ends are drawn rather than every frame. These frames are called key frames. The calculation the software uses to compute the frames in between the key frames is called interpolation. Frame-by-frame Animation Frame by frame animation is any type of animation where the movement is created, manipulated and controlled frame by frame. Frame-by-frame animation is more commonly known as stop-motion animation. It is achieved by manipulating a physical object and making it appear to move on its own by shooting one frame, manipulating the object, then shooting another frame, and so on.

41 2D Animation For example, stop motion animation is frame by frame animation, since you must move a physical object, take a picture to capture the frame, and then move the object again before taking the next picture. Hand drawn animation where a new drawing is created for each frame (or every other frame) is frame by frame animation. Another famous example of frame-by-frame animation is the 1933 film, King Kong. The giant ape is shot in frame-by-frame animation style, making it seem as though he is moving on his own. Other forms of animation fall under the category of frame-by-frame animation as well, such as cel animation and object animation. You can draw the object yourself using Flashs drawing tools, or you can display individual imported bitmap images, one after another, just like an animated GIF. Digital animation such as Flash animation that uses tweening is not frame be frame since the way tweening works is you pick a beginning and end frame for any particular movement and the computer fills in all the movement for the frames in between the beginning and end frames you've chosen (thus the term, "tweening"). To Draw a Frame by Frame Animation Create a New Movie You have to insert a bunch of key frames. This is most easily accomplished by using the key frame shortcut, F6. On a Mac, you may have to set the F6 shortcut in Edit-> Shortcuts. 1. Click on Frame 1 and hit F6 a whole bunch of times You will get a bunch of blank frames. You will only get a black dot key frame when you put something on the screen. 2. Next you will turn on Onion Skinning. This will allow you to see previous frames so you can keep your animation fluid. 3. Click the Onion Skin button Onion Skin markers will appear above your frames. They look kind of like bookends. 4. Drag the Onion Skin markers to cover five frames. 5. Click in Frame 1 and draw something in the movie.

42 6. On the keyboard, hit the right carrot (>) The playback head will move one frame. Notice that you can still sort of see frame ones image. This is the Onion Skins working. 7. Draw a slightly different image on Frame 2 8. Repeat Steps 6 and 7. Frame and Animation Frames and Keyframes A frame action is a task that is automatically triggered when the playback head reaches a certain frame. First, a frame action needs a keyframe to attach to. You are supposed to take care when placing your keyframes. When the playback head reaches the keyframe holding a frame action, it will immediately play the action. The frame rate, measured in frames per second (fps) is the speed at which the animation plays. By default, Flash animations play at a rate of 12 fps, which is ideal for web animation. Sometimes, however, it is desirable to change the fps rate. For example, if you will change the frame rate to 36 frames per second, it will make the tire appear to bounce more rapidly. Adding a Frame Action Adding a Frame action is easy. Following are the basic steps required when adding a frame action. 1. Add or select a keyframe 2. Open the Actions Palette (WINDOW-> ACTION) or (CTRL/CMD + ALT + A) or (DOUBLE CLICK ON THE KEYFRAME) The Frame Actions Palette should open. Basic Actions is mostly used by the users. Most of the other actions are for using a basic programming language called action scripting.

43 2D Animation 3. Open the Basic Actions by clicking on the plus sign. 4. Choose an action. You will notice that coding for your action was added to the right side of the Frame Action Palette. You may also notice that a small "a" appeared in your keyframe. You can add more than one frame action to a frame. Removing or Editing a Frame Action You can remove an action by clicking its keyframe and deleting the action from the display window on the Action Panel. Now we will go through an exercise to use the stop action to keep a movie from looping.

44 Using Frame Actions The stop action can be used to halt the movie while you are waiting for a user to make a choice about what button they want to click or what they are going to do next. 1. Build a small, twenty-frame movie. 2. Hit F12 to test the movie. Notice that it loops. 3. Place a stop action on the last frame of the movie. The stop action will keep halt the playback head when it reaches frame 20, thus keeping the movie from looping. 4. Add a new layer and name it Actions. Remember that frame actions should get their own top layer. 5. On the Actions Layer, add a keyframe (F6) on frame 20 Frame and Animation 6. Open the Actions Palette. Open the Basic Actions by clicking on the plus sign. (WINDOW-> ACTION) 7. Choose Stop. You will notice that coding for your action was added to the right side of the Frame Action Palette.

45 2D Animation 8. Press F12 to test your movie. It should stop at the end! Keyframes Key-frame animation animates the value of a target property. It creates a transition among its target values over its Duration. However, a From/To/By animation creates a transition between two values, but a single key-frame animation can create transitions among any number of target values. Unlike a From/To/By animation, a key-frame animation has no From, To, or By properties with which to set its target values. Instead, you describe a key-frame animation's target values by using key-frame objects. To specify the animation's target values, you create key-frame objects and add them to the animation's Key Frames property. When the animation runs, it transitions between the frames you specified. In addition to supporting multiple target values, some key-frame methods even support multiple interpolation methods. An animation's interpolation method defines how it transitions from one value to the next. There are three types of interpolations: discrete, linear, and splined. To animate with a key-frame animation, you complete the following steps: Declare the animation and specify its Duration, as you would for a From/To/By animation. For each target value, create a key frame of the appropriate type, set its value and Key Time, and add it to the animation's Key frames collection. Associate the animation with a property, as you would with a From/To/By animation. In the Timeline, a keyframe is a frame with a dot in it. A keyframe is a frame where a change begins or ends. 1. A simple motion requires two keyframes: One at the start; one at the end. There can be any number of regular frames in between two keyframes 2. Make sure the object in the first keyframe is already a symbol BEFORE you add any more keyframes 3. To add a new keyframe: Insert menu > Timeline > Keyframe (or press F6) 4. To add regular frames after the first keyframe: Insert menu >Timeline > Frame (or press F5) 5. Click the first keyframe. Move the symbol to its starting position 6. Click the second keyframe. Move the symbol to its ending position. Note: Adjust the timing: Add or remove regular frames within the sequence to make the motion longer or shorter. (To remove frames: Shift-F5.) Frames and Rates A frame is a snapshot of what you are currently depicting such as a blue circle on a light gray background:

46 Frame and Animation A single frame by itself does not really convey much. Get enough of these frames (with some slight changes in what you are depecting) and start cycling through them: The end result is an animation. There are two things that determine how well your animation works - the number of frames and how quickly you change these frames. Number of Frames Creating the illusion of motion requires a transition between two points. How jerky or smooth the transition depends partly on how many intermediate points you define. Let's say I have an example of a circle scaling and shifting over a period of time: You have a starting point, an ending point, and a few intermediate points where the circle's scaling and shifting are defined. This entire animation is only five frames long. To contrast that, let's add more intermediate frames to define this animation:

47 2D Animation This time around, more of your circle scaling and shifting is explicitly defined. There are around 20 frames that make up our animation this time. Based on just what I've provided, which one would you think looks smoother when played back? This depends, as you will see in the next section, on the frame rate. If you were to ignore the frame rate for a moment, with both animations played back at the same frame rate, the one with more intermediate frames would look smoother because there are more points defined. Frame Rate The next thing we will look at is the frame rate. The frame rate determines how many frames are played in a given second of time. This value is measured in frames per seconds or fps for short: Frames Per Second (FPS) FPS stands for frames per second in which the measurement of a video clip contains number of image frames within one second. In general, if you want to store all video at 30 frames per second (30 FPS) as opposed to 1 FPS, then that requires 30 times the amount of storage. A unit of measurement used when dealing with video. Each frame is a picture. The frames per second indicate how many times the picture will be changed per second. When using a web-camera, the transmission rate is usually 15 frames per second. TVs use frames per second, providing a very good quality picture. The higher your fps the faster your animation will precede to completion because you are running through all of your frames at a faster pace. Likewise, the slower your fps, the slower your animation will proceed to completion. You saw this much in the Flash example above where, when you slowed your frame rate down greatly, the animation looked really jerky. The frame rate you will use determines largely on what you are creating. In general, I like to use 24 as a good number for the frames per second for the content that I create. This means that every second of animation requires 24 frames. In the more recent versions of Flash, the default frame rate is set to 24 as well. If you remember long ago, Flash used to be 12 (or was it 15?).

48 Flash Player FPS, or frames per second, is the setting in Flash that dictates to the Flash player how fast to play back a movie. The default setting is 12, meaning that each frame is displayed on-screen for one twelfth of a second. FPS can be set from 0.01 to 120, causing frames to be displayed at the rate of as little as 1 frame every hundred seconds to as many as 120 frames in a single second in theory, anyway. In reality, most experienced Flash developers will at some point have created a movie on their sweet developer box and then cringed as they watched it trickle along on a p90 or a the problem is that their own machine plays the movie back at a different frame rate than the slower machine. Why? because in Flash the FPS setting doesn't actually stay the same between different machines. FPS is like a speed limit: you can tell a movie not to play faster than the specified FPS, and all machines will obey, but you can't tell a movie to stay above a certain frame rate. If a machine doesn't have the processing power to render the frames at the specified FPS, the movie will simply run more slowly. So, the question for developers has always been how much slower? Frame and Animation Making Animation The process of using the tweening tools in Macromedia Flash Basic 8 and Macromedia Flash Professional 8. Tweening is the process of animating a graphic by setting starting and ending values for its properties and letting Flash calculate the values in between. The term tween comes from "in between". A simple example of a tween would be to place a graphic at the top of the Stage and then add several frames to the Timeline and move the graphic to the bottom of the Stage in the last frame. By letting Flash fill in the position values for the frames in between, you can easily create a smooth animation of the graphic from the top of the Stage to the bottom. Flash Professional also lets you exercise fine control over how the tweened property values are calculated, so you can easily create more complex animations. By using the Custom Ease In/Ease Out window, you can control the speed at which the changes to properties are applied at the beginning, middle, and end of your animations. Careful use of this window can yield visually compelling results. Walk Cycles The walk cycle is one of the most important learning concepts in animation; and also one of the most technically difficult, because it requires so much attention to the movement of opposing limbs. There are many types of walk cycles, and you can vary the motion to match your character or his/her mood; you can do bouncy walks, shuffling walks, casual slouches. But the first and simplest is the standard upright walk, viewed from the side; and that's what we're going to attack in simplified form today.

49 2D Animation You can cover the cycle of a full stride in 8 frames, as demonstrated by the above walk cycle; the Preston Blair walk cycle, one of the most common reference images in cartoon animation. Student Activity 1. Draw a circle and convert it into a polygon and also change its color by adding frames. 2. True or false (a) Digital animation such as Flash animation that uses tweening is not frame is frame. (b) Key-frame animation does not animate the value of a target property. (c) The motion guide determines how many frames are played in a given second of time. (d) There are three types of interpolations: discrete, linear, and splined. (e) A 24 frame animation with a frame rate of 12 frames per second will take around 2 seconds to finish. (f) Tweening is the process of animating a graphic by setting starting and ending values for its properties and letting Flash calculate the values in between. Summary The pictures made with 2D animation software are called frames, which are much like the frames of a traditional, non-computer-based movie. A movie is created by painting a series of virtual frames. Many 2D animation programs save time by computing frames. With such programs, only the frames where a new action starts or ends are drawn rather than every frame. These frames are called key frames. Frame by frame animation is any type of animation where the movement is created, manipulated and controlled frame by frame. Frame-by-frame animation is more commonly known as stop-motion animation. It is achieved by manipulating a physical object and making it appear to move on its own by shooting one frame, manipulating the object, then shooting another frame, and so on. Digital animation such as Flash animation that uses tweening is not frame be frame since the way tweening works is you pick a beginning and end frame for any particular movement and the computer fills in all the movement for the frames in between the beginning and end frames you've chosen (thus the term, "tweening"). Key-frame animation animates the value of a target property. It creates a transition among its target values over its Duration. However, a From/To/By animation creates a transition between two values, but a single key-frame animation can create transitions among any number of target values. FPS stands for frames per second in which the measurement of a video clip contains number of image frames within one second. In general, if you want to store all video at 30 frames per second (30 FPS) as opposed to 1 FPS, then that requires 30 times the amount of storage. FPS, or frames per second, is the setting in Flash that dictates to the Flash player how fast to play back a movie. The default setting is 12, meaning that each frame is displayed on-screen for one twelfth of a second. The process of using the tweening tools in Macromedia Flash Basic 8 and Macromedia Flash Professional 8. Tweening is the process of animating a graphic by setting starting and ending values for its properties and letting Flash calculate the values in between. The term tween comes from "in between".

50 Keywords Frame by Frame Animation: Frame by frame animation is any type of animation where the movement is created, manipulated and controlled frame by frame. Interpolation: The calculation the software uses to compute the frames in between the key frames is called interpolation. Key-frame Animation: Key-frame animation animates the value of a target property. It creates a transition among its target values over its duration. FPS: FPS stands for frames per second in which the measurement of a video clip contains number of image frames within one second. Walk Cycle: The walk cycle is one of the most important learning concepts in animation and also one of the most technically difficult, because it requires so much attention to the movement of opposing limbs. Frame and Animation Review Questions 1. Draw and explain Frame by frame animation and create a new movie. 2. What is Keyframe animation? Write down the steps to animate with a keyframe animation. 3. Briefly explain the frame rate. What is Frames per Second? 4. Define walk cycle. Explain its usage. 5. Create a Symbol in Flash and add frames and key frames in it. Further Readings Sandro Corsaro, Richard M Sherman, Clifford J. Parrott, Hollywood 2D Digital Animation: The New Flash Production Revolution, Cengage Learning. Bill Davis, GardnerÊs Guide to Creating 2D Animation in a Small Studio, Garth Gardner Co. Steve Roberts, Character Animation: 2D Skills for Better 3D, Elsevier.

51 Unit 4 Bells and Whistles Bells and Whistles Unit Structure Introduction Scripting ActionScript Drawing with ActionScript Create a Form with Conditional Logic and Send Data Summary Keywords Review Questions Further Readings Learning Objectives At the conclusion of this unit, you will be able to: Explain the concept of scripting Discuss ActionScript and its features Familiarize yourself with the drawing with ActionScript Understand how to create a form with conditional logic and send data Introduction In unit 3 we have learnt the concept of frame and animation. We have also learned the concepts related to frame rate and animation making. Now, in this unit we will focus on the bells and whistles. We will also study the concepts related to scripting. Bells and whistles is technique to give the effect of sound in animated objects. This is a tool through which we can give lots of effect in the objects. It is mainly used in animated movie. Scripting Scripting is a means to communicate with a program; which can be used to tell Flash what to do and to ask Flash what is happening as a movie runs. This two-way communication would create interactive movies. If you want to do anything interactive in Flash, you'll need to use ActionScript. Flash Professional also lets you exercise fine control over how the tweened property values are calculated, so you can easily create more complex animations. It allows you to execute different actions in a movie depending on what a user does or on what frame of the movie is being played. The biggest leap in the abilities of ActionScript occurred when Flash 5 was released. Flash 6 is the next version, and while the additions to ActionScript aren't as grand in this version, they do round out ActionScript into a full-fledged scripting language. By using the Custom Ease In/Ease Out window, you can control the speed at which the changes to properties are applied at the beginning, middle, and end of your animations. Careful use of this window can yield visually compelling results.

52 2D Animation ActionScript ActionScript is an object-oriented scripting language that offers control over how your Flash content plays. Following are some features of actionscript; ActionScript 2.0 comprises a core set of language elements that make it easier to develop object-oriented programs. ActionScript is the scripting language Flash uses to control its movies and the objects within those movies. It is the scripting language of Macromedia Flash. ActionScript is the Object-Oriented Programming (OOP) language you use in your flash movies to add interactivity to your applications, whether it may be a simple animation or a complex enterprise rich internet application. Set up your Workspace First, youêll open the start file for the lesson and set up your workspace to use an optimal layout: 1. To open your start file, in Flash select File > Open and navigate to the file: (a) In Windows, browse to boot drive\program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\ActionScript\Write Scripts and double-click scripts_start.fla. (b) On the Macintosh, browse to Macintosh HD/Applications/ Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/ ActionScript/Write Scripts and double-click scripts_start.fla. 2. Select File > Save As and save the document with a new name, in the same folder, to preserve the original start file. 3. Select Window > Workspace Layout > Default to set up your workspace for taking lessons. The Write Scripts folder contains completed versions of the tutorial FLA files for your reference. Let us understand few basics about writing scripts with ActionScript, accomplish or apply the following tasks; Name instances following recommended practices. Initialize a document. Apply ActionScript syntax. Locate ActionScript reference documentation. Add comments to ActionScript. Write a function. Copy and modify a function. Check syntax and test your application. Drawing with ActionScript Flash gives the great possibility to create graphics dynamically, that is, while your movie is running, via ActionScript. So, not everything has to be drawn manually. First of all, it reduces the file size of your Flash movie. Second, it opens up an infinite number of possibilities for greater interactivity, creativity and more. And, best of all, it is very easy to learn. So, letês start with the basics of drawing with ActionScript.

53 Drawing Straight Lines Open a new Flash document. Call the first layer actions, ActionScript, or whatever you like. Click in the first (and only) keyframe of this layer and press F9 (PC) or ALT+F9 (Mac) to open up the Actions panel. Click in the right side of the panel and enter the following code: _root.linestyle(3, 0x0000FF, 100); _root.lineto(120, 75); Test your movie (CTRL+ENTER for PC or Command+ENTER for Mac users). You should see a line appear in your Flash movie, looking exactly like the one on the image below: Bells and Whistles Now, letês explain the code we just entered. The first line, _root.linestyle(3, 0x0000FF, 100); Tells Flash to set a style for drawing. Every time you want to draw with ActionScript, the first thing you have to do is tell Flash how to draw. So, the command linestyle does exactly that, via the three parameters which follow between the parentheses. The first one is line thickness. The value can be any number between 0 and 100, with 0 being the thinnest and 100 the thickest possible line. I chose the value 3 arbitrarily for this exercise. The next parameter tells Flash what color the line should be. This is expressed by a hexadecimal value, with the characters 0x preceding the value. The 0x tells Flash that what follows is a hexadecimal value if we omitted it, Flash would think it was some kind of variable. So, how can you know a specific colorês hexadecimal code? Easy, Go to the Tools panel, to the Colors section, click a color (doesnêt matter if itês line or fill color), hover with the mouse over the color of your choice and see its hexadecimal code (see image below).

54 2D Animation So, you could say, that instead of writing the # before the colorês code, in ActionScript, we write 0x. The last parameter defines the alpha property of the line its transparency. This is a percentage value: if you enter 0, your line will be completely transparent invisible on the stage. 100 mean that the line is 100% opaque. You can even omit this parameter, like this: _root.linestyle(3, 0x0000FF); If there is no alpha parameter at all, Flash uses the default value, which is 100. The _root keyword at the beginning of the line means that you are setting the linestyle for the root timeline, the one you are working on right now (that means the Flash movie itself). You can use the drawing commands in ActionScripts either with root or with any movie clip (ex.: mymovieclip.linestyle). The second line, _root.lineto(120, 75); actually draws a line. The lineto command must always come after you have set the properties for drawing with the linestyle command. This time, the parameters between the parenthesis are coordinates (in pixels) on our stage. The first is x, the second is y. The zero-point of FlashÊs coordinate system is situated in the top left corner of the stage. The positive x coordinates are to the right of it and the positive y coordinates are below it. See the image below for explanation. So the piece of code lineto(120, 75) draws a line from (0, 0) to (120, 75). See this on the image below.

55 If you wanted to draw a horizontal line for example, you would add this line of code to our existing ActionScript (shown in bold): _root.linestyle(3, 0x0000FF, 100); _root.lineto(120, 75); _root.lineto(200, 75); Test your movie. You will see a horizontal line starting exactly where the last one ended (120, 75) and with (200, 75) as finishing point. But what if you wanted to start drawing somewhere else? And why did the first line started from (0,0) you may ask? Because this is the starting default point for drawing if you havenêt specified a different one. In order to start drawing from a point other than (0,0) or to continue drawing from another point, you must use the moveto ActionScript method. Add this to your code: _root.linestyle(3, 0x0000FF, 100); _root.lineto(120, 75); _root.lineto(200, 75); _root.moveto(300, 150); _root.lineto(180, 240); You moved the beginning point of next line to (300, 150) and then you draw that line until the point (180, 240). Bells and Whistles You can change the properties of your lines whenever you want. Add this code to the existing one and see it: _root.linestyle(3, 0x0000FF, 100); _root.lineto(120, 75); _root.linestyle(0, 0xC71D1F, 100); _root.lineto(200, 75); _root.moveto(300, 150); _root.linestyle(15, 0x25A988, 60); _root.lineto(180, 240); Try drawing a square or a triangle. It is really easy. Now that you know how to draw straight lines, letês see about curves.

56 2D Animation Drawing Curves Save the previous document and open a new one. Call the layer actions, click into its first keyframe and open the Actions panel. Write in this code: _root.linestyle(0, 0x000000, 100); _root.moveto(100,100); _root.curveto(300, 100, 300, 300); Test your movie, you should see a curve like the one in the image below appear. As with straight lines, you must first define a style, which is what the first line of code serves for. The second line moves the drawing start position to (100, 100). I could have omitted that part, but I just didnêt want to start in (0, 0). You can choose to erase this line or enter any other value if you want to. The third line draws a curve. Its generic syntax is as follows: _root.curveto(controlx, controly, anchorx, anchory); where the last two parameters (anchorx and anchory) are the coordinates of the finishing point of our curve. The first two parameters (controlx and controly) are the coordinates of the point to which our curve flexes itself to. It acts like a gravitational pull point toward which the curve is being attracted to. I marked the control point and the imaginary pulling force on the image below so you can easier understand how this works. I also made the curve thicker so it can be seen easier. Experiment with different control point coordinates to see how your curve behaves in response. You can also add a line to command after that, Flash will just continue to draw with straight lines.

57 Create a Form with Conditional Logic and Send Data You can create a form with conditional logic that allows the SWF file to respond to user interaction and send the form data from the SWF file to an external source. In order to write a script with conditional logic and send data we should complete the following tasks: Add an input text field to a document. Create a button symbol. Add a stop ( ) action. Write a script that validates the form with conditional logic. Pass data out of a SWF file. Write a function. First, youêll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons. 1. To open your start file, in Flash select File > Open and navigate to the file: (a) In Windows, browse to boot drive\program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\ActionScript\Create a Form and double-click simpleform_start.fla. (b) On the Macintosh, browse to Macintosh HD/Applications/ Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/ ActionScript/Create a Form and double-click simpleform_start.fla. 2. Select File > Save As and save the document with a new name, in the same folder, to preserve the original start file. 3. Select Window > Workspace Layout > Default to set up your workspace for taking lessons. 4. If necessary, drag the lower edge of the timeline (Window > Timeline) down to enlarge the timeline view. Bells and Whistles Add an Input Text Field to Collect Form Data YouÊll start by inserting a text field in your document in which viewers can enter data. You will also name the text field so you can later reference the text field as you use ActionScript in your Flash application. 1. Click in the workspace, away from objects on the Stage, so that no objects are selected. 2. In the Tools panel, select the Text tool. 3. In the Property inspector, do the following to set text attributes: (a) Select Input Text from the Text Type pop-up menu. (b) Select _sans from the Font pop-up menu. (c) Enter 10 in the Font Size text box. (d) Click the text color box and select a shade of dark blue. (e) Verify that Align Left is selected. (f) Verify that Single Line is selected in the Line Type pop-up menu. 4. In the Timeline, select Frame 1 of the Input Text layer.

58 2D Animation 5. On the Stage, drag the Text tool to create an input text field to the right of the text. 6. If necessary, use the Selection tool to drag the text field or use the arrows keys to adjust the position. 7. With the input text field still selected, in the Property inspector, type url_txt in the Instance Name text box. YouÊll refer to the instance name later when you add ActionScript. Add a Submit Button to the Form The Library panel contains a Submit button symbol that you will add to the form. 1. From the Library panel (Window > Library), drag the Submit button to the Stage and place it over the SubmitURL guide. 2. Drag the button or use the arrows keys to adjust the position, if necessary. 3. In the Property inspector, type submit_btn in the Instance Name text box. Add an Error Message YouÊll add a message to display if the user clicks the Submit button before entering data. 1. In the Timeline, with the Branding layer selected, click Insert Layer and name the layer Dialog Boxes. 2. Select Frame 5 of the Dialog Boxes layer. Right-click (Windows) or Control-click (Macintosh) the selected layer and select Insert Blank Keyframe from the context menu. 3. From the Library panel, drag the Dialog Box-error movie clip to the center of the Stage. 4. In the Timeline, select Frame 5 of the Buttons layer.

59 5. Drag the Try Again Button symbol from the Library panel to the Stage, placing the button below the error message text. Bells and Whistles 6. With the button still selected, in the Property inspector, enter tryagain_btn in the Instance Name text box. Add a Confirmation Message Next, youêll add a message to display when the user submits an entry in the text field. 1. In the Dialog Boxes layer, select Frame 10. Right-click (Windows) or Control-click (Macintosh) the selected frame and select Insert Blank Keyframe from the context menu. 2. From the Library panel, drag the Dialog Box-confirm movie clip to the center of the Stage. 3. Close the Library panel. Add a Stop ( ) Action When a Flash application loads in Flash Player, it automatically plays in a continuous loop. You use ActionScript to control play head movement in a timeline. You will add a stop() action in the first frame of your application so the user can make an entry in the input text field. 1. In the Timeline, with the Input Text layer selected, add a new layer and name it Actions. 2. Select Frame 1 of the Actions layer. 3. In the Actions panel (Window > Actions), verify that Frame 1 is selected.

60 2D Animation 4. Click in the Script pane of the Actions panel, and type the following comment: // Stops the playhead at Frame 1. Press Enter (Windows) or Return (Macintosh). 5. Type stop ( ); to add the stop action. Add Frame Labels for Navigation When the viewer presses the Submit button, you want Flash to jump to either the error message or the confirmation message, depending on what is entered in the text field. Labeling a frame helps you reference it in ActionScript easily. This is helpful for sending the playhead to a specific frame. Next, youêll add frame labels to help you navigate your Flash application. 1. Add a keyframe (Insert > Timeline > Keyframe) to Frame 5 of the Actions layer. 2. In the Property inspector, type error in the Frame Label text box. Press Enter (Windows) or Return (Macintosh). The label text and a flag appear in Frame 5 of the Timeline. 3. Add a keyframe to Frame 10 of the Actions layer. In the Property inspector, type confirm in the Frame Label text box. Press Enter or Return. Add Conditional Logic for the Submit Button With ActionScript, you can have Flash compare information and take action based on criteria you specify. In this example, youêll add ActionScript for Flash to take one action if the user enters no data in the text field, and a different action if the user does enter data.

61 1. Select Frame 1 of the Actions layer. In the Script pane, place the insertion point after the stop(); code. Press Enter (Windows) or Return (Macintosh). 2. Type the following comment: // Adds conditional logic for the Submit button that // validates user input. Press Enter or Return. 3. In the Actions panel, click Insert a Target Path, located at the top of the panel. 4. In the Insert Target Path dialog box, verify that Relative is selected. Click submit_btn on the hierarchical tree, and click OK. 5. In the Script pane, type a period (.) after submit_btn, and then type onrelease. 6. With the insertion point after onrelease, type = function (){} in the Script pane. 7. Place the insertion point between the curly braces and press Enter or Return, and then type if (url_txt.text == null url_txt.text == ""){ in the Script pane. The parallel lines are equivalent to logical or in ActionScript. 8. With the insertion point still inside the curly braces, press Enter or Return. 9. Type gotoandstop("error"); in the Script pane. Press Enter or Return. 10. Place the insertion point after the curly brace and type else{ in the Script pane. Press Enter or Return. 11. Type gotoandstop("confirm") in the Script pane. Press Enter or Return, and type }, and then press Enter or Return again and type };. Your script should appear as follows: // Stops the playhead at Frame 1. Stop ( ); // Adds conditional logic for the Submit button that // validates user input. this.submit_btn.onrelease = function(){ if (url_txt.text == null url_txt.text == ){ gotoandstop("error"); } else { gotoandstop("confirm") } }; Bells and Whistles Pass Data Out of a SWF File You can send data from a Flash application in various ways for example, in this lesson you send data to a web server to load a web page in the browser. After the else statement, youêll add the ActionScript to have Flash go to the URL the viewer enters in the input text field. 1. In the Script pane, place the insertion point in front of the line that reads gotoandstop("confirm"). 2. In the Actions toolbox, select Global Functions > Browser/Network and doubleclick geturl. 3. With the insertion point between the geturl() parentheses, type " to specify the data that should pass from the SWF file. (Do not leave spaces in the code.) Your script should look like the following: stop ( ); this.submit_btn.onrelease = function () { if (url_txt.text == null url_txt.text == ) { gotoandstop("error"); } else { geturl (" gotoandstop("confirm") } }; Write a Function for the Try Again Button Test your SWF File A function is a script that you can use repeatedly to perform a specific task. You can pass parameters to a function, and it can return a value. In this example, when the user clicks the Try Again button, a function runs that returns the playhead to Frame 1. YouÊll write that function now. In this script, youêll type the frame number, because you did not label Frame In the Timeline, select Frame 5 of the Actions layer.

62 2D Animation 2. In the Script pane, type the following comment: // button function returns user to Frame 1. Press Enter (Windows) or Return (Macintosh). 3. Type tryagain_btn.onrelease = function(){, and then press Enter or Return. 4. Type gotoandstop(1);, and then press Enter or Return and type } to complete the script. YouÊll test your document by entering a URL and checking whether it works as expected. 1. Select Control > Test Movie. 2. When the SWF file appears, click Submit before typing anything in the input text field. The error message appears. 3. Click Try Again, and then type the URL of a valid website in the input text field. 4. Click Submit. Your default browser opens the web page. Student Activity Flash contains many predefined classes, such as the Movie Clip class, the Array class, the Color class, and the Check Box class. Show how to create and modify classes. Summary Bells and whistles is technique to give the effect of sound in animated objects.this is a tool through which we can give lots of effect in the objects.it is mainly used in animated movie. Scripting is a means to communicate with a program; which can be used to tell Flash what to do and to ask Flash ActionScript is an object-oriented scripting language that offers control over how your Flash content plays. Following are some features of ActionScript; ActionScript 2.0 comprises a core set of language elements that make it easier to develop object-oriented programs, ActionScript is the scripting language Flash uses to control its movies and the objects within those movies. It is the scripting language of Macromedia Flash and ActionScript is the Object-Oriented Programming (OOP) language you use in your flash movies to add interactivity to your applications, whether it may be a simple animation or a complex enterprise rich internet application what is happening as a movie runs. This two-way communication would create interactive movies. Flash gives the great possibility to create graphics dynamically, that is, while your movie is running, via ActionScript. So, not everything has to be drawn manually. First of all, it reduces the file size of your Flash movie. When the viewer presses the Submit button, you want Flash to jump to either the error message or the confirmation message, depending on what is entered in the text field. With ActionScript, you can have Flash compare information and take action based on criteria you specify. In this example, youêll add ActionScript for Flash to take one action if the user enters no data in the text field, and a different action if the user does enter data. Keywords Scripting: Scripting is a means to communicate with a program; which can be used to tell Flash what to do and to ask Flash what is happening as a movie runs. ActionScript: ActionScript is an object-oriented scripting language that offers control over how your Flash content plays. Flash: Flash gives the great possibility to create graphics dynamically, that is, while your movie is running, via ActionScript.

63 Review Questions 1. What is scripting? 2. This two-way communication would create interactive movies. Why is it said that scripting is a two way communication? 3. What do you understand by ActionScript? Write down the features of ActionScript. 4. Discuss the basics of drawing with ActionScript. Bells and Whistles Further Readings Sandro Corsaro, Richard M Sherman, Clifford J. Parrott, Hollywood 2D Digital Animation: The New Flash Production Revolution, Cengage Learning. Bill Davis, GardnerÊs Guide to Creating 2D Animation in a Small Studio, Garth Gardner Co. Steve Roberts, Character Animation: 2D Skills for Better 3D, Elsevier.

64 Unit 5 Making a Splash Making a Splash Unit Structure Introduction Making a Splash Making Interactive Buttons Summary Keywords Review Questions Further Readings Learning Objectives At the conclusion of this unit, you will be able to: Explain the concept of making a splash Provide insight into making interactive buttons Introduction In unit 4 we have learnt the concept of scripting and drawing with Action Script. We have also created a form with conditional logic and send data. Now, in this unit we will focus on making splash. We will also study the concepts related to making interactive buttons. Another great thing about working in Flash is that in addition to creating movies and animations, it imports almost any graphic or sound format you throw at it, including Photoshop, Microsoft WMF, and even AutoCAD DXF files. Many of the images, including those created in FreeHand and Illustrator, are fully editable within the application. And once you've completed your work, you have a wide variety of export formats, vector or bitmap, to choose from. You can even save them as a QuickTime file. Making a Splash Flash is an enormously versatile application, filling three of the major categories of computer software. First, it's a multimedia authoring program that permits the user to quickly create interactive movies. It's also a powerful animation tool that you can use to create frame-by-frame animation, or tweened animation, where the computer generates the animation frames. Finally, it's a drawing program, much like FreeHand or Illustrator. The reason that Flash can create mind-blowing animations, movies, and graphics is because it's a vector-based application, and vectors, as you know, are much smaller than bitmaps. In fact, a vector is really a mathematical equation that tells that old computer on your desk how to render the image on your screen. Due to the small size of the information needed to render the image, the vector graphic is ideally suited for the Web. Let us understand how to create an animated splash screen for a Web site that displays a moving logo, and then opens a Web page in the browser window.

65 2D Animation The basic steps are: Import your logo from a vector drawing program. Define an animation sequence to move, rotate, and transform your logo. Add actionscript commands to jump from your Flash movie to a Web page. Publish your movie, and integrate it into your Web site. Create an Animated Logo 1. With a logo saved to either Freehand or Adobe Illustrator's *.ai file format (an easy export for DRAW users, open Flash 5 and select File, Import. Navigate to your *.ai file, and import it into your Flash movie. As you do, the logo will appear in Frame 1 of your movie (the numbered frames in the Timeline at the top of the movie window control your animation we'll use them shortly). Click and drag on your logo to locate it in the upper left corner of the stage (the white area where frame content is defined). 2. Click in frame 20 in the Timeline, and press the F6 function key to duplicate your logo 20 frames later in your movie. Drag the copy of the logo to the lower right corner of the stage. Right-click on the logo in frame 20, and choose Scale from the context menu. Drag on a corner handle and enlarge your logo. 3. To add a "fade in" effect to the logo, click on Frame 1. Click to select the (smaller) logo in that frame, and choose Window, Panels, Effect to open the Effects panel. Choose Alpha from the drop-down list of effects, and use the slider to set the Alpha (opacity) setting to about 15%. Your logo now has motion, and changes in size and opacity.

66 Making a Splash 4. Now we animate. Click in the Timeline at the top of the stage anywhere between Frame 1 and Frame 20. This selects all the frames but 20 (in Flash 4, it selects all the frames). Hold down your Shift key and click on Frame 20 to select Frames They turn black. Right-click on the selected frames, and choose Create Motion Tween from the context menu. This animates the motion between Frame 1 and Frame Finally, we need to add a bit of Flash's easily generated ActionScript (think JavaScript if that's a help, if not, don't worry we'll generate our snippet of coding with menu options). Click in Frame 20, and choose Window, Actions from the menu. In the Frame Actions window, choose "+", Basic Actions, Stop as shown. You just told Flash not to repeat this movie when it ends.

67 2D Animation 6. Still in the Frame Action window, choose "+", Basic Actions, Add URL. In the parameters area, add the URL that the movie will jump to after it runs. Now you can close the Frame actions window. The little "a" in the timeline in Frame 20 signals that you have added a bit of actionscript to this frame. You're ready to publish your movie and add it to your Web site. Publishing Flash movies presents a number of challenges and options, but the simplest way to do it is to publish the movie as an HTML page with an embedded *.swf shockwave file that can be viewed with Internet Explorer, or Netscape Navigator with the shockwave plug-in. Publish a Flash Movie to HTML 1. First save your file. The folder to which you save your file will determine where your final published movie ends up. Then, choose File, Publish Settings, and choose the Flash (*.swf) and HTML check boxes. 2. Click on the Publish button, and then click on OK. This creates a playable shockwave (*.swf) file, and embeds that file in an HTML page. If you are

68 publishing your HTML page to a Web server, make sure the *.swf file ends up in the same Web folder as the HTML page. 3. You're ready to test your movie. Open the HTML page - the movie will run, stop, and launch your designated Web page. Add a Motion Guide to Animation You can define a path for your logo to travel across the screen. To do this: 1. Click on the label "Layer 1" in the timeline, and choose Insert, Motion Guide. A new, non-displaying layer is generated. 2. Use the Pencil tool in the Flash toolbox (on the left of the screen) to draw a path for your logo to travel along. 3. Resave, and republish your movie. Making a Splash Making Interactive Buttons Adobe Flash is an animation program, but it also agrees to create interactive buttons. When visitors to your site come by, they will be able to roll over buttons that change color or even move in some way when rolling over. Flash allows you to have the most freedom with what your buttons do. Learn a little ActionScript in creating interactive buttons; Step 1: Open Flash, and create a rectangular shape on your stage using one of the shape tools on the toolbar. Step 2: Use the Text tool to write what you want your button to say. Step 3: Select the shape on your stage, and drag it into the Library window to convert it to a symbol. Step 4: Name your new symbol, and select "Button" as your type in the "Convert to Symbol" box. Click "OK." Step 5: Double-click on your newly named button either on the stage or in the Library window. This will bring up a new timeline and a zoomed-in version of your stage.

69 2D Animation Your timeline will have four frames: Up, Over, Down and Hit. They refer to the mouse's position relative to the button. Step 6: Highlight all four of the frames, and press F6. This will copy your button to all four frames. Step 7: Select the "Over" frames, and changes the background color of your button using the colors on the toolbar. Step 8: Press Shift+Enter, and run your mouse over the button. It should change color when the mouse touches it. Step 9: Name your button in the Properties window. Step 10: Add a layer to the timeline by clicking "Add a New Layer" in the bottom-left corner of the timeline. Step 11: Select the first frame, and navigate to "Windows," then "Actions" to open the Actions window. Step 12: Type the following into the Actions window, putting in your link and the name of your button: function Name Of Function(event: Event):void {var request: URL Request = new URL Request("your URL goes here"); navigate To URL(request, "_blank");} Name of Btn.add Event Listener(Mouse Event. CLICK, Name of Function); Step 13: Press Shift+ Enter, and test your movie. Student Activity Fill in the blanks: 1..is an enormously versatile application, filling three of the major categories of computer software. 2. The reason that Flash can create mind-blowing animations, movies, and graphics is because it's a and vectors, as you know, are much smaller than bitmaps. Summary Flash is an enormously versatile application, filling three of the major categories of computer software. First, it's a multimedia authoring program that permits the user to quickly create interactive movies. It's also a powerful animation tool that you can use to create frame-by-frame animation, or tweened animation, where the computer generates the animation frames. Finally, it's a drawing program, much like FreeHand or Illustrator. Adobe Flash is an animation program, but it also agrees to create interactive buttons. When visitors to your site come by, they will be able to roll over buttons that change color or even move in some way when rolling over. Flash allows you to have the most freedom with what your buttons do. Keywords Multimedia Authoring Program: Multimedia authoring program allows the user to quickly create interactive movies. Adobe Flash: Adobe Flash is an animation program, but it also agrees to create interactive buttons.

70 Review Questions 1. What is splash? Discuss the process of making a splash. 2. What are the basic steps of creating an animated splash screen for a Web site? 3. Write short notes on: (a) Publish a Flash Movie to HTML (b) Add a Motion Guide to Animation 4. Adobe Flash is an animation program, but it also agrees to create interactive buttons. Explain. 5. Write down the steps of ActionScript in creating interactive buttons. Making a Splash Further Readings Sandro Corsaro, Richard M Sherman, Clifford J. Parrott, Hollywood 2D Digital Animation: The New Flash Production Revolution, Cengage Learning. Bill Davis, GardnerÊs Guide to Creating 2D Animation in a Small Studio, Garth Gardner Co. Steve Roberts, Character Animation: 2D Skills for Better 3D, Elsevier.

71 Unit 6 Interactive Adventure Interactive Adventure Unit Structure Introduction Interactive Adventure Compiling Objects Summary Keywords Review Questions Further Readings Learning Objectives At the conclusion of this unit, you will be able to: Explain the concept of interactive adventure Understand the compiling objects Introduction In unit 5 we have learnt the concept of making splash. We have also learned the concepts related to making interactive buttons. Now, in this unit we will study the Interactive adventure and compiling objects. Interactive games present and teach at the same time Interactive games make good presentations for introducing lessons, demonstrating concepts or just to engage audiences with. Most are offered free online, and require little more than flash plug-ins. With an LCD projection device or interactive whiteboard, games can be easily presented for a number of teaching and learning purposes. The Disney Animation building features a number of exhibits and interactive activities that will appeal to both kids and adults. Inside the building there are several different areas which may be experienced in any order spend as much or as little time as you wish. On a warm day it's an excellent place to get out of the sun and do something fun at the same time. Interactive Adventure The Courtyard Gallery is the main room, and all of the other attractions are accessed from there. There's a series of projection screens of various shapes and sizes all around the room which continuously feature selections of rough artwork and drawings, as well as fully animated scenes, from many classic Disney animated features. There are padded benches available for those who just want to sit and enjoy the sights and sounds. The Animation Academy is a 15-minute session with a Disney animator who teaches guests to draw a Disney character, such as Mickey Mouse or Pooh. Paper and pencils are provided, and guests may take their artwork home. The Art of Animation Gallery is located at the exit of the Animation Academy (it is also accessible directly from the Courtyard Gallery). This walkthrough exhibit features original concept artwork such as drawings and maquettes for a variety of characters. Sometimes the original concept bears little resemblance to the finished product. In the "Character Close-up" section

72 2D Animation guests may meet and greet various Disney characters. The Animation Screening Room currently features Turtle Talk with Crush. This interactive show opened in July 2005 with a computer-animated version of the surfin' turtle dude from the film "Finding Nemo." Compiling Objects Compiling objects is simply to give the effect on object using programming. LetÊs see the code we're going to compile, and explain it a little. package {import flash.display.movieclip; import flash.text.textfield; public class HelloWorld extends MovieClip {private var text:string = "Hello world!"; public function HelloWorld() {var textbox:textfield = new TextField(); textbox.text = text; textbox.x = 100; textbox = 100; addchild(textbox); }}} Firstly, as you can see, is a package declaration that we were discussing before. When using the Flex SDK (henceforth referred to as mxmlc after the binary you'll be using to compile), all classes need to be a part of a package, even if that package is anonymous. However, you will find many people tend to name their namespaces based on their domain names, only in reverse. For example, many of my class libraries reside in a package named com.chromasplosion. When naming packages as such, the folder hierarchy the classes reside in must match the package names. Next, the package import statements: import flash.display.movieclip; import flash.text.textfield; These statements are what we call import statements. They tell the compiler to include the specified classes so that they are available to our class for use. Next, we'll cover the class declaration, and cover the basics of what a class is. Public class HelloWorld extends MovieClip this line declares a new class named Hello World, which inherits from the MovieClip class. A class is an object oriented programming concept. For lack of a better explanation, a class is a kind of template that you use to create objects. Classes are used to model real world objects and even abstract concepts for use in a software model. For example, consider a house. A house may have many doors and many windows. If you were to model a house using software, you would create a single door class, and a single window class to represent these objects. You would put in the class all aspects of these objects that are common. Considering doors, all doors have a width, height and thickness, and they all open somehow. These are attributes and methods you would model into your class. Classes tend to be unique in a software system; however you can create as many objects of a class as you want. An object that's been created from a class is often called an "instance" of the class. OO programming when a class inherits from another class, it gets all of the inheriting classes protected and public attributes and functions. When we inherit from the Movie Class, we gain the ability to draw graphics and place objects on the Flash display stack. We won't be covering the details about the Flash display stack in this tutorial, but it may come up later. Next, we have a variable declaration: private var text: String = "Hello world!"; The private keyword is one of 3 available keywords you can use for variables and functions: private, protected and public. A private variable or method is available only to the class it's declared in. A protected variable or method is available to the class it's been declared in, and any classes that inherit from this class. A public variable or method is available to every other class, in any package. The var keyword declares a variable, and this variable is called "text". The colon is a type declaration, and the type is a string. We've also given it a default value of "Hello world!".

73 So, reading the whole line, we're declaring: a private string variable called "text" with a default value of "Hello world!" Then, we have a function named exactly the same as our class: public function HelloWorld () This is a function declaration, and because it's named the same as our class, it's what's called a constructor. A classês constructor is called automatically when an instance of that class is created. Within this function, we have the following: var textbox:textfield = new TextField(); textbox.text = text; textbox.x = 100; textbox.y = 100; addchild(textbox); Line by line: We declare a local TextField variable named textbox, and instantiate it. This variable is visible only within this function (the constructor). We assign the "text" parameter of "textbox" the class variable called text we defined earlier (remember, it has the value of "Hello World!"). We assign the "x" parameter of the "textbox" the value of 100. This controls it's horizontal placement on the Flash stage. We assign the "y" parameter of the "textbox" the value of 100. This controls the vertical placement. Then we add the textbox to the classes display list, and because this is the root class, it automatically gets placed on the stage. Now, lets have a look at what this class creates. If you haven't already, download the appropriate Flex SDK, and unzip it somewhere. You don't need to install the SDK, so it doesn't matter where you unzip it. If you're in Linux or OS X, open a terminal and if you're in Windows, open a command prompt. Navigate your way to the directory where your source file is. Next, invoke the mxmlc compiler (Flex/bin/mxmlc) with the following: Linux/OS X- /path/to/flex/bin/mxmlc HelloWorld.as -o HelloWorld.swf Windows: C:\Path\To\Flex\bin\mxmlc HelloWorld.as -o HelloWorld.swf This calls the mxmlc compiler on our source file (HelloWorld.as) and specifies the swf file output (-o HelloWorld.swf). Execute this, as you'll have compiled your first swf file on the command line. Interactive Adventure Student Activity Fill in the blanks: 1. The. Animation building features a number of exhibits and interactive activities that will appeal to both kids and adults. 2.. objects is simply to give the effect on object using programming. 3. A. is an object oriented programming concept.

74 2D Animation Summary Interactive games present and teach at the same time Interactive games make good presentations for introducing lessons, demonstrating concepts or just to engage audiences with. Most are offered free online, and require little more than flash plugins. With an LCD projection device or interactive whiteboard, games can be easily presented for a number of teaching and learning purposes. The Disney Animation building features a number of exhibits and interactive activities that will appeal to both kids and adults. The Animation Academy is a 15-minute session with a Disney animator who teaches guests to draw a Disney character, such as Mickey Mouse or Pooh. Paper and pencils are provided, and guests may take their artwork home. The Art of Animation Gallery is located at the exit of the Animation Academy (it is also accessible directly from the Courtyard Gallery). Compiling objects is simply to give the effect on object using programming. Keywords Compiling Objects: Compiling objects is simply to give the effect on object using programming. Text: The var keyword declares a variable, and this variable is called "text". Colon: Colon is a type declaration, and the type is a string. Review Questions 1. What is compiling objects? 2. What do you understand by Interactive Adventure? Further Readings Sandro Corsaro, Richard M Sherman, Clifford J. Parrott, Hollywood 2D Digital Animation: The New Flash Production Revolution, Cengage Learning. Bill Davis, GardnerÊs Guide to Creating 2D Animation in a Small Studio, Garth Gardner Co. Steve Roberts, Character Animation: 2D Skills for Better 3D, Elsevier.

75 Unit 7 Bringing Movement to the Web Bringing Movement to the Web Unit Structure Introduction Steps to Make Website Creating and Uploading to Web Summary Keywords Review Questions Further Readings Learning Objectives At the conclusion of this unit, you will be able to: Discuss steps to make website Provide insight into creating and uploading to web Introduction In unit 6 we have learnt the concept of interactive adventure and compiling objects. Now, in this unit we will study the basic steps of creating web. We will also study the concepts related to uploading web. A high-quality website requires a lot of commitment and effort. Good content requires a lot of commitment and effort. Your users and visitors demand commitment and effort. A website can be compared to a pet think about whether you really want one before you get one. Maintain your website. Update your website. Look after your website. Add new content on a regular basis is necessary after once you create and upload web. Steps to Make Website These steps show you how to make or create a website. It is intended for the beginner and layperson, taking you step by step through the whole process from the very beginning. Step 1: Get your Domain Name The first thing you need to do before anything else is to get yourself a domain name. A domain name is the name you want to give to your website. For example, the domain name of the website is "moneybanking.com". To get a domain name, you have to pay an annual fee to a registrar for the right to use that name. Getting a name does not get you a website or anything like that. It's just a name. It's sort of like registering a business name in the brick-and-mortar world; having that business name does not mean that you also have the shop premises to go with the name.

76 2D Animation Step 2: Choose a Web Host and Sign up for an Account A web host is basically a company that has many computers connected to the Internet. When you place your web pages on their computers, everyone in the world will be able to connect to it and view them. You will need to sign up for an account with a web host so that your website has a home. If getting a domain name is analogous to getting a business name in the brick-and-mortar world, getting a web hosting account is analogous to renting office premises for your business. There are many issues involved in finding a good web host. After you sign up for a web hosting account, you will need to point your domain to that account on your web host. Step 3: Designing your Web Pages Once you have settled your domain name and web host, the next step is to design the web site itself. Although there are many considerations in web design, as a beginner, your first step is to actually get something out onto the web. The fine-tuning can come after you've figured out how to get a basic web page onto your site. One way is to use a WYSIWYG ("What You See Is What You Get") web editor to do it. Such editors allow you to design your site visually, without having to muck around with the technical details. They work just like a normal word processor. Step 4: Testing your Website Testing of website should be done throughout your web design cycle. Step 5: Collecting Credit Card Information, Making Money If you are selling products or services, you will need some way to collect credit card information. Step 6: Getting your Site Noticed When your site is ready, you will need to submit it to search engines like Google and Bing. You can use the links below to do this. GoogleÊs Link Submission Page BingÊs Site Submission Page In general, if your site is already linked to by other websites, you may not even need to submit it to these search engines. Apart from submitting your site to the search engine, you may also want to consider promoting it in other ways, such as the usual way people did things before the creation of the Internet: advertisements in the newspapers, word-of-mouth, etc. Creating and Uploading to Web There are basically two ways to make a web page. The first way is to create the page(s) offline and then upload them to your Internet Service Provider (ISP) via FTP. The second way is to create your web page(s) online using a Telnet program by accessing your UNIX account, if you have one. If you are creating your web page(s) offline, do so in any text editing or word processing document. Make sure that when you save your document, you save it as a "text", "plain text" or "text only" document. Otherwise it will not be read properly by a web browser. Once you have created your page(s), you will need to contact your ISP about how to go about uploading them to your server. Website Creation Process Now if you choose not to use a website builder, you are probably inquisitive to know what is involved in making a website. Here are the three main steps of creating a website.

77 Creating a website basically involves the following three steps: STEP 1 STEP 2 STEP 3 Register a Domain Name Get a Web Host Build your Website A domain name is the thing that looks like mysite.com. You register these on an annual basis. Domain names can cost anywhere between $10 and $50 per year. I'll show you how to get one for $1.99 (below). A web host is a company that enables your website to be viewed by the rest of the world, 24/7. A good hosting plan can be anywhere between $10 per month and many thousands per month. Below, I'll show you excellent hosting plans starting from $5.35 per month. You can either build it yourself or use a website builder. Below, I'll show you an online website builder that includes templates and hosting. And the great thing is, it's cheaper than most hosting plans! Bringing Movement to the Web A more detailed explanation of these three steps follows. Step 1: Register a Domain Name Before building your website, you should register a domain name. A domain name is the thing that looks like this: "yourdomain.com". Your domain name represents the URL (or permanent web address) of your website. Therefore, when anyone types in "yourdomain.com" or " they will see your website. You register your domain name through a domain name registrar or hosting provider. You simply check that your preferred domain name is available, and then register it (online). Domain names are registered on an annual basis, and you can usually register it many years in advance (or set 'auto-renew'). Prices can range from between $10 to $15 up to as much as $35 or even $45 (this is for the same product!). ZappyHost has some of the best prices on the web - and if you purchase hosting at the same time, the domain name is even cheaper ($1.99 at time of writing. Step 2: Get a Web Host web host (or hosting provider), is a company that makes your website available for the world to see. They have the equipment and technical skills to make sure your website is available to the world, 24 hours a day, 7 days a week.

78 2D Animation If you like the idea of using an online website builder, check out the website builder below. This enables you to build a website virtually within minutes, and hosting is included. Step 3: Build your Website The easiest way to build a website is to use your web host's website builder (assuming they have one). As mentioned, ZappyHost provides website tonight which makes it extremely easy for you to make your website. Upload Web Page Copying files from hard drive to the server is an uncomplicated process. The host site will prompt the name of the directory on your hard drive where your files are stored and the names of the specific files to be uploaded. To avoid confusion, make certain that all files are saved on the server using the same file names that were used on your hard drive. The only software that you require to upload files is a web browser such as Netscape or Internet Explorer. Alternatively, free FTP software (File Transfer Protocol) can be used. Once you have uploaded all your files, you should test your page on the web server and make certain that it functions properly and that all files have uploaded correctly. It is also a good idea to test your page using a different computer to ensure that graphic files are being read from the server and not from your hard drive. It is now time to congratulate you. You have published your very first page. Student Activity Try to find out can a domain name is registered in a foreign language? What is internationalized domain name? Summary The Steps to Make Website are Get Your Domain Name; Choose a Web Host and Sign Up for an Account, Designing your Web Pages, Testing Your Website, Collecting Credit Card Information, Making Money and Getting Your Site Noticed. There are basically two ways to make a web page. The first way is to create the page(s) offline and then upload them to your Internet Service Provider (ISP) via FTP. The second way is to create your web page(s) online using a Telnet program by accessing your UNIX account, if you have one. Copying files from hard drive to the server is an uncomplicated process. The host site will prompt the name of the directory on your hard drive where your files are stored and the names of the specific files to be uploaded. To avoid confusion, make certain that all files are saved on the server using the same file names that were used on your hard drive. The only software that you require to upload files is a web browser such as Netscape or Internet Explorer.

79 Maintain your website. Update your website. Look after your website. Add new content on a regular basis is necessary after once you create and upload web. Keywords Domain Name: A domain name is the name you want to give to your website. For example, the domain name of the website is "moneybanking.com". Web Host: A web host is basically a company that has many computers connected to the Internet. When you place your web pages on their computers, everyone in the world will be able to connect to it and view them. Upload Web Page: The host site will prompt the name of the directory on your hard drive where your files are stored and the names of the specific files to be uploaded. Bringing Movement to the Web Review Questions 1. What is domain name? Why there is a need of domain name? 2. What is web hosting? What is the easiest way to build website? 3. Why is it necessary to submit to search engines like Google and Bing when site is ready? 4. Briefly explain the steps showing how to make or create a website. Further Readings Sandro Corsaro, Richard M Sherman, Clifford J. Parrott, Hollywood 2D Digital Animation: The New Flash Production Revolution, Cengage Learning. Bill Davis, GardnerÊs Guide to Creating 2D Animation in a Small Studio, Garth Gardner Co. Steve Roberts, Character Animation: 2D Skills for Better 3D, Elsevier.

80 Unit 8 Beyond the Frames Beyond the Frames Unit Structure Introduction Understanding Frames Size Optimized Flash Player Summary Keywords Review Questions Further Readings Learning Objectives At the conclusion of this unit, you will be able to: Understand the frames size Familiarize yourself with the features of optimized flash player Introduction In unit 7 we have learnt the concept of creating and uploading web. Now, in this unit we will understand the frame size. We will also study the concepts related to Optimized flash player. Understanding Frames Size

81 2D Animation Before representation the animation, we must decide on the size of the animation frame. The size is important because it dramatically affects the finished movie file size. Also, we must consider how the movie will be viewed and how complex the scene is. More complex scenes will need a larger frame size. To set the render frame size, select File Document Setup, from the pull-down menu. You will see the Document Setup dialogue box shown above. Bryce refers to the render frame size as "Render Resolution". All dimensions are expressed in pixels as you might expect but the available sizes are all in multiples of the "Document Resolution", that's the working area to you and me. This is actually quite logical. Simply select an output size from the list under Render Resolution and click to save the new settings. If you want a particular output size, you'll need to change the Document Resolution first and then the Render Resolution. Optimized Flash Player Optimized flash player is the additions on the flash player features. Following are some of such features: Ubiquitous Reach: Easily installable and updateable, the full Flash Player will be available on smart phones and other Internet-connected mobile devices, doubling the number of operating systems your content can reach and enabling uncompromised Web browsing experiences. Global error handling: The new global error handler enables developers to write a single handler to process all runtime errors that werenêt part of a try/catch statement. Improve application reliability and user experience by catching and handling unexpected runtime errors and present custom error messages. Designed for mobility: To deliver on a high level of consistency and move onto mobile platforms with limited memory and processing resources, Flash Player 10.1 leverages hardware acceleration of graphics and video and many other performance improvements, such as rendering, scripting, memory utilization, start-up time, battery and CPU optimizations. New mobile-ready features that take advantage of native device capabilities include support for multi-touch, gestures, mobile input models, and accelerometer bringing unprecedented creative control and expressiveness to the mobile browsing experience. Watch Flash Player 10.1 video demonstrations that show Flash content running on smart phones. Expanded options for high quality media delivery: Flash Player 10.1 is ready to take advantage of upcoming media delivery technologies that will provide rich media experiences and create new business models. With new HTTP streaming and content protection features with Adobe Flash Access, premium audio and video content can be securely delivered within the browser. Streaming performance is enhanced with improved support for live events, buffer controls and peer assisted networking. Network context-aware services, such as smart seek and smart reconnect, will enable smooth, uninterrupted media playback and improved resource utilization on mobile devices. Student Activity Fill in the blanks: 1. Before representation the animation, we must decide on the of the animation frame. 2. More complex scenes will need a larger.

82 3. To set the render frame size, select from the pulldown menu. 4. The new. enables developers to write a single handler to process all runtime errors that werenêt part of a try/catch statement. Summary Before representation the animation, we must decide on the size of the animation frame. The size is important because it dramatically affects the finished movie file size. Also, we must consider how the movie will be viewed and how complex the scene is. More complex scenes will need a larger frame size. For example, the animation right at the top of this page is just 135 pixels wide and 101 pixels high. Optimized flash player is the additions on the flash player features. Ubiquitous Reach, Global error handling, designed for mobility and expanded options for high quality media delivery are some features of that. Beyond the Frames Keywords Bryce: Bryce refers to the render frame size as Render Resolution. Frame Size: The size is important because it dramatically affects the finished movie file size. Mobile-ready: Mobile-ready features that take advantage of native device capabilities include support for multi-touch, gestures, mobile input models, and accelerometer bringing unprecedented creative control and expressiveness to the mobile browsing experience. Ubiquitous Reach: Easily installable and updateable, the full Flash Player will be available on smart phones. Review Questions 1. What is frame size? How we can set the render frame size? 2. What do you understand by optimized flash player? 3. What are the features of optimized flash player? 4. Write short notes on: (a) Render resolution (b) Designed for mobility (c) Global error handling (d) Ubiquitous reach Further Readings Sandro Corsaro, Richard M Sherman, Clifford J. Parrott, Hollywood 2D Digital Animation: The New Flash Production Revolution, Cengage Learning. Bill Davis, GardnerÊs Guide to Creating 2D Animation in a Small Studio, Garth Gardner Co. Steve Roberts, Character Animation: 2D Skills for Better 3D, Elsevier.