Mekelle University: Collage of Natural and Computational Science (CNCS) Department of Information Science

MEKELLE UNIVERSITY
COLLAGE OF NATURAL AND COMPUTATIONAL SCIENCE

(CNCS)
DEPARTMENT OF INFORMATION SCIENCE
Laboratory Manual for Multimedia Application and Development
Prepared By:
Kesette G/medhin
Mekelle, Ethiopia
July 2018
Contents
Chapter 1............................................................................................................................................. 1
Multimedia Information Retrieval: ................................................................................................. 1
Document types Monomedium multimedia hypertext hypermedia ............................................. 1
Summary of Practice Questions ...................................................................................................... 3
Chapter 2............................................................................................................................................. 4
Web-based Multimedia .................................................................................................................. 4
What is SVG? ................................................................................................................................... 4
Browser Support ............................................................................................................................. 4
SVG Circle ........................................................................................................................................ 5
SVG Rectangle ................................................................................................................................. 5
SVG Rounded Rectangle ................................................................................................................. 6
SVG Star .......................................................................................................................................... 6
SVG Logo ......................................................................................................................................... 7
SVG Flag .......................................................................................................................................... 8
HTML Multimedia ........................................................................................................................... 9
Browser Support ............................................................................................................................. 9
Common Video Formats ................................................................................................................. 9
Audio Formats ............................................................................................................................... 12
HTML - Embed Multimedia ........................................................................................................... 13
Summary of Practice Questions .................................................................................................... 13
Chapter 3........................................................................................................................................... 14
Multimedia Authoring: Full Multimedia Production .................................................................... 14
The Macromedia Flash Workspace ............................................................................................... 14
Timeline and Layers ...................................................................................................................... 15
Edit Bar .......................................................................................................................................... 15
Panels ............................................................................................................................................ 16
Tools Panel .................................................................................................................................... 17
How to Create an Animated Face Draw Facial Features............................................................... 18
Animate the Facial Features ......................................................................................................... 22
Create a Start button .................................................................................................................... 25
Frames and Key frames ................................................................................................................. 31
How to Create Motion and Shape Tweens ................................................................................... 32
Chapter 4 ........................................................................................................................................... 37
Image Editing and Processing ....................................................................................................... 37
Photoshop Tool Bar....................................................................................................................... 37
Capturing Images .......................................................................................................................... 45
Optimizing your files for Adobe Flash ........................................................................................... 47
Bitmaps ......................................................................................................................................... 48
Vector ............................................................................................................................................ 49
MATLAB......................................................................................................................................... 52
Image Processing .......................................................................................................................... 52
Image Loading and Displaying and Saving .................................................................................... 53
Image Information ........................................................................................................................ 54
Image Restoration Technic Using Average Filter Median Filter.................................................... 54
Average filter................................................................................................................................. 55
Median filter ................................................................................................................................. 56
Morphology................................................................................................................................... 57
Wine filter ..................................................................................................................................... 58
I = imread('a.jpg'); ......................................................................................................................... 58
Chapter 5........................................................................................................................................... 59
Video Production .......................................................................................................................... 59
Ulead Visual Studio ....................................................................................................................... 59
Powerful Editing ............................................................................................................................ 62
Enhanced Timeline View ............................................................................................................... 62
The Multi-Trim Editor.................................................................................................................... 62
Video Studio Editor ....................................................................................................................... 63
Video Filters .................................................................................................................................. 64
Bibliography ...................................................................................................................................... 65
Chapter 1
Multimedia Information Retrieval:
Searching Multimedia Contents from different Sources Multimedia information retrieval is a

research discipline of computer science that aims at extracting semantic information from
multimedia data sources.
Document types Monomedium multimedia hypertext hypermedia

text, video, image, music, speech, graph...multimedia combination of different media
hypertext interlinked text document (e.g. XML, HTML) hypermedia interlinked
multimedia document.
Example:
Laboratory Manual for Multimedia Application and Development |Kesette 1

G.
G.
Summary of Practice Questions
Question
1. What is Multimedia Information Retrieval

2. What are the recent Big Data issues related to recommendation systems on which
research can be done?
3. How much information is lost from 3D scene to 2D image?

G.
Chapter 2
Web-based Multimedia
What is SVG?
SVG stands for Scalable Vector Graphics

SVG is used to define graphics for the Web
SVG is a W3C recommendation
The HTML <svg> Element
The HTML <svg> element is a container for SVG graphics.
SVG has several methods for drawing paths, boxes, circles, text, and graphic images.
Browser Support
The numbers in the table specify the first browser version that fully supports
the <svg> element.

G.
SVG Circle
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">

<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
SVG Rectangle
<!DOCTYPE html>
<html>
<body>

<rect width="400" height="100"
style="fill:rgb(0,0,255);
stroke-width:10;stroke:rgb(0,0,0)" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>

G.
SVG Rounded Rectangle
<!DOCTYPE html>
<html>
<body>
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
</body>
</html>
SVG Star
<!DOCTYPE html>
<html>
<body>
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>

G.
SVG Logo
<!DOCTYPE html>
<html>
<body>
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%"
style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%"
style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana"
x="50" y="86">SVG</text>
</svg>
</body>
</html>

G.
SVG Flag
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML/SVG-Example</title>
</head>
<body>
<svg width="150" height="100" viewBox="0 0 3 2">
<rect width="1" height="2" x="0" fill="#008d46" />
<rect width="1" height="2" x="1" fill="#ffffff" />
<rect width="1" height="2" x="2" fill="#d2232c" />
</svg>
</body>
</html>
Which appears in the browser like this
Activity
 Draw Ethiopian Flag Using SVG

G.
HTML Multimedia
Multimedia on the web is sound, music, videos, movies, and animations.
Browser Support
The first web browsers had support for text only, limited to a single font in a single
color.
Later came browsers with support for colors and fonts, and images!
Audio, video, and animation have been handled differently by the major browsers.
Different formats have been supported, and some formats require extra helper programs
(plug-ins) to work.
Hopefully this will become history. HTML5 multimedia promises an easier future for
multimedia.
Common Video Formats
MP4 is the new and upcoming format for internet video.

MP4 is recommended by YouTube.
MP4 is supported by Flash Players.
MP4 is supported by HTML5.

G.
Format File Description
MPEG .mpg MPEG. Developed by the Moving Pictures Expert Group. The first popular
.mpeg video format on the web. Used to be supported by all browsers, but it is not
supported in HTML5 (See MP4).
AVI .avi AVI (Audio Video Interleave). Developed by Microsoft. Commonly used in
video cameras and TV hardware. Plays well on Windows computers, but
not in web browsers.
WMV .wmv WMV (Windows Media Video). Developed by Microsoft. Commonly used
in video cameras and TV hardware. Plays well on Windows computers, but
not in web browsers.
QuickTime .mov QuickTime. Developed by Apple. Commonly used in video cameras and
TV hardware. Plays well on Apple computers, but not in web browsers.
(See MP4)
RealVideo .rm RealVideo. Developed by Real Media to allow video streaming with low
.ram bandwidths. It is still used for online video and Internet TV, but does not
play in web browsers.
Flash .swf Flash. Developed by Macromedia. Often requires an extra component

