Web Technologies

Motion Graphics & Animation

Copyright Texas Education Agency, 2013. All rights reserved.

How Animations Work

All animations basically work the same way.

Animations consist of a number of frames displayed

at a given rate, giving the illusion of movement.
The frame rate is the time each frame of the
animation is displayed. The shorter time each frame is
displayed, the smoother your animation will appear,
but the larger the animation will be.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -2 Motion Graphics & Animation

Motion Graphics
Motion Graphics is a term used to describe
graphics that use technology to give the illusion
of movement.
The term is more specific to computer
animations rather than photographic film.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -3 Motion Graphics & Animation

Animated GIFs
Animated GIF images are a fun component
to building web pages, but they are overused
many times.
A subtle animation can add interest to a
website, However, the animation will always
draw attention to itself, so use animations to
the advantage of your site's purpose and be
very careful so they do not become a
distraction.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -4 Motion Graphics & Animation

Animated GIF Editors

Most image editing programs can create
animated GIFs.
For this lesson, we will be using a free image
manipulation program to create animated GIFs.
To find an application, open your favorite internet
browser and perform a web search for image
manipulation program.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -5 Motion Graphics & Animation

Creating Animations in your

Image Manipulation Program
To create animated images, you should be familiar
with the image types. Animated images can only be
in GIF format, which means that images will be
limited to only 256 colors, so you will likely lose
image quality on photographs.
You will also need to be familiar with basic image
editing, tools, selected regions, and layers.
Animated GIFs are not intended to be used as
videos, but rather as simple enhancements to a
banner, logo, or web graphics.
Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -6 Motion Graphics & Animation

Methods of Creating
Animated GIFs

There are two methods of creating animated

GIFs:
Custom animationwhere you create each
frame of the animation
Automated animationcreates the
individual frames of the animation

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -7 Motion Graphics & Animation

Creating Custom Animation

We will walk through creating a simple custom
animation of a car driving along a road.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -8 Motion Graphics & Animation

Creating Custom Animation

You should have a Student Files folder with

these pictures:
background.gif
car.gif

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -9 Motion Graphics & Animation

Creating Custom Animation

Open both images in your image

manipulation program.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -10Motion Graphics & Animation

Creating Custom Animation

Do the following for both images:

Click on the Image menu item

Select Mode
Choose RGB.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -11Motion Graphics & Animation

Creating Custom Animation

To create and manage the frames of the

animation, we need to have access to the
layers of the image.

From one of the image windows,

click on Windows,
choose Dockable Dialogs, and
select Layers.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -12Motion Graphics & Animation

Creating Custom Animation

We need to get the just the car onto the
background.
On the Toolbox, select the Select by Color tool.

The Select by Color tool will allow you to select

all areas of the same color on an image

Click on the white background of the car image.

This will select all the white region, leaving only
the car unselected.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -13Motion Graphics & Animation

Creating Custom Animation

By clicking on the white background, we
selected all the region around the car.
To select the car, we will need to invert the
selection.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -14Motion Graphics & Animation

Creating Custom Animation

Now just the car is selected.
We need to clean up the selection and
reduce it down by one pixel so it
appears cleaner.
From the Select menu, choose Shrink.
Set the Shrink Selection value to 1 and
click OK.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -15Motion Graphics & Animation

Creating Custom Animation

Now we are ready to copy the selected
region and paste it as a layer to the
background image.
From the Edit menu, choose Copy.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -16Motion Graphics & Animation

Creating Custom Animation

Switch to the background image and click on the
Edit menu and move down to Paste as, and
select New Layer.
You can then close the image with just the car.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -17Motion Graphics & Animation

Creating Custom Animation

A pasted layer will be displayed as a floating
layer. Before you can do anything with the layer,
you must name it.
Double click on the layer name, type car as the
layer name, and press Enter.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -18Motion Graphics & Animation

Creating Custom Animation

The next step will be to duplicate the image of
the car so it can be placed in each location to
produce the animation.
At the bottom of the Layers dialog is a
Duplicate Layers button.
Select the car layer and click the Duplicate
Layers button 5 times.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -19Motion Graphics & Animation

Creating Custom Animation

You should now have a total of 6 layers of

the car.

These six layers will be arranged along the

path the car will travel along the scene.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -20Motion Graphics & Animation

Creating Custom Animation

Select the Move Tool from the toolbox.
At the bottom of the toolbox, choose Move the
active layer.
The active layer is the selected layer in the
Layers dialog window.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -21Motion Graphics & Animation

Creating Custom Animation

Starting with the bottom layer of the car and

working up, the cars should be positioned along
the path to travel from right to left along the
scene.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -22Motion Graphics & Animation

Creating Custom Animation

When the image is animated, only one layer (or frame)

will be displayed at a time.
Because the background is only one frame, it will not
remain throughout the animation.
The image manipulation program will allow you to either
replace the previous frame with the next frame, or
combine the previous frame with the next.
Neither of these options at this point will retain the
background, so we need to add it to each of the car
layers.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -23Motion Graphics & Animation

Creating Custom Animation

Select the Background layer from the

Layers window.

