Boat Trip

What you're going to make:

In this tutorial, we will create a quick boat ride animation. The boat will start from the bottom of the stage and travel across to the other side.

Watch the video to give you an idea of what you're going to be making today.

Getting started

  • Open Adobe Animate

  • Open the "Help" menu

  • Select "Hands On Tutorials"

  • Select "Boat Ride"

Learning Intentions & Success Criteria

Learning Intentions

I can Create an animation that lasts for 20 seconds (600 frames)

I can create an animation that uses two layers

I can lock layers in my animation to protect them

I can combine (group) different objects into one symbol

I can use a Classic Tween to move an object in an animation

Success Criteria

  1. Saved animation


Lock the Background layer

Let's start with locking the layers that we don't want to change. In this case, let's lock the 'Background' layer that contains everything but the Boat.

Create Graphic Symbol

The first step in creating a tween based animation is to convert all relevant objects to symbols.


Select the boat near the bottom-right of the stage and goto 'Properties' panel -> 'Object' tab -> Click on 'Convert to symbol' icon.


Name it as 'Boat' and set the 'Type' as 'Graphic!

Resize and Position the boat

Let's resize the boat. Go to:

  • 'Properties' panel

  • -> 'Object' tab

  • -> 'Position and Size' section

click the lock icon to lock the width and height values together then set width 'W' to 50.

Now move the boat below the stage area as shown in the above video

Extend the Timeline and Reposition The Boat

Scroll the timeline towards right till you see frame 500. Click on frame 500 of Ship layer and hold down Shift key then click on frame 500 of Background layer.

Click 'Insert Auto keyframe' icon in the timeline. Now move the boat towards top-right edge of the stage as shown in the video.

Create Classic Tween

Click anywhere on the boat layer (frame 1 - 500) and click 'Create Classic Tween' button.

View the Animation by clicking on 'Test Movie' icon on the top-right of application window.