.flv (plug-in) to play in web browsers.
Ogg .ogg Theora Ogg. Developed by the Xiph.Org Foundation. Supported by

HTML5.
WebM .webm WebM. Developed by the web giants, Mozilla, Opera, Adobe, and Google.
Supported by HTML5.
MPEG-4 .mp4 MP4. Developed by the Moving Pictures Expert Group. Based on
or MP4 QuickTime. Commonly used in newer video cameras and TV hardware.
Supported by all HTML5 browsers. Recommended by YouTube.

G.
HTML5 Video
<!DOCTYPE html>
<html>
<body>
<video width="400" controls>

<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<p>
Video courtesy of
<a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>
</body>
</html>

G.
Audio Formats
MP3 is the newest format for compressed recorded music. The term MP3 has become
synonymous with digital music.
If your website is about recorded music, MP3 is the choice.
Format File Description

MIDI .mid MIDI (Musical Instrument Digital Interface). Main format for all
.midi electronic music devices like synthesizers and PC sound cards. MIDI
files do not contain sound, but digital notes that can be played by
electronics. Plays well on all computers and music hardware, but not in
web browsers.
RealAudio .rm RealAudio. Developed by Real Media to allow streaming of audio with
.ram low bandwidths. Does not play in web browsers.
WMA .wma WMA (Windows Media Audio). Developed by Microsoft. Commonly
used in music players. Plays well on Windows computers, but not in
web browsers.
AAC .aac AAC (Advanced Audio Coding). Developed by Apple as the default
format for iTunes. Plays well on Apple computers, but not in web
browsers.
WAV .wav WAV. Developed by IBM and Microsoft. Plays well on Windows,
Macintosh, and Linux operating systems. Supported by HTML5.
Ogg .ogg Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5.
MP3 .mp3 MP3 files are actually the sound part of MPEG files. MP3 is the most
popular format for music players. Combines good compression (small
files) with high quality. Supported by all browsers.
MP4 .mp4 MP4 is a video format, but can also be used for audio. MP4 video is the
upcoming video format on the internet. This leads to automatic support
for MP4 audio by all browsers.
Example:
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>

G.
HTML - Embed Multimedia
<html>
<body bgcolor="pink">
<title> How to embed a video </TITLE>
<embed src="Multimedia.MP4" width= "500" height="500">
</embed>
</body>
</html>
N.B: "Multimedia.MP4 is the path the multimedia object to embede
Activity:
Create an online portfolio for your learning progress and achievement
Hint: create menu, create links and navigation for text, image, Audio, video and animation.
Sample Storyboard for personal online portfolio

Question
1. What are the 5 elements of multimedia?

2. Do all HTML tags come in a pair?

G.
3. How is multimedia used today?
4. How to draw a circle in SVG?
Chapter 3
Multimedia Authoring: Full Multimedia Production
Macromedia Flash Professional 8
The Macromedia Flash Workspace
Stage
The Stage is the white area of the workspace (Figure 1). Objects you place on the Stage
will appear in your published movie. The light gray area arround the Stage is called the
workspace. Nothing in the workspace will appear in your finished movie, but you can
place objects there until you want them to appear on the Stage.
Stage Workspace
Figure 1 Flash workspace

G.
Timeline and Layers
The Timeline is where you control the images and sounds in your Macromedia Flash 8 document
(Figure 2). The Timeline is divided into frames. You can add content to the frames on the
Timeline.
Figure 2 Timeline
Edit Bar
The edit bar, at the top of the Timeline, lets you quickly navigate between different parts of
your Flash document (Figure 3). It indicates the current object being edited and lets you switch
between scenes and symbols. You can also change the magnification level of the Stage. You
can use the Timeline button to show or hide the Timeline.
Figure 3 Edit bar

G.
Panels
Panels provide easy access to controls that help you work with the content in your document
(Figure 4 ). By default, the panels are docked to the right side of the workspace. You can undock
panel groups, add panels to a group, undock individual panels, rearrange the order of docked
panels, and collapse and close panel groups. To undock a panel, drag the panel gripper in the upper
left corner of the panel’s title bar.
Gripper
Figure 4 Panels

G.
Tools Panel
The Flash Tools panel is divided into labeled sections for easy tool selection. The Options section
of the Tools panel lets you modify a tool you have selected. If the Tools panel is not visible, you
can display it by selecting Window > Tools. To select a tool, just click it. (You can also use the
shortcut key shown in parentheses in the Tooltip that appears when you rest the pointer over a
tool for a few seconds.)
Selection Sub selection
Free Transform Fill Transform

Line Lasso
Pen Text
Oval Rectangle
Pencil Brush
Ink Bottle Paint Bucket
Eyedropper Eraser
Hand Zoom
Stroke color
Fill color
Figure 5 Tools panel

G.
How to Create an Animated Face Draw Facial
Features
Draw the right eye

1. Start Flash and open a blank new document.
2. The new document contains one layer and
one empty keyframe.
3. Select the Oval tool and draw a small circle to
represent the right eye on a face (Figure 1).
Your circle may not be blue.
Figure 1 Right eye drawn with Oval
4. Select the Selection tool and double-click tool
the circle’s center to select it. You should
see both its outline (stroke) and center (fill)
selected.
5. To change the outline color of the eye, click
the Stroke Color box in the Property
inspector and select a new color (Figure 2). Stroke color Fill color
To change the fill color, use the Fill Color Figure 2 Image Property inspectors
box.
6. On the Timeline, double-click the layer name,
Layer 1
(Figure 3).
This selects the layer name so you can rename
it.
7. Rename the layer Right Eye and press Enter
(Windows) or Return (Macintosh) (Figure 4). Figure 3 Layer name
Figure 4 New layer name

G.
Save the eye graphic as a symbol in the library
Instead of creating two eyes separately, convert
the right eye from a shape to a graphic symbol.
This adds the eye to the library so you can use it
over and over. This will also reduce the size of
your finished movie.
8. On the Right Eye layer, click frame 1 to
select it (Figure 5).
This automatically selects the contents of frame
1. Figure 5 Frame 1 selected
Note: If the right eye is not completely
selected, double-click the eye on the Stage
with the Selection tool to select it.
9. Select Modify > Convert to Symbol.
The Convert to Symbol dialog box opens
(Figure 6). Figure 6 Convert to Symbol
dialog box
10. In the dialog box, name the symbol eye, select
Graphic as the behavior, and click OK
(Figure 7).
The eye on the Stage is now just an instance
(copy) of the master eye symbol, which is
stored in the library. The eye now has a
single blue selection border and can be Figure 7 Symbol name
selected with a single click.
11. Select Window > Library to see that your
symbol has been added to the Library panel
(Figure 8).
Note: You must select the eye symbol in the
library to see the graphic in the preview
window.
You can now reuse the eye symbol as many
times as you want without redrawing it.
Figure 8 Library panel

