Multimedia Systems Lab 1 1
Multimedia Systems Lab 1 1
Multimedia Systems Lab 1 1
Lab - 1
By
Dr K Praveen Kumar
Assistant Professor
Department of Computing
Adama Science and Technology University
About Flash
What is Flash?
Flash is a development tool that allows you to create animation and
interactive experiences.
It is an animation and interactive authoring program.
Authoring program is a tool to develop multimedia product, it is
designed to manage and manipulate individual multimedia elements
and provide user interaction.
Flash can be used for
Web sites
Web-based applications
CD-ROM and interactive applications
Video
Characteristic of Flash
The native format of Flash is vector images, which can reduce the size of graphic files.
Vectors are scalable
Flash provides streaming content over the Internet
Instead of waiting for the entire contents of a web page to download, Flash provides
streaming delivery method over the Internet, so that computer begins playing the file as
it continues to receive it, keeping ahead so playback does not pause or break up.
Flash works on a movie metaphor
Metaphor is a figurative representation that links the content of a screen to an
established mental model
Where can you obtain a Flash program?
You can download a 30 days Free Trial version of Flash from
www.adobe.com. (The latest version is Flash Professional CC.)
Download page:
https://creative.adobe.com/products/download/flash?promoid=KSPEX
Understanding the Workspace of Flash
Important parts of the workspace
1) Timeline,
2) Stage,
3) Panels and
4) Tools Panel.
1). Timeline
The timeline is used to organize and control the movies content by specifying when each object appears on the stage.
The timeline has separate layers.
Like transparent sheets of content stacked on top of one another. They allow users draw or place images on different
layers without affecting other items on other layers. There is no limitation to the number of the layers. A well-
categorized system of layers allows users to manage objects more efficiently.
Adding a layer causes it to be placed on top of the other layers.
Can be re-ordered by dragging up or down. The Front and Behind position of the object on the stage is related to
sequence of the layers
The timeline has a play head.
The play head indicates which frame is playing.
You can manually move the play head by dragging it left or right. Dragging the play head also allows you to do a
quick check of the movie without having to play it.
Try to:
1. Insert / rename / delete layers
2. Show/Hide All Layers ( ) / Lock/Unlock ( ) All Layers / Show all Layer as Outline ( )
Note: When you choose any of the layers, a pen icon will be displayed on the layer.
2. Stage
Contains all objects that are seen by the viewer in the final movie.
You can draw objects on, or import objects to the stage.
3. Panels
Help you view, organize, and change elements or object in a file.
The options available on panels control the characteristics of symbols, instances, colors, type,
frames, and other elements. You can use panels to customize the Flash interface.
Panels include Properties Panel, Library Panel, Tools Panel, Actions Panel, Color Panel,
Swatches Panel, and etc.
4. Tools Panel
Contains a set of tools used to draw and edit graphics and text.
Divided into four sections: Tools, View, Colors, and Option.
The followings are the tools and their functions:
Tool Name Function
Selection Selects objects on the work area; an object must be selected before it can be modified.
Subselection Selects objects or parts of objects by dragging a rectangular selection marquee. Modifies specific
anchor points in a line or curve.
Free Transform Moves, scales, rotates, skews, or distorts objects.
Lasso Selects objects or parts of objects by dragging a free-form selection marquee.
Pen Draws lines or curves by creating a series of dots (anchor points technically) that are automatically
connected.
Text Creates and edits text.
Line Draws straight lines (strokes) of varying lengths, widths and colors.
Rectangle Draws rectangles of different sizes and colors. Press and hold [Shift] to draw a perfect square.
Oval Draws oval shapes. Press and hold [Shift] to draw a perfect circle.
Pencil Draws freehand lines and shapes.
Deco Creates drawings and animation based on dynamic shapes and colors.
Brush Draws / paints with brush-like strokes.
Ink Bottle Applies color, thickness and styles to lines.
Paint Bucket Fills enclosed areas of a drawing with color.
Eyedropper Picks up styles of existing lines, fills, and text and applies them to other objects.
Eraser Erases lines and fills.
Hand Moves the view of the Stage and Work Area.
Zoom Increases or reduces the view of the Stage and Work Area.
Getting Started with Flash
Flash Document Setup
1.Click on 550 x 400 pixels button in the Properties Panel to change the document size
2.Enter a value in the FPS edit box to change the speed.
3.Click on the Stages swatch to choose background color.
Create Animation
10
Basic animation requires two keyframes: the starting keyframe and the ending keyframe.
A keyframe is a frame in which you define a change to an objects properties for an animation or include Action
Script code to control some aspect of your document.
The number of frames between two keyframes determines the length of the animation.
In Flash CS5.5, there are 3 methods for creating an animation sequence in Flash:
classic tweening, shape tweening and motion tweening.
In this course, we focus on classic tweening and shape tweening.
In classic tweening, you define properties such as position, size, and rotation for an instance (editable copies of
symbols that are placed on the stage), group, or text block at one point in time, and then you change those
properties at another point in time.
In shape tweening, you draw a shape at one point in time, and then you change that shape or draw another shape
at another point in time.
Playback
Flash movies are viewable through a browser. The browser must have the Flash Player plug-in. Web users must
download (www.adobe.com/downloads/) and install the player in order to view and interact with Flash content.
Flash movies can be saved as executable files, called projector, which can be viewed without the need of Flash
Player.
Publishing
Output File Formats
Save: *.fla
Flash documents, which have the .fla filename extension, contain all the information required to develop, design, and test
interactive content. It can be modified.
Publish: *.swf
The Shockwave file, in order to view your Flash movies on the Web, you must change the movie to a Shockwave file
(.swf) format.
*. html
It is an HTML Wrapper. Flash generates the HTML code that references to its Shockwave
file.
*.exe
It is a stand-alone projector file for Windows. It cannot be modified.
*.app
It is a stand-alone projector file for Mac. It cannot be modified. For example,
File > Publish to export movies out of Flash
By default, it will export to .swf format, and
Will generate the HTML codes that reference the Shockwave file. e.g.
Lab 1: Creating a Flash Movie (Classic Tween)
Steps:
4.Click and hold the Rectangle Tool ( ) > Choose the Oval Tool ( ).
5.Use Oval Tool to draw a circle on the left hand side of the stage.
6.Select Frame 1 on Layer 1 of the timeline.
7.Click Insert on menu bar > Choose Classic Tween.
5.Use Oval Tool to draw a circle on the left hand side of the stage.
9.Click Insert on the menu bar > Choose Timeline > Click Keyframe.
11.Use the Selection Tool remove the circle and insert rectangle to the right hand side of the stage, as shown in the above picture.
12.Click Control on the menu bar > Choose Test Movie > Choose Flash Professional to play the movie.
Text Tool
Flash acts similar to a word processor.
It provides a lot of flexibility when formatting text. The Properties panel allows you to change
the font, size, style and color of a single character or an entire text block.
You can use the Properties panel to set margins, indents and line spacing. You can also align
paragraphs such as left, right, center and justified
Transforming Text
Text is also an object, and can therefore be transformed like other objects in Flash.
The entire block gets transformed.
Use Break Apart command to transform individual letters.
Break apart is a process of making each area of color in a bitmap image into a discrete element you can manipulate separately from the
rest of the image. Also, the process of breaking apart text to place each character in a separate text block.
20
(i) Skew, Break Apart, and Color Text
Steps:
1.Open a new Flash document (with Action Script 3.0).
3.Type a word Cat on the stage, you may change the font size (please choose a bigger size), font type and font
color.
4.Skew the text like the above picture by selecting the word Cat and click Free Transform Tool ( ).
5. Type another CAT on the stage, and fill each letter with different colors (Tip: use the Properties panel)
7.Change the shape of the letter C into a cat shape like the picture below.
(Tip: Use Selection Tool to select the text > Right-click Break Apart twice, then you will find that the letters become a dot pattern. It
indicates that they can now be edited > Click the Subselection Tool > Click the edge of the letter C and reshape the letter to cat shape.)
8. Change the word CAT with gradient color or multiple colors like picture below.
(Create Classic Tween for the vertical word Hello so that it can fly from the right to the left
hand side of the stage starting from Frame 1 to Frame 10.)
Steps:
1.Open a new Flash document (with Action Script 3.0).
3.Click File > Import to stage / Import to Library > Choose any picture such as winter.jpg.
4.Use Free Transform Tools to resize picture to make it the same size as the stage.
5.Rename Layer 1 as Background.
8.Use Text Tool to type a vertical Hello on the right hand side of pasteboard like the picture below. (Tip: Use the
Properties Panel to set the text attributes: font size = 50, color = yellow, Text Direction button = Vertical.)
9.Right-click in Frame 1 and select Create Classic Tween
10.Insert Keyframe in Frame 10 > Drag the vertical word Hello to the left side on the stage.
11.Right-click in Frame 10 on Layer V-Hello > Select Remove Tween. This action will remove the tweening effect from Frame 10 to Frame 45)
Create Classic Tween for the word Hello so that it can fly and rotate from the top to the center of the stage starting from Frame 1 to Frame
20 of R-Hello layer like the picture below
Steps:
12. Insert a new layer and rename it as R-Hello.
13. In Frame 1 of the R-Hello layer, use Text Tool to type Hello on top of the picture like the
following:
14.Right-click in Frame 1 on Layer R-Hello > Select Create Classic Tween.
15.Under the Properties window, select CW in the Rotate dropdown list and type 2 in the
times input box.
16.Insert Keyframe in Frame 20 on Layer R-Hello.
18.Right-click in Frame 20 on Layer R-Hello > Select Remove Tween. (This will remove the
tweening effect from Frame 20 to Frame 45)
19.Save your work and test the movie.
Create Classic Tween for the word Welcome which can zoom from large to small on the stage starting from Frame 21 to Frame 30 of the Welcome layer.
Steps:
20.Insert a new layer and rename it as Welcome.
24.Insert Keyframe in Frame 30 on Layer Welcome > Click Free Transform Tool and drag the edge of the
word Welcome to make it smaller.
25.Right-click in Frame 30 on Layer Welcome > Select Remove Tween. (This will remove the tweening effect from Frame 30 to Frame 45)
26.Save your work and test the movie.
Lab 5: Mask
Steps:
1.Open a new Flash document (with Action Script 3.0).
3.Double-click Layer 1 on the Timeline panel and rename it to Photo, and then click File > Import to stage (import any picture).
4.Insert a new layer and rename it to Text, and then type your name on the stage.
5.Create mask: Right-click Layer Text on the Timeline > Choose Mask.
3.Rename Layer 1 to Text, and then type Catch me if you can! on the stage.
7.Click Oval tool on the toolbox to draw an oval (position at the beginning of the sentence) on the stage.
8.Right-click Frame 1 on Mask layer > Choose Create Classic Tween > Click Frame 40
on the same layer > Drag the oval to the end of the sentence.
Steps:
1.Open a new Flash document (with Action Script 3.0).
4.Right-click Layer Bean to choose Add Classic Motion Guide. (After that you will find that there are
2 layers).
5.Click Pencil tool > Click Pencil Mode (the lower part of the Tools panel) > Click
Smooth option.
6.Click Frame 1 on the Guide layer > Draw a big S on the stage.
7.On the Guide layer, click Frame 40 > Right-click to choose Insert Frame.
8.On Layer Bean, click Frame 1 > Click Window in menu bar > Choose Common Libraries >
Choose Buttons > Locate and choose classic buttons > Choose Ovals > Choose Ovals buttons
- green
9. Drag the bean (green oval button) to the stage and over the beginning of the path (big S) like the picture below. (Beans
registration point must intersect with the path).
10.On Layer Bean, click Frame 1 > Right-click to choose Create Classic Tween > Click Frame 40 on the same layer >
Right-click and Insert Keyframe > Drag the bean to the end of the path (make sure that the registration point intersects with
the path).
5.In Frame 1, Create Classic Tween > In Frame 10, Insert Keyframe.
6.Click Frame 1 > Select the photo > In the Properties Panel, choose Brightness in the Style dropdown list and set the Bright
parameter to 100%.
8.In Frame 30, select the photo > In the Properties Panel, choose Brightness in the Style dropdown list and set the Bright
parameter to 100%.
3.In Frame 30 on Layer Photo2, Insert Keyframe > File > Import any photo and resize if necessary.
4.Right-click the photo > Choose Convert to Symbol > Choose Graphic > OK.
8.In the Properties Panel, choose Tint in the Style dropdown list. Set the color to green and the percentage to 50%.
9.Click Frame 40 on Layer Photo2 > Select the photo.
10.In the Properties Panel, choose Tint in the Style dropdown list. Set the color to red and the percentage to 50%.
Steps:
1.Use the same file.
3.In Frame 65 on Layer Photo3, Insert Keyframe > File > Import any photo and resize if necessary.
8.Click Frame 65 > Select the photo > In the Properties Panel, choose Alpha in the Style dropdown list and set the percentage to 10%.
9.Click Frame 95, select the photo > In the Properties Panel, choose Alpha in the Style dropdown list and set the percentage to 10%.
What is symbol?
In order to create a smaller file size, Flash allows you to create symbol (including graphic, button and movie clip) that can be
re-used without adding file size.
Symbols reside in the Library.
Dragging a symbol from the Library to the stage creates an instance. Flash calls the original a symbol and the copies instances.
Three types of symbols:
1)Graphic
Graphic symbols are effective for re-usable single images.
Can be static images or animated images.
Can be changed in each instance of the image.
Are tied to the main Timeline of the movie.
2)Button
Flash can create interactive buttons that respond to mouse clicks, rollovers, or other actions.
Each button has its own four-frame Timeline. When you select the button behavior for a symbol, Flash creates a Timeline
with four frames. The first three frames display the button's three possible states; the fourth frame defines the active area of
the button. The Timeline doesn't actually play; it simply reacts to pointer movement and actions by jumping to the
appropriate frame.
There are 4 states of buttons, they are:
Up: A visual state representing how the button appears when the mouse pointer is not over it.
Over: A visual state representing how the button appears when the mouse pointer is over it.
Down: A visual state representing how the button appears after the user clicks the mouse.
Hit: A special, non-visual state that determines the area of the screen which the mouse sees as the interactive or hot
area.
Action Script
After you have created the button, you may need to add different actions to this button. Actions can be implemented by
Action Script. Action Script is the scripting language of Adobe Flash. It allows you to create a movie that behaves exactly
as you want. It has its own rules of syntax, reserves keywords, provides operators, and allows you to use variables to store
and retrieve information.
To add Action Script, you can:
Click Windows on menu bar > Choose Actions to display Actions panel
3)Movie Clip
A movie within a movie.
Retains independent timeline when you insert an instance of symbol into a movie.
Keeps going even if the main timeline stops.
30