Lab 1 : Intro

Adobe Flash CS4    – Tutorial

Introduction to flash authoring environment.
Lets start by clicking on the Middle column which says Create New – Flash File (ActionScript.2.0)

You will find the flash environment very similar to a paint brush environment, so if you are familiar with paint brush, you will very much feel at home, now on the extreme right you will find the various tool bars like Drawing tools, view tools, color tools, options tools like the picture below.



On the top you will find a menu horizontal bar, which is very similar to any menu in any other programe, as seen below.



As seen in the picture below, at the bottom of the stage you will find the time line, you will see a bunch of rectangles starting from 0 to 570, on the left of the timeline bar you will find layers, on top of the layers1, there is something called timeline button, if you click on the timeline button you can hide the timeline, in case you want more space or room to work on with your drawings, etc, on top of the page, below the main menu you will find an edit bar, where all your scene will be on display, this edit bar shows where you are in the flash file.

Besides the edit bar you will find on the top right you have symbols for editing the scenes on the stage, and also for zooming in and out of the stage.


On the extreme right of the flash page, you will seen some panels namely Properties, Color, Align & Info & Transform, Action, Library etc, as you can see in the picture below, you can click on the panels to make necessary changes. You can customize your panel settings by simply clicking on the windows option in the main manu, the panel will come on stage, you can drag and drop in to the right extreme like this picture shown below.


..

By default flash CS4  has a few panels to work with, but you may need much more panels to work with, you can customize your panels by just clicking on the window menu in the horizontal main menu bar as seen in the picture below.



A list of panels are displayed under the window menu, you can simply click on each one of them to have it on your screen, sometimes it may just appear on the middle of the stage, you can simply click on the header and drag it to the right and place it in any order of your choice.
At the bottom the 3rd one from the last you will find a workspace layout panel, you will find something like a save current, by clicking on it you can actually save the panel setting for that particular layout by simply naming it to layout1, etc, the next time you open the flash, you may actually have one or two panels on the right which is set as default, so instead of setting it all up again, you can go to windows menu, and click on the layout1, etc to get back all the panels you chose to work on.

 ----
 
Lets learn how to draw in flash CS4, let start by drawing a rectangle and an oval, the reason why we are starting with drawing a rectangle and a oval is because both these have a stroke and a fill. Understanding strokes and fills are important to draw in flash CS4 because they are treated as separate objects and not treated as one object.
Using the oval tool on the right hand tool bar menu like this one

draw an oval on the stage, if you notice to the right bottom of this oval tool is a small triangle, when clicked on it, you will be able to select a rectangle tool, oval tool, Polystar tool etc.,

As you click on the oval tool, just take a look at what happens to the options panel and the properties panel on the right of the screen.


While you see the Stroke, you can either type a number in the white box, or you can simply drag the stroke button to and forth to get the size of your stroke, then you  see the style, here you can select the kind of stroke weather you want a solid, dashed, dotted kind of stroke, then below is the scale, if you want normal, horizontal, vertical or none.

This is the stroke options

This is the color options,

You can use the stroke option and configure the settings or simply click on the fill color and configure the settings. On the main menu we have a button which looks like a magnet like this
You can use this button to simply snap the objects in place.

Lets draw an oval on the stage, with the oval tool selected, lets say we want to give it a red fill, easy enough we simply go to this fill color and select red here.

And lets say we want a blue stroke,

If you really want the stroke to stand out, lets make it thicker than it is, by simply dragging the arrow to its right or by type in  a figure in the box.



Lets draw an oval on to the stage, so click on the oval button and go to stage and draw an oval, as you drop and drag, you will notice that as you drag it to a circle, it will  snap into place, now release the mouse button, you will find a perfect circle with the colors you chose.


You will see a blue bind box along the circle, this means that the circle has been selected on stage. You can make changes to this object, while it is selected, by simply choosing he fill color and the stroke color. If you don’t wan the circle to be selected on stage, simply press escape button on your keyboard, it will deselect the circle on stage.
By default the snap object buton is turned on, while selecting an oval tool, now you can draw a perfect circle by turning off the snap button by simply clicking on it, the background will disappear on it.

Now draw the circle by dragging the cursor on the screen and dragging it down by simply holding on to the shift key on the keyboard,
You can select all objects on the stage by clicking on each, or by simply hitting ctrl+A key in your keyboard and delete it by hitting backspace.
Now if you want to draw a circle exactly in the centre of the stage, you can draw by simply pressing the alt button on the keyboard and dragging it, it will uniformly expand in all directions.
Now lets make a rectangle on stage, you can click on the right bottom of the oval tool and you will find a rectangle, click on it and draw a rectangle on stage.


