28 September 2011

Lab 1 : Intro

Adobe Flash CS4    – Tutorial
Introduction to flash CS4 offering environment
Introduction to flash authoring environment.
Lets start by clicking on the Middle column which says Create New – Flash File (ActionScript.2.0)
Introduction to flash CS4 offering environment
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.
Introduction to flash CS4 offering environment


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


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.
Introduction to flash CS4 offering environment
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.
Introduction to flash CS4 offering environment

..

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.
Panels and Panel workspace in flash CS4


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 Drawing in flash CS4

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.
Drawing in flash CS4

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.
Drawing in flash CS4
This is the stroke options
Drawing in flash CS4
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
Drawing in flash CS4 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.
Drawing in flash CS4
And lets say we want a blue stroke,
Drawing in flash CS4
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.
Drawing in flash CS4


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.
Drawing in flash CS4

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.
Drawing in flash CS4
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.
Drawing in flash CS4

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.
Drawing in flash CS4
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:
Drawing in flash CS4
You will find something like this
Drawing a circle or rectangle in flash CS4
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.

No comments:

Post a Comment