10

Technical Vocational
Education (TVE)
VISUAL GRAPHICS DESIGN
Modules
Quarter 4 - Weeks 5 - 7
10
Technical Vocational
Education (TVE)
VISUAL GRAPHICS DESIGN
Quarter 4 – Module 5
Lightning the Street and Fixing
the Home Page and Creating of an
Animation of Walking Dog
TVE - VISUAL GRAPHIC DESIGN 10
Alternative Delivery Mode
Quarter 4 – Week 5 Module: Lightning the Street and Fixing the Home Page and Creating of an
Animation of Walking Dog
Second Edition, 2021
Republic Act 8293, section 176 states that: No copyright shall subsist in any work of the
Government of the Philippines. However, prior approval of the government agency or office
wherein the work is created shall be necessary for exploitation of such work for profit. Such
agency or office may, among other things, impose as a condition the payment of royalties.

Borrowed materials (i.e., songs, stories, poems, pictures, photos, brand names, trademarks,
etc.) included in this module are owned by their respective copyright holders. Every effort has
been exerted to locate and seek permission to use these materials from their respective
copyright owners. The publisher and authors do not represent nor claim ownership over them.

Published by the Department of Education – Schools Division Office of Makati City OIC-
Schools Division Superintendent: Carleen S. Sedilla, CESE
Assistant Schools Division Superintendent/OIC-Chief, CID: Jay F. Macasieb, DEM, CESE
Development Team of the Module
Writer: Raniel DC. De Los Santos
Editors: Corazon B. Delos Santos
Reviewers: Celedonia T. Teneza, EdD
Layout Artist: Mayumi P. Realosa, EdD
Management Team: Neil Vincent C. Sandoval
Chief Education Supervisor, Curriculum Implementation Division
Celedonia T. Teneza, EdD
Education Program Supervisor, EPP/TLE/TVE/TVLABM

2nd Edition Revalidation 2021:

Content Validator: Sheila F. Casidsid
Language Validator: Mayumi P. Realosa, EdD
Layout Validator: Corazon B. Delos Santos
Reviewers: Nida S. Garduque
TVE Department Head III – BNAHS
Lilybeth D. Sagmaquen, PhD
Principal IV – BNAHS
Samuel L. Sia, EdD
Public Schools District Supervisor
Celedonia T. Teneza, EdD
Education Program Supervisor, EPP/TLE/TVE/ TVL/ABM

Printed in the Philippines by the Schools Division Office of Makati City through
the Support of the City Government of Makati (Local School Board)

Department of Education – Schools Division Office of Makati City

Office Address: Gov. Noble St., Brgy. Guadalupe Nuevo

City of Makati, Metropolitan Manila, Philippines 1212
Telefax: (632) 8882-5861 / 8882 - 5862
E-mail Address: [email protected]
 What I Need to Know

This module is here to guide you through this lesson. In case you were not
able to follow and understand some instances, you can always go back to that part.
Are you ready? Let’s start.
The module is composed of two (2) lesson:
• Lesson 1 – Fixing the Home Page
• Lesson 2 – Creating of an Animation of Walking Dog
After going through this module, you are expected to:
A. Know the different arranging effect and the different styles of aligning;
B. Create layers appropriately and organize layers to show objects properly; and
C. Rename and group layers to avoid confusion.

What I Know

Directions: Choose the letter of the best answer. Write the chosen letter on a separate
sheet of paper.
1. Moks wants to bring an object to the front. What format must he choose?
A. Bring to Front C. Send to Back
B. Bring Forward D. Send Backward
2. Marco wants to send an object to the back. What format must he choose?
A. Bring to Front C. Send to Back
B. Bring Forward D. Send Backward
3. Chezka wants to move an object forward. What format must he choose?
A. Bring to Front C. Send to Back
B. Bring Forward D. Send Backward
4. Hannah wants to move an object backward, what format must he choose?
A. Bring to Front C. Send to Back
B. Bring Forward D. Send Backward
5. If Eirene sent Object1 to the back, then sends Object2 to the back, which Object is
at the very back?
A. Object1 C. Both
B. Object2 D. Neither
6. Kylle wants to align an object to the left. What format must he choose?
A. Align Top C. Align Left
B. Align Bottom D. Align Right
7. Monica wants to align an object to the center horizontally, what does she need to do?
A. Align Horizontal Center C. Align Vertical Center
B. Align Bottom D. Align Top
8. Teresa wants to align an object to the center vertically, what does she need to do?
A. Align Horizontal Center C. Align Vertical Center
B. Align Bottom D. Align Top
9. What combination will Jenna use to align an object to the center of the workspace?
A. Align Vertical Center + Align Horizontal Center
B. Align Center
C. Distribute Left + Distribute Right
D. Match Width and Height
10. JD wants to match the height and width of an object to the workspace. What does
he need to do?
A. Match Width C. Match Widht and Height
B. Match Height D. Align to Stage

1
11. Terrence wants to put her title at the top of the workspace, what does he need to do?
A. Align Top C. Align Left
B. Align Bottom D. Align Right
12. Gab has an object selected but align is not taking effect, why?
A. Object is an image C. Align to Stage is checked
B. Object is selected D. Align to Stage is not checked
13. Alison aligned more than one object, what happened?
A. Both objects aligned beside each other
B. Both objects aligned above each other
C. Both objects aligned atop each other
D. Objects will not align
14. Mark wants to make an object untouchable, so she does not mistakenly edit it, what
does he need to do?
A. Lock Image C. Unlock Image
B. Put to another layer D. Put to another Keyframe
15. In what menu can Elaine access arrange and align?
A. File C. Modify
B. Edit D. Command