The rectangele tool works very similarly like a circle or oval tool, you can also use the snap objects to draw a rectangle, with snap objects on, you can release the mouse button when a circle appears at the corner of the square, it becomes a perfect square.

There is another panel called rectangle options on the right panel space, if you want rounded edges to your square you can use this rectangle options and type a number in the cells provided to get the corner rounded edges. Like illustrated below:

You will find something like this

Sometimes you will not know what exactly should be the rounded edges on the rectangle or square, there is another way to do this, you can simply click on the rectangle tool bar and draw a rectangle on stage, and do not release you mouse, you can now simply use the up and down arrows to know how much of rounded edges you want to have in the rectangle, this will give you an indication what you square or rectangle will look like with rounded edges straight away.

Lab 2 : Using Line/Pencil/Brush tool, Ink bottle and Paint Bucket Tool.

On the extreme right on the menu, you will find the various drawing tools

The line tool is looks like this,

when you click on the line tool and draw on stage you can go any direction, but if you want to draw a square lets say, you can draw a straight line downwards, you will see that by default the snap tool is selected and the line will snap in place, when it is perfectly straight, like wise to the right, up and left you will join the first point, you can draw a 45 degree line, and it will snap in place. This is a very important drawing tool in flash CS4.

The same way you can draw with pencil tool, when clicked on the pencil tool which looks like this below,


You will see that the property setting are just a stroke color, you can draw a zig zag on stage and notice that you can only select a color which is of stroke, and may not give you the option of the fill color.
In the option menu box you have two options like this below


The top one is a smooth curve and the bottom one is a straight line, assuming you have drawn a zig zag on stage with a color red, selecting the drawing on stage, as you click on the smooth button the shape of the zig zag will smoothen, and the other straight button works differently than the smooth button, when selected the drawing, and clicked on the straight line, it will straighten the line to a virtual straight line running downwards.

The next tool is the brush tool, which looks like the one below,

As you click on the brush tool, you will find that in your properties panel, you have only a fill color and not a stroke, this tool works very much like the pencil tool, with the smooth option tool and the straight option tool working with the brush tool very similarly like the way it works with pencil tool.

Another important tool is the pen tool, this tool looks like this below

As you take the pen tool to the stage you will find that it make a dot with a florescent green, and once you release your mouse and make the second mark on stage, you will find a second point, and the first and second connect, this will happen till you finish all your drawings on stage and touch the start point, when pressed escape you will find the shape you drew, and accordingly fill the color of your choice, this pen tool will draw straight lines, if you want curved strokes, you can simply drag the mouse with the cursor moving either ways and then connecting the points to the starting point.

-----

On the extreme right of the screen in flash CS4, in the main menu you will notice the paint bucket tool,

at the right bottom of this tool, you will see a triangle, when you click on this triangle you will get the ink bottle tool, Now lets just draw a circle with no stroke on the stage, so select a color, lets say red,  and turn the stroke off and draw a circle on stage, now draw another circle with no fill and only a stroke color selected, say blue on stage, lets say you have something like this on stage,

You can click on the ink bottle tool as shown in figure 1, select a color, lets say black and click on the red circle drawn, you will get a black stroke on the red circle drawn, similarly click on the paint bucket tool, select a red green fill and click on the blue circle drawn, you will find the blue circle with green fill in it, like you see below.

This is the difference between paint bucket tool and ink bottle tool.

Lab 3 : Working with Layers

All this while we were working on flash CS4 on stage on a single layer, now lets just draw a simple website design by creating a rectangle green color menu bar in layer1, by double clicking on the layer1, you will be able to change the name of the layer, say call it menu,

On the left bottom of this picture above, you will find an add layer button, you will be able to create layers by simply clicking on it,  if you notice very closely that there is a dark grey box in the time line of the layer header, that means we have put in an object on stage, similarly create another layer and make another rectangle yellow box on top of the page, similarly create another layer and write your company name on it, you can double click on each layer and name them differently, you will notice that you have three grey boxes with a black dot in each layer on the time line 1. this is to make sure that each layer does not interfear with each other.
You can make each of these layers invisible by simply clicking on the eye button in the respective layer

in case you want to edit the bottom layer and you are unable to do it, you can also click on the lock button like the one below

to make sure, that you don’t move it around. So get used to using the pad lock icons by simply clicking to make it invisible and lock them and by clicking on it, to make it visible and unlock them.
Your drawing will look something like this on three layers.