G.
Reuse the eye symbol to create the left eye
12. Click the Insert Layer button in the lower left
corner of the Timeline to insert a new layer
(Figure 9).
13. Double-click the layer name and change the
name to
Left Eye.
14. On the Left Eye layer, select frame 1.
15. Select the eye symbol in the Library panel and Figure 9 Insert Layer button
drag the symbol onto the Stage (Figure 10).
You now have a second instance of the eye
on the Stage. Using instances from the
library keeps the file size of your movie
smaller than copying and pasting. Smaller
movies load faster in a browser.
Figure 10 Drag eye symbol

onto Stage
Draw the nose

16. Insert a new layer and name it Nose.
17. Select frame 1 on the Nose layer.
18. Select the Line tool and draw two lines that
form an angle to represent a nose (Figure Figure 11 Draw nose
11).
19. To adjust the angle after you’ve drawn it, use
the Subselection tool (white arrow) to drag
one end of the line. (You might try dragging
one end of a line with the Arrow tool to see
the difference between the two tools.)

G.
Add frames to make a three-second movie
A Flash movie typically plays 12 frames per second. To keep the nose on the Stage for 3 seconds, for example, you
need to insert 36 additional frames on the Nose layer after frame 1, the current frame. (Starting at frame 1, it will
take the movie 3 seconds to reach frame 37, because 1 + 36 = 37.)
20. Select frame 37 on the Nose layer and select
Insert > Timeline > Frame.
Flash inserts frames through frame 37 (Figure 12).
Observe that the playhead (the red rectangle at the top
of the Timeline) is on frame 37 and that the nose is
visible but the eyes have disappeared. At the bottom of
the Timeline, you can see that this movie is currently 37 Figure 12 Frame inserted in Timeline
frames, is set to play at 12 frames per second, and will
play for 3 seconds.
Note: The keyboard shortcut for inserting a frame is F5.
21. Drag the playhead to various frames.
The nose remains visible in frames 1 through 37, but the
eyes appear only in frame 1.
22. To see your movie, drag the playhead to frame 1 and
then select Control > Play.
At this point, not much is happening beyond frame 1.
Draw the mouth
23. Insert a new layer and name it Mouth.

24. Select frame 1 of the Mouth layer.
25. Draw a mouth in frame 1.
• Use the Line tool to draw a straight line Figure 13 Mouth as straight line
(Figure 13).
• Select the Selection tool and click on the Stage
away from the line to deselect it.
• Move the pointer toward the middle of the line.
When a curve appears next to the pointer, drag the
middle of the line downward to create a smile
(Figure 14).
• When you release the mouse button, only the smile
remains (Figure 15).
Figure 14 Drag line with Arrow tool
Figure 15 Mouth complete

G.
Animate the Facial Features
Use motion tweens to animate the eyes
Because you created the eyes by using a graphic symbol, you can animate them by using a motion tween. To create
the motion tween, you need a start keyframe and an end keyframe containing the same symbol. You can then use a
motion tween to fill the frames between the keyframes.
1. On the Right Eye layer, select frame 37 and select
Insert > Timeline > Keyframe. This will be the end
keyframe.
A keyframe signals Flash that some animation action
Figure 16 Tween menu
begins or ends at that frame.
2. On the Right Eye layer, select frame 37 and drag the
right eye a short distance.
3. Select any frame between frames 1 and 36 on the Right
Eye layer.
4. In the Property inspector, select Motion from the
Tween menu to create a motion tween (Figure 16).
Note: You can also select Insert > Timeline >
Create Motion Tween.
Notice the frames containing the motion tween are now
light blue and contain a solid arrow running from the
start frame to the end frame.
5. Position the playhead on frame 1 and select
Control > Play to play your movie and see the effect of
the motion tween.
The right eye gradually moves from its original position
in frame 1 to the new position in frame 37. Notice that
only the right eye moves.
Note: If you want to change the motion, move only the
symbol in keyframe 37.
6. Select frame 37 on the Left Eye layer and insert a
keyframe.
7. Move the left eye the same distance as the right eye, and
then create a motion tween between the first and last
frames on the Left Eye layer.
Use a shape tween to animate the mouth
Because you created the mouth by using one of the drawing tools (the Line tool) and have not converted the mouth
to a symbol, it is still a shape. You can use a shape tween to animate the mouth.
8. Select frame 37 on the Mouth layer and insert a
keyframe.
9. With the Selection tool, click on the Stage away from the
mouth line to deselect it. Then drag the mouth line into
a bigger smile.
10. To create a shape tween between the first and last
frames on the Mouth layer, click a frame between
frames 1 and 37, and select Shape from the Tween

G.
menu in the Property inspector.
Notice the frames containing the shape tween are now
light green and contain a solid arrow running from the
start frame to the end frame.
10. Select File > Save.
11. Select Control > Test Movie to see it play.
Selecting Control > Test Movie exports a .swf file and
plays it in a preview window. When the movie reaches
the last frame, it loops back to frame 1 and plays again.
12. Select File > Close to close the preview window. Create
any additional animated facial features as you choose.
Add User Control
In Flash you can use ActionScript to enable the viewer to control a movie. You use frame actions to tell the movie
what to do when it reaches a specific frame. You use object actions to associate the control with an object such as a
button symbol. Object actions, such as button actions, let you give your visitors more control over the movie.
For example:
• You can attach a stop action to the first frame of your movie so the movie will not play past frame 1 until
the viewer makes that happen.
• You can add a Start button in the first frame of your movie and attach a goto action so the movie will
resume playing when the viewer clicks the Start button.
• You can add a Stop button that will be available after the viewer clicks the Start button. If you attach a stop
action to the Stop button, the movie will stop when the viewer clicks the button.
Attach a stop action to the first frame
1. Select the top layer on the Timeline and insert a new

layer.
The new layer is inserted at the top of the list.
Note: A new layer is always inserted above the
currently selected layer. To change the order of layers
on the Timeline, select a layer and drag it to the desired
position in the list.
2. Name the new layer Actions.
3. Select the first frame of the Actions layer.
This is where you will place the stop action telling the Actions Parameters Script
toolbox area pane
movie to stop and not begin playing automatically.
4. Select Window > Actions. Figure 17 Actions panel

G.
The Actions Panel opens (Figure 17). Notice that the
panel title bar reads Actions – Frame. This is because
you are applying an action to a frame, not to a button or
movie clip.
5. Make sure Script Assist is on (the right pane will appear
split, as in Figure 17). If it is not, click the Script Assist
button.
Script Assist makes it easier to add ActionScript to your
Flash documents by letting you fill in dialog boxes
instead of directly writing code.
6. In the Actions toolbox, click the Global Functions
category to display subcategories of actions (Figure 18). Figure 18 Global functions category expanded
7. Click the Timeline Control category to expand it

