Lesson Plan
Course Title: Web Technologies
Session Title: Motion Graphics & Animations
Lesson Duration: 4 hours
Performance Objective:
Upon completion of the lesson, students will be able to use an image manipulation program to
create simple custom and automated animated GIFs for the web.
Specific Objectives:
 Students will be able to create an animation
 Students will understand the process of creating an animation
 Students will understand the components of an animation
 Students will be able to create a custom animation from individual image layers
Preparation
TEKS Correlations: 130.129 (c)

(3)(B) explain the key functions and applications of software programs

(5)(C) identify, create, modify, and use available file formats such as text, image, video
analog and digital, and audio files

(7)(B) select, create, modify, and integrate effective multimedia content such as vectorbased and raster graphics, motion graphics, video, and audio

(7)(D) demonstrate proper use of folder structure hierarchy
Instructor/Trainer
References:
Using your favorite internet browser, perform a web search for “image manipulation program”.
Instructional Aids:
 Web Animation Presentation
 Lab 1 Handout: Automated Animations
 Lab 2 Handout: Custom Animations
 Motion Graphics & Animations Quiz
 Motion Graphics & Animations Quiz - KEY
 Student Files folder
Materials Needed:
 Copies of Lab 1 and Lab 2
 Copies of quiz
 Each student will need a copy of the Student Files Folder provided with this lesson.
Equipment Needed:
IT: Web Technologies: Motion Graphics & Animation Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
1

