Introduction to flash
Adobe flash is excellent software that helps us to create animation, games, presentations and other web applications. It produces rich internet applications, video presentations and even we can create application games for mobile devices.
We will discuss the tools, menus and other options of this version.
INTERFACE OF ADOBE FLASH
Let us discuss about Interface of Adobe Flash. The menu bar holds various menus with which we perform animations. Tool bar holds various tools and the timeline holds layers, frames and onion skin.
The work area and the workplace where shown in the figure given below. Title bar shows the file name, navigate to scenes, edit symbols and zoom percentage.
The current frame number, frame rate, the elapsed time of the movie could be viewed. An animation depends on the number of frame per second. As it increases the animation will be fast and if it decreases then the animation is slow.
By default we have 12fps i.e. 12 frames per second. We can increase or decrease it depending on the need.
VECTOR AND BITMAP IMAGES
In general computer graphics is displayed either in bitmap or vector format. The differences between these two formats are
Vector
It describes images using lines and curves called Vector. It also includes color & position properties. When we edit an image that has vector graphic technology, its properties are changed without any loss of quality. Vector graphic images are resolution independent. They are displayed in any devices without loss of quality.
Bitmap
It describes images using dots called pixels arranged in grids. When we edit an image we alter the pixel and not the lines or the curves. They are resolution dependent.
As we edit an image, there will be change in quality since the pixels are arranged in specific location of grid. Images displayed in an device having low-resolution will have loss in quality.
Flash uses Vector graphic technology and helps us to create wonderful animations which could be played anywhere.
PROPERTY OF A DOCUMENT
Document property helps us to set the size, frame rate and color for the document. We can open up it by double clicking on the tab or Go to Window > Properties.
Dimensions : Width and height of a movie could be set. By default it is shown in pixel unit.
Printer: The stage or movie size is set to the maximum print area. This area will be determined by paper size minus margin which we set using page settings option.
Contents: Set the stage size to contents around it. We have contents spilling on the right side. Let’s click on this button and note the stage size is extended to bring in the content into the stage.
Default: The default size of a document is 550 x 400 pixels. The movie size is set to default. Minimum size is 1x 1 pixels and maximum is 2880x2880 pixels.
Background color for the movie could be selected form the color swatch.
Frame rate: The number of frames per second. For large audience and web based animations its better to use 8 – 12 fps. This helps in displaying the animation as created. 12 fps is the default value.
Ruler Units: The units could be pixels, centimeters, millimeters and so on. Make default option helps us to make the current settings as default setting.
OPEN OPTION
Open option helps us in opening the documents of different file extensions. Go to File > Open. In the open dialog, select the destination, file name, and file extensions such as .fla, .ssk, .swf and so on.
Open from site: This option helps us to open a file from a predefined site. Goto File > open from Site. Select the site. It shows the files that are used in that site. Select the file to be opened.
Open Recent: It helps us to open the recently accessed files. Go to File > Open recent. It list 10 recently opened files. Click on the corresponding file to open.
Thus we could open up the files using open options.
EXPORT OPTION
Expert option helps us to export the movie or the image from flash. Go to File > Export > Export Image.
Export image option will export the image in the current document. Select the drive, file name
And file type (i.e. the file format in which the image is saved). Select save to export the document.
Export Movie option helps us to export the entire flash movie. Go to File > Export > Export
Movie. Select the drive, file name and file type and select save to export the entire movie. The file formats include swf, avi, bmp, gif and png and so on.
The default file format for exporting a flash movie is swf.
SAVE OPTION
Save option helps us to save the document. We have various options like
Save As: Helps us to save a document. Go to File > Save As. Select the drive, filename and file type. Click on save. The document got saved.
Save & Compact: If we have imported a video file into a document and then undo that import. But the file size includes the size includes the size of video. This is because any item deleted will be retained in Redo command in case if it is performed. Therefore to delete the size of video file completely and to save the document. We use save and compact command. This option helps us to delete items completely from the document and to retain its original size.
Save: to save the changes made to a document we use save option. Go to File > Save. It saves the changes made in a document.
Save as Template: It helps us to save the current document as a template. Go to File > Save as template. Specify the name, category and description for the template. If we open up the template category we can note the newly added template in it.
Thus we can save, save and compact and save a document as a template.
IMPORT OPTION
Import option helps us to bring the desired file into flash. Certain type of file could be opened in flash. We can also bring in different file format into a document.
Import to Stage:
Go to File > Import to stage. Select the drive, file name and file type. We can import gif, jpeg, psd, wav, mp3, mov, avi, mpeg and so on. Select the file and then open. Now the imported file will appear on the stage.
This type of import brings the object on to the stage.
Import to Library:
This option helps us to bring in a file into library. Go to File > Import > import to library. Select the drive, file name and file type and then select open. Note the file imported through this option will not appear on the stage, but it will be available in the library. Open up the library and we can view the file.
Open External Library:
This option will open up the library of another document. Go to File > Open External Library. Select the flash movie from which library has to be opened. This option shows only the fla files and not any other file format.
We could use the items of this library and they will become a part of the movie. i.e. they will be a available in the library of the current movie.
Thus we could open up the desired file through open option.
What is Flash?
Flash is a multimedia graphics program specially 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
Flash does not require programming skills and is easy to learn
Tools Descriptions
Ink Bottle
The ink bottle tool is quite useful. If you have a block of colour (for example one created with the paintbrush - which will be covered later in this tutorial) you can click on it to add a line round the edge. The colour of the line placed round the edge will be the same as the colour selected as line colour on the tools bar.
Dropper Tool
The dropper tool, like the ones in graphics software, is used to pick a colour off one part of the screen and use it as the fill or line colour. If you click on a fill, the fill colour will be set and the pointer will change to the fill tool. If you click on a line, the line colour will be set and the pointer will change to the ink bottle tool.
Eraser Tool
The eraser tool is used to rub things out on the stage. It is used by just clicking and holding down the mouse. It does have a few options though:
The large section at the bottom is used to select the size and shape of the eraser brush. On the right at the top is the faucet tool. This makes the eraser work like the fill tool - you just have to click once to remove the fill from an area. The part on the left is the special option. This allows you to choose the type of eraser you use. The default is Erase Normal, which works like a normal eraser tool. Some of the other options are:
Erase Fills which will leave all lines intact as you use the eraser but will rub out fills
Erase Lines which leaves fills but rubs out lines
Erase Inside which allows you to erase inside a shape without harming the edges
Paintbrush Tool
The paintbrush tool will paint lines all the time you have the mouse button held down. It has some options, though, which are like the eraser tool options:
Paint fills, will only paint inside a shape
Paint Behind, which will paint behind all shapes and fills
Pencil Tool
The pencil tool allows you to draw lines on the screen. It is different to a normal freehand tool, though, as it has three options which can be set:
This option will allow you to choose what flash does to your line once you have drawn it. The default option is Straighten. Flash will straighten out your line so that any part of it that is almost straight will be made into a straight line. The two other options are smooth and ink. Smooth will change your line so that it is smoothed out to make curves. The ink option will not make so many changes to your line but will still smooth it a bit and straighten some lines.
The Text Tool
The text tool is used for adding text to your flash movies. Just click on the stage where you want the text to appear and a cursor will appear where you can type in your text. To make changes you need to use the character palette:
The options here are quite self explanatory. The font section lets you choose the font for the text. With flash all fonts are embedded in the file so the user does not need to have the font on their computer. Below that is the size box which lets you choose the text size. Next to that are the normal bold, italic and colour options. Below that is the Tracking option. This allows you to choose how out the characters are spaced. At 0 the spacing is normal. If you increase this, spaces will be left between your characters. If you decrease it, your characters will start to overlap. The option below this is the superscript/subscript option and below this you can specify a URL for a link.
Basic drawing
The first thing you need to learn how to do is to draw basic shapes in Flash. We will start with the most basic shape, the circle/oval. Before you start you might want to move some of the floating pallettes so that you can see enough of the stage to work on.
Firstly, choose the Oval tool from the Tools bar on the left:
Then, draw the oval or circle you want on the stage (just as you would in a normal graphics program). Holding down shift will force the object drawn to be a circle. Once you have drawn your circle you will now notice a few things about it. Firstly, there is a line around the circle and a fill inside it. These are changed using the colors section of the Tools bar:
The first option (set at black in this example) is the line colour and the bottom option (blue in this example) is the fill colour. To change them click on the box filled with colour. You will get a menu with a selection of colours. If you want to match the colour to a colour on your screen click on anything on the screen and its colour will be used.
Now, try drawing another circle or oval, but this time change the fill and line colours.
The next tool you will use is the rectangle tool:
As with the circle tool, this works in exactly the same way as in any standard grapics program, you can drag out a rectangle you want to draw and hold down shift to force a square. Like the circle, the rectangle's line and fill colours are set using the colors section of the Tools bar.
The rectangle tool, unlike the oval, has some options which can be set. These appear in the Options section of the Tools bar:
There is only one option for the rectangle, the Round Rectangle Radius. This creates rectangles with rounded corners like this:
Click on the option. A box appears asking for the radius in pixels. The example above used a radius of 20 pixels but it is best to experiment to find the best setting for what you want. After you have set this draw another rectangle. This one should have rounded corners. Remember: Flash will remember this setting so before you draw another standard rectangle you should set it back to 0.
Like any other drawing program, Flash also has a straight line too:
This works in exactly the same way as the line tool in graphics software.
The objects you have drawn can also be moved. You must be careful, though, as Flash treats the fill and the line separately, so to move both together you must double-click in the object before dragging it if you want to move them both.
Drawing or Painting?
Flash is a very strange program for editing grapics. It is really a cross between a drawing and a painting program with some special features of its own. It is like a drawing program because you can move and change objects once you have drawn them but it acts like a painting program with fills etc. For example if you drew two circles, a large one with a black line and a blue fill and a small one with a black line and no fill, then moved
the small one on top of the bigger one. You could then use the fill tool to fill in the middle of the small circle, changing only part of the big one.
Flash also allows you to break up graphics using other ones. If you now moved the small circle away from the larger circle it would leave a white space behind where it used to be. This feature can be extremely useful.
Special Fills
AS well as filling a shape with a single colour you can also use Flash's premade fills. They are found at the bottom of the fill box. There are three gradients fills but the best are the radial fills. These allow you to fill in any shape with a radial gradient (going from light to dark). The special thing about them is that the lightest part will be where you click your mouse when using the fill option:
so you can very effectively make 3D looking circles, which are excellent for buttons.
Animation Techniques
Create motion tween
Steps to follow:
Open a new flash file (Ctrl+N).
New Document window will appear
Select General panel and choose Type: Flash Document . Press OK.
If your timeline window is not open, press (Ctrl+Alt+T).
Now you can see a single Layer called "Layer1" in your timeline Window.
Select the first frame. Import your image onto stage, upon which you would want to implement motion tween.
File>Import>Import to Stage, or just press (Ctrl+R).
Or you can even draw your own object, you can either choose Rectangular tool or Oval tool from the tool box and draw your desired shape.
Now select your object on the stage and press F8 to convert this image to a Symbol. Convert to Symbol window will pop-up.
Name your Symbol what ever you like.
Select Graphic behavior and press OK.
Note: You can create motion tween only on symbols. So any object upon which you would want to implement motion tween, first convert the object to a Symbol.
Right now your Symbol is in frame1 of Layer1. Select frame 20 and press F6 to insert a new key frame.
Still keeping play head on frame 20, move your Symbol to any other position other than the present one.
Select any frame between, 2 to 19 and select Motion from the tween pop-up menu in the Property inspector. Now your Layer will look something like the one shown below.
Now press (Ctrl+Enter) to view your motion tween.
Shape tween
Steps to follow:
Open a new flash file (Ctrl+N).
New Document window will appear
Select General panel and choose Type: Flash Document . Press OK.
If your timeline window is not open, press (Ctrl+Alt+T).
Now you can see a single Layer called "Layer1" in your timeline Window.
Select the first frame. Now go to your working area and draw any object. To start off with, may be you can draw a circle. This is going to be your initial object.
In the above demonstration, my initial object is a short line.
Select frame 20 and press F6 to insert a new key frame.
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.
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.
Now press (Ctrl+Enter) to view your motion tween.
Fade in out effect
1. Open a new file. Go to File >New. A Screen called New Document will appear. Select Flash Document and click on OK. Go to Modify>Document and give a file size of 300px by 200px. This is the same size as the Bitmap pictures we have.
2. Select the Bitmap pictures that you want to Fade in and Fade out from your picture file and bring it to the Flash Library. Select File>Import to Library from the Menu Bar. A Screen named Import To Library will open. Choose the file name and click on Open. Repeat these steps for all the Bitmap pictures. To open Library, go to Window>Library. You can see the pictures in the Library panel.
3. Drag the picture from the Library panel to the Stage. Select the picture by clicking on it.
Go to Modify>Convert To Symbol from the Menu Bar. A dialog Box named Create New Symbol will appear. Give the name as pic1_mc. Select Movie Clip. Click on OK.
4.Click on your Movie Clip. Go to Frame 15. Insert a Keyframe. Right click on layer 1 in the middle of the frames 1 to frames 15. The frames will become black. Select Create Motion Tween. An arrow from frame 1 to frame 15 will appear. Again click on Frame 30. Insert a Keyframe. A second arrow will appear automatically.
5. Click on Frame 1. Here we will give the fade in effect. Select the picture by clicking on it. Go to Properties in the panel below the Stage. Go to Color>Alpha give 0% to it.
Your picture has faded in. Click on Frame 30. Here we will give the fade in effect. Select the picture by clicking on it. Go to Properties in the panel below the Stage. Go to Color>Alpha give 0% to it.
6. Repeat the steps 3 to 5 in layer 2 from the frame 31 to 45 to 60. To make a new layer, click on the following button which is on the right side below the layers. Repeat the above steps for all the images in new layers and you will create a simple fade in and fade out Flash animation.
Press on Ctrl+Enter to see the Fade in & Fade out Effect of the 4 pictures
Zoom in-out Effect
STEPS TO FOLLOW
Open a new flash file (Ctrl+N). The New Document window will appear. Select General panel and choose Type: Flash Document. Press OK.
If your timeline window is not open, press (Ctrl+Alt+T). Now you can see a single Layer called "Layer1" in your timeline Window.
Select the first frame. Import a background image onto stage, preferably an image of a street by clicking on File>Import>Import to Stage, or just press (Ctrl+R).
Press F8, to convert this image to a symbol. Name this Symbol "background_gr" and choose graphic behavior. Press OK. Name this Layer "bg". On the 35th frame press F6 to insert a new frame
Select the second layer. Import an image or create a shape of a car using shape tools from the tool box. Press F8, to convert this image to a symbol. Name this Symbol "car1_m" and choose movie clip (F8). Press OK. Name this Layer car1".
Select the image(car1_m) >right click>edit in place. Now you will come to a new timeline Window called Symbol2
On Frame1 of Symbol2 convert the image to a graphic (car1_gr). Go to the Properties Bar>Color>Alpha>0%. In Frame5 insert a new Key frame (Press F6) and change Alpha to 100% and make the image small. Eg : Pic
Right click in between Frame1 and Frame5 and press motion tween.
Add one more Key Frame in Frame20. In this frame make the Image (car1_gr) bigger and move it out.
On Frame25 insert a new key frame and change Alpha to 0% . Insert motion tween in between frame5-20 and Frame20-25.
Now press (Ctrl+Enter) to view your motion tween.
Continue to do this for your other car images.
With Motion Guide Tweening you can move an object from one location to another along a specified path.
________________________________________
Flash Guide Tweening
In this example you will learn how to draw a path an object should follow.
Example
Step 1
Choose Window > Common Libraries > Graphics. Select the image you want to use. In this example we have used a blue mouse.
Step 2
Click on the image and drag it outside the left edge of the Stage.
Step 3
Go to Frame 40 in the Timeline. Do this by clicking the gray field below 40. Then right click in this field. Choose Insert Key frame. Key frames appear as circles in a frame. This operation duplicates the image.
Step 4
Click on the Timeline any place between Frame 1 and Frame 40. Then right click and choose Create Motion Tween.
Step 5
Right click on Layer 1 (Click on the layer name, where it says "Layer 1"). Choose Add Motion Guide in the pop-up menu. The Flash program will now insert a motion guide layer on top of layer 1. Motion guide layers are used to draw lines an animated symbol should 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").
Step 7
Click on the Pencil tool in the left toolbox. Set the Pencil Mode to Smooth (in the Options section of the left toolbox).
Step 8
Draw a line. Begin on the image and draw a line to the other side of the Stage.
Step 9
Go back to Frame 1 in the Timeline. Click on the Arrow tool in the left toolbox. Select the "Snap to Objects" button in the Options section of the left toolbox.
Step 10
Place the image with its center on the beginning of the motion guide (the black line you have drawn with the Pencil). The center of the image shows as a +. A black circle appears when the image is snapped to the motion guide. Release the mouse button when the image is snapped to the guide.
Step 11
Go to Frame 40. Place the image with its center on the end of the motion guide.
Step 12
Choose Control > Test Movie from the top menu to test your Flash movie.
MASK
Inserting Layers and Naming them
By default you will have a layer in your timeline window. Insert one more layer, totally you need two layers to mask an object.
Rename the top layer to "Mask" and the layer below that to "background".
Creating Shape Tween
Import your picture to the "background" layer.
Using Oval tool from your tool box, draw a circle in your "Mask" layer and delete it's border.
Drag the circle to one end of your picture.
Now go to “frame 40" of your "Mask" layer and press "F6" to insert a new keyframe.
Now go to "frame 40" of your "background" layer and press "F5" to insert frames, so that your background image is available all through your mask.
Select "frame 40" of your "Mask" layer, that is your new keyframe, Keeping the play head on "frame 40" of "Mask" layer, drag the circle to other end of your picture.
Now go back to "frame 1" of your "Mask" layer, keeping the playhead on "frame 1" of your "Mask" layer, select Shape tween in your properties window.
Masking
Right click on the "Mask" layer (the area where you named the layer not where the frames exist) and select Mask.
Your Mask is all ready. Press Ctrl+Enter to view your Mask.
Like it on Facebook, Tweet it or share this article on other bookmarking websites.