Now we can begin to animate elements in our ad. We’ll need to convert our images to symbols. Then we’ll adjust registration. Once all items are aligned we’ll go into the timeline, go out a bit insert a frame. Now we have a duration for our animation. We’ll select the basket layer and insert a keyframe half way through the duration. We’ll move the basket off the stage. Now we have two different positions for the basket. Then will go to the insert menu and choose Classic Ttween. We choose Classic Tween when creating content for HTML5.
- [Voiceover] Now we can begin to animate elements in our ad. So first lets come down to the timeline panel. Lets select the text box layer. Lets drag this down to be below the basket layer. I want to have all of the products show up on top of that orange box. Then let's come back and let's hide the headline layer. The ceramic, wood and dip bowl layers, as well. This way we can only see the basket layer, the text block, the logo and the counter top. Let's come back and select the basket.
Now in order to animate the basket we have to wrap this graphic into a symbol. We can only animate symbols inside of Animate. So with the basket selected let's come up to the modify menu. Let's come down and choose convert to symbol. Now we need to name this symbol. So I'll type in basket. The type we'll leave this as a graphics symbol. For the registration point let's choose the center. And then click OK. So now in the library panel you'll see a new symbol.
Just like we got with the SVG we imported earlier. And the symbol has the basket.png file inside of it. So again, this is why I wanted to separate all of this source bitmap files using this folder from all of the symbols that encompass those particular graphics. So now on the stage we have an instance of this basket symbol. Now the other thing I want to do is I want to adjust the registration point a little bit. I did need to manipulate all of the different products so the outermost circumference would match so we could do that masking effect.
However, that did result in the fact that some of these items weren't perfect circles. So I want to modify the registration point here. So the way I can do that is with the object selected let's come over to the tool bar. Let's click on this third tool down here called free transform. When I activate this I get a black highlight around the entire box. With these white outline node points. And I can come in here and select and move the registration point. Now to help make sure I get this closer to the center lets's come up to the upper right hand corner of the stage.
Lets change the magnification to 400%. Now I can come in here. I can select this registration point. I'm going to drag it right to about here. So that's going to give me a little bit more of a believable rotation when we have the basket roll in. So with that adjustment made I'll go back to 100%. Center my stage. And now we're ready to animate this. So the first thing we need to do, before we can begin creating animations, is to add some frames to the timeline.
By default the timeline has a single frame showing up here, So what we're going to do is come out here on the timeline to the 80 frame mark. I'm going to click on the first item. And drag down to select all of these frames. Then we're going to come up to the insert menu. Timeline. And then choose frame. You can also just hit F5 on your keyboard. So no we have a duration of 80 frames. So I can click the play head here and drag this back and forth. So now with our project having 80 frames in the basket layer let's select this.
Let's bring our cursor out to the 40th frame mark. And then click. So I can see right here that I have frame 40 selected in the basket layer. Let's come to the insert menu. Let's come down to timeline. And let's choose keyframe. And this also has a keyboard shortcut of F6. You don't see it right here, but if you do hit F6 you'll get a keyframe. Now if I select this I can see that there's now a dot showing up here. Indicating there's a second keyframe in the basket layer at frame 40.
So now to create an animation let's bring the play it back here. Let's come up to the stage. Going to hold the shift key. And use my left arrow. Or you can click and drag. And I'm going to bring the basket out to the left hand side of the stage. Now I do have a specific number that I want to use here. So I'll go back to the properties panel and for the X property we're going to set this to -240 pixels. Then press return.
So it's a good idea to use classic tweens whenever possible when creating content for HTML5. And once I select the classic tween you'll now see that the basket jumps to where it shows up in that particular point in the animation based on the frame I selected. Now if I jog the timeline I can see that the basket now moves into place. So to preview the animation we have so far in the timeline panel let's come down here and click on the first frame button. And then come over and click on the play button.
And then on the main stage you can see the animation playing. And so now with some basic motion working next we're going to add in some rotation and an easing effect.
- Creating a new HTML Canvas project
- Adding artwork, text, and shapes
- Creating and animating elements, including masks and symbols
- Using scripts for playback and interactivity
- Adding web fonts
- Finalizing the animation
- Publishing an Animate CC project