Saturday, March 21, 2009

INTRODUCTION AND BASIC OVERVIEW


What is Flash?

Flash is a Product/Software of Macromedia Company, this software is used for assorted Manual & “Video Presentations” and Web “Designing”.

There are two type of files which are created by Flash, one is called (.fla) file, which is normally used for editing purpose and the 2nd is (.swf) used for creating web page. We work on both, Graphic and animation using Flash, as it is used for web designing frequently and is the best software for presentation purposes.

Moreover Flash is also used for applications similar to watching any movie which ends in its particular time period, we work in the flash mode using timelines and frames as per our desired time period or we can create our own drawing or import existing movie parts or drawing a file form our PC. Now days there are many related software’s in the market but people prefer the most attractive designing tools on the web, so now it’s easy to design whatever animation or style you require you can create yourself if you have fully developed a command on the flash software.


STARTUP PHASE


MENU BAR


A “MENU BAR” is part of all software so in Flash mode also it appears on the top upper part of the screen/page. It contains multiple options which are used manually during the work period of our manual/video/presentations.


TOOLS BAR


This option is also available almost in all software’s, showing some quick action “tools” which are also available in the “Menu bar” option under different “Sub Menus”. We can hide and show these “tools” by selecting “View” option from the “Menu bar”.


SCENE NAME


It shows your scene name when you click on, then all the ungrouped objects/symbols will be merged and only scene will remain same. On the right corner it will display your symbol’s name also. You can see “Scene” on the extreme Left of the screen under “Tool bar”.


LAYER BOX

Layer Box is positioned under “Scene” and right of “Tools”, it shows your current layers details, you can add more layers, or delete from the same position.


TIME LINE


“Time Line” is the most important fragment of Flash we make our video/presentation using time line, it’s positioned under “Scene Name” & right of the “Layer Box” containing the frames.


SCROLL BAR


This tool is also part of every software; it is positioned on the right and bottom of the screen in flash to move the working stage right to left and top to bottom as per requirement.


LOUNCHER BAR


This Bar enables us to get multiple panels to process our video/presentation/ task, when we click on any object or on the screen page we see the property or action panel appears on the screen at the bottom of the screen. If the panels are hidden we can display by clicking “launcher bar” which is positioned on the extreme right of the screen on the bottom. We can set more panels in this area for prompt action.

Wednesday, March 11, 2009

Gradients


When you click a Fill Color box, the Fill dialog box shown here opens.

Fill dialog box

Gradients show gradations of color. They display on the bottom row of the Fill dialog box. You will use a gradient to create the movie�s sky. But first, you must create the gradient you will use.

To create the gradient:

  1. Click the first Color box on the gradient row.
  2. Choose Window > Color Mixer from the menu. The Color Mixer panel opens.

Color mixer

  1. Choose Linear from the drop-down menu.
  2. Double-click on the first Edit Gradient Range icon. Color boxes appear.

Gradient Range Icon

  1. Click the color blue to select blue.
  2. Double-click the second Fill Gradient Range icon. Click the color box and select white.

Menu options

  1. Click and drag the second Fill Gradient Range icon to the three-quarter point on the Gradient Range slider.
  2. Click the Menu Options icon.
  3. Click Add Swatch. Flash adds the gradient you created to the color box.

The Rectangle Tool

You use the Rectangle Tool to draw rectangles and squares. In this exercise you will create a rectangle and fill it with the gradient you just created. You will then turn the resulting graphic into a symbol and use it later to create the sky.

  1. Choose the Rectangle tool.

Rectangle tools

  1. Move to the Property inspector. If the Property inspector is not open, choose Window > Properties > Properties from the menu to open it.
  2. Select NoColor in the Stroke color box.

No Color

  1. In the Fill color box, select the gradient you created.
  2. Click the Stage and drag diagonally to create a rectangle.

Create rectangle

Later you will use the graphic you just created. For now, turn it into a symbol.

  1. Choose the Selection tool.
  2. Click the graphic.
  3. Choose Modify > Convert to Symbol from the menu. The Convert to Symbol dialog box opens.
  4. Type Sky in the Name field.
  5. Choose Graphic as the Behavior.
  6. Click OK to store the graphic in the Library. If the Library is not already open, click Window > Library to open the Library. You can see the graphic in the Library.
  7. Press the Delete key to remove the graphic from the Stage.

FLASH DESIGNING!

You set the thickness of the Stroke line in the Property inspector. To set the thickness of the Stroke line:

  1. If the Property inspector is not open, choose Window > Properties> Properties from the menu. The Property inspector appears at the bottom of the screen.