(Figure 19).
8. Select the stop action. To attach the stop action to frame
1, either double-click the stop icon or drag it to the
Script pane.
9. Close the Actions panel and look in frame 1 of the
Actions layer.
The frame contains a small letter a indicating this frame
contains an action (Figure 20).
Figure 19 Timeline control category expanded
Figure 20 Frame with action added

G.
Create a Start button
Now that you’ve placed a stop action in frame 1, you

need to create an object action giving the user the Figure 21 Create New Symbol dialog box
ability to start the movie. The object action needs to
be associated with an object, so first create a Start
button.
10. Insert a new layer and name it Buttons.
11. Select frame 1 on the Buttons layer, and select
Insert > New Symbol. Figure 22 Symbol-editing mode
The Create New Symbol dialog box opens.
12. Name the symbol Start, select Button for the
Behavior, and click OK (Figure 21).
Flash switches to symbol-editing mode, with a
new blank Stage for your button symbol. The
name of your button appears on the
information bar at the top of the Stage (Figure
22).
The Timeline displays four frames for the four Figure 23 Button Timeline
states of a button (Figure 23). Each frame (or
button state) has a specific function:
• The Up state represents the button’s
appearance when the pointer is not over
the button.
• The Over state represents the button’s
appearance when the pointer is over the
button.
• The Down state represents the button’s
appearance as it is clicked.
• The Hit state defines the target area that
responds to a mouse click. This area is not
visible when the movie plays.

G.
13. Select the Up frame.
14. Use the Rectangle tool to draw a rectangular
button on the Stage. Use the Property
inspector to set stroke and fill colors for the
Up state of the button.
15. Insert keyframes in the Over, Down, and Hit frames.
By inserting keyframes, you
automatically copy the rectangle to the
other states of the button.
Note: Flash automatically inserts a keyframe
in the Up frame.
16. Select the Over frame. Using the Selection
tool, double-click the button on the Stage to
select it, and change the stroke or fill color for
the Over state in the Property inspector.
17. Select the Down frame. Using the
Selection tool, double-click the button on
the Stage and change the stroke or fill
color for the Down state.
18. Select the Hit frame. Use the Rectangle
tool to draw a rectangular target area that
will respond to a mouse click.
Note: It doesn’t matter what colors you use
for the Hit area, because this rectangle is not
visible to viewers of your movie. If you skip
this step, Flash will automatically define the
target area to be the same as the button shape.
19. Insert a layer and name it Text.
20. Select the Up frame on the Text layer and
use the Text tool to type Start. Use the
Property inspector to change the font, size,
and color of the text. Center the text within
the rectangle shape.
21. To exit symbol-editing mode and return to
editing the movie, click Scene 1 on the
information bar at the top of the Stage or
select Edit > Edit Document.
Your Start button does not appear on the
Stage yet, but it is stored in the library.
22. Select the Up frame.
23. Use the Rectangle tool to draw a rectangular
button on the Stage. Use the Property
inspector to set stroke and fill colors for the
Up state of the button.
24. Insert keyframes in the Over, Down, and Hit frames.
By inserting keyframes, you

G.
automatically copy the rectangle to the
other states of the button.
Note: Flash automatically inserts a
keyframe in the Up frame.
25. Select the Over frame. Using the Selection
tool, double-click the button on the Stage to
select it, and change the stroke or fill color for
the Over state in the Property inspector.
Select the Down frame. Using the Selection tool, double-click
the button on the Stage and change the
26. stroke or fill color for the Down state.

27. Select the Hit frame. Use the Rectangle
tool to draw a rectangular target area that
will respond to a mouse click.
Note: It doesn’t matter what colors you use
for the Hit area, because this rectangle is not
visible to viewers of your movie. If you skip
this step, Flash will automatically define the
target area to be the same as the button shape.
28. Insert a layer and name it Text.
29. Select the Up frame on the Text layer and
use the Text tool to type Start. Use the
Property inspector to change the font, size,
and color of the text. Center the text within
the rectangle shape.
30. To exit symbol-editing mode and return to
editing the movie, click Scene 1 on the
information bar at the top of the Stage or
select Edit > Edit Document.
Your Start button does not appear on the
Stage yet, but it is stored in the library.
Create a Stop button
You can repeat the steps you used to create the Start button, or you can simply duplicate and then modify
the Start button.
22. Make sure the Library panel is open. (If not, select
Window > Library.)
23. Select the Start button symbol in the library.
24. Select Duplicate from the Library panel
options menu in the upper right corner of the
panel (Figure 24). The Duplicate Symbol
dialog box opens (Figure 25).
25. Make sure Button is selected for Behavior.
Name the new symbol Stop and click OK.
26. In the Library panel, double-click the icon for
the Stop symbol to edit the symbol (Figure 26).

G.
27. Select frame 1 of the text layer, and use the Text tool to
edit the text to read Stop.
Figure 24 Library panel options menu
28. Click Scene 1 or select Edit > Edit document
to exit symbol-editing mode.
Figure 25 Duplicate Symbol dialog box symbol
Figure 26 Edit Stop
Place the buttons on the Stage
29. Select frame 1 on the Buttons layer.

30. Make sure the Library panel is open. (If not, select
Window > Library.)
31. Drag the Start button from the library onto the Stage.
Select frame 2 on the Buttons layer and insert a keyframe.
Figure 27 Onion Skin Outlines button

32. Delete the Start button from frame 2.
33. Drag the Stop button onto the Stage.
34. Click the Onion Skin Outlines button at the bottom
35. of the Timeline (Figure 27).
With onion skinning turned on, you can view a range of frames.
This will help you align the Start and Stop buttons.
36. Move the Start and Stop buttons until both of them
are in the same position on the Stage.
Note: To fine-tune the position of the buttons, select a
button and use the up, down, left, and right arrow keys.
37. Click the Onion Skin Outlines button again to turn off
onion-skinning. Add button actions
28Figure Script Assist turned on Parameters area Actions - Button
38. Select frame 1 on the Buttons layer, select the Start
28. Figure Script Assist turned on
G.
Button on the Stage, and open the Actions panel (Window > Actions).
Note: Be sure to select the Start button, or your action will be
Applied to the frame, not the button. The Action panel’s title
bar should say Actions - Button.

39. Make sure Script Assist is turned on (Figure 28).
If you don’t see the Parameters area, click the Script Assist button.
40. In the Actions toolbox, expand the Global Functions and Timeline
categories and drag goto to the lower right panel.
Flash automatically adds an on(release) command to the script
along with the goto action. This means the goto action executes
Script pane when the visitor releases the Start button.
41. Make sure Go to and Play is selected in the parameters area.
42. Be sure the setting for Scene in the parameters area is

