UNIT 1 INTRODUCTION TO FLASH

(1)

(2)

Unit 1 Introduction

to Flash

Unit Structure

z Introduction z Flash z Animation z Types of Animation z 2 Dimensional Animations z Properties Bar

z Size and Publish

z Summary

z Keywords

z Review Questions

z Further Readings

Learning Objectives

At the conclusion of this unit, you will be able to:

z Know the concept of animation

z Impart a brief overview of history of animation

z Provide insight into 2 dimensional animation

z Identify the characteristics of 2D animation

z 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

Notes

2 Self-Instructional Material

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.

(7)

Notes

Punjab Technical University 3 When you open the Flash workspace, it will look like following screenshot:

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

z Flash is mostly used in Computer Games z Comics and Interactive magazines z Web site designing

(8)

2D Animation

Notes

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

z Similar to other applications like Illustrator. Each layer has its own set of content. z Layers are part of the timeline.

z 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:

z 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. z SWF files are the compressed versions of FLA files. These files are the ones you

display in a web page.

z 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.

z 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.

z 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)

Notes

Punjab Technical University 5 z JSFL files are JavaScript files that you can use to add new functionality to the

Flash authoring tool. See Extending Flash for more information.

z 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.

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.

(10)

2D Animation

Notes

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)

Notes

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

Notes

Disney – cell animation – draw each image one at a time using onion-skinning

technique.

(13)

Notes

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, 1937.

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.

Figure 1.2: Multiplane Camera

Xerox Enters

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

Notes

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.

Figure 1.3: The White Eared Puppies in the back are Xerox Copies

CGI

Twenty-five years later, computer generated imagery was introduced into Disney animation in the low budget film The Great Mouse Detective, 1986. 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)

Notes

Punjab Technical University 11 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)‰.

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, 1991. 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.

Figure 1.6: Carpet was the First Character CGI

CGI Character Animation

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

Notes

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)

Notes

Punjab Technical University 13 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.

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.

1831 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.

1872 Eadweard Muybridge started his photographic gathering of animals in motion. 1887 Thomas Edison started his research work into motion pictures.

1889 Thomas Edison announced his creation of the kinetoscope which projected a 50ft length of film in approximately 13 seconds.

1889 George Eastman began the manufacture of photographic film strips using a nitro-cellulose base.

1892 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.

1895 Louis and Augustine Lumiere issued a patent for a device called a cinematograph capable of projecting moving pictures.

1896 Thomas Armat designed the vitascope which projected the films of Thomas Edison. This machine had a major influence on all sub-sequent projectors.

1906 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.

(18)

2D Animation

Notes

1908 In France Emile Cohl produced a film, Phantasmagorie which was the first depicting white figures on a black background.

1910 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.

1911 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.

1914 Winsor McCay produced a cartoon called "Gertie, The Trained Dinosaur" which amazingly consisted of 10,000 drawings.

1914 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".

1919 Pat Sullivan created an American cartoon "Felix the Cat."

1926 The first feature-length animated film called "El Apostol" is created in Argentina. 1923 Walt and Roy Disney found Disney Brothers Cartoon Studio.

1923 Walt Disney extended Max Fleischer's technique of combining live action with cartoon characters in the film "Alice's Wonderland".

1927 Warner Brothers released "The Jazz Singer" which introduced combined sound and images.

1928 Walt Disney created the first cartoon with synchronized sound called "Steam Boat Willy". 1930 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. 1943 John and James Whitney produced "Five Abstract Film Exercises."

1945 Harry Smith produced animation by drawing directly onto film.

1957 John Whitney used 17 Bodine motors, 8 Selsyns, 9 different gear units and 5 ball integrators to create analog computer graphics.

1961 John Whitney used differential gear mechanisms to create film and television title sequences.

1963 Ivan Sutherland and SKETCHPAD at MIT/Lincoln Labs

1964 Ken Knowlton, working at Bell Laboratories, started developing computer techniques for producing animated movies.