Property inspector

  1. Choose Solid from the drop-down menu to select the type of line that will outline your drawing.
  2. Type 3 in the Stroke Height field to set the line thickness.
  3. Click on the Stage and drag diagonally to draw the ellipse.

Ellipse

Note: You can also use the Property inspector to set the stroke and fill colors.

Creating a Symbol

You are now ready to turn the graphic (the ellipse) you created into a symbol and store the graphic in the Library. Items stored in the Library can be used later.

  1. Choose the Selection tool.

Selection tool

  1. Click and drag to create a rectangle around the ellipse to select it.
  2. Choose Modify > Convert to Symbol from the menu. The Convert to Symbol dialog box opens.

Convert to Symbol

  1. Type Start Button in the Name field.
  2. Choose Button as the type of behavior.
  3. Click OK.
  4. Choose Window > Library from the menu. The Library panel opens. You should see Start Button in the Library window.

Library

  1. Press the Delete key to delete the ellipse from the Stage. Don�t worry. You have a copy of the Start Button in the Library.

FLASH DESIGNING!

  1. Choose Modify > Document from the menu. The Document Properties dialog box opens.
Document Properties
  1. Type 400 px in the Width field.
  2. Type 400 px in the Height field.
  3. Click the Background color box and choose white as the background color.
  4. Type 12 in the Frame Rate field.
  5. Choose Pixels from the drop-down menu in the Ruler Units field.
  6. Click OK.

The Grid

In the exercises that follow, you will be creating graphics. When creating graphics, the grid is often helpful. To turn on the grid:

  1. Choose View > Grid > Edit Grid from the menu. The Grid dialog box opens.

Grid

  1. Click the Color box and select gray to have the grid lines display in gray.
  2. Choose Show Grid to cause the grid to display.
  3. Choose Snap to Grid to cause the edges of your graphic to align with the grid lines.
  4. Set the Horizontal field Horizontal field to 20 px to separate horizontal lines by 20 pixels.
  5. Set the Vertical field Vertical field to 20 px to separate vertical lines by 20 pixels.
  6. Set the Snap Accuracy to Normal.
  7. Click OK.

The Property Inspector

In the Property inspector, you can set the attributes of objects as you work. You will use the Property inspector frequently when working in Flash Professional 8. To open the Property inspector:

  • Choose Window > Properties> Properties from the menu. The Property inspector appears at the bottom of the screen.

Property inspector

The Property inspector is one of many panels found in Flash. When you are not working in a panel, you can collapse the panel. To collapse the Property inspector, click the Collapse icon. To open the Property inspector again, click the Expand icon.

The Oval Tool

In the exercise that follows, you will use the Oval tool to draw an ellipse. You will then turn the ellipse into a symbol. Symbols are reusable graphics you store in the Library. Later in the tutorial you will turn the ellipse into the button movie viewers press to start the movie.

To draw the ellipse:

  1. Choose the Oval tool. There are two color boxes on the Modifier panel. These color boxes are used to set the stroke and fill colors. The stroke color outlines your drawing. The fill color fills the center of your drawing.

Toolbar

  1. Click the Stroke Color box and then click the color black to choose black as your stroke color.
  2. Click the Fill Color box and then click the color navy to choose navy as your fill color.
  3. If selected, click to deselect the Object Drawing option. The Object Drawing option enables you to draw your ellipse as a grouped object that will not merge with other objects you draw. You want this option turned off.

FLASH DESIGNING!

Click Flash Document. The screen shown here appears:

Flash screen

The upper left corner of the screen displays the Tools palette, which contains tools you can use to create or modify graphics and text. You select a tool by clicking on it. Tool modifiers for the selected tool display below the Tools palette. You use modifiers to set tool options.

The Timeline appears in the upper portion of the screen. You use the Timeline to lay out the sequence of your movie.

The Stage displays in the center of the screen. You create your movie on the Stage.

Movie Properties

You start creating your movie by setting the Frame Rate, Dimensions, Background Color, and Ruler Units.

Frame Rate

The speed of the movie

Dimension

The size of the Stage

Background Color

The color of the Stage

Ruler Units

The unit of measure the ruler displays

You set these properties in the Movie Properties dialog box. To set the properties for the movie you are going to create:

FLASH DESIGNING!

In this tutorial I take you step-by-step through the process of creating this Flash Professional 8 movie. You will learn how to create graphics, work with layers, and add motion, sound, and text to your movie.

You will need Flash Professional 8 to take this tutorial. If you do not have a copy of Flash Professional 8, you can download the trial version by clicking here.

Getting Started

To begin, open Flash Professional 8. You will be presented with the screen shown here.

Flash entry screen