How to create MovieClips in Adobe Animate

So now that we created our first classic motion tween and motion guide, let's continue the flow and learn about something called a Movie Clip.

A movie clip is a different kind of symbol.

A movie clip is a symbol that has its own independent Timeline that loops over and over and over again.

So let's see if we can get this water to move.

Right now, if we look in our Properties panel, we see that this is an Instance of water, which is a graphic symbol, which is great.

So if I ever want to change this piece of art.

I can just go into the Library, update the symbol, and it'll update my entire animation.

I want this to animate, and I'd like the water to flow continuously.

So it's perfect for a movie clip.

So I'm just going to click on it and select it.

And I'll put this graphic symbol inside of a movie clip.

And in Animate, it's possible.

In fact, a very big part of it is putting symbols inside of symbols.

So we're going to take this graphic symbol and go to Modify, Convert to Symbol...

And we're going to call this mc_water.

This will be the graphic symbol of our water, where we go to change how the water looks or maybe what color it is.

And the mc_water we know is the movie clip that will be the container for our animation.

So I'll press OK, and now we have on the Timeline a movie clip symbol, I can go into the Library and I can see both of my symbols.

I have the water, which is a graphic symbol shown by the icon here with a circle, a square and a triangle.

And then I have my movie clip symbol, which you see is a gear showing this that it's continuously moving and looping.

So I can double click or knock on its door to go into the dressing room of the mc_water.

And we see we're in the mc_water Timeline off of Scene 1.

If I double click again, that's called editing in place.

And now I'm inside of the water symbol, which is inside of the movie clip, which is positions on Scene 1.

Another way to do that is to double click right here or right click and select Edit in Place.

This will go into the dressing room, kind of like as knocking in the Library, but we can edit in place.

So we're kind of in the dressing room, as you can see here, we're inside the mc_water Timeline, which is off of Scene 1.

But we're also able to see the boundaries of the actual stage, which is kind of dimmed out, but there for us as a guide.

So let's flat this water and then we'll press Q to get us our Free Transform Tool.

And I'll just grab the width and stretch it out a little bit and then I'll move it over to the left-hand side, keeping the water within the boundaries of the main stage.

That'll be my first keyframe.

I'll come down to maybe about two seconds and I'll press F6, insert keyframe.

This keyframe I'll drag over to the right, again, keeping the water within the boundaries of the main stage lines there, and I'll right click in between to Create Classic Tween.

And now the water will move from left to right.

So pretty simple, just the basic animation, the same exact thing that we did to the boat.

However, this is inside of a movie clip, which means, if we go to Scene 1 and play it back, we see nothing really happening.

But if we test our movie by pressing Command Return or Control Enter on a PC, then we see the movie clip and the boat playing and we see that the water is continuously looping.

It's not a perfect loop, mind you, but you have an idea now of how the movie clip works.

I can create one simple animation and have a loop over and over again.

Now let's try adding another movie clip.

This time we'll upgrade the boat and add an animated sail.

So let's go to the Library and double click or knock, knock, knock to go into the dressing room of the boat.

We'll go down here to where it says Layer 1, we'll double click and I'll name it boat.

I'll go over to the New Layer icon and I'll add two more layers.

One will be for the mast and one will be for the sail.

On the mast layer, I'll select the Rectangle Tool and this time I use the Color panel to change the colors.

For the Stroke, I'll click and select none.

For the Fill, I'm going to click and select this little preset black to white gradient.

Now I close the panel.

And now, with the mast layer still selected, I'm just going to draw a mast above the boat, kind of sticking out like that.

And now so it looks like it fits in the boat, I'm going to zoom in, make a marquee around this little area, and then let go.

And I'm just going to grab a line and select maybe red, and I'll drag that line right through alongside the boat.

And it acts like a scissor.

So if I use my Selection Tool now, I can kick on the bottom part of this mast and you'll see it split it in half and I could just simply press Delete.

Then I can select the line by double clicking it and press Delete there.

And now it looks like the mast is perfectly within the boat.

I'll press Command - to zoom out a little bit or I can go under View, Zoom Out, Command -, then we'll select the sail layer.

And again I'm going to grab my Rectangle Tool and I'll set the Stroke to none and I'll set the Fill to maybe red. and then I'm just going to drag out the sail.

So it sticks out along the mast.

Looks more like a flag, but we'll fix that by grabbing the Selection Tool and grabbing the corner and just dragging it down, until it snaps to the other corner.

And now we have the sail.

To make it look a little bit better, we'll bring our cursor over the edge here and flare it up.

Maybe on the bottom we can do the same, and now I have a sail.

If we want it to animate, though, we have to put it into a movie clip.

So let's go ahead and do that and create a frame-by-frame animation.

So I'll select the sail and go on to Modify, Convert to Symbol...

And I'll put it into a movie clip symbol straight away.

I'll put it mc_sail and I'll call it a movie clip, and I press OK.

Now we have a sail symbol within our boat symbol.

And if I double click, I can edit in place.

And now I'm inside of the mc_sail Timeline, which is inside of the boat symbol, which is sitting in Scene 1.

So now we have here this sail, and I want it to move.

So I'm going to zoom in on my Timeline by clicking this little button here on the right, and maybe on frame three, I'll press F6 to add a keyframe.

And I'll just make some slight adjustments to my sail.

Maybe I'll push in here, and this will flare a little less, and this will flare a little bit more.

And you'll see now I have a difference between the frame one and frame two.

And then maybe I'll select frame five and add one more keyframe, either right click, insert keyframe or press F6.

I'll make one more little tweak here, bringing the sail in, just making it slightly different than the previous frames.

And now you see I have keyframe one sitting on the Timeline for one, two frames, keyframe two sitting on for one, two frames and keyframe three is sitting on there for one frame.

So here I'll add one more by selecting frame five, right clicking and Insert Frame.

Now all three keyframes are sitting on the Timeline for two frames each.

And you can see this slight animation.

It's very simple.

But if I press Command Enter to test the movie, we see all of the movie clips playing.

And we see our sail looping independently on its own Timeline in a movie clip flailing in the wind.

I hope you enjoyed this getting started series with Adobe Animate.

My name is Mark and I hope to see you again soon.

Thanks for watching and happy animating.

Keep on moving, don't stop go.

Keep on moving...