<Current scene>, and Type is Frame Number. For
Frame, type 2.
This action will start the animation in frames 2 through
37.
Notice that the settings you made in the parameters area
are reflected in the Script pane at the bottom of the
panel. This is the ActionScript that controls the actions
in your movie (Figure 29).
43. Select frame 2 on the Buttons layer and select the Stop
button.
Note: You may need to collapse the Actions panel to Figure 29 Parameters for the goto action
see the layers. To collapse the Actions panel, click the
down arrow on the title bar.
44. Make sure the Actions panel is expanded, and double-
click goto.
45. In the parameters area of the Actions panel, select Go to
and Stop. For Frame, type 1.
This action will stop the animation and redisplay the
Start button in frame 1.
Next, make the movie loop through frames 2–37 until
the viewer clicks Stop. You do this by using a Frame
action.
46. Insert a keyframe in frame 37 of the Actions layer.
47. In the Actions panel, double-click goto.
48. In the parameters area, select Go to and Play, and type
2 for Frame.
49. Close the Actions panel, save your movie, and select
Control > Test Movie to test it.
50. Select File > Close to close the preview window.
Add Sound
1. Insert a new layer below the Actions layer and name it
Sound.

G.
2. Select File > Import > Import to Library.
The Import to Library dialog box opens. Figure 30 Sound Property inspector
3. Locate and select a sound file saved on your computer.
Click Open (Windows) or Import to Library
(Macintosh).
The sound is added to the library.
Note: You can download free music loops and sound-
effect clips at www.flashkit.com, for example.
4. Select frame 2 on the Sound layer and insert a keyframe.
5. Open the library and drag the sound file from the library
onto the Stage.
Flash inserts the sound on the Sound layer, starting in
frame 2.
6. Select frame 2 on the Sound layer. In the Property
inspector, select Start from the first Sync menu and
select Loop from the second Sync menu (Figure 30).
7. To stop the sound when the viewer clicks the Stop
button:
• Select frame 2 on the Buttons layer.
• Select the Stop button.
• Select Window > Actions.
• Double-click stopAllSounds in the Movie Control
category of the Actions toolbox.
• Close the Actions panel.
Save the movie and test it.
Publish Your Movie
When you’re ready to deliver your movie to an audience, you can publish the Flash document (FLA file) for
playback. The Publish command creates a Flash SWF file (playable with Flash Player) and an HTML document that
inserts your Flash movie in a browser window. For viewers who do not have Flash Player installed, you can select
to publish the FLA file in alternative file formats—GIF, JPEG, PNG, or QuickTime—with the HTML needed to
display them in a browser window.
1. Select File > Publish Settings to open the Publish
Settings dialog box (Figure 31).
2. Use the Formats tab to determine which file formats to
output when you publish.
3. Use the Flash tab to determine which Flash Player you
are publishing to (Figure 32). If you think your
audience might not have the latest player, you might
want to select an older player.
4. Select Generate Size Report to see a detailed report of
size for each asset in your movie.
5. Select Protect from Import to prevent anyone from
importing your SWF file into Flash and converting it
back to a FLA file.
6. Select Compress Movie to reduce the file size of the
exported movie.

G.
7. Use the HTML tab to control settings for the
HTML file (Figure 33).
8. To publish your movie, click the Publish button.
Figure 31 Publish Settings dialog box
Figure 32 Flash tab of Publish Settings dialog box Figure 33 HTML tab of Publish Settings dialog box
Frames and Key frames
Frames define increments on the Timeline. The order in which frames appear on the Timeline determines the order
in which they appear when a Flash document plays. You can arrange keyframes on the Timeline to edit the
sequence of events in an animation.
Keyframes are special frames in which you define a change in an animation, either by changing an object’s

G.
properties (such as its size or location) or by adding ActionScript to the frame. Keyframes let you produce
animation without drawing each individual frame. Flash can tween, or automatically fill in, the frames between
keyframes to produce animations. Blank keyframes are keyframes in which all previous frame content is cleared.
A keyframe is indicated on the Timeline with a solid black circle. The frame where a keyframe span ends has a
small white rectangle. A blank keyframe is indicated by an empty circle.
Keyframe Frame End of Blank

keyframe span keyframe
Figure 1 Frames
You can do the following with frames or keyframes:

• Insert frames, keyframes, and blank keyframes.
• Remove frames, keyframes, and blank keyframes.
• Convert frames to keyframes or blank keyframes.
• Drag frames and keyframes to a new location on the same layer or on a different layer.
• Copy and paste frames and keyframes.
How to Create Motion and Shape Tweens
Overview of Tweening
Macromedia Flash 8 provides two methods for creating an animation sequence: tweened animation
and frame-by-frame animation. Frame-by-frame animation involves a series of keyframes with a
different image in every frame. Although this can be useful for complex animations, Flash is
capable of automatically creating animation by tweening images. The word tween comes from an
animation technique in which an artist draws the starting point of a motion—such as a dog wagging
its tail to the left—and the stopping point of the motion—a wag to the right. Then the artist has to
draw all the stages in between to make the tail appear to move. To tween an element on the Stage
in Flash, you set the starting and ending frames for the element, create a tween between those
frames, and Flash automatically fills in the frames between. There are two types of tweens in
Flash: motion tweens and shape tweens.
Motion tweening
You can use motion tweening to animate any of the following elements:
• A symbol (graphic, button, or movie clip)
G.
• A grouped object (a collection of drawn shapes that have been grouped)
• A text block
When using a motion tween to animate a symbol, you can change the following properties:
• Color (tint)
• Alpha (fade or transparency)
• Position
• Size
For example, you can use a motion tween to create the effect of text floating across the Stage, but
if you want the text to slowly fade as it moves across the Stage, you must first convert the text
block to a symbol. You can then use the Color Alpha setting in the Property inspector to create
the fade.
1. Start Flash and open a new blank document.
2. Draw a shape on the Stage or import an
image by selecting File > Import >
Import to Stage. Notice the shape
appears in keyframe 1 of Layer 1.
3. If the object is a drawn object, select the
Selection tool and double-click the object to
select it.
If the object is an imported image, select the
Selection tool and just click the object to
select it.
4. Select Modify > Convert to
Symbol. The Convert to Symbol
dialog box opens.
Note: You cannot apply motion tweens to
shapes. To apply a motion tween, you must
first convert the shape to a symbol.
5. Type a new name for the symbol in the Name
text box, select the Graphic option, and click
OK.
6. Select frame 10.
7. Select Insert > Timeline > Keyframe
(Figure 1).
(This will make the motion tween last for 10 frames.) Figure 1 Inserted key frame
Notice that when you insert a keyframe,

