To begin our project, we’ll create another folder called myAd at the same level as the Artwork folder. Once we publish the Ad, all assets will be in this folder. We’ll then create a new document and choose HTML5 Canvas. We’ll choose the workspace, modify the height, width and frame rate for our project. We’ll save and name our project file.
- [Voiceover] Now to begin our project in the Exercise Files, let's come in here and create a folder that's at the same level as the Artwork folder. So I'll right-click and choose New Folder. We'll call this myAd. Now the reason I'm doing this is when we publish our ad from Animate, all of the assets are going to be in this myAd folder. We're gonna reference the higher-resolution artwork inside of the Artwork directory for the bitmaps here. So now that we have the myAd folder created, let's go and launch Adobe Animate.
And once Animate's launched, you'll see this main splash screen here. The first thing we need to do is create a new HTML5 canvas document. In the splash screen, you can do that by coming under Create New and clicking this button here that says HTML5 Canvas. You can also go to the File menu, come down and choose New, and you can choose HTML5 Canvas in here as well. In either case, I'll come down here and click OK. That's gonna activate our project. Now I'm in the Essentials workspace. You can change workspaces by coming up to the right-hand menu over here.
I'll keep this on Essentials, that's the default. So now in the Properties panel here, we can see all of the information about the canvas, or the main stage, over here on the left-hand side, and the Timeline panel's down below. So inside of the Properties panel, let's come down and change some settings for our project. First for the frames per second, let's come in here and change this from 24 to 30. I'll hit Tab. That will tab me to the size width. Let's come in here and change this to a standard banner size, which is 720-wide. I'll hit the Tab key and then we'll change the height to 300 pixels.
So once those are set, I'll bring my cursor inside of the canvas area. I'll press the Spacebar which will give me the hand tool, and while holding the Spacebar, I'll click the mouse, and drag the canvas to the middle of the stage. So now with the basic settings for our advertisement setup, let's come up to the File menu. Let's come down and choose Save. Then go into the Exercise Files, go into myAd, and then we'll name this everydaythings.fla, then choose Save.
And then if we go back and take a look in the Exercise Files inside of the myAd folder, we'll see a new file here called everydaythings.fla. And now with our project set up and our files organized, next we'll import the artwork into Animate.
- 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