1972 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, 1972. (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, 1972. (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 1976. (In the

SIGGRAPH 98 Seminal Graphics collection.) 1982 Tron, MAGI, movie with CG premise

(19)

Notes

Punjab Technical University 15 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 1983. (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 1984. (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 1985. (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 1985. (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 1987.

(In the SIGGRAPH 98 Seminal Graphics collection.)

1987 Craig Reynolds then at Symbolics (now at Dreamworks SKG) publishes a paper on self-organizing 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 1987. (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 1992. (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, 1993. (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

Types of Animation

There are various types of animation. Some of the following are:

Claymation

(20)

2D Animation

Notes

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; z 2D animation is the making of several different pictures, all in succession to each

other, to create the illusion of movement.

z It is the creation of moving pictures in a two-dimensional environment, such as through "traditional" cel animation or in computerized animation software. z It will show vertical and horizontal movement, but is not useful for determining

well patterns.

z 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 cross-sectional 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

Cutout

Animation

(21)

Notes

Punjab Technical University 17 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.

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

Notes

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 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)

Notes

Punjab Technical University 19 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.

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:

z 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,

z 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.

z 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

Notes

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, low-fidelity 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

(25)

Notes

Punjab Technical University 21 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:

Generate Size Report Generates a report listing the amount of data in the final Flash content by file.

Protect From Import 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.

Omit Trace Actions 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.

Permit Debugging 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

Notes

Some Keywords

Term Definition

ActionScript Adds interactivity and/or playback efficiency to a movie via coding. Similar to JavaScript, ActionScript is an object-oriented programming language. Alpha effect Adjusts the transparency of an instance.

Bitmaps Images using colored dots, called pixels, arranged within a grid. Typical of most web graphics.

Breaking apart Converts symbols into basic shapes so that shape tweening can be used. Button symbol Used to create interactive buttons in a movie that respond to mouse clicks or

other actions.

Component 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.

Easing option 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.

Frame-by-Frame

animation An animation technique that involves subsequently creating a slightly altered image in sequence and then playing back the entire sequence. Graphic symbol Used for static images and to create reusable pieces of animation that is tied

to the Timeline of the main movie.

Keyframe A frame in which a change in an animation is defined. Keyframes are an important part of tweened animation.

Layer 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.

Library 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.

Motion guide Lets you draw paths along which tweened instances, groups, or text blocks can be animated from one keyframe to another.

Motion tweening 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.

Shape tweening 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.

Symbol 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.

Timeline 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. Vector graphic 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)

Notes

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.

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

Notes

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

Unit 2 Symbols and

Layers

Unit Structure

z Introduction

z Three Types of Symbols

z Tools z Library z Insert Layer z Motion Tweening z Shape Tweening z Motion Guide z Summary z Keywords z Review Questions z Further Readings

Learning Objectives

At the conclusion of this unit, you will be able to:

z Impart a brief overview of symbols

z Provide insight into library and insert layers

z 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

Notes

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.

(31)

Notes

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.

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:

z Provides a consistent framework for drawing onto a form z Double buffering

z Frames per second timing

z Provides for layers of drawing and sprites (moving graphics) z Provides for graphical alterations of sprites

z Utilitizes .net GDI+ graphics rather than DirectX

z 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

(32)

2D Animation

Notes

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

z Open a new flash file (Ctrl+N) – New Document window will appear – Select General panel and choose Type: Flash Document. Press OK.

z If your timeline window is not open, press (Ctrl+Alt+T).

z Now you can see a single Layer called "Layer1" in your timeline Window.

z Create a Shape Tween on Layer1. Similar to the one in Shape Tween Tutorial. z Single click on add new layer button.

z A new layer gets added. By default it will be named "Layer 2".

z 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.

(33)

Notes

Motion Tweening

z 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.

z Create a separate Eyes layer by clicking on the Create New Layers tool on the on the Timeline panel.

z 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:

z Open a new flash file (Ctrl+N). New Document window will appear

Select General panel and choose Type: Flash Document. Press OK. z If your timeline window is not open, press (Ctrl+Alt+T).

z Now you can see a single Layer called "Layer1" in your timeline Window.

z 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

Notes

z Select frame 20 and press F6 to insert a new key frame.

z 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.

z 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.

z 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 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. Step 2 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.

Step 3 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.

Step 4 Select the symbol and move it until the registration point at the center snaps to the beginning point of the motion guide path.

Step 5 Copy the key frame containing the symbol to a new frame further down the timeline. Step 6 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.

Step 7 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.

Step 8 On the layer for the symbol, right-click on the timeline between the first and last key frames. Select "Create Motion Tween."

Step 9 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)

Notes

Punjab Technical University 31 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:

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

(36)

2D Animation

Notes

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)

Notes

Punjab Technical University 33 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".

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.

UNIT 1 INTRODUCTION TO FLASH

Contents