G.
Flash fills the area betweenthe last frame (on the current layer)
and the new keyframe with the
same content. Frames 1 through 10 all contain the new symbol.
8. Make sure frame 10 is selected. This is the end frame for the motion
tween. Select the instance of the symbol in frame 10; then make one
or more of the following changes: Color change: In the Property
inspector, select Tint from the Color pop-up menu (Figure 2).
Select 100% for the Tint Amount and change the color in the color box.
Fading: In the Property inspector, select Alpha from the
Color pop-up menu. Reduce the percentage of the Alpha
Amount for more transparency. For example, an Alpha
value of 0% makes the object disappear. Position:
Use the Selection tool to move the object to a different
position on the Stage. Size: Select the object and Figure 2 Color pop-
up menu
then select Modify > Transform > Free Transform
(Figure 3). Drag the corners of the object to increase size,
decrease size, and rotate the object.
9. Select frame 1 on the Timeline.

10. In the Property inspector, select Motion
from the Tween pop-up menu.
The tween is represented by a solid arrow on a blue
background running from the start key frame to the end key frame.
11. In the Property inspector (Figure 4), adjust one
or more properties of the Motion tween:
• Ease: Controls how fast the object starts or ends the
motion tween. For example, a high number for Ease makes
an object begin tweening quickly but end tweening slowly. Figure 3 Free
Transform menu option
• Rotate: Rotates the object clockwise or counterclockwise a
designated number of times.
• Scale: Keeps the proportions of the object equal when
the tween resizes the object.
• Orient to path: If you have added a guide layer,
the object is linked to the path drawn on the guide layer.
• Sync: Starts and stops the tweening of all objects
on the Stage at the same time. Figure 4 Tween Property
inspectors
• Snap: Keeps the tweened object aligned to an

G.
invisible grid to control spacing.

G.
12. Select Control > Test Movie to test the movie.
13. Select File > Close to close the preview window.
14. To see all phases of the tween at the same time, click
the Onion Skin Outline button at the bottom of the
Timeline (Figure 5).
15. Drag the onion skinning frame handles (they appear as
brackets with circles on them at the top of the Timeline) Figure 5 Onion Skin Outline
button to span the frames in which the object appears.
The steps of the tween are all visible on the Stage (Figure 6).
16. Turn off onion skinning.
17. Save the movie.
Figure 6 Onion skinning visible

Question
1. How can I design a simple game in Flash?

2. Which is better applied, using Macromedia Flash or making an application based
Android to make VSCT-Test?

G.
Chapter 4
Image Editing and Processing
Photoshop Tool Bar
If you cannot see the tool bar, click Window on the Menu bar at the top of the screen, then click
Tools and the Tools bar will appear. In Photoshop CS3 the Tool bar may be displayed in two
ways the images bellow will illustrate the differences:
Compact Tool Bar Extended Tool bar
Above the toolbar, on the left side, a small pair of arrow indicates the compact and the extended
display:

G.
G.
Many of the buttons on the tool bar includes more than one tool or different modes of the same
tool. For example, the Lasso tool hides the button for the Polygonal tool and the Magnetic Lasso
tool. The illustration bellow indicates the additional tools or modes that are available:

G.
G.
G.
G.
1. Tool information menu: Change the size and other options regarding the selected tool from the
tool bar menu.
2. History palette: Undo your steps. Photoshop will keep in the memory around 30 steps of your
actions. You can always change the number of the history steps from the main option.
3. Tool presets: Information defined for current tools
4. Brushes and Clone source: Select a brush and change the options.
Use the Clone source options.
5. Character and Paragraph: Select text size, color, font etc. Align your text. Change space and
other options.
6. Navigator and Info: Navigate the image on your screen. Control the zoom in and zoom out. With
info locate the exactly position of a color Oran object.
7. Color selection: Select a color or create a gradient.
8. Layer palette: One of Photoshop's most powerful features is the use of layers. Each layer in a
Photoshop document is a separate image, which can be edited apart from any other layer. A layer
can be envisioned as an image on a sheet of clear material.
Layers are managed with the Layers palette (above image). The Layers palette displays a small
thumbnail view of each layer to help identify it. You can turn layer visibility on and off and
completely change the appearance of an image without permanently affecting a single pixel. The
eye icon to the left of each layer controls its visibility. A layer is made visible or hidden by clicking

G.
its eye icon (below). The result is the same Photoshop document shown previously with the
exception that one of its layers has been hidden revealing the white background underneath.
To delete a layer, click it and drag it to the Trash button in the Layers palette (below). The result
is shown below right.

G.
Capturing Images
You can use Photoshop to manipulate your images. You can either import your images from a
digital camera, mobile phone camera, a scanner and/orInternet.
1. Digital Camera:
Simple connect your USB digital camera and copy your images to your hard drive in a
folder that you will be able to locate your images later. Then go to Photoshop, click File >
Open> and locate the images you want to open.
NOTE: Make sure when you saving the manipulated image to rename it in
case you want to use the original image again.
2. Mobile Camera:
Use the USB cable to connect the phone mobile camera with your PC / MAC as we describe
above (digital camera).
3. Internet Images:
Find your images from the Internet and save them to a folder on you hard drive. Make sure
that you will name the folder with a name that will help you later to locate the folder and
open your images. (Refer to project guidelines)
4. Scan your images:
Simple put your image faced on the scanner glass and go to File > Import > and select the
scanner source. In some cases a new pop up window will appear depending the scanner
you have, and you will need to adjust parameters for your image.
NOTE: For images you want to print quality: 150-300 dpi. [dot (pixel) per inch]
For images you want to use for the screen 72 dpi.

G.
The above image indicates the actions for scanning an image from a scanner source. The size and
resolution It is really important to organize your files and folders from the early beginning of your
project. The images must be saved in a screen resolution (72 dpi) in order to work easily with you
flash project. Your flash project will be based on the default size 400 x 550 pixels. So will be
helpful if your image size is maximum 800x600 pixels Change the size and resolution of your
images Go to Image on the top menu in Photoshop and select Image size

G.
On the window that appears you can change the dimensions and the resolution of the image.
Make sure that the Constrain Proportion boxed is selected.
Optimizing your files for Adobe Flash
There are few ways to optimize and save your files for the adobe flash.

G.
Here you will find one simple way.
Windows indicating the original image (left) and the new image (right) that will be saved according
to the color resolution.
When you select the color resolution click save and save the image to a new folder (refer to project
guidelines) NOTE If you have transparency in your image background then you will have to click
and select the transparency button. Then your image will be saved as .gif file.
Bitmaps
In computer graphics, a bitmap or pixmap is a type of memory organization or image file format
used to store digital images. The term bitmap comes from the computer programming terminology,
G.
meaning just a map of bits, a spatially mapped array of bits. Now, along with pixmap, it commonly
refers to the similar concept of a spatially mapped array of pixels. Raster images in general may
be referred to as bitmaps or pixmaps, whether synthetic or photographic, in files or in memory.
Eg. Photoshop make use of bitmaps only, images from external sources as digital camera and
scanner.
Vector
Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or
polygon(s), which are all based upon mathematical equations, to represent images in computer
graphics. Vector graphics formats are complementary to raster graphics, which is the
representation of images as an array of pixels, as it is typically used for the representation of
photographic images. There are instances when working with vector tools and formats is best
practice and instances when working with raster tools and formats is best practice. There are times
when both formats come together. An understanding of the advantages and limitations of each
technology and the relationship between them is most likely to result in efficient and effective use
of tools.
E.g. Flash and Illustrator can both use bitmaps and vector images.
Adobe Illustrator – Live trace: Convert your bitmaps into vectors

