Adobe Animate

Leigh Champion

Derby College

Contents1. Setting up the Document...................................................................................................................2

1.1 Opening Adobe Animate.............................................................................................................2

1.2 Changing the size, colour or frame rate of the stage...................................................................2

1.3 Adding Layers..............................................................................................................................3

1.4 Using folders to organise your layers...........................................................................................3

2. Adding and Editing Images................................................................................................................4

2.1 Adding an image to the stage......................................................................................................4

2.2 Editing an image size...................................................................................................................4

2.3 Rotating an image........................................................................................................................4

2.4 My image background isn’t transparent?....................................................................................4

3. Frames, Keyframes & Blank Keyframes.............................................................................................5

3.1 Inserting a new keyframe............................................................................................................5

3.2 Moving frames.............................................................................................................................5

3.3 Deleting frames...........................................................................................................................5

4. Using Classic Tweens to move images...............................................................................................6

4.1 Setting up your images................................................................................................................6

4.2 Creating a Classic Tween..............................................................................................................6

5. Using Motion Tweens to move images..............................................................................................8

5.1 Setting up your images................................................................................................................8

5.2 Creating a Motion Tween............................................................................................................8

1

1. Setting up the Document1.1 Opening Adobe Animate

1) Open Adobe Animatea. If you are using a Mac, open Finder and search for ‘Animate’ in the ‘Applications’.b. If you are using a Windows computer, open Windows Search and search for ‘Animate’.

2) Select “HTML5 Canvas”.

1.2 Changing the size, colour or frame rate of the stage

1) Go to Modify -> Document2) To change the size:

a. Change the W (Width) or H (Height) of the stage. You can also change the units from pixels if necessary. If you have already added a background image, press ‘Match Contents’ to set the stage to the same size.

3) To change the colour:a. Select the square next to ‘stage color’ and choose your desired colour.

4) To change the frame-rate:a. Edit the ‘frame rate’ at the bottom of Document Settings. (Remember – most animations

will be 24 FPS by default)

2

1.3 Adding LayersIt is super important to make sure you use layers in Adobe Animate. If you try to animate everything on the same layer, images will start moving on their own and it will be difficult to fix. You should always make sure images have their own layers.

1) Add a new layer using the ‘new layer’ button.

2) Name your layers! Make sure it is something you can recognise.

1.4 Using folders to organise your layersUsing folders can help you organise a larger project. I always organise my folders by scene and show the timings, as shown below.

3

2. Adding and Editing Images2.1 Adding an image to the stage1) Create a new layer for the image (bottom left icon). It is good practice to always put your images

on separate layers! Otherwise things will start to move together, which is not what you want. 2) Go to File -> Import -> Import to Stage.3) Locate the image you want to add to the stage and press ‘Open’.4) The image will appear on the stage.

2.2 Editing an image size1) Make sure you have the image selected.2) Use the ‘Free Transform’ tool to amend the size.3) You can hold down ‘SHIFT’ on the keyboard to lock the image dimensions.

2.3 Rotating an image1) Make sure you have the image selected.2) Select the ‘Free Transform’ tool and hover over the corner of the image.3) Hold down the corner and move to rotate the image.

2.4 My image background isn’t transparent?Unfortunately, Adobe Animate is not image editing software. You will need to edit the background in Photoshop or another image manipulation program.

3. Frames, Keyframes & Blank KeyframesFrame – What an animation is made up of. This appears as a square outline on the timeline.

4

Keyframe – The start or end of a transition: this is when things change in an animation. It appears as a solid black dot on the timeline.Blank Keyframe – The same as a keyframe, but it will not copy the images from the previous keyframe. This appears as a dot outline on the timeline.

3.1 Inserting a new keyframe

1) Select the frame on the timeline that you want to insert your keyframe. This will appear yellow.2) Right click (if you are on a mac, Function + Right click) and select ‘Insert Keyframe’.3) Adobe Animate will insert frames between the two keyframes for you, as shown below.