Click duplicate layer 5 times, just as you did

with the car.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -24Motion Graphics & Animation

Creating Custom Animation

You should have a total of 6 background

layers.

The layers dialog box can be expanded to

show all layers of the image.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -25Motion Graphics & Animation

Creating Custom Animation

Drag the Background copy #4 so it is directly
below car copy #4.
Drag the Background copy #3 so it is directly
below car copy #3.
Complete this process for the remaining
background layers.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -26Motion Graphics & Animation

Creating Custom Animation

The next step will be to flatten each car
image with the background image below it.
Right click on the top car copy #4 and select
Merge Down.
The car layer and its corresponding
background layer will be flattened.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -27Motion Graphics & Animation

Creating Custom Animation

Merge each of the car layers down to the
background layer below it.
When finished, you should have a total of 6
background layers in your Layers dialog.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -28Motion Graphics & Animation

Creating Custom Animation

To test the animation,

click on Filters,
move down to Animation, and
select Playback.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -29Motion Graphics & Animation

Creating Custom Animation

From the new window that comes up, you can
play the animation.
Use the control box at the top to run the
animation.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -30Motion Graphics & Animation

Creating Custom Animation

The animation will be finalized during the
saving process.
To save the animation, click on File and select
Save As.
Type the file name driving.gif and select your
Student Files folder to save the animation in it.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -31Motion Graphics & Animation

Creating Custom Animation

You will then be asked how to save the image in
the Export File window.
Select Save as Animation.
Click Export.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -32Motion Graphics & Animation

Creating Custom Animation

If any of the layers exceeds beyond the
boundary of the image, you will be asked how
to handle the overflow.
You should select Crop to cut off the excess
parts of the image.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -33Motion Graphics & Animation

Creating Custom Animation

The final window will ask how to animate your
image.
Select Loop Forever for the animation to
continuously loop.
The speed of the animation can be adjusted by
adjusting the delay between frames.
Frame disposal should be set to replace previous
frames.
Click Save to complete and save the animation.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -34Motion Graphics & Animation

Automated Animation
The image manipulation program also includes
some tools in the Animation category that will
create some simple animations for you.
We will create a simple automated animation
and combine it with the original animation we
already made with the car.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -35Motion Graphics & Animation

Automated Animation
From your Student Files folder, open the
background.gif image.
We will use this image as the background for the
animation again.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -36Motion Graphics & Animation

Automated Animation
We will need to add some text to the image.
To add text to your image, click on the Text Tool
on your Toolbox window.
Once you click on the Text Tool, the bottom
portion of the toolbar will display the properties
for the tool you selected. From here, you can
select the font style, size, and color.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -37Motion Graphics & Animation

Automated Animation
Add the text Drive Carefully! to the top of the
image.
Font: Sans Bold
Size: 46 px
Color: White

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -38Motion Graphics & Animation

Automated Animation

Make sure your Layers dialog window is open.

Windows -> Dockable Dialogs -> Layers

You should see two layers: the background and

the text layer.
We will use the automated burn in animation to
go from one layer to the next.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -39Motion Graphics & Animation

Automated Animation
From the Filters menu item, select Animation
and then choose Burn-In.
A screen will appear asking allowing you to
select different options for the animation. We
do not need to modify any of the settings here.
Just click OK.
Most automated animations allow you to
modify the settings.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -40Motion Graphics & Animation

Automated Animation
A new image is created from your image with the
animation feature you chose.
We are now finished with the automated
animation. (You may preview it if you wish from
the Animation menu.)
Save the image to your Student Files folder.
The image name should be driveCarefully.gif
Be sure to choose Save as Animation when
prompted.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -41Motion Graphics & Animation

Automated Animation
For the animated GIF options, make sure loop
forever is selected.
Select the Replace option.
Click Save.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -42Motion Graphics & Animation

Combining Two Animations

You may now close the driveCarefully.gif file
completely.
In your student files folder, you should have two
animations: driving.gif and driveCarefully.gif
Open driving.gif

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -43Motion Graphics & Animation

Combining Two Animations

Select the very TOP layer (frame) in the Layers
dialog.
The additional frames will be added above
whatever layer is selected.
Set the Mode of the image to RGB.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -44Motion Graphics & Animation

Combining Two Animations

From the File menu, select Open as Layers
Choose the driveCarefully.gif file you just
created.
The Open as Layers option will allow us to
import all the layers, or frames, for another
animation.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -45Motion Graphics & Animation

Combining Two Animations

All the layers from the driveCarefully.gif
animation should be imported to the
driving.gif animation.
You can test the animation by playing it
from the Animation menu.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -46Motion Graphics & Animation

Combining Two Animations

Save the final version of the animation to your
Student Files folder as drivingFinal.gif.
Set the animation to Loop Forever.
Click Save.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -47Motion Graphics & Animation

Combining Two Animations

To view your completed animation, open the
webpage named practiceAnimation.htm from
your Student Files folder.
If you saved your animation correctly, you should
see the animation repeating in the web page.

Copyright Texas Education Agency, 2013. All rights reserved.

IT: Web Technologies -48Motion Graphics & Animation