Game Animatic

Game Practice

You will need to put different elements on different layers so you can control your movement. You can also create symbols for animations within your animatic.

You will need the following:-

Layer - platforms

Layer - collectables

Layer - additional movements to your back ground on different layers to create a parallax

Layer - Character

Layer - Enemies

Making a Graveyard Parallax

A Parallax includes different background layers moving at different speeds to create a 3D in-depth view

Open in new project and choose full HD - 1280 x 720 pixels and name it Parallax.

Download the Graveyard pack from 2dart.com and extract the files.

File>Import to Library and add the artwork and create folders to put them in.

You can create folders for your images in the Library

The layers that you make will moving at different times and the one furthest away will run slow and the ones in front will run faster.

Add the BG.png from the Library to your stage and resize as shown so there is some wiggle room at the bottom for one your character jumps.

Right click the background graphic and convert it to a symbol and call it MC Background and make it a movieclip so that we can add movement.

Add a new layer in your timeline and call it Extra making sure you have padlocked your Background layer.

Highlight your objects and drag them onto the stage

You can then pull them out so that they arent on top of each other around the outside of your stage. When you drag them onto your stage hold the Alt key and it will place you a duplicate on the screen.

Now do the same with your tiles.

Create a new layer and call it running_ground this is where you will build your ground for your character to run on.

Copy and paste the elements from the extras layer into the Running_Ground layer as you use them and hold alt to drag one element to copy it.

Create your Running-Ground.

Select all your platforms on Running_Ground layer and choose Modify>Symbol and name it MC Running_Ground as a movieclip

You now need to create the Middle_Ground. Add a layer and call it Middle_Ground and add some trees to this layer.

Paste the tree into Illustrator and image trace to change the colours. I also pasted the background in so I could use the eyedropper to choose the right colour. You may need to magic wand the background. Export as a png and import to the library in Animate.

Create the ground using the eyedropper to choose the same colour from your background and then add your green trees, you can flip them horizontally if you like. Modify>Convert to symbol abd call it MC Middle_Ground.

You are now ready to animate

Hide your layers on your timeline so you can only see the background.

Insert a key frame at Frame 30 and add a classic tween, move the background so that the right hand edge is level with your stage.

Parallax-background-only.gif

Do the same with the middle ground, click and add a classic tween and move to the left until the right hand edge is level with the stage.

Parallax-background-middle.gif

My middle ground the trees are too small and need making larger

You will need to double click the middle ground symbol on the stage to get inside the symbol and then you can Modify>Transform and scale, you may need to reposition the trees.

Click on the Scene 1 to come out of the symbol

Parallax-background-finished.gif

Mine is going too fast. To add more frames the last frame on the middle of your running ground and holding shift choose the middle ground and the background and then drag along your timeline, I chose frame 200.