Vikas,arun,shubham,umesh

8/13/2019 Vikas,arun,shubham,umesh

1/61

Group

memebers

names

-Vikas

Bhatol

Arun

Shubham Patidar

Umesh Patidar


2/61

dobe Flash (formerly called "Macromedia Flash")

Is a multimedia and software platform used for authoringofvector graphics, animation, games and rich Internetapplications (RIAs) that can be viewed, played and executed

inAdobe Flash Player. Flash is frequently used toadd streamed video or audio players, advertisementand interactive multimedia content toweb pages, althoughusage of Flash on websites is declining.
http://en.wikipedia.org/wiki/Macromediahttp://en.wikipedia.org/wiki/Macromediahttp://en.wikipedia.org/wiki/Multimediahttp://en.wikipedia.org/wiki/Softwarehttp://en.wikipedia.org/wiki/Platform_(computing)http://en.wikipedia.org/wiki/Platform_(computing)http://en.wikipedia.org/wiki/Vector_graphicshttp://en.wikipedia.org/wiki/Flash_animationhttp://en.wikipedia.org/wiki/Gameshttp://en.wikipedia.org/wiki/Rich_Internet_applicationhttp://en.wikipedia.org/wiki/Rich_Internet_applicationhttp://en.wikipedia.org/wiki/Rich_Internet_applicationhttp://en.wikipedia.org/wiki/Adobe_Flash_Playerhttp://en.wikipedia.org/wiki/Adobe_Flash_Playerhttp://en.wikipedia.org/wiki/Streaming_mediahttp://en.wikipedia.org/wiki/Media_player_(application_software)http://en.wikipedia.org/wiki/Media_player_(application_software)http://en.wikipedia.org/wiki/Interactivehttp://en.wikipedia.org/wiki/Web_pagehttp://en.wikipedia.org/wiki/Web_pagehttp://en.wikipedia.org/wiki/Web_pagehttp://en.wikipedia.org/wiki/Web_pagehttp://en.wikipedia.org/wiki/Web_pagehttp://en.wikipedia.org/wiki/Interactivehttp://en.wikipedia.org/wiki/Interactivehttp://en.wikipedia.org/wiki/Interactivehttp://en.wikipedia.org/wiki/Interactivehttp://en.wikipedia.org/wiki/Media_player_(application_software)http://en.wikipedia.org/wiki/Media_player_(application_software)http://en.wikipedia.org/wiki/Media_player_(application_software)http://en.wikipedia.org/wiki/Streaming_mediahttp://en.wikipedia.org/wiki/Streaming_mediahttp://en.wikipedia.org/wiki/Streaming_mediahttp://en.wikipedia.org/wiki/Streaming_mediahttp://en.wikipedia.org/wiki/Adobe_Flash_Playerhttp://en.wikipedia.org/wiki/Adobe_Flash_Playerhttp://en.wikipedia.org/wiki/Adobe_Flash_Playerhttp://en.wikipedia.org/wiki/Rich_Internet_applicationhttp://en.wikipedia.org/wiki/Rich_Internet_applicationhttp://en.wikipedia.org/wiki/Rich_Internet_applicationhttp://en.wikipedia.org/wiki/Rich_Internet_applicationhttp://en.wikipedia.org/wiki/Rich_Internet_applicationhttp://en.wikipedia.org/wiki/Rich_Internet_applicationhttp://en.wikipedia.org/wiki/Gameshttp://en.wikipedia.org/wiki/Gameshttp://en.wikipedia.org/wiki/Gameshttp://en.wikipedia.org/wiki/Gameshttp://en.wikipedia.org/wiki/Flash_animationhttp://en.wikipedia.org/wiki/Flash_animationhttp://en.wikipedia.org/wiki/Vector_graphicshttp://en.wikipedia.org/wiki/Vector_graphicshttp://en.wikipedia.org/wiki/Vector_graphicshttp://en.wikipedia.org/wiki/Platform_(computing)http://en.wikipedia.org/wiki/Platform_(computing)http://en.wikipedia.org/wiki/Platform_(computing)http://en.wikipedia.org/wiki/Platform_(computing)http://en.wikipedia.org/wiki/Platform_(computing)http://en.wikipedia.org/wiki/Softwarehttp://en.wikipedia.org/wiki/Multimediahttp://en.wikipedia.org/wiki/Multimediahttp://en.wikipedia.org/wiki/Multimediahttp://en.wikipedia.org/wiki/Multimediahttp://en.wikipedia.org/wiki/Macromediahttp://en.wikipedia.org/wiki/Macromediahttp://en.wikipedia.org/wiki/Macromediahttp://en.wikipedia.org/wiki/Macromediahttp://en.wikipedia.org/wiki/Macromediahttp://en.wikipedia.org/wiki/Macromediahttp://en.wikipedia.org/wiki/Macromedia


