Topic Support Guide

Cambridge International AS & A Level

Information Technology

9626
For examination from 2017

Topic 17 Animation
Task 1 – Working with layers, images, objects, text and
frames
 In order to help us develop the highest quality Curriculum Support resources, we are undertaking a
continuous programme of review; not only to measure the success of our resources but also to
highlight areas for improvement and to identify new development needs.

We invite you to complete our survey by visiting the website below. Your comments on the quality and
relevance of Cambridge Curriculum Support resources are very important to us.

[Link]

Do you want to become a Cambridge consultant and help us develop support materials?

Please follow the link below to register your interest.

[Link]

Cambridge International Examinations retains the copyright on all its publications. Registered Centres are
permitted to copy material from this booklet for their own internal use. However, we cannot give permission
to Centres to photocopy any material that is acknowledged to a third party even for internal use within a
Centre.

© Cambridge International Examinations 2016

Version 1
Animation task – A space animation

This guide shows generic techniques but all the work is completed using Adobe Animate CC
2016®. This application was chosen because it is one of the most widely used pieces of animation
software. It is also supported extensively by the online community and also with video tutorials.
Adobe Animate CC has all the tools and features for all practical work necessary for the exam
specification.

The techniques and skills learned using Animate CC will be transferrable to other animation
applications. The only likely difficulty with using other applications, will be finding the tools and
menu items in other workspaces, but they will produce the same result.

Animation applications are designed to allow production of animation’s, banners, animated gifs and
also flash multimedia products. This task is intended to give learners some experience of the most
important elements in producing an animation. The task is intended as learning exercise to provide
the basic skills and techniques required, and it is not the intention to produce a fully polished
product. Learners should concentrate on the methods and tools used and not on achieving a
perfect result.

When working on this task it is advisable to save the work as a project and then exported it in the
final stage to either a video or SWF file. The project file keeps the raw editable version in tact
which makes it easier to amend and add additional features in the future. It can then be exported
again incorporating the new additions. Animators should adopt this as their daily practice.

Task 1 (Working with layers, images, objects, text and frames)

Open your software (in the case of this guide Adobe Animate CC).

We are going to create a new key frame animation. In Animate select new HTML 5 canvas.

Save your work immediately in a suitable location.

3
Tip: Before we start it useful to adjust your toolbars so that the toolbar on the right is fully visible.
By default, the toolbar on the right hand side of the screen cannot be fully seen. Use the slider to
make the tool bar fully visible as in the picture below. You will need to click and drag the menu to
the left.

Click and drag

to expand the
toolbar

When producing animations and graphics it is very helpful to be able to place different objects in
different layers. Layers allow you to edit or delete one element of the animation without having to
worry about its effect on the rest of the animation. It is similar to music which is recorded using a
multi-track. For example, in a band the drums would have one track, the vocalist another and the
guitar another. If the producer would like to add an effect to the vocalist’s voice this can be done
independently of the other instruments.

The tools for working with layers are located in the bottom left hand side of the screen. As can be
seen in the screenshot below.

There are three buttons located in the bottom left corner which are very helpful when working with
layers. The first is “new layer” and the second allows you to put “layers into folders” (for this
project we will not be using this function, however, it is very useful when working with extremely
complex projects). The third button (shaped like a dustbin) is used to “delete a layer”.

By right mouse clicking on each layer a number of additional commands are available. By right
clicking and accessing properties a layer can be renamed. This can also be done with ease by
4
double clicking on the name of the layer and renaming it. Rename the existing layer to
background.

In the background layer insert the image space [Link]. This can be done by selecting
file then import to stage. Once this is selected the new window will ask what you would like to
import. In this case in it is space background.

Note: It is a good idea to set up a folder before you start with all the assets you will need to make
the animation. Your tutor will provide these for you.

Once the space background has been added we need to centre it on the stage and resize it
accordingly. Select the image by clicking on it with the selection tool. Then use the free
transform tool to adjust the size of the image to fit the stage.

Selection tool

5
It should now look something like the screenshot below.

Tip: By holding down control on the keyboard and using the wheel on the mouse you can zoom
in and out. This can useful when resizing large images or objects as it can allow you to see the
entire stage. There is also a button at the top of the stage called “centre stage” this is useful in
getting your view back to the centre to allow for a more useful overview of the whole stage.

We are now going to use the text tool to add some text to the background. We are going to add
“Shooting stars!”. Select a colour which contasts well with the background such as yellow. Use the
tools to select a suitable font and size. Select the text and move it to the bottom right hand corner
of the stage.

6
We are now finished with the background for the moment. It is useful to lock the layer to prevent
any accidental editing. Lock the layer using the padlock button. You will also notice a line is placed
across the pencil icon which shows that no editting can be done to this layer until it is unlocked.

Now insert three other new layers called Sun, Rocket and Star. Remember to use the add new
layer button. Once you have added your layers it should look something like the screenshot below.

Again, remember it is good idea to lock any layers you are not working on to prevent accidental
changes.

Next we are going to add an object, which in this case will be a sun. Use the oval tool to draw a
small sun in the bottom left hand corner of the stage. Change the colour of the sun to something
suitable such as the yellow used here. This can be found on the properties on the right hand side
of the screen. Remember you can always use the selection tool to click on the sun and reposition
it if required. You can also use the free transform button your used earlier for resizing.

Tip: Check that you have put the sun object in the correct layer. It is very easy to put objects and
images in the wrong layer by accident. This can then make working with the animation confusing,
particularly when you reach a point with lots of layers. As stated above it is a good idea to lock out
the layers you are not working with to save you working on the wrong layer, and causing yourself
further issues later in the project.

Another very useful tool for working with layers is called the show / hide button. This can be
found separately on each individual layer. If you are not sure if you have put something in the
correct layer, use this tool to help you decide.

7
Click on the layer you think the object is in and then click on the show/hide button. If the object
disappears then it is on the correct layer as the hide tool temporarily hides this layer from the
animation. This tool is shaped like an eye. Underneath the eye there are black dots for each layer
and if you click on them a cross will appear. You can see in this example that the star layer has
been hidden.

In the rocket layer add the [Link] image and place it on the left hand slide of the stage, using
the file tab – import to stage option.

In some instances, it is necessary to convert an object to a symbol. You do not need to concern
yourself too much with the reasons for this, other than it allows objects which you convert to be
placed in a library for future multiple use. For example, you could import or draw a planet, which
could then be used multiple times to create a solar system by adding it several times from the
library, and resizing it to make small and large planets.

Not all animation software requires this but in some cases it does. Adobe Animate does with some
objects, as it is required to allow you to animate them in certain ways. To convert to a symbol, you
right mouse click on the rocket and a menu will appear which is shown on the left hand side of the
screen. Then select “convert to symbol”.

For clarity, in the case of this project the planet can be left as an object and not a symbol, as we
are going to apply a different animation technique to it.

In the star layer import the [Link] image. This needs to be converted to a symbol.

Finally, check each object is in the correct layer by using the show / hide tool, and save your
animation. It should look something like the screenshot below.

8
Save your work at this point.