So you know how to manage layers in flash Cs4, I would recommend that you always label your layers, suppose you draw a whole lot of drawings on stage, and later if you want to edit it, you may not know what each layer contains, again you can delete any layer any time by  simply click on the layers, selecting it, and clicking on the trashcan found on the right bottom of pic1, it will look like this

Notice one more important thing while working in flash, if at any point you think you want to undo, you can simply click ctrl+z on your keyboard, and you can get it back.
There is another button between creating layers and deleting layers in the pic1. these are adding folders, by clicking on it, you can add a folder and store all your files by dragging and dropping them into that folder, and naming that folder header folder.

----

Lab 4 : Rolloever image

How to make an image big on rollover in flash CS4.
First of all you need to have the same image of two different sizes and save it in your directory.
Open flash CS4, and import an image on the centre stage, by going to the main menu file-> Import -> Import to Stage, as shown below,

In this case I have imported the smaller sized image to the stage. You can save your file, in this case I have saved it as rollover and it will by-default be saved as a .fla file.

Now click on the image and Press F8 to create a button, call it a name and press ok!

You will see a blue outlined with a small circle in the middle of the image as shown below.

Double click on the button, you will enter the button mode as shown below.

Your button mode will have something like this shown below, your layer will be called by-default Layer1, and you will have an up, over, down and hit area in the button.

Click on the over and right click your mouse and create a blank keyframe like this shown below

Repeat the same for the hit area also, now as you scrub the timeline over all the four modes you will be able to see the orange tag moving with it.

Now click on the hit area and draw a rectangle in the centre of stage as shown below.

Now click on the Over area and import the bigger image to the centre of stage as shown below.


Now test the movie by going to the control menu on the main menu and selecting the test movie or you can also press Ctrl+Enter, a .swf file will be created, in this case rollover.swf will be created and you will notice that the image becomes larger on rollover.
That’s it, you now know how to make an image big on rollover in flash CS4.

Lab 5 : Masking

A mask is simply to hide or reveal certain parts of a layer, for lets say we import an image on stage, so go to File -> Import -> Import to stage like the one here

You have imported an image from your image file to stage, lets say you want to reveal a small portion of this image, you want to hide most of the picture, we need to create a mask to do that in Flash CS4, the way we need to do that is by creating another layer above the picture layer, lets first lock the picture layer and rename layer1 to picture and create another layer and name it mask, Now lets draw a mask, select the mask layer and draw a circle on stage by selecting a bright green color, it doesn’t matter what color you select, so draw the circle on stage for the picture you actually want to see, the mask is going to act as a flash light so whatever it touches is what we are going to see, having drawn a circle for the picture you want to see, you will see something like this

By doing this we actually don’t see the picture what we really wanted to see, the mask is not done yet, now click on the mask layer and right click on your mouse and select mask,
As soon as you do that you can see what we wanted to see like the picture below.

Lab 6 : Move an object

In this tutorial you will learn how to move a ball from left to right,
When you open flash CS4 you will by default be placed in layer 1 and any drawing on stage will be drawn in the first frame of your timeframe.

Now lets draw a ball on stage, so click on the selection tool, click on the oval tool, then in the properties panel, under the fill and stroke panel, switch off the stroke and select any color, in this instance say orange, and draw a ball on the left of the stage by pressing the shift key and dragging the mouse,

you will notice that the first frame on the timeframe gets darkened, then let’s say we want to end the keyframe to end at Frame12, so go to frame12 and press F6 to add a blank keyframe. Now on the new keyframe (Frame12) drag the ball by pressing the shift key so that it stays on the same line and drop it on the right,

now we want to create a classic tween in-between these two keyframes,

so click anywhere between 1 and 12 keyframe, click the right button on your mouse and select create classic  tween, you will notice the keyframes from 1 to 12 changes color from a grey to a light blue.
Now if you want to see how your movie looks without scrubbing along the time line, you can simply do this by pressing Ctrl+Enter. You will see the orange ball moving from left to right and will repeat this over and over again, this is because flash by default has been looped to perform this function. If you want to end up in the exact same position as the starting position, go to frame 24, copy the ball in the first keyframe by pressing Ctrl+C and click on frame 24 and press F7 to insert a blank keyframe, now make sure that  24th keyframe is selected and paste it in the same position by pressing Ctrl+Shift+V, now you can right click and select create classic tween. If you test your movie by pressing Ctrl+Enter you will see that the orange ball is moving from left to right and back continuously.