Lesson
Fixing the Home Page and Creating
1 of an Animation of Walking Dog

Today’s lesson is about arranging and aligning objects in flash. The lesson will
tackle about the different types of arranging and aligning and how one can use them.

Many graphics and animation programs use layers, so it is useful to understand

how they work. In flash, working in layers is very important. They make animation
easier; they allow to keep the elements of your animation separate, and they allow you
to create scenes with the appearance of depth.

Think layers as sheets of transparent paper arranged in stack. Each layer is

separate thing, but when you have stack of layers, each with drawing on them, they
can create an entire scene. You can work on one layer without worrying about messing
up the other layers. For instance, if you want to erase something on a layer, you can
do it without worrying about erasing anything on other layers. You’ll also find it
easier to animate multiple characters if you put them on different layers.

Drawings on higher layers will cover drawings on lower layers, allowing you to
create scenes with depth. This is probably easier to show than tell.

What’s New

Activity 1.1

BUTTERFLY, FLY AWAY

This is a closed notes performance test. Try your best to copy the example
output.
1. Open Adobe Flash
2. Create a new Flash file (ActionScript 2.0)

1
 3. Create 3 layers namely: “Background”,
“Flowers” and “Butterfly”.
4. Draw a good background for your background
layer. Also draw a good butterfly and flower for
the butterfly and background layers.
5. Make sure that the butterfly layer is the top
most layer, followed by the flower layer then the
background layer as the bottom most layer.
6. You can add other objects and layers as well.
7. Make a flying butterfly animation wherein the
butterfly will fly from the left side of the stage and will land to a flower. If you can,
make it seem like the butterfly is flapping its wings.
8. Save and publish your file.

What is It

ALIGNING - Aligning is a way to instantly put your

objects into order. Though not in every way,
through aligning, you can instantly align your
objects left, right, top, bottom or vertical/horizontal
center. Distribute them equally among the length
or width of your document. Expand the object so
they fit the exact size of your document length,
width, or area. Align left will automatically send it
to the very left end side of the document. Respectively, for the align right, top, and
bottom. Align Vertical/Horizontal Center will center the object to the chosen alignment
from where it currently is. Distribute as the name implies, will distribute the number of
objects equally throughout the entire document from end to end. Make same
Width/Height. You can access align through Modify>Align or through the button called
align beside the properties tab.

ARRANGE - Arrange is a way to determine which

among the objects you have should be prioritized.
An object that is at the front will bypass any other
objects and therefore be shown above everything
else. While an object at the back will be of the least
priority and any other object that is above will be
shown instead of it. There are four things Arrange
can do, bring an object forward, or send it
backward, or bring it to the very front or the very back. You can access Arrange through
Modify > Arrange >

LEARN
STEPS:
1. Go to your Desktop > Adobe Flash - if you have permitted to create a desktop
shortcut during installation, and double click the Icon to start running the program.
1.2 Another way of opening Adobe Flash - is going to Start > All Programs >
Adobe Master Collection > Adobe Flash.

3
2. On the start-up of Flash - we will not be creating a new file, instead, we are going
to open and existing file. To do this, click on Open, choose the file you want to open,
in this case, choose the file name “Difference.fla”

3. First, let’s start of by putting the frames of the picture in place - Select the left
frame and press Align Left Edge. Then, select both yellow frames and then send to
back. This should put them at the very back, so they do not overshadow the other
pictures. Make sure the “Align to Stage” check box is checked.

4. Aligning and Arranging (White Rectangle) Next - let’s put the white
backgrounds in place. Select both white backgrounds images and send them to
the back, then, reposition them inside the space in the yellow frames that we
arranged in the previous step.

5. Aligning and Arranging (Title) Next - select the title and bring it to front. This puts
it’s above every other image and overshadows them.

6. Aligning and Arranging (Magnifying Glass) Last - select the magnifying glass and
bring it forward. This should now be infront of the title giving it a little magnifying
effect.

7. Finished Product Now that we’ve finished - you can animate it however you
wish. You’ve now learned how to align and arrange objects and images in flash.
You can experiment with the other align and arrange functions.

8. Saving the file - go to File > Save or click Ctrl + S.

9. Publishing the file - go to File > Publish. This creates an ‘.swf’ file of your file so
that you can open it without the need of Adobe Flash, as long as you have a Flash
Player installed in your computer.

BASIC LAYER PANEL - The layer panel located below the

stage. Here is where you create, organize, rename, and
group your layers.

LAYER TOOLS - Click to add new

layer. Later versions of Flash do not
have a+ on the “new layer” icon.

Click to delete layer. Click the black

dot in this column next to a layer to
lock or unlock layer. Click the lock
symbol at the top of column to lock or
unlock all layers. Locking a layer
prevents you from doing any work
with that layer, so if you don’t want to accidentally do anything to a layer, it is good idea
to lock it. I usually lock all the layers I’m not currently working on.

Click the black dot in this column next to layer to hide or reveal layer. Click the symbol
at the top of the column to hide or reveal all layers. You’ll want to hide layers when
something on them is covering up something you’re working on in another layer.
Add motion layer. This is more advanced and not something to worry about right now.
You may not see this, depending on your version.

4
Add a layer folder. You can use this to organize your layers when you have lots of them.
You can click and drag any layer into a folder.
Later versions of Flash do not have a + on the folder icon.

CREATING A LAYER - We already

know the importance of multiple
layers so now we will learn how to
create layers. By default, there is
only one layer in the timeline. The
new layer button can be seen in the
lower left most corner of Adobe Flash.
This looks like a paper that has a fold
on its corner. By clicking this, you
will add new layers which you can
see on the left side of the timeline.