3/61

The Flash application

consists of four main areas: Stage

Timeline Toolbox

Panels

Property Inspector


4/61


5/61


6/61


7/61

TimelineIn addition to having height and width, movies have an added dimension

of time. This is what the Timeline represents. Understanding how the

Timeline works is critical to designing in Flash.

Some movies play from start to finish and stop, some loop endlessly, and

some start and stop when the user clicks a button or link. All of these

methods of playback are oriented to the Timeline.

Before we begin, if you are using Flash 5, go to Edit > Preferences and

select the General tab. For Timeline Options enable Flash 4 Frame

Drawing. The screen shots throughout the course were made with this

option enabled. You might find this option helpful in understanding the

timeline display. Flash MX and MX 2004 use this same timeline drawing

method by default, therefore you don't need to select this option for

these versions of Flash.


8/61

FramesA frame is a moment in time.If the frame

rate is set to 12 fps, each frame represents1/12 of a second. Likewise, a span of 12

frames will take one second to play. The

length of a movie is determined by the

number of frames of content created.


9/61


10/61

Keyframe marksA keyframe marks an important moment in time;

for example, when an image appears on the Stageor when an object begins or ends a transition.

We're going to morph the rectangle into a different

shape. We have a starting keyframe so the nextstep is to add a keyframe at the end of the

transition.


11/61


12/61

LayersLayers are like transparent sheets of acetate

stacked one on top of the other. A new Flash

movie has a single layer by default. You add more

layers to organize the content of your movie.

Layers allow you to separate different objects,

making it easier to edit them without disturbing

the contents of other layers. Another reason touse layers is that a tweened object must be

isolatedon a separate layer or it won't tween.


13/61

Layers


14/61

PanelsYou've already seen two panels during these lectures: theProperty Inspector panel and the Scene panel. The panels inFlash help you to view, organize and change elements of amovie. Here are some examples of how they are used.

To display the dimensions and location of an objectTo mix custom colors and gradientsTo apply transparency and tints to objects

A list of all the available panels can be found inWindow >Panels. You can move, show, hide, and resize panels. Once youhit upon an arrangement of panels you like, you can create acustom layout for Flash and save it so you can recall it at any

time.


15/61

There are following types of panels listed in the menu

bar:

1. Color mixerthat allows you to create new colors andfill the color in different style.


16/61

2. Transformthat allows you to rotate and skew

an object numerically.


17/61

3. Movie Explorer shows the content of the

movie.


18/61

. o or wa c es ave eweb safe colors.


19/61

. rarys ores sym o s ainclude graphics, buttons and

movie clips.


20/61

Toolbox

There are a number of diverse drawing tools atyour disposal to assist you in creating graphics for

your Flash movies. We'll learn how to use the

tools and how to apply color to the objects you

create.

Exploring the Toolbox

The Flash Toolbox provides tools for selecting,

drawing, and navigating around the Stage. It is

divided up into four sections.


21/61


22/61

Tools- For Drawing, Adding text, Applying color

to fills and strokes, and for selecting and

modifying objects.

View- tools for scrolling and zooming in and out

of the Stage and Work Area.

Colors- for applying colors to text and shapes.

Options- modifiers that provide additional

capabilities to the tools.


23/61

Arrow Tool

The Arrow tool (shortcut V) is the primary selection tool

in Flash and it also can be used to modify lines and

shapes. There is another arrow-shaped tool that's white

beside it in the Toolbox. This is the Sub select tool

Oval Tool

You've used the Oval tool (O) so many times now that

there isn't much to add. If you hold down the Shiftkeywhile drawing with the Oval tool, the result will be a

perfectly round circle. There are no modifiers for the

Oval tool.


24/61


25/61

Pencil Tool

The Pencil tool (Y) is used to draw freeform

lines by dragging the cursor along the Stage.It can be set to draw straight lines and

smooth curves. The stroke width, style, and

color can be set using the Stroke panel. We'llcover that at the end of the lecture.


26/61

Pen Tool and Subselect Tool

The pen and Subselect tools made their debut in

Flash 5. The Pen tool is used to construct straight

lines and curves in open or closed shapes by

placing anchor points that connect together. The

points can be manipulated with the Pen andSubselect tools to adjust the type of point and

the angle of curves. You can also add, delete and

reposition points. These tools can also be usedto manipulate shapes drawn with other tools

such as the Oval or Rectangle tool.


27/61