3.2 Moving frames1) Select the frame on the timeline, this should appear yellow.2) Hover your mouse over the frame until you see a white square appear next to the cursor.3) Drag your frame to the desired time on the timeline.

3.3 Deleting frames1) Select the frame on the timeline, this should appear yellow.

a) if you want to delete multiple frames, hold shift and select the other frames.2) Right click (if on a Mac, function + Right Click) and press “Remove Frames”

5

4. Using Classic Tweens to move images4.1 Setting up your imagesYou will need to turn any images in to symbols to use the tweens correctly.

1) Select your image and go to Modify -> Convert to Symbol2) Give your image a name you can easily identify it by. No two symbols can have the same

name. Press OK.

4.2 Creating a Classic Tween1) You will need at least 2 keyframes to create a classic tween. In this example I have one at

frame 1, and another at frame 24. (as shown below) In the first frame the image is in the top left corner. In frame 24 it is in the bottom right corner.

6

2) Right click (if on a mac, Function + Right Click) anywhere between the keyframes and select ‘Create Classic Tween’

3) The selected part of the timeline should now turn blue. Press ‘Play’ to check your animation.

Classic tweens can also be used to rotate and change the size of images. Test it out – see what you can do!

7

5. Using Motion Tweens to move images5.1 Setting up your imagesYou will need to turn any images in to symbols to use the tweens correctly.

1) Select your image and go to Modify -> Convert to Symbol2) Give your image a name you can easily identify it by. No two symbols can have the same

name. Press OK.

5.2 Creating a Motion Tween1) You will need at least 1 keyframe to create a classic tween. In this example I have one

keyframe at frame 1, and regular frames until frame 24.2) Right click (if on a mac, Function + Right Click) anywhere between the keyframes and select

‘Create Motion Tween’

8

3) The timeline should turn blue, as shown below.

4) Select the frame where you want the image to have moved by. In this example I have selected frame 6 and moved my image to the bottom left corner, as shown by the blue path.

5) Select the next frame and move the image again. You should be able to see the path where the image is moving to and from.

6) Press ‘play’ and check if your animation works.

9

6. Adding Sound to your Animation6.1 Adding soundAdobe Animate is for animation – adding sounds can be difficult and so many animators will add their sounds using another piece of software called Adobe Premiere Pro. You will need to export your video and bring this in to Premiere Pro, and add sounds in this program.

7. Exporting your Animation7.1 Exporting the AnimationExporting will depend on what you need from your animation. If you do not need sound, you can export as an animated GIF. This will also loop. This is a good option if your animation will be embedded on a website and is short (30 seconds or less).

If you want to add sound, you will need to export the animation as an image sequence.

1) Go to File -> Export -> Export Movie2) Create a folder with your animation name. The folder will require a lot of space so it is best

to use a USB memory stick rather than the computer. Make sure you save your images in a folder called ImageSequence as shown below.

10

3) The dialogue box below will appear. Press OK.

4) Your folder should now contain each frame from your animation, as shown below. If not, repeat steps 1-3 checking you have followed the instructions correctly.

5) You can now close Adobe Animate. You will need to open Adobe Premiere Pro. 6) Create a New Project.

11

7) Change the location of the project to somewhere you can access (i.e. your USB stick). Do not save it to the C drive or you will lose your work.

12

8) Go to File -> Import and locate your Image Sequence folder. Select the first image and make sure you tick “Import Image Sequence”. Press Open.

9) Drag and drop the video from A to B.

10) You can import sound in the same way.11) When you have edited your video to how you like, go to File -> Export -> Media

13

A B

12) Make sure the format is set to AVI (this will allow you to upload the video to YouTube).13) Hit ‘Export’. (If your screen resolution is too small and you can’t click on export like in my

screenshot, presss the Tab key until it is highlighted and then press Enter on the keyboard.)14) Your animation should now be in your folder! 😊

14