Tuesday, October 26, 2010

Paste in Place in Flash CS3

Use "Paste in Place" to make a copy exactly one over the other in Flash CS3.

By default, Flash pastes in the center of the stage. There are 3 paste options under the Edit menu:

* Paste in Center

* Paste in Place

* Paste Special

Paste in Place

Continuing with the tutorial let us make multiple copies of the smaller slanting line right across the railway tracks.

The easiest way to do this is to:

* Select the instance of the smaller slanting line on the stage

* Copy (Edit > Copy)

* Paste in Place (Edit > Paste in Place).

* Then, use the right arrow key to move it a little away.

* Repeat the process.

* Once you have done around 5, select all 5 (select multiple by pressing the shift key while selecting), paste in place and move.

Resize and Rotate Objects in Flash CS3

You can resize and rotate objects in Flash CS3 using the Free Transform tool.

Continuing with the tutorial let's make the bars between the railway track now. We will reuse the line symbol again for this.

* Make another copy of the symbol “line”.

We will resize it and rotate it to use it as bars between the railway lines. To do this we will use the “Free Transform” tool.

* Select the copy of the “line” symbol on the stage.

Select the “Free Transform” Tool.

* You will see 2 nodes on end of the line symbol.

* Roll the mouse near one of the nodes.

* The cursor will change to either a horizontal line with arrow on both ends, an anti – clockwise incomplete circle with an arrow at one end or a slanting double sided arrow.

Resizing

To reduce the size:

* Wait till you get the cursor with the horizontal double sided arrow.

* Click the sift key and slide the curse towards the middle of the line.

* The line will become smaller.

Rotating

To rotate the line:

* Wait till you get the cursor with the anti-clockwise arrow

* Press the shift key and move the cursor upwards.

* This is what you will have now.

* Position it between the railway lines. To do this, you will need to revert to the normal selection tool first.

* Drag the line and resize if required to fit exactly between the 2 railway tracks.

* You can also resize the symbol by selecting it and manipulating the values of the “width” and “height” in Properties palette.




Reuse Symbols in Flash CS3

Reusing symbols reduces the file size of the animation and makes it faster to load.

We can make copies of symbols which are called instances of the symbol. Each instance can also be given a different name in the Properties window.

Continuing with the tutorial, let's reuse the "line" symbol to create the 2nd line of the railway track.

* Select this line symbol (on the stage)

* Copy it (Edit Copy)

* Paste it (Edit > Paste)

* Position this copy a bit lower than the first.

Draw Lines in Flash CS3

Draw lines in Flash CS3 using the Line Tool.

Continuing with the tutorial let's begin to draw the railway track using the line tool.

Railway Tracks

* Create a new layer named “railway tracks”.

* Ensure that it is the top most layer. If not, drag it to the top.

Select the line tool.

* In the properties palette choose the color black, enter the line height “2” and select the option “Solid”.

* Draw a straight horizontal line across the stage.

* Select it and convert it to a graphic symbol named “line”.

*

Draw Shapes (Oval) in Flash CS3

Draw oval shapes and circles with the oval shape tool.

Continuing with the tutorial let us make a simple tree next.

The Tree

* Make a new layer called “tree”.

Oval Shape Tool

The Tree Top

* Making sure that the "tree" layer is selected, choose the oval drawing tool.

* To select the oval drawing tool you will need to click the tiny arrow at the bottom of the rectangle tool for a little while.

* Different shape options will open up.

Select the “oval tool” option.

* You might want to have a light green fill color and dark green stroke color.

* On the stage, draw an oval shape for the top part of the tree.

* Double click on the oval you just drew to select both the stoke, and the fill.

* In the properties palette increase the stroke height to 3. Notice that the outline is thicker now.

* You can manipulate the properties of the stroke or the fill individually by select only the stroke or only the fill.

* Select the oval (double click so both the stroke and the fill areas are selected) and convert to a graphic symbol named “oval”. You can also get the “convert to symbol” option when you right click after selecting the shape.

The Tree Trunk

Now in the same “tree” layer, let’s make the tree trunk.

* Using the rectangle tool draw the tree trunk with a dark brown stroke color and a lighter brown fill color.

* Select it and convert it to a graphic symbol named “rectangle”.

* You will notice that the tree truck is showing where it overlaps with the tree top.

* To bring it behind we need to use the “send to back” option.
Modify > Arrange >Send to Back

* Select the tree top and the tree trunk (select tree top first, press Shift key, select tree trunk) and convert to a graphic symbol named “tree”.


Draw Shapes (Rectangle) in Flash CS3

You can draw shapes in Flash CS3 by using the various drawing tools provided.

Shape Tools

Now we will use the shape tools to draw the grass and tree.

The Grass

Make a new layer for the grass. To do this:

* Click the “Insert layer” icon at the bottom of the timeline.

* A new layer “layer 2” will appear.

Rename it “Grass”.

Rectangle Shape Tool

Now let’s use the rectangle tool to make the green grass area. The fill color will be green and we do not want an outline for this rectangle. The stroke color indicates the outline color. Since we don’t want a stoke this should be “none”.

Set the stroke color to none in the tools palette (accessed by clicking the tiny triangle) in the stroke color icon.
Choose the rectangle tool.

Click on the stage where the top left corner of the rectangle (for grass) should be and drag (without releasing the mouse) to the bottom right corner of the rectangle.

Once the rectangle is drawn you can change the fill color to green in the properties window.

Finally convert the grass to a graphic symbol named “grass”.

If you look at the “library” palette now you will notice that there are 2 symbols – ‘grass’ and ‘train title’.

If you cannot see your library palette, go to Window > Library and you will be able to see it. As you create new symbols you will be able to access them from the Library too.