ORGANIZING LAYERS - You can rearrange layers by clicking on the layers and dragging
it. As we discussed in the beginning, thing is higher layers will cover art in lower layers.
Organizing your layers is very useful so as to make sure that all the objects that you
want to be visible on the stage will be visible.

RENAMING LAYERS - It’s a good

idea to rename layers so you can
easily identify their contents (called
the background layer “background”,
for example). By default, the names
of the layers are “Layer1”, “Layer2” …
and so on.

Double click on layer’s name, and a

white box will appear around with the
layer name with the text inside highlighted. Simply type a new name. Choose something
descriptive: when you have a bunch of layers, it’s good to know what’s on each layer by
simply looking at the names.

REMOVING LAYERS - You can

remove layers or layer folders by
selecting them and clicking the
remove button (the one that looks like
a trash can) beside the new layer
folder button. Note that when you
remove a layer or a folder, all the
contents on that layer or folder will be
removed as well.

5
LEARN

STEPS:
1. Open Adobe Flash
Click on Start > All Programs > Adobe Flash. This will open Adobe Flash.
Double-click the Adobe Flash shortcut icon on the desktop if you have it there.

2. Create a New File

After opening Adobe Flash, you will see a starting page wherein you can choose to open
a recently edited document, create new kinds of document or create a document using
a pre-built template. Click on ActionScript 2.0 under the Create New Column.
3. Rename the first layer “Background”
Do this by double clicking the layer that is named “Layer1” and replace it with
“Background”.
4. Draw your background
Using the Rectangle tool and the Line tool, create a background that looks like a
brick wall. This will serve as your background. Use the color combinations #D00000
(dark red) and #FF00 (red) to make it seem like realistic color for a brick wall.
5. Create another layer
Click the new layer button on the lower left most corner of the Adobe Flash and you
will see an icon that looks like a paper with a fold on the lower left corner.
6. Rename your new layer “Tree”
Do this by double clicking the layer that is named “Layer1” and replace it with
“Tree”.
7. Draw a tree on your tree layer
Using the oval tool (for the leaves of the tree) and the line tool (for the trunk of the
tree), create a background that looks like a tree. Use the color combinations #003300
(green) and #993300 (brown) to make it seem like realistic color for a tree.
8. Organize your layers
We want the tree to be behind the brick wall. To change the color of layers or folders,
drag one or more layers or folders in the Timeline to the desired position. Put the
“Background” layer above the “Tree” Layer.
9. Create another layer
Click the new layer button on the lower left most corner at the Adobe Flash and you
will see an icon that looks like a paper with a fold on the lower left corner.
10. Rename your new layer “Dog”
Do this by double-clicking the layer that is named “Layer1” and replace it with “Dog”.
11. Draw a dog in your “Dog” layer
Using the shapes tool and the line tool, draw a dog. The sample picture on the right
came from a picture of snoopy that is traced using the shapes tool, line tool, and pen
tool. If this is too complex for you, a simple dog will do.
12. Organize your layers
We want the dog to be in front of the tree and brick wall. To change the order of layers
or folders, drag one or more layers or folders in the Timeline to the desired position.
Put the “Dog” layer above the “Background” and “Tree” layer.
13. Create a walking dog animation
To do this, add frames to your “Background” and “Tree” layer up to the 20th space in
the timeline. For the “Dog” layer, add a keyframe for every 5th interval of space in the
timeline and changing the position of the dog every keyframe, for added touch, you can
change the position of the feet of the dog to make it look like it’s lifting its feet while
walking.

6
14. Save and publish your work
Shortcut for save: Ctrl + S; Shortcut for publish: Ctrl + Enter Publishing your file will
cause your file to play on loop. This is not a bug. This is just how flash play it by
default unless you add codes to it.

What’s More

Activity 1.2

My Home Page
A homepage usually tells people something about
you. Just by looking at your homepage, people can
have a glimpse of who you are and your personality.
Create a Homepage that represents who you are or
says something definite about you. Use Align and
Arrange to make your Homage organized and neat.

Example

What I Have Learned

TRUE OF FALSE: Write T beside the number if the statement is true and F if the
statement is false.

_________ 1. The trashcan icon means to add a new layer.

__________2. The layer panel is located below the stage.
__________3. The paper icon with the fold on the bottom left corner means to remove a
layer
__________4. You can add a layer folder in Adobe Flash.
__________5. Multiple layers allow you to create scenes with the appearance of depth.
__________6. You can add a maximum of only one layer folder in Adobe Flash.
__________7. You can add as many layers as you want.
__________8. Locking a layer will make it invisible.
__________9. Drawings on lower layers will cover drawings on higher layers. 10 You
can add more than 1 layer to a layer folder.
__________11. Locking a layer will make it uneditable.
__________12. Removing a layer will cause its contents to be removed as well.
__________13. Hiding a layer will make it uneditable
__________14. Hiding a layer will make it invisible
__________15. Renaming a layer is prohibited in Adobe Flash.

7
 Assessment

