by Chamila De Alwis

When you are surfing the Internet have you noticed those annoying little strips of advertisements that constantly ask you to shoot 5 ducks or build civilizations online? Have you noticed the little piece of nice looking animation that is on the right of the Yahoo or Windows Live mail box?

At any point of your net-addicted life have you ever played a flash game? You know the kind. Have you thrown shoes at Mr. Bush and scored the highest marks?

Have you ever seen XiaoXiao beat the living day light out of other colored stick figures? Have you seen that nice little animation which tells you that “friends” forward emails and fill your inbox because they “care” for you (yeah right!!!)?

Figure 1 : Advertisement asking you to shoot ducks

Figure 2 : XiaoXiao animation

If you answered any of the above “yes” then you have touched Flash. You have seen its wonders and for a second you might have stopped and thought how you can make stuff like these. If you are that kind of a curious person this lesson is just for you.

Adobe Flash (previously Macromedia Flash) is a 2D vector graphics animation creator. Okay, that sentence contained way too much information. We’ll be getting to know what those words mean in a while. It was developed by the Macromedia people and about 3 years back Adobe people bought it from them. Up to that point there was Flash MX, Flash MX 2004 and Flash 8. After Flash 8 it was bundled up with the Creative Suite and was released as Flash CS3.

Computer Animation is mainly divided into two groups.

• 2D animations – manipulate only width and height
• 3D animations – manipulate the width, the height and additionally the depth of an object

Flash is a 2D animation creator. It means that it can only work with the width and height of the objects. But the perception of depth can be given using certain techniques and the creativity of the developer. Examples for 3D animation creators are Maya and 3Ds Max Studio.

If you have been working with any photo editing tool (or if you have been doing any image manipulations for that matter) you might have come across the words “pixels” or “bitmaps”. In images there are two types based on the way it stores the information.

• Bitmap/Raster graphics
• Vector graphics

Figure 3 : Difference between Vector and Raster graphics

Bitmaps/raster graphics store image details as pixels. Pixels are little squares you see if you zoom in to a photo. One pixel contains one color and the whole image is a 2D array of pixels. Therefore if you zoom in to a bitmap graphic you can see that blurring appears and the image becomes unclear, i.e. resolution dependant. (For more info - http://en.wikipedia.org/wiki/Raster_graphics)

Vector graphics on the other hand are not resolution dependant. They store image details as a series of coordinates within the image. Each time the image is viewed these coordinates are calculated and the image is produced. Therefore no blurring occurs in lower resolutions. (For more info - http://en.wikipedia.org/wiki/Vector_graphics)

Figure 3 shows the difference between the above two types of graphics.

Now let’s get started with the hands on work. Open up Adobe Flash CS3 (Adobe Web Premium CS3 -> Adobe Flash CS3 Professional). You will come across a welcome dialog.

Figure 4 : Welcome dialog

Select Flash File (Action Script 3.0) from the Create New list (Figure 4). What you will get is a screen like Figure 6 (If you don’t see something like this I suggest you clean up by going to Window menu->Workspace->Default). Let us tear it up piece by piece.

On the left edge of the screen will be the Toolbar. As with any designer software a tool bar contains tools to create animations. There are tools to manipulate shapes, text, select objects and all the kinds. You have to familiarize yourself with these tools, know what their shortcut keys are and know to what extent they can operate.

In the middle is the Stage. As the name sounds it is the place where all acts happen. It is where you create your animation.

On top of the stage is the Timeline. If you are not familiar with animations you might not know what a timeline is. Timeline is the flow of the animation. You will get to know what these are when we get down to the real stuff. For now remember it as the set of images that contribute to a frame by frame animation (Figure 5).

Figure 5 : Frames of a frame by frame animation

Figure 6 : Flash screen

Then on the right side you get a list of panels. The most important one is the Library. A library is where you store your symbols. I will explain what symbols are as we advance. Every animation has a library for itself.

On the bottom is the property box. When you select an object on the stage, a frame on the timeline or even the stage itself this is the place where all the properties are displayed.

Above are the basic elements of the flash screen you need to make yourself familiar with. After you get to know the tools it will be all about your creativity.

Now let us do some old school theories. First of all, have you seen any gif pictures that animate (I’m sure you all have seen the one where Aishwarya Rai turns and winks at you)? If you haven’t you should surf the net. Figure 7 is an example.

Figure 7 : Animated Gif

This is what we call a cell animation/frame by frame animation. In this type of animation each step (i.e. each frame) is designed as a separate object from the previous step (frame). The other type of animation is called Tweening. In tweening only the begining state and the end state of the animation is defined and the in between frames are calculated and built by the animation software. In the next lessons we will be doing exercises on both these types.

The other most important feature in Flash CS3 is its scripting language. Named as ActionScript its latest version is 3.0. Until Flash 8 ActionScript (v2.0) was used in Flash in various ways, on objects, on the time line etc. From Flash CS3 ActionScript is somewhat seperate from Flash and is also used in other Adobe products such as Adobe Air to produce useful Flash applications. The most possible place where you have come across ActionScripting is the Flash games. This is somewhat similar to Javascript and really easy to learn. Once you advance in ActionScripting even whole web sites can be completed using Flash.

In Flash the animation or the Flash application is saved as a .fla file. This is the source animation file and from this source file you publish the final outcome. This final outcome is saved as a .swf file (acronym for ShockWave Flash). If you are familiar with Java programming .fla is anologous to a .java source file and .swf is anologous to a .class executable file. As .class files need Java Runtime to run .swf files need Flash player to run. You are highly likely to come across the notification where browsers ask to install flash player plugin. This plugin is used to run the flash animations inside the web pages. This can also be related to Java needing Java plugin for web browsers to run Java Applets in web pages.

From the .swf files we can even create independant executable files(Windows - .exe, Macintosh - .app) that do not need Flash Player to be installed to run. If it is an animation even QuickTime movies can be produced. Of course there is always the good old animated GIF. Simple timeline animations can be saved as .gif files.

Flash is now becoming a trend in creating web sites. Using Flash, traditional layout barriers can be broken and the designer gets full control of the screen (of course there are resolution concerns). Even server-side tasks can be performed through ActionScripting. The same web site can be built using graphics and carefully arranging them. But it would take way more file size and download time than the Flash-made web site. Flash applications can be optimized for web use, even control download. Flash-made web sites can be simulated with various modem speeds and then take necessary steps to make the site more user friendly (for example add a preloader - Figure 8).

Okay. We have touched the surface. From the next session we will start digging. Until the next lesson I suggest you just play around with Flash, get to know the tools because when we start we will be going in a faster pace. We will be learning what the different types of animations mean, how to use the tools and we will be creating a small text animation at the end.