Multimedia systems

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

Flash documents size and speed setup

Size: default 550 x 400 pixels

o Full screen: 1024 x 768 pixels, 800 x 600 pixels
o Banner: 1000 x 100 pixels, 800 x 100 pixels
Speed: default 24 fps (frame per second)

Try to do the setup as follows:

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:

1.Open a new Flash document (with Action Script 3.0).

2.Click File and Save it as tween-motion.fla.

3.Click Fill Color Tool ( ) to choose any color you like.

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.

8.Click Frame 40 on Layer 1 of the timeline.

9.Click Insert on the menu bar > Choose Timeline > Click Keyframe.
10.Click Selection Tool () from Tools Panel.
11.Use the Selection Tool to drag the circle 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.
13.Save your work
Publish a movie
Steps:
14.Find and Open the Flash file tween-motion.fla if you have closed it.
15.Click File on the menu bar > Click Publish.
16.Locate and open (by double-click) the tween-motion.html which you have just published.

Create a projector (executable file)

Steps:
17.Open Flash program tween-motion.fla if you have closed it.
18.Click File on the menu bar > Publish Settings > Click Win Projector check box > Click OK.
19.Click File on the menu bar > Click Publish.
20.Locate and Open (or double-click) the tween-motion.exe which you have just published.
Lab: 2 Creating a Flash Movie (Shape Tween)
Steps:

1.Open a new Flash document (with Action Script 3.0).

2.Click File and Save it as tween-motion.fla.

3.Click Fill Color Tool ( ) to choose any color you like.

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 Shape Tween.

8.Click Frame 40 on Layer 1 of the timeline.

9.Click Insert on the menu bar > Choose Timeline > Click Keyframe.

10.Click Selection Tool () from Tools Panel.

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.

13.Save your work

Lab 3: Creating a Flash Movie (Classic Tween & Shape Tween)
Requirements:
1.Open tween-motion.fla.
2.Insert a new layer and rename it to square.
3.Draw a square (any color) on the square layer.
4.Create a classic tween on the square layer and make the square move from the top to bottom of the stage.
5.Save the movie.
Lab 4: Transforming text (Skew part, Break Apart, Color text)

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).

2.Click File > Save it as text.fla.

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)

6.Save your work.

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.

) > Choose gradient color

(Tip: Select each letter > Use Fill Color Tool ( Color Panel to change color)
9. Save your work.
 (ii) Vertical Text, Rotate Text and Zoom Text

(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).

2.Click File and Save it as TextVnR.fla.

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.

6.Insert Frame in Frame 45 of Background layer.

7.Insert another new layer and rename it to V-Hello.

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.

17.Drag the word Hello to the center.

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.

21.Insert Keyframe in Frame 21 on Layer Welcome.

22.Type a BIG word Welcome (such as size = 95) on the stage.

23.Right-click in Frame 21 on Layer Welcome > Select Create Classic Tween.

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).

2.File > Save it as Mask.fla.

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.

6.Test and Save the movie.

Lab 6: Mask Spotlight
Steps:
1.Open a new Flash document (with Action Script 3.0).

2.File > Save it as Spotlight.fla.

3.Rename Layer 1 to Text, and then type Catch me if you can! on the stage.

4.Set background color to black and the text to yellow.

5.Insert Frame in Frame 40 on Text layer.

6.Insert a new layer and rename it to Mask.

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.

9.Select the Mask layer > Right-click to choose Mask.

10.Test and save the movie.

Lab 7: Motion Guides

Steps:
1.Open a new Flash document (with Action Script 3.0).

2.Save file as Motion.fla.

3.Rename Layer 1 as Bean.

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).

11.Test and save the movie

Lab 8: Motion Presets
Steps:

1.Open a new Flash document (with Action Script 3.0).

2.Save file as MP.fla.
3.Rename Layer 1 as ball.
4.Import the file ball.png to Frame 1 of the ball layer.
5.Move the image to the top left corner of the stage.
6.Use the Free Transform Tool to scale down the image.
7.Select the image.
8.On the menu, choose Window, and then Motion Presets
9. On the Motion Presets Panel, choose Default Presets, and then bounce-out-3D.
10. Convert the image into a movie clip by clicking Ok on the Convert selection
to symbol for tween dialog.
11. Test and save the movie
Lab 9: Brightness, Tint and Alpha
Steps:
1.Open a new Flash document (with Action Script 3.0).

2.Save file as Photos.fla.

3.Rename Layer 1 to Photo1.

4.File > Import any photo and resize if necessary.

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%.

7.Insert Keyframe in Frame 20 > Insert Keyframe in Frame 30.

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%.

9.Save and test the movie.

Lab 10: Change photo colors tint
Steps:
1.Use the same file.

2.Insert a new Layer and rename to Photo2.

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.

5.Insert Frame in Frame 60 on the same layer.

6.Insert Keyframe in Frame 40 and Frame 50 of the same Layer.

7.Click Frame 30 on Layer Photo2 > Select the photo.

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%.

11.Click Frame 50 on Layer Photo2 > Select the photo.

12.In the Properties Panel, choose Tint in the Style dropdown list. Set the color to blue and the percentage to 50%.

13.Save and test the movie

Lab 11: Change photo transparency Alpha

Steps:
1.Use the same file.

2.Add Layer 3 and rename to Photo3.

3.In Frame 65 on Layer Photo3, Insert Keyframe > File > Import any photo and resize if necessary.

4.In Frame 65, Create Classic Tween.

5.In Frame 75, Insert Keyframe.

6.In Frame 85, Insert Keyframe.

7.In Frame 95, Insert Keyframe.

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%.

10.Remove Tween from Frame 75 to Frame 84.

11.Save and test the movie.

Symbols and Interactivity

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.

Advantages to create a movie clip symbol

Maintain its own independent timeline.
Require only one layer and one frame in the main movie.
Sound and associated Action Script statement can be added.
Can be used to animate a button.

30