Multiple Choice
Direction: Identify the parts indicated in the picture. Encircle the letter of the
correct answer.
1. Moks wants to bring an object to the front. What format must he choose?
A. Bring to Front C. Send to Back
B. Bring Forward D. Send Backward
2. Marco wants to send an object to the back. What format must he choose?
A. Bring to Front C. Send to Back
B. Bring Forward D. Send Backward
3. Chezka wants to move an object forward. What format must he choose?
A. Bring to Front C. Send to Back
B. Bring Forward D. Send Backward
4. Hannah wants to move an object backward, what format must he choose?
A. Bring to Front C. Send to Back
B. Bring Forward D. Send Backward
5. If Eirene sent Object1 to the back, then sends Object2 to the back, which Object is
at the very back?
A. Object1 C. Both
B. Object2 D. Neither
6. Kylle wants to align an object to the left. What format must he choose?
A. Align Top C. Align Left
B. Align Bottom D. Align Right
7. Monica wants to align an object to the center horizontically, what does she need to
do?
A. Align Horizontal Center C. Align Vertical Center
B. Align Bottom D. Align Top
8. Teresa wants to align an object to the center vertically, what does she need to do?
A. Align Horizontal Center C. Align Vertical Center
B. Align Bottom D. Align Top
9. What combination will Jenna use to align an object to the center of the workspace?
A. Align Vertical Center + Align Horizontal Center
B. Align Center
C. Distribute Left + Distribute Right
D. Match Width and Height
10. JD wants to match the height and width of an object to the workspace. What does
he need to do?
A. Match Width C. Match Widht and Height
B. Match Height D. Align to Stage
11. Terrence wants to put her title at the top of the workspace, what does he need to do?
A. Align Top C. Align Left
B. Align Bottom D. Align Right
12. Gab has an object selected but align is not taking effect, why?
A. Object is an image C. Align to Stage is checked
B. Object is selected D. Align to Stage is not checked.
13. Alison aligned more than one object, what happened?
A. Both objects aligned beside each other
B. Both objects aligned above each other
C. Both objects aligned atop each other
D. Objects will not align
14. Mark wants to make an object untouchable, so she does not mistakenly edit it, what
does he need to do?
A. Lock Image C. Unlock Image
B. Put to another layer D. Put to another Keyframe
15. In what menu can Elaine access arrange and align?
A. File C. Modify
B. Edit D. Command

8
10
Technical Vocational
Education (TVE)
VISUAL GRAPHICS DESIGN
Quarter 4 – Module 6
Making Simple Slideshow and
Creating Nature Scene
TVE – VISUAL GRAPHIC DESIGN 10
Alternative Delivery Mode
Quarter 4 – Week 6 Module: Making Simple Slideshow and Creating Nature Scene
Second Edition, 2021

Republic Act 8293, section 176 states that: No copyright shall subsist in any work of the
Government of the Philippines. However, prior approval of the government agency or office
wherein the work is created shall be necessary for exploitation of such work for profit. Such
agency or office may, among other things, impose as a condition the payment of royalties.

Borrowed materials (i.e., songs, stories, poems, pictures, photos, brand names, trademarks, etc.)
included in this module are owned by their respective copyright holders. Every effort has been
exerted to locate and seek permission to use these materials from their respective copyright
owners. The publisher and authors do not represent nor claim ownership over them.

Published by the Department of Education – Schools Division Office of Makati City

OIC-Schools Division Superintendent: Carleen S. Sedilla, CESE
Assistant Schools Division Superintendent/OIC-Chief, CID: Jay F. Macasieb, DEM, CESE

Development Team of the Module

Writer: Raniel DC. De Los Santos
Editors: Corazon B. Delos Santos
Reviewers: Celedonia T. Teneza, EdD
Layout Artist: Mayumi P. Realosa, EdD
Management Team: Neil Vincent C. Sandoval
Chief Education Supervisor, Curriculum Implementation Division
Celedonia T. Teneza, EdD
Education Program Supervisor, EPP/TLE/TVE/TVLABM

2nd Edition Revalidation 2021:

Content Validator: Sheila F. Casidsid
Language Validator: Mayumi P. Realosa, EdD
Layout Validator: Corazon B. Delos Santos
Reviewers: Nida S. Garduque
TVE Department Head III – BNAHS
Lilybeth D. Sagmaquen, PhD
Principal IV – BNAHS
Samuel L. Sia, EdD
Public Schools District Supervisor
Celedonia T. Teneza, EdD
Education Program Supervisor, EPP/TLE/TVE/ TVL/ABM

Printed in the Philippines by the Schools Division Office of Makati City

Through the Support of the City Government of Makati (Local School Board)

Department of Education – Schools Division Office of Makati City

Office Address: Gov. Noble St., Brgy. Guadalupe Nuevo

City of Makati, Metropolitan Manila, Philippines 1212
Telefax: (632) 8882-5861 / 8882 - 5862
E-mail Address: [email protected]
 What I Need to Know

This module is here to guide you through this lesson. In case you were not able
to follow and understand some instances, you can always go back to that part.
Are you ready? Let’s start.
The module is composed of one (2) lesson:
• Lesson 1 – Making Simple Slideshow
• Lesson 2 – Creating Nature Scene

After going through this module, you are expected to:

A. Import images and make a slideshow compose of images;
B. Create an animated nature scene with a sound or music playing in the
background;
C. Import and add music in the timeline; and
D. Distinguish sound files that can and cannot be imported in Adobe Flash.

What I Know

Directions: Choose the letter of the best answer. Write the chosen letter on a separate
sheet of paper.
1. George wants to create a new file in Flash. What key should he press?
A. File > New
B. File > Save
C. File > Open
D. File > Open Recent

2. Ria opened her project in Flash and she noticed that the toolbox is not displayed.
How can she display the toolbox?
A. Goto Control > Toolbox
B. Go to Insert > Toolbox
C. Go to Window > Toolbox
D. Go to Modify > Toolbox

3. Angela needs to insert another image of Rosary directly into the stage, which menu
should she select?
A. File
B. Insert
C. Modify
D. View

4. Ivan wants to insert a keyframe in Frame 85. What key should he press?
A. Alt + F5
B. F6
C. Ctrl + F5
D. Ctrl + F6

5. Marie wants to save her project, what keyboard shortcut should she press to save the
file?
A. Alt + S
B. Ctrl + S
C. Ctrl + Alt +S
D. Shift + S

1
 Lesson
Making Simple Slideshow and
1 Creating Nature Scene

Adobe Flash lets you imports images into the stage or library, be careful and don’t
have files that have the same file name or else the new one will override the old one.
The Import to stage option will also place the photos in your library. The only
difference between “Import to Stage” and “Import to Library” is that one will also place
the photos directly on your Stage.
Adobe Flash offers several ways to use sound. Use sounds that play continuously,
independent of the Timeline, or use the Timeline to synchronize animation to a
soundtrack. Add sounds to buttons to make them more interactive and make sounds
fade in and out for a more polished soundtrack.

What’s New

Activity 1.1

This is a closed notes performance test. Try your best to copy the example flash file.
1. Open Adobe Flash.
2. Create a new ActionScript 2.0 Flash file.
3. Import all the images in My Pictures -> Sample Pictures.
4. Import them according to order that is displayed here ( Jellyfish -> Koala -> Desert
-> Tulips -> Lighthouse )
5. Give them at least 30 frames apart from each other.
6. Save the file and Publish it, Run it to see if you did it right.

What is It

IMPORT TO STAGE

2
IMPORT TO LIBRARY

LEARN
STEPS:
1. Opening Adobe Flash
Go to your Desktop > Adobe Flash if you have permitted to create a desktop shortcut
during installation, and double click the Icon to start running the program. Another
way of opening Adobe Flash is going to Start > All Programs > Adobe Master
Collection > Adobe Flash.

2. Choosing Actionscript 2.0

Once you have opened Adobe Flash, you will be given a choice to create a New File
or open an Existing File. For this Hands-On activity, we need to create a New File
with Action Script 2.0.

3. Importing Image to Stage

Open Adobe Flash, go to File > Import > Import to Stage > select the folder where
‘fam1.jpg’ is located and select the image. In adobe Flash, the shortcut of Importing
an Image an Image to the workspace is Ctrl + R. Click Ctrl + R.

4. Adding Frames
Add 60 keyframes for the layer. There are two ways in adding keyframe: a. Select a
frame in the timeline where you would like to add a keyframe > Right click the mouse
> Insert Keyframe. b. Select a frame in the timeline where you would like to add a
keyframe then press F6. This will serve as your time for the next image to appear.
After choosing the time you want, add another image/import another image.

5. Adding frames for loop

Add another distance time frame for the layer. The use for this one is that even if
you don’t have more succeeding images, you still have to put a time interval for the
last image you imported so that it won’t go back to the screen immediately.

6. Saving the file

Go to file > Publish. This creates an ‘.swf’ file so that you can open it without the
need of Adobe Flash, as long as you have a Flash Player installed in your computer.
Or you can just press Ctrl + Enter.

3
IMPORTING SOUNDS
Importing sounds is important if you want to use it in your Flash file. Sounds are
important especially if you want to enhance the “feel” of your project. When you
import sounds, you will see them in the Library panel. They are the ones with the
speaker icon next to their names.

SUPPORTED SOUND FILE FORMATS

You can import the following sound files formats into Adobe Flash. If you have
QuickTime 4 or later installed in your system. You can import these additional sound
file formats:
• ASND (Windows or Macintosh)
• WAV (Windows Only)
• AIFF (Macintosh Only)
• MP3 (Windows or Macintosh)

If you have quick time 4 or later installed in your system, you can import these
additional sound file formats:
• AIFF (Windows or Macintosh)
• Sound Designer II (Windows Only)
• Sound Only QuickTime Movies (Windows or Macintosh)
• Sun AU (Windows or Macintosh)
• System 7 Sounds (Macintosh Only)
• WAV (Windows or Macintosh)

Note: The ASND format is a non-destructive audio file format native to Adobe Sound
booth. ASND files can contain audio data with effects that can be modified later,
Sound booth multitrack sessions, and snapshots that allow you to revert to a
previous state of the ASND file.

4
ADDING SOUNDS TO THE TIMELINE

Just like other symbols or objects, keeping sounds to your library will not affect your
Flash file unless you placed it on the stage. If you will be using multiple sound files,
it is advised to place each sound file on different layers; sounds would still play
simultaneously unless stated otherwise. You will see a ragged horizontal light violet
line on the layer where you placed the sound.

REMOVING SOUNDS TO TIMELINE

You can edit or delete sounds using the Property Inspector. Select the layer where you
want to remove the sounds and in the PROPERTIES pane, click the SOUND option then
select none from the NAME drop down menu. This deletes the sound from the layer in
the timeline where it is placed.

LEARN

STEPS:

1. Open Adobe Flash

Click on start > all programs > adobe master collection > adobe flash professional.
This will open Adobe Flash.
1.1 Double-click the Adobe Flash Professional shortcut icon on the desktop if
you have it there.

5
2. Open Nature.fla
After Opening Adobe Flash, starting screen will be displayed. This gives you the
option to either create a new blank Flash File, create a Flash file from a template, or
open a Flash file.
Choose Open under the Open a recent Item option.

2.1 This will take you to the Open Window. From here, locate Nature.fla from
the downloadable materials folder then click open.

3. Import Music to Library

You can insert sound files into the flash document by importing them into
library. To do this, select FILE>IMPORT>IMPORT TO LIBRARY.

3.1 In the Import to library window, locate and open the desired sound file then
click open.

4. Place the Sound File on the Stage

To do this, click on the Sound Forest birds chirping nature sound clip from the library
to the stage. Doing this will add the sound clip in the sound layer.

5. Work on Bird Layer

Before you do this, insert a Keyframe first on Frame 100 of the background layer
by selecting the frame and by pressing f6 or by right-clicking on the frame and
selecting Insert Keyframe.
Click on the Bird Layer then go to library. Expand the Bird Folder then drag the
bird movie clip to the stage.

5.1 Insert a keyframe on frame 100 of the bird layer then drag the bird movie
clip from the right of the stage to the upper left side of the stage. Right – click
somewhere in between Frame 1 to Frame 100 and select Create
Classic Tween.

6. Work on Cloud Layer

Before you do this, insert a keyframe on frame 100 of the sound layer.
Click on the cloud layer then go to the library. Expand the cloud folder then drag the
cloud movie clip to the stage.
Insert a keyframe on frame 100 of the cloud layer.

7. Work on Tree Layer - Copy the tree movie clip and paste its copies on the stage. Place
the copies anywhere you want. Insert a keyframe on frame on frame 100 of the tree
layers.

8. Save your File

8.1 Save you file in your desired location.

9. Publish your File

6
 What I have learned

TRUE OF FALSE
Direction: Write T beside the number if the statement is true and F if the statement is
false.

__________1. The trashcan icon means to add a new layer.

__________2. The layer panel is located below the stage.

__________3. The paper icon with the fold on the bottom left corner means to remove a

Layer.

__________4. You can add a layer folder in Adobe Flash.

__________5. Multiple layers allow you to create scenes with the appearance of depth.

__________6. You can add a maximum of only one-layer folder in Adobe Flash.

__________7. You can add as many layers as you want.

__________8. Locking a layer will make it invisible.

__________9. Drawings on lower layers will cover drawings on higher layers.

__________10. You can add more than 1 layer to a layer folder.

__________11. Locking a layer will make it uneditable.
__________12. Removing a layer will cause its contents to be removed as well.
__________13. Hiding a layer will make it uneditable
__________14. Hiding a layer will make it invisible

__________15. Renaming a layer is prohibited in Adobe Flash.

7
 Assessment

Multiple Choice
Directions: Identify the parts indicated in the picture. Encircle the letter of the correct
answer.

1. George wants to create a new file in Flash. What key should he press?
A. File > New
B. File > Save
C. File > Open
D. File > Open Recent

2. Ria opened her project in Flash and she noticed that the toolbox is not displayed.
How can she display the toolbox?
A. Go to Control > Toolbox
B. Go to Insert > Toolbox
C. Go to Window > Toolbox
D. Go to Modify > Toolbox

3. Angela needs to insert another image of Rosary directly into the stage, which
menu should she select?
A. File
B. Insert
C. Modify
D. View

4. Ivan wants to insert a keyframe in Frame 85. What key should he press?
A. Alt + F5
B. F6
C. Ctrl + F5
D. Ctrl + F6

5. Marie wants to save her project, what keyboard shortcut should she press to save the
file?
A. Alt + S
B. Ctrl + S
C. Ctrl + Alt +S
D. Shift + S

8
10
Technical Vocational
Education (TVE)
VISUAL GRAPHICS DESIGN
Quarter 4 – Module 7
Creating Zodiac Signs Presentation
and Creating Bicycle Animation
TVE VISUAL GRAPHIC DESIGN 10
Alternative Delivery Mode
Quarter 4 – Week 7 Module: Creating Zodiac Signs Presentation and Creating Bicycle
Animation
Second Edition, 2021

Republic Act 8293, section 176 states that: No copyright shall subsist in any work of the
Government of the Philippines. However, prior approval of the government agency or office
wherein the work is created shall be necessary for exploitation of such work for profit. Such
agency or office may, among other things, impose as a condition the payment of royalties.

Borrowed materials (i.e., songs, stories, poems, pictures, photos, brand names, trademarks, etc.)
included in this module are owned by their respective copyright holders. Every effort has been
exerted to locate and seek permission to use these materials from their respective copyright
owners. The publisher and authors do not represent nor claim ownership over them.

Published by the Department of Education – Schools Division Office of Makati City

OIC-Schools Division Superintendent: Carleen S. Sedilla CESE
Assistant Schools Division Superintendent/OIC-Chief, CID: Jay F. Macasieb, DEM, CESE

Development Team of the Module

Writer: Raniel DC. De Los Santos
Editors: Corazon B. Delos Santos
Reviewers: Celedonia T. Teneza, EdD
Layout Artist: Mayumi P. Realosa, EdD
Management Team: Neil Vincent C. Sandoval
Chief Education Supervisor, Curriculum Implementation Division
Celedonia T. Teneza, EdD
Education Program Supervisor, EPP/TLE/TVE/TVLABM

2nd Edition Revalidation 2021:

Content Validator: Sheila F. Casidsid
Language Validator: Mayumi P. Realosa, EdD
Layout Validator: Corazon B. Delos Santos
Reviewers: Nida S. Garduque
TVE Department Head III – BNAHS
Lilybeth D. Sagmaquen, PhD
Principal IV – BNAHS
Samuel L. Sia, EdD
Public Schools District Supervisor
Celedonia T. Teneza, EdD
Education Program Supervisor, EPP/TLE/TVE/ TVL/ABM

Printed in the Philippines by the Schools Division Office of Makati City through
the Support of the City Government of Makati (Local School Board)

Department of Education – Schools Division Office of Makati City

Office Address: Gov. Noble St., Brgy. Guadalupe Nuevo

City of Makati, Metropolitan Manila, Philippines 1212
Telefax: (632) 8882-5861 / 8882 - 5862
E-mail Address: [email protected]
 What I Need to Know

This module is here to guide you through this lesson. In case you were not able
to follow and understand some instances, you can always go back to that part.
Are you ready? Let’s start.
The module is composed of on two (2) lesson:
• Lesson 1 – Creating zodiac signs presentation
• Lesson 2 – creating bicycle animation

After going through this module, you are expected to:

A. Know how to rename, group, and delete symbols;
B. Learn to use and remove tweens; and
C. Do simple animation movements.

What I Know

Multiple Choice
Directions: Read the following questions and encircle the correct answer.
1. What type of animation should Jane use if she wants to move an object from one
position to another over a period of time?
A. Shape Tween
B. Frame by Frame Animation
C. Motion Tween
D. Static Animation

2. April wants to group the objects she made in the stage. The keys that she should
she press in keyboard are:
A. Alt + G
B. Shift + G
C. Ctrl + Alt + G
D. Ctrl + G

3. Michael’s teacher is asking what the function of Playhead is, what should he
answer?
A. Add animation to the objects
B. Identify the current frame on the timeline
C. Displays the content of the library
D. Highlight layers

4. Movie Clip, Button, Graphic: _____________

A. Grouping Object
B. Breaking Apart
C. Converting to Symbols
D. Creating Layers

5. Frame, Play head, Frame Rate Indicator: _____________

A. Layer
B. Properties Panel
C. Timeline
D. Library

1
 Lesson
Creating Zodiac Signs
1 Presentation and Creating Bicycle
Animation
If you want to refrain from accessing external folders when you want to insert an
object or symbol to your Stage, you can always store it in the <b>Library</b>. the library
keeps all the objects previously inserted in it for future use. But it will become confusing
for you to organize these objects when you are dealing with a lot of objects that’s why
flash has organizing functions in the library like grouping, renaming, and deleting
symbols.

A tween in Adobe Flash Professional is an animation that is created by specifying

a value for an object property in one keyframe and another value for that same property
in another keyframe. Flash calculates the values for that property in between those two
frames. The term Tween comes from the words “in between”.

What’s New

Activity 1.1

The teacher asked you to create a flash animation on birds flying from one place to
the other. By using the Classic Tween, instead of 1 object, you are to create 3 objects
each moving in a different direction and with their movements activated at different
intervals.

2
 What is It

RENAMING OBJECTS AND SYMBOLS

If you want to change the name of the objects or symbols in the Library so you can easily
recognize and locate it next time, you can rename it to any name that you want as long
as it is unique (no two objects can have the name) and relative to its content or function.
There are two ways to rename a symbol. While in the Library, you can either double –
click on the symbol then type its new name or right – click on the symbol and click
Rename.

GROUPING OBJECTS AND SYMBOLS

Grouping symbols in the Library means using separate folders in sorting similar
symbols. It is really up to you to decide on which symbols should belong in the same
folder. This will keep your symbols organized and easy to locate in the Library. There
are two ways to move a symbol to a folder. The first way is to drag the symbol to a folder
while the second way is to right-click on the symbol then click Move to. Note that you
need to create a folder first before you can move the objects or symbols inside it. To
create a new folder, just click on the New Folder icon located at the bottom of the Library
just beside the New Symbol icon.

3
DELETING OBJECTS AND SYMBOLS
When a symbol has never been and will never be used in the entire Flash project, it is
okay to delete it. Be careful though. If a symbol had been used in the stage and you
deleted the symbol from the Library, all instances where you used that symbol will be
deleted as well. There are two ways of deleting a symbol. You can click on the symbol
then click the Delete icon located at the bottom of the Library or right-click on
the symbol and click Delete.

STEPS:
1. Open Adobe Flash
Click on Start > All Programs > Adobe Master Collection > Adobe Flash Professional.
This will open Adobe Flash
1.1 Double-click the Adobe Flash Professional shortcut icon on the desktop if you
have it there.

2. Open Zodiac.fla.
After opening Adobe Flash, a starting screen will be displayed. This gives you the
option to either create a new blank Flash file, create a Flash file from a template, or
open a Flash file.
Choose Open under the Open Recent Item option.
2.1 This will take you to the Open Window. From here, locate Zodiac.fla from the
Downloadable Materials folder then click Open.

3. Rename Objects
The symbols that you see in the Library are the different zodiac signs in cute
illustrations and their corresponding zodiac signs symbols. You will notice that the
name of the illustrations (.jpg files) are not complete. Complete the names of these
objects by renaming them.
3.1 To rename the object, double-click on it and start typing its new name or
right-click on it then click Rename.

4. Group Objects Together

Group Object according to their names. There should be 12 folders with 2 objects
each (name.jpg, name_symbol.png) To create a folder, click the new folder icon located
at the bottom of the Library just beside the new symbol icon.
4.1 Move the objects to their corresponding folders by dragging the object to the
folder or by right-clicking on the object and clicking Move to and selecting which
folder it will be placed.
Name the folders with the following names then start grouping the objects:
Aquarius F, Aries F, Cancer F, Capricorn F,
Gemini F, Leo F, Libra F, Pisces F,
Sagittarius F, Scorpio F, Taurus F, Virgo F,

4
5. Delete objects that are not necessary.
After grouping the objects, you will see that there are other objects that are still
outside the folders. You no longer need theses objects and therefore you should delete
them.
5.1 Delete these objects by selecting it and clicking on the Delete icon at the
bottom of the Library or by right-clicking on the object and selecting delete.

Delete the following objects:

Crunch.jpg, Lindt.jpg, zodiac_icons2.jpg,
Hersheys.jpg, Toblerone.jpg, zodiac_symbols.jpg
Kitkat.jpg, zodiac_icons1.jpg,

6. Create a Simple Animation

On Frame 1, place a picture of Zodiac Sign with its corresponding zodiac sign symbol
beside it. Set the width and height of the picture to 250 by selecting it, then in the
Properties panel, under Position and Size, set the value set for W and H to 250. Place
both objects on the right side outside the Stage.
6.1 Go to Frame 50 and press F6 to insert a keyframe then move both objects to
the left side outside of the stage.
6.3 Then right-click on any frame in between Frame 1 to Frame 50 and click Create
Classic Tween. This Tween will make the Zodiac Sign picture and its symbol
move from the right side to the left side of the Stage.

7. Insert a blank keyframe on the next frame.

Select Frame 51 or the frame next to your last keyframe and right-click on it and
select insert Blank Keyframe.

8. Repeat Steps 6-7 allotting 50 frames for each animation.

You should have 12 classic tweens overall, one for each zodiac sign. The end frame
should be Frame 600.

9. Save your File

To save your Flash file, click on File > Save AS or press Ctrl + Shift + S on your
keyboard.
9.1 Save the file in your desired location.
Locate where you want to save your file, type in the File name then click Save.

10. Publish your File

To publish your work, click on File > Publish or press Alt + Shift + F12.
10.1 To add additional formats to publish your work, click on File > Publish
Settings or Press Ctrl + Shift + F12.

CLASSIC TWEEN
Classic tweens are older way of creating animation in Adobe Flash. These tweens are
similar to the newer motion tweens but are somewhat more complicated to create and
less flexible.

5
MOTION TWEEN
A motion tween is a animation that is created by specifying different frames. Adobe Flash
calculates the values for that property in between those two frames. The term tween
comes from the words “in between”.

REMOVE TWEEN
Removes the motion tween from the selected tween span.

LEARN
1. Open Adobe Flash
Click on Start > All Programs > Adobe Master Collection > Adobe Flash Professional.
This will open Adobe Flash.

2. Opening Actionscript 2.0

Once you have opened Adobe Flash, you will be given a choice to create a New File or
open an Existing File.
For this Hands On Activity, we need to create a New File with Action Script 2.0.

3. Draw a bike using tools like Line tools for the bike’s body and handle, and Oval tools
for the wheels.

4. Highlighting
In this step, highlight the object which you want to tween, highlight by clicking once
and dragging over the entire object.

5. Convert to Symbol-Movie Clip

After highlighting it press F8 and convert it to symbol. Make sure the type is movie
clip then press okay.

6
6. After converting it into a movie clip symbol, click on the Classic Tween which can be
found under Insert > Classic Tween.

7. Timeline Movement
Go to the timeline and choose a frame. The closer the keyframe is to the original the
faster the animation, the farther it is, the slower the animation. Press F6 at the frame
you choose to enter the Keyframe.
Alternately, you can choose a frame > Right click > click Insert Keyframe.
7.1 Here is another way you can make the classic tweens, you can skip step 6,
do the alternate step mentioned.

8. While staying on the new Keyframe, drag the bike into the place where you want it to
stop when it is in motion.

9. Save the file by pressing Ctrl + S

10. Publish the file and see your creation by pressing Ctrl + Enter.

11. Remove Tween

In case you want to remove the tween, select the object then click Insert > Remove
Tween.
Alternately, you can choose to right click anywhere on the arrow or the first frame
and choose remove tween.

What I have learned

TRUE OR FALSE
Direction: Write T if the given statement is True and F it is False.

__________ 1. The Adobe Flash Library stores symbols or objects even if you haven’t
place them on the Stage yet.

__________ 2. You can only put a maximum of 20 symbols or objects in the Library.

__________ 3. You can have two or more symbols or objects with the same name in the
Library.

__________ 4. You can group symbols or objects in the Library.

__________ 5. You can rename symbols or objects in the Library.

__________ 6. You can delete symbols or objects in the Library.

__________ 7. Special characters is not allowed when renaming symbols or objects.

__________ 8. Double – clicking on the symbol or object name will allow you to change
its name.

__________ 9. Grouping means using separate folders in storing similar symbols.

__________ 10. You need to have same names for all symbols that you want to add in
one folder.

__________ 11. Dragging a symbol or object to a folder will make it move to that folder.

7
 __________ 12. It is okay to delete a symbol or object that has never been used in the
entire Flash project.

__________ 13. It is okay to delete a symbol or object that was placed in the Stage
because it is already there.

__________ 14. Deleting symbols that you will no longer use will cause clutter in your
Library.

__________ 15. The Delete icon in Flash looks like a scissor.

Assessment

Multiple Choice
Directions: Choose the letter of the best answer. Write the chosen letter on a separate
sheet of paper.
1. What type of animation should Jane use if she wants to move an object from one
position to another over a period of time?
A. Shape Tween
B. Frame by Frame Animation
C. Motion Tween
D. Static Animation

2. April wants to group the objects she made in the stage. The keys that she should
she press in keyboard are:
A. Alt + G
B. Shift + G
C. Ctrl + Alt + G
D. Ctrl + G

3. Michael’s teacher is asking what the function of Playhead is, what should he
answer?
A. Add animation to the objects
B. Identify the current frame on the timeline
C. Displays the content of the library
D. Highlight layers

4. Movie Clip, Button, Graphic: _____________

A. Grouping Object
B. Breaking Apart
C. Converting to Symbols
D. Creating Layers

5. Frame, Play head, Frame Rate Indicator: _____________

A. Layer
B. Properties Panel
C. Timeline
D. Library