G.
Open Adobe illustrator and select what type of document you want to open. You can either select
a recent open item or to create new. In the above picture the “print document” is selected. We
change the document specifications and we click ok. The tools, palettes and layout are similar to
Photoshop, however few tools will not be familiar to you. On the top menu bar select live trace
options to choose which live trace alternative you like. In the following example we choose live
trace: color 6 you can see the differences.

G.
The image on the top is a Bitmap and the bottom image is a vector graphic. You can now select
the bottom image copy and paste it in flash to use it as a vector or you can export it as an *swf file
(flash movie) so you can import it to flash later as a flash movie (only one frame).

G.
Activity
Create logo, business card, trademark, website banner (Photoshop)
Design banner and Logo…

• Banner is a graphic image, depending on how it’s used for; it can be a
• Website banner
• Name of a site
• Identity of a site/ page title
• used for informative purposes
MATLAB
Image Processing
Image filtration and restoration (Matlab)

G.
MATLAB is started from within the Windows environment by clicking the icon that should be on
the desktop. ((MATLAB is also available for Linux and MacOS, but these environments are not
supported in the laboratories, and these versions have their own licensing arrangements which are
not covered by the University’s licence.)
The Command window is where commands and expressions are typed, and results are presented
as appropriate. The workspace is the set of variables that have been created during a session. They
are displayed in the Workspace Browser. Additional information about a variable is available
there, some variables can also be edited.
The current directory window displays the contents of the current working directory and the paths
of previous working directories. The working directory may be altered. MATLAB uses a search
path to find files. The search path includes the current directory, all of the installed toolboxes plus
any other paths that the user has added – via the Set Path dialogue accessed from the File menu.
The command history window gives a historical view of the current and previous sessions.
Commands appearing here can be rexecuted.
Image Loading and Displaying and Saving

G.
An image is loaded into working memory using the command
>> f = imread(‘image file name’);
The semicolon at the end of the command suppresses MATLAB output. Without it, MATLAB
will execute the command and echo the results to the screen. We assign the image to the array f.
If no path is specified, MATLAB will look for the image file in the current directory. The image
can be displayed using
>> imshow(f, G)
f is the image to be displayed, G defines the range of intensity levels used to display it. If it is
omitted, the default value 256 is used. If the syntax [low, high] is used instead of G, values less
than low are displayed as black, and ones greater than high are displayed as white. Finally, if low
and high are left out, i.e. use [ ], low is set to the minimum value in the image and high to the
maximum one, which is useful for automatically fixing the range of the image if it is very small or
vary large. Images are usually displayed in a figure window. If a second image is displayed it will
overwrite the first, unless the figure function is used:
>> figure, imshow(f)
will generate a new figure window and display the image in it. Note that multiple functions may
be called in a single line, provided they are separated by commas. An image array may be written
to file using:
>> imwrite(array name, ‘file name’)
The format of the file can be inferred from the file extension, or can be specified by a third
argument.
Certain file formats have additional arguments.
Image Information
Information about an image file may be found by

>> imfinfo filename
Image Restoration Technic Using Average Filter Median Filter
 Average filter
 Median filter
 Morphology
 Wine filter
Steps

G.
Acquire Image
Write Matlab Code
Save It In your drive
Note: the file extension for Matlab is .M file
Average filter
I = imread('a.jpg');
n = imnoise(I,'salt & pepper',0.02);
fn = filter2(fspecial('average',7),n)/255;
fo = filter2(fspecial('average',3),I)/255;
figure (1)
subplot (1, 4, 1)
imshow (I)
title ('ORIGINAL IMAGE')
subplot (1, 4, 2)
imshow (n)
title ('NOISY IMAGE')
subplot (1, 4, 3)
imshow (fn)
title ('filtered noisy image')
subplot (1, 4, 4)
imshow (fn)
title ('filtered original image')

G.
Median filter
n = imnoise(I,'salt & pepper',0.02);
mof = medfilt2(I,[5 5]);
mnf = medfilt2(n,[5 5]);
figure (1)
subplot (1, 4, 1)
imshow (I)
subplot (1, 4, 2)
imshow (n)
subplot (1, 4, 3)
imshow (mof)
title ('MEDIAN ORIGINAL FILTERING')
subplot (1, 4, 4)
imshow (mnf)
title ('MEDIAN NOISY FILTERING')

G.
Morphology
oi = imread('a.jpg');% to read an input image

B = [0 1 0; 1 1 1; 0 1 0];
id = imdilate(A,B);% image dilation:
ie = imerode(A, B); % image erosion:
figure (1)% to dislay result
subplot (1, 3,1)
imshow (oi)
subplot (1, 3,2)
imshow (id)
title ('Image dilation ')
subplot (1, 3,3)

imshow (ie)
title ('Image Erosion ')

G.
Wine filter
n = imnoise(I,'gaussian',0,0.05);
wof = wiener2(n,[3 5]);
wnf = wiener2(n,[5 5]);
figure (1)
subplot (1, 4, 1)
imshow (I)
subplot (1, 4, 2)
imshow (n)
subplot (1, 4, 3)
imshow (wof)
title ('WIENER ORIGINAL FILTERING')
subplot (1, 4, 4)
imshow (wnf)
title ('WIENER NOISY FILTERING')

Question
1. What version had Photoshop reached before a Windows version was released?
2. What does Matlab consist of?
3. What are the types of loops does Matlab provides?
4.

G.
Chapter 5
Video Production
Ulead Visual Studio
Corel Video Studio (formerly Ulead Video Studio) is a video editing software package for
Microsoft Windows distributed by Ulead Systems (a division of Corel).

G.
For users who want to transfer a group of clips from tape to DVD or simply burn an entire tape
to DVD – the DV-to-DVD Wizard is the fastest way to go.
To start, users hook up their DV camcorder and click Start Scan. The software scans the tape at
up to 11x speed depending on the camcorder. Users can then review the
thumbnails to select the clips they want included on their disc. The next step is
to select a theme template, choose quality and burning options, and click “Start”
DV-to-DVD Wizard now goes to work capturing the selected

clips, applying a movie template, authoring a DVD with a menu, and burning a finished DVD
– all of which happens with no further input needed from the user. (For users who really just
want to get the contents of an entire tape on to a DVD in a hurry, the Burn whole tape feature
burns directly from tape to DVD, eliminating the scanning and selection steps.)
Finally, users can save the scan results, called digests, for reference or re-use. Printing
the digests is a great way to create a record of all the shots on a tape.

G.
Digital cameras are getting better at shooting video, making it easier to capture both still
and motion images of people, places and events.
The Video Studio Movie Wizard is perfect for combining still images and video clips into
photo/video “clip shows.”
The new “Import from Mobile Device” feature makes it easy to grab photos and video
from cameras, video enabled cell phones and other devices.
For video clips, the interface provides thumbnail or enlarged playback as well as trimming
options.
Users can drag both still images and video

directly into the Movie Wizard storyboard.
Movie Wizard templates automatically apply
transitions between both video clips and images.
Depending on the template, Pan & Zoom effects
are applied to the still images.
Still image + video clip projects are

fast to make and great to watch. A
terrific way to get more from digital
media!

G.
Powerful Editing
Enhanced Timeline View
In Video Studio 11 Plus, users have up to 6 overlay tracks available. This is useful to
create plenty of impressive picture-in-picture and montage effects.
The Multi-Trim Editor

G.
Video Studio Editor
NEW! White Balance and Auto Tone

Having those great party shots on tape
somehow isn’t as satisfying if it’s all dark and
you can’t see a thing, or those lovely baby
shots are all blue because the camera didn’t
adjust the white balance properly.
Clicking on Color Correction opens the White

balance & Auto-Tone dialog where users can
automatically correct the color and tonal range
(curves) of videos that were recorded in low
light or poor white balance conditions.
The White balance tool includes an

eyedropper with which users can
select a white point to adjust the rest
of the color in the image, as well as
presets for common lighting
conditions.
Auto Tone Adjustment evens out the exposure range for video with contrast problems or
which was shot in low light. These tools were adapted from the HDR technology in Ulead’s
flagship image editor, Photo Impact.

G.
Video Filters
The quality of video that users wish to work with varies greatly. Backing up old VHS
tapes to DVD is an excellent way to preserve family memories, but tape degrades and
the resulting images are often noisy and grainy.
Also, people often want to repurpose digital footage that has been compressed a few
times, leaving blocky artifacts on the screen. VideoStudio 11 has several corrective
filters to o get the best from heavily compressed or older material.
NEW! DEBlock Filter cleans up video

with blocky compression artifacts, such as
movies copied from VCD or the internet.
DeBlock Filter
NEW! DeSnow Filter removes digital

noise from video shot in poor light or
copied from analog sources.

Question
1. Create your own video using Ulead Video Editor?

2. How to find your videos, transitions, and effects in the Clip Bin.
3. Where to edit your video using the timeline.

G.
Bibliography
[1] w3schools.com, "HTML5 SVG," [Online]. Available:

https://www.w3schools.com/htmL/html5_svg.asp. [Accessed July 2018].
[2] simplephotoshop.com, "Photoshop Toolbox Reference," [Online]. Available:

https://www.simplephotoshop.com/photoshop_tools/. [Accessed July 2018].
[3] "Macromedia Flash Curriculum Guide," 1998. [Online]. Available:

https://msu.edu/course/cas/892/hypermedia/web101PDF/fl/Flash%20Lesson%201.pdf.
[Accessed July 2018].
[4] A. H. Hamad, H. O. Muhamad and S. P. Yaba, "De-noising of medical images by using

some filters," International Journal of Biotechnology Research, vol. 22, pp. 1-11, 2015.
[5] "Morphological Image Processing," [Online]. Available:

http://web.nchu.edu.tw/pweb/users/ykchan/lesson/6602.pdf. [Accessed July 2018].
[6] "Ulead VideoStudio 11 Reviewers Guide," [Online]. Available:

http://www.corel.com/content/vpk/uvs11/Ulead_VideoStudio_11_Reviewers_Guide.pdf.
[Accessed July 2018].

G.

Mekelle University: Collage of Natural and Computational Science (CNCS) Department of Information Science

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Mekelle University: Collage of Natural and Computational Science (CNCS) Department of Information Science

Uploaded by

Copyright:

Available Formats

MEKELLE UNIVERSITY

COLLAGE OF NATURAL AND COMPUTATIONAL SCIENCE

Laboratory Manual for Multimedia Application and Development

Multimedia Information Retrieval:

Searching Multimedia Contents from different Sources Multimedia information retrieval is a

Document types Monomedium multimedia hypertext hypermedia

Laboratory Manual for Multimedia Application and Development |Kesette 1

1. What is Multimedia Information Retrieval

Laboratory Manual for Multimedia Application and Development |Kesette 3

SVG stands for Scalable Vector Graphics

The HTML <svg> element is a container for SVG graphics.

Laboratory Manual for Multimedia Application and Development |Kesette 4

<svg width="100" height="100">

<svg width="400" height="100">

Laboratory Manual for Multimedia Application and Development |Kesette 5

Laboratory Manual for Multimedia Application and Development |Kesette 6

Laboratory Manual for Multimedia Application and Development |Kesette 7

Which appears in the browser like this

 Draw Ethiopian Flag Using SVG

Laboratory Manual for Multimedia Application and Development |Kesette 8

Multimedia on the web is sound, music, videos, movies, and animations.

Common Video Formats

MP4 is the new and upcoming format for internet video.

Laboratory Manual for Multimedia Application and Development |Kesette 9

Flash .swf Flash. Developed by Macromedia. Often requires an extra component

Ogg .ogg Theora Ogg. Developed by the Xiph.Org Foundation. Supported by

Laboratory Manual for Multimedia Application and Development |Kesette 10

<video width="400" controls>

Laboratory Manual for Multimedia Application and Development |Kesette 11

If your website is about recorded music, MP3 is the choice.

Format File Description

Laboratory Manual for Multimedia Application and Development |Kesette 12

Summary of Practice Questions

1. What are the 5 elements of multimedia?

Laboratory Manual for Multimedia Application and Development |Kesette 13

Multimedia Authoring: Full Multimedia Production

Macromedia Flash Professional 8

The Macromedia Flash Workspace

Figure 1 Flash workspace

Laboratory Manual for Multimedia Application and Development |Kesette 14

Figure 3 Edit bar

Laboratory Manual for Multimedia Application and Development |Kesette 15

Laboratory Manual for Multimedia Application and Development |Kesette 16

Selection Sub selection

Free Transform Fill Transform

Ink Bottle Paint Bucket

Figure 5 Tools panel

Laboratory Manual for Multimedia Application and Development |Kesette 17

Draw the right eye

Figure 4 New layer name

Laboratory Manual for Multimedia Application and Development |Kesette 18

Figure 8 Library panel

Laboratory Manual for Multimedia Application and Development |Kesette 19

Figure 10 Drag eye symbol

Draw the nose

Laboratory Manual for Multimedia Application and Development |Kesette 20

Draw the mouth

23. Insert a new layer and name it Mouth.

Figure 15 Mouth complete

Laboratory Manual for Multimedia Application and Development |Kesette 21

Use motion tweens to animate the eyes

Laboratory Manual for Multimedia Application and Development |Kesette 22

Attach a stop action to the first frame