Each student will need a computer with the latest version of an image manipulation
program. To find a program, the student can perform a web search for “image
manipulation program”.
Introduction
MI
Introduction (LSI Quadrant I):
The instructor should ask students about websites that have animation on them. The
instructor should also emphasize that animation on a website can be very distracting
to the visitor, and the web designer should carefully consider what type of animation
to include.
Outline
MI
Outline (LSI Quadrant II):
Instructor Notes:
I.
Animations overview
A. How animations work
B. What are animated GIFs?
C. Required software
D. Required knowledge
E. Methods of creating animated GIFs
II.
Creating custom animation
A. Preparing an image for editing
B. Combining two images
C. Creating multiple frames for the animation
D. Editing each frame of the animation
E. Merging layers and frames
F. Previewing the animation
G. Saving the animation
Provide each student with a
copy of the Student Files
Folder prior to showing the
presentation. Students
should follow along and
complete a practice
animation together during the
presentation.
III. Using the built-in animation tools
A. Adding text
B. Applying the animation filter
C. Saving the animation
IV. Combining two animations
A. Importing an animation as a new layer
B. Saving and finalizing the animation
V.
View animation in a web page
VI. Students complete hands-on labs
A. Using animation filters
B. Creating a custom animation
IT: Web Technologies: Motion Graphics & Animation Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
2
Application
MI
Guided Practice (LSI Quadrant III):
During the presentation, students will create a custom animation together as a class.
Students will also add an automated animation feature to their custom animation.
MI
Independent Practice (LSI Quadrant III):
Following the presentation, the instructor should provide the students with two
hands-on labs they must complete on their own. The first lab will walk the students
through creating an animation. The second lab will walk the students through
creating a custom animation.
Summary
MI
Review (LSI Quadrants I and IV):
Students will incorporate all the concepts introduced in the lesson by completing the
hands-on labs. Students will then practice these concepts.
Evaluation
MI
Informal Assessment (LSI Quadrant III):
The instructor should periodically check during the presentation to make sure
students understand the concepts and are successfully keeping up with the group
exercise.
MI
Formal Assessment (LSI Quadrant III, IV):
The students should complete the labs individually to reinforce and ensure an
understanding of the concepts introduced. The final product the students produce
from the labs should resemble the completed labs in the instructor’s key folder.
Extension
MI
Extension/Enrichment (LSI Quadrant IV):
Students will gain a basic understanding of animations and how they work. Following
the lesson, students can learn more complex animation topics.
Because this lesson introduced animation for the web, students should also learn
web development. The HTML Scripting lesson will introduce students to creating
web pages using HTML and will go through inserting images. Once both lessons are
complete, students can create their own websites with custom animations on
banners and logos.
IT: Web Technologies: Motion Graphics & Animation Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
3
Icon
MI
Verbal/
Linguistic
Logical/
Mathematical
Visual/Spatial
Musical/
Rhythmic
Bodily/
Kinesthetic
Intrapersonal
Interpersonal
Naturalist
Existentialist
Teaching Strategies
Personal Development
Strategies
Lecture, discussion, journal
writing, cooperative learning,
word origins
Reading, highlighting, outlining,
teaching others, reciting information
Problem solving, number
games, critical thinking,
classifying and organizing,
Socratic questioning
Mind-mapping, reflective
time, graphic organizers,
color-coding systems,
drawings, designs, video,
DVD, charts, maps
Use music, compose songs
or raps, use musical
language or metaphors
Organizing material logically, explaining
things sequentially, finding patterns,
developing systems, outlining, charting,
graphing, analyzing information
Developing graphic organizers, mindmapping, charting, graphing, organizing
with color, mental imagery (drawing in
the mind’s eye)
Use manipulatives, hand
signals, pantomime, real life
situations, puzzles and board
games, activities, roleplaying, action problems
Reflective teaching,
interviews, reflective listening,
KWL charts
Cooperative learning, roleplaying, group brainstorming,
cross-cultural interactions
Natural objects as
manipulatives and as
background for learning
Socratic questions, real life
situations, global
problems/questions
Creating rhythms out of words, creating
rhythms with instruments, playing an
instrument, putting words to existing
songs
Moving while learning, pacing while
reciting, acting out scripts of material,
designing games, moving fingers under
words while reading
Reflecting on personal meaning of
information, studying in quiet settings,
imagining experiments, visualizing
information, journaling
Studying in a group, discussing
information, using flash cards with
other, teaching others
Connecting with nature, forming study
groups with like-minded people
Considering personal relationship to
larger context
IT: Web Technologies: Motion Graphics & Animation Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
4
Motion Graphics & Animation Lab 1 – Automated Animations
1. Open the Image Manipulation Program.
2. On the Toolbox, set the foreground color to
e79c0a and set the background color to
272783.
3. Open a new image. From the image window, click on File and select New.
4. In the Create a New Image window, set the width to 400 and the height to 75.
5. Click Ok to create a blank canvas for the image.
6. From the Toolbox, click on the Text tool.
7. After selecting the Text tool, the text options will appear at the bottom of the Toolbox
window. Set the text to Sans, the size to 45.
8. Click in the center of the background and type your first and last name.
9. Click the Move Tool.
10. At the bottom of the Toolbox window, the properties for the Move tool will appear. Click
on Move the active layer.
Student Name
11. Use the move tool to position your name in the center of the image.
12. Merge the text down onto the background to create a single layer. To do this, we need to
have access to the Layers window. To open the Layers window, click on Windows and
go to Dockable Dialogs, and select Layers.
13. On the Layers window, you should see two layers: a text layer with your name and then
the background layer. Merge the text layer down onto the background layer.
14. Right-click on the layer with your name. A shortcut menu will appear. Select Merge
Down. The text layer should become part of the background layer, and there should now
only be one layer shown in the Layers window.
15. You are now ready to apply an animation to the image. From the Filters window, select
Animation. You will see the different built-in animation features available.
IT: Web Technologies: Motion Graphics & Animation Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
5
16. From the available animations, choose the Waves animation. This animation requires
only one layer.
17. When you select the Waves animation, a window will appear that allows you to modify
the default settings of the animation. You do not need to make any changes here; just
click the OK button.
18. A new image will be created from the image you make. The text on the image will look
smeared and swirled, but that is part of the animation. You will not be able to make
out your name in the animation
19. To preview the animation, click the Filters menu at the top, move down to Animation,
and select Playback.
20. The Animation Playback window will appear. At the top left is a Play button that looks
like a triangle. Click it to run the animation.
21. To save the animation, click on File at the top of the image with the swirly letters, and
select Save As.
22. Enter lab1.gif as the file name. The image should be saved to your Student Files
folder.
23. Click Save.
24. Another window will appear asking how to export the file. You should select Save as
Animation, and click the Export button.
25. Another window will appear that allows you to adjust the Animation Options. Because
this is a built in animation, you do not need to modify the default settings here. Just click
the Save button.
26. The image is now saved. To see your animation, open the web page named lab1.htm
from your Student Files folder.
Motion Graphics & Animation Lab 2 – Custom Animations
IT: Web Technologies: Motion Graphics & Animation Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
6
For this lab, we will create a custom animated banner for a website. We will start with a simple
banner to be used as the background of the animation. When the banner is loaded, the text
“Galveston!” will appear one letter at a time across the top of the banner.
1. From your Student Files folder, open the image banner.gif in your image manipulation
program.
2. You will need to change the mode of the image to RGB. From the Image window, select
Mode, and choose RGB.
3. Make sure the Layers dialog window is open. If it isn’t, you can open it by going to
Windows -> Dockable Dialogs -> Layers.
4. Because each letter will require one frame of the animation, we need to create additional
layers. There are 10 characters in the text that we will be adding, so press the Duplicate
Layer button at the bottom of the Layers dialog 10 times.
Because there are so many identical layers in the Layers dialog, you must make sure you
are working on the correct layer while creating the animation. On the Layers dialog, there is
a small icon of an eye to the left of each layer. When the eye is visible, the layer is visible;
when you click the eye, the layer next to the eye will become hidden. This will allow you to
hide layers you are not working on.
5. Click on the eye next to each of the layers, except for the bottom two layers.
6. Make sure that the second layer from the bottom is selected. The layer name should be
Background copy. This will be the first layer we add text to.
The animation will consist of the word “Galveston!” being typed onto the banner one letter
at a time. Each frame in the animation will add one additional letter to the banner. The first
background layer will be blank, so we will start working with the layer named Background
copy.
7. Select the Text tool from the toolbox.
8. At the bottom of the toolbox, you can modify the text options. Change the font to Sans
Bold Italic, the size to 25, and the color to white.
9. With the Background copy layer selected in the Layers window, use the Text Tool to
add just the letter “G” to the banner.
10. When the text was added to the frame, a new layer was created between the
Background copy layer and the Background copy #1 layer. We need to merge the
text layer down onto the Background copy layer.
IT: Web Technologies: Motion Graphics & Animation Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
7
11. Right-click on the text layer in the Layers window. It will be indicated by the letter G in
the Layers dialog window. A shortcut menu will appear. Select Merge Down. This option
will merge the text layer with the layer directly below it in the list.
12. We are now ready to add the second letter to the next frame (Background copy #1).
Select Background copy #1 from the Layers dialog, but do not make it visible just yet.
13. Use the Text tool again, with the same settings, and add a text layer above Background
copy #2 with the text “Ga”.
14. Use the Move tool to move the text layer so that both letter Gs are perfectly aligned on
top of each other. (NOTE: After selecting the Move tool, select Move the active layer
from the bottom of the Toolbox window.)
15. After the “Ga” text layer has been created and perfectly aligned, click to the right of
Background copy #1 to replace the eye and make the layer visible again.
16. The text layer can now be merged down onto the Background copy #1 layer. Right click
on the Text layer and select Merge Down.
17. To add the next letter, select the Background copy #2 layer and add the text “Gal”.
18. Move the text layer so that the “Ga” is perfectly aligned.
19. Make the Background Copy #2 layer visible and merge the “Gal” text layer down onto it.
20. Repeat the steps above with the remaining layers until “Galveston!” has been placed
onto Background copy #9.
21. After all the frames have been completed, the last step is to save the animation. From
the File menu, select Save As. The file name should be lab2.gif. The image should be
saved to your Student Files folder.
22. Click the Save button.
23. Another screen will appear asking you how to export the file. You should select Save as
Animation.
24. Click the Export button.
25. The last window will ask you for the animation options.
a. Take the check OFF of Loop forever
b. Set the Delay to 200 milliseconds.
c. Set the Frame disposal to replace.
26. Click the Save button to complete the animation.
IT: Web Technologies: Motion Graphics & Animation Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
8
27. To view the animation, open the webpage file from your Student Files directory called
Lab2.htm. If you saved the animation correctly, you should see the text appear once at
the top of the banner.
IT: Web Technologies: Motion Graphics & Animation Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
9
Motion Graphics & Animation Quiz
1. Which of the following image file formats allows you convert the layers of an image to
animation frames to create an animated sequence?
a. gif
b. jpg
c. mpeg
d. png
2. To crop an image is to
a. resize the image.
b. remove part of the image.
c. resize the image by removing part of it.
d. None of the above.
3. What is the appropriate mode to use in animation?
a. CMYK
b. Grayscale
c. RGB
d. All of the above
4. Merging layers together in an image is called ______________.
a. distorting
b. filtering
c. editing
d. flattening
5. The ____________ _____________ is the current selected layer in the Layers dialog
window.
a. layer dialog
b. layer menu
c. image menu
d. active layer
6. When a new image is created in the image manipulation program, the __________ layer
is automatically applied.
a. canvas
b. foreground
c. background
d. transparent
IT: Web Technologies: Motion Graphics & Animation Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
10
7. Another term for graphic images that create the illusion of motion is _____________.
a. film
b. motion graphics
c. photographs
d. vector
8. The frame rate of an animation is the
a. number of frames in the animation.
b. the size of each frame in the animation.
c. the length or run time of the video.
d. the length of time each frame is displayed.
9. Which tool in the image manipulation program will allow you to select all regions of the
same color?
a. The Select by Color tool.
b. The Magic Wand tool.
c. The Foreground Select tool.
d. The Paths tool.
10. When you edit the frame properties, the image manipulation program will allow you to
either ____________ or ____________ frames in the animation.
a. keep or dispose
b. stack or merge
c. combine or replace
d. combine or stack
IT: Web Technologies: Motion Graphics & Animation Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
11
Motion Graphics & Animation Quiz - KEY
1. Which of the following image file formats allows you convert the layers of an image to
animation frames to create an animated sequence?
a. gif
b. jpg
c. mpeg
d. png
2. To crop an image is to
a. resize the image.
b. remove part of the image.
c. resize the image by removing part of it.
d. None of the above.
3. What is the appropriate mode to use in animation?
a. CMYK
b. Grayscale
c. RGB
d. All of the above
4. Merging layers together in an image is called ______________.
a. distorting
b. filtering
c. editing
d. flattening
5. The ____________ _____________ is the current selected layer in the Layers dialog
window.
a. layer dialog
b. layer menu
c. image menu
d. Active Layer
6. When a new image is created in the Image Manipulation Program, the __________ layer
is automatically applied.
a. canvas
b. foreground
c. background
d. transparent
IT: Web Technologies: Motion Graphics & Animation Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
12
7. Another term for graphic images that create the illusion of motion is _____________.
a. film
b. motion graphics
c. photographs
d. vector
8. The frame rate of an animation is the
a. number of frames in the animation.
b. the size of each frame in the animation.
c. the length or run time of the video.
d. the length of time each frame is displayed.
9. Which tool in the image manipulation program will allow you to select all regions of the
same color?
a. The Select by Color tool
b. The Magic Wand tool
c. The Foreground Select tool
d. The Paths tool
10. When you edit the frame properties, the image manipulation program will allow you to
either ____________ or ____________ frames in the animation.
a. keep or dispose
b. stack or merge
c. combine or replace
d. combine or stack
IT: Web Technologies: Motion Graphics & Animation Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
13