The Pen tool can be accessed by clicking on it or

by using the keyboard shortcut P. It has no modifiers.

The Subselect toolcan be accessed by clicking on itor by using the keyboard shortcut A. It has no modifiers.

Brush Tool The Brush tool (B) draws as if you're

using a paint brush. No stroke is applied. The fill colour is

determined by the colour displayed in the Fill Colour

button in the Toolbox or in the Fill panel.

Eraser Too


28/61

Eraser Too The Eraser (E) provides a number of ways to erase lines and fills

from a layer. It has no effect on grouped objects, symbols, and

text.

Paint Bucket ToolThe Paint Bucket (K) fills enclosed areas with colour. It fills

empty areas as well as changes the colour of areas already

filled. The Paint bucket has a Gap Size modifier that canoverlook gaps so that you can fill areas that aren't completely

closed. With the Transform Fill modifier, you can adjust the size,

direction and centre point of gradients. The Paint Bucket tool

allows you to select multiple fills and change them

simultaneously.


29/61

Ink Bottle Tool

The Ink Bottle tool (S) changes the stroke colour, line width and

line style. It isn't necessary to select strokes before applying the

Ink Bottle so it makes it easy to change a number of strokes in

quick succession. To use the Ink Bottle tool:

Dropper Tool

The Dropper Tool has a keyboard shortcut of Iwhich probably

reflects the fact that it's also referred to as the Eyedropper Tool.It is used to copy colour and style attributes of lines and fills so

they can be applied to other objects.


30/61

Hand Tool

Using the Hand tool allows you to shift your view of the Stage and

Work area. Once the Hand tool is selected, click on the Stage (or

Work Area), hold down the mouse button and drag in anydirection.

Lasso Tool:

Its function is complementary to the Arrow Tool, since itcanselectany object in a free way (the Arrow Tool can only select objects or

rectangular or square zones). In counterpart, the Lasso Toolcan't

select fillings nor objects (if we dont make the selection by hand).

Text Tool:

It creates a text in the place where we click. Its properties will be

shown in the next theme.


31/61

Adjusting Objects: It is used to make objects

to "fit" with others,i.e. if it is possible, to intersect

its borders, then objects seem to be "grouped".

Smoothening: It softens the straightsegments in less rigid lines.

Straightening: It does the inverse work. Itconverts the rounded segments in more straight

ones.

Rectangle and other tools


32/61

Rectangle and other toolsOn the same spot of the tools panel you got several tools. By

default you will see the rectangle tool. To select another tool: hold

the left mouse button down for while and then select the one you

want.Rectangle tool (by default): Draw simple rectangles. In the

parameter's panel you can define strokes and filling properties.

Rectangle primitive tool: Lets you define additional

properties like rounded corners

Oval tool: Draw ovals

Oval primitive tool: Define in addition other features, such

as start/end angle, inner radius etc.

Polystar tool: Define polygons and stars (there is a small

pull-down menu in the properties panel that you should notoverlook !)

Below you can see a few drawings. The screen capture has been

taken with the Polystar tool activated.


33/61

various drawings with the rectangle, oval, polystar tools
http://edutechwiki.unige.ch/en/File:C3_tool_polystar.png


34/61

"Line" drawing Options

In the options section you can select different

ways of drawing support. I.e. the straight icon

looks like this: . Below is a screen-dump thatdemonstrates the difference

between straight, freehandand smoothdrawing.
http://edutechwiki.unige.ch/en/File:Cs3_tool_pencil_straight.pnghttp://edutechwiki.unige.ch/en/File:Cs3_tool_pencil_straight.pnghttp://edutechwiki.unige.ch/en/File:Cs3_tool_pencil_straight.png


35/61

The three pencil drawing modes (CS3, same principle)
http://edutechwiki.unige.ch/en/File:Flash-cs3-drawing-tools-pencil.png


36/61


37/61

Filling a closed graphic with paint

Fl h th f ll i fil t d t i
http://edutechwiki.unige.ch/en/File:Flash-cs6-paint-bucket-annotated.png


38/61

Flash uses the following file types and extensions:

FLA

Flash file. This is the "master" document file for a flash

project, i.e. the source file you work with in the Flashauthoring program. These files can only be opened with

Flash not the Flash Player. To create the final product

which is viewed by end users, export the appropriate file

(usually SWF) from the FLA file.

FLV

Flash Video. Supported from version 7, FLV files are the

preferred format for delivering video clips via Flash.
http://www.mediacollege.com/adobe/flash/files/fla.htmlhttp://www.mediacollege.com/adobe/flash/files/flv.htmlhttp://www.mediacollege.com/adobe/flash/files/flv.htmlhttp://www.mediacollege.com/adobe/flash/files/fla.htmlhttp://www.mediacollege.com/adobe/flash/files/flv.htmlhttp://www.mediacollege.com/adobe/flash/files/fla.htmlhttp://www.mediacollege.com/adobe/flash/files/swf.htmlhttp://www.mediacollege.com/adobe/flash/files/swf.html


39/61

SWF

Flash delivery file the file that end users see. This is a

compressed version of the FLA file which is optimized for

viewing in a web browser, the standalone Flash Player, orany other program which supports Flash. This file type

cannot be edited in Flash.

SWT

Flash template. This allows you to edit and replace

information in a Flash movie file; for example, a Flash

button in which you can replace the text, links, etc.

SWCFlash element. These files have customisable parameters

which allow you to perform various application functions.
http://www.mediacollege.com/adobe/flash/files/swf.htmlhttp://www.mediacollege.com/adobe/flash/files/swf.htmlhttp://www.mediacollege.com/adobe/flash/files/swf.html


40/61

Animation in flash

Introduction to Flash Layers

Think of layers as sheets of transparent paper arranged in

a stack. Each layer is a separate thing, but when you havea stack of layers, each with drawings on them, they can

create an entire scene. You can work on one layer without

worrying about messing up the other layers. For instance,

if you want to erase something on a layer, you can do it

without worrying about erasing anything on other layers.

Youll also find it easier to animate multiple characters if

you put them on different layers.


41/61

Drawings on higher layers will cover drawings on lower

layers, allowing you to create scenes with depth. This is

probably easier to show than tell. Below, youll see fourpictures. The first 3 represent individual layers. The final

one shows them all combined, with Layer 1 on top, Layer

2 next and Layer 3 on the bottom. As you can see in the

Combined image, the tree on Layer 1 covers the imageon Layer 3. The same is true with the dog on Layer 2:

because it is above Layer 3, the dog is in front of the wall.

Creating a New Layer


42/61

Creating a New Layer

There are three ways to create a new layer:

Click on the Add Layer button (pictured below)

Right-click (Ctrl-click) on an existing layer and

select Insert Layerfrom the context menu

Insert > Layer

Deleting a Layer


43/61

Deleting a Layer

To delete a layer:

1.Select a layer (or layers)

2.Click the Delete Layer button or drag the layer on top of the

Delete Layer button

There must always be at least one layer in a Flash movie.

Therefore, Flash won't allow you to delete a single remaining

layer.

Naming Layers

To rename a layer, double-click on the layer name. The name field

will turn blue, meaning that it's editable and will allow you type ina name of your choice. Press Enter(Return) when you're done or

click elsewhere on the screen.


44/61

Show/Hide LayersTo change the visibility of a layer or layers:

Click the symbol in the Eye column to the right of

the layer name to toggle between showing and hiding

the layer.

Click the Eye icon itself to show/hide all layers.Drag the cursor through the Eye icon column of

multiple layers to change the visibility status of those

layers.

With the layer you want to remain visibleselected, Alt-click(Option-click) in the Eye column for

that layer to hide all other layers.


45/61

Lock/Unlock LayersTo lock/unlock one or more layers:

Click the symbol in the padlock column to the

right of the layer name to toggle between locking and

unlocking the layer.

Click the padlock icon itself to lock/unlock all

layers.

Drag the cursor through the padlock column of

multiple layers to change the lock status of those layers.

With the layer you want to remain locked or

unlocked selected, Alt-click(Option-click) in the padlock

column for that layer to lock/unlock all other layers.


46/61

Symbols in FlashThe Symbolscome from objects that we've created

using the tools that Flash 8 provides us.

When transforming these objects into symbols, they

are included in a library at the moment of creation thatallows us using them on several occasions, either in the

same or another movie.

To create a new SymbolTo create a new Symbol go to: Insert > New Symbol(Ctrl

F8)


47/61

In a Flash document, choose Insert > New Symbol(PC-Ctrl/F8).


48/61

AnimationFlash Animation

Animation is the process of creating movement or

change over time.Some examples of Flash

animation are moving an object from one place to

another, fading an object in or out, changing an

object's colour over time, or morphing an object's

shape. Many of these properties can also beanimated in combination.


49/61

Types of Animation

There are two types of Flash animation:

A frame-by-frame animationis created by placing

different objects in each frame of the animation.

A tweened animationis created by setting up the starting

and ending points of an animation and letting Flash create theframes in between.

Frame-By-Frame Animation

Frame-by-frame animations are sometimes necessary when therequired changes over time cannot be created using tweening.

An example of this is an animation of a person walking. In each

frame, the arm and leg movements will be different, requiring a

separate graphic for each frame.


50/61

Creating a Frame-by-Frame Animation

To create a frame-by-frame animation:

1. Click the layer on which you want to place theanimation.

2. Add content to the first keyframe by using the

drawing tools or importing an image.

3. Select the next frame and press F6to make it akeyframe. The content from frame 1 will be copied into

frame 2.

4. Modify the content in frame 2 to create the second

increment of the animation.

5. Continue adding keyframes and modifying the

content until your animation is complete.


51/61

If you don't want to copy over the contents of a

previous frame when creating the next keyframe, pressF7to add a blank keyframe.

View an example of a frame-by-frame animation.

This is what the Timeline looks like for the hand-writing

animation. The Pencil tool was used to write out theword, adding a little bit more in each frame.
http://www.lanoie.net/classes/Flash/Animation/lectures/lecture2_1.htmlhttp://www.lanoie.net/classes/Flash/Animation/lectures/lecture2_1.htmlhttp://www.lanoie.net/classes/Flash/Animation/lectures/lecture2_1.htmlhttp://www.lanoie.net/classes/Flash/Animation/lectures/lecture2_1.htmlhttp://www.lanoie.net/classes/Flash/Animation/lectures/lecture2_1.htmlhttp://www.lanoie.net/classes/Flash/Animation/lectures/lecture2_1.htmlhttp://www.lanoie.net/classes/Flash/Animation/lectures/lecture2_1.html


52/61

Atweened animation

A tweened animationis created by setting up thestarting and ending points of an animation and letting

Flash create the frames in between.

Motion TweeningMotion tweening changes the properties of an instance,

group, or text block over a period of time. Properties that

can be tweened include position, size, skew,

and rotation. If the object being tweened is an instance,then its colour properties, including transparency, can

also be tweened.


53/61

Tweens aren't restricted to moving from Point A to Point

B, so to speak. You can set up numerous keyframes in

between the start and end points to control the object

with intermediate keyframes. When tweening

movements, you don't have to move the object along astraight path if you use motion guides. The path can be

curved or angled and even double over on itself. Tweens

can be nested inside other tweens to create compound

movements. As you can see, motion tweens provideinfinite possibilities to add animation to your Flash

movies.


54/61

Creating a Motion Tween

Here are the steps for creating a basic motion tween:

1. Click the layer on which you want to place thetween.

2. Select the frame where the animation is to begin.

If it's not already a keyframe, make it one by

pressing F6(Insert > Keyframe) or by right-clicking (Ctrl-clicking) in the frame and selecting Insert Keyframe from

the context menu.

3. Place an instance, group, or text block on the

Stage.4. Select the frame where you want the animation to

end and insert another keyframe.


55/61

5. In the ending keyframe, do one or more of the

following:

o Move the object to another position.

o Scale, rotate or skew the object.

o If the object is an instance, use the Effects panel to

alter the instance's brightness, tint and/or alpha. If theobject is a text block, you can change its fill colour.

6. Right-click (Ctrl-click) between the two keyframes

and select Create Motion Tween from the context menu.


56/61

Shape tween setup

Before we can create our tween we are going to need the

shapes that will be used to produce the tween effect.First, create a simple rectangle like the one we have

below, in frame 1 of your timeline.

Inserting keyframes


57/61

Inserting keyframes

Select frame 25 in the timeline window and insert a KeyFrame.

Select frame 50 and insert another KeyFrame. Notice that there isa shaded area from frame 1 to 50. This is your "active" area and

the animation is going to occur within this area.

Changing our shapes


58/61

Changing our shapes

We want our shape to morph from one shape to

another. For contrast let's have our red box morph into a

blue circle.Select the middle frame, frame 25, and draw a big blue

circle on top of the existing red box, so that it is

completely covered. Using the Oval Tool in frame 25,

hold shift, left-click and drag to create a large blue circle.

Your stage should now look like this for frame 25.


59/61

Now insert anotherKeyFrame at frame 26. Leftclick any frame from 27-49 and once again select

the Shape Tween from the Properties window.


60/61


61/61

Test the tween outFrom the Control menu choose Control < Test Movie.

Your shape tween should look like our example. You

can download our raw flash fileif you would like to do so.

Thank you
http://www.tizag.com/pics/flash/shapetween1easy.swfhttp://www.tizag.com/pics/flash/shapetween1easy.flahttp://www.tizag.com/pics/flash/shapetween1easy.flahttp://www.tizag.com/pics/flash/shapetween1easy.swf

Documents

Vikas,arun,shubham,umesh