Adobe Animate offers several ways of adding video to a document.
In this lesson, let's focus on how to place a video to an Animate canvas and also add playback controls with play and pause actions.
To follow along step-by-step with this lesson, click the link below to download the practice files.
Much like other Animate lessons on this platform, we'll be importing a design from Adobe Illustrator to Animate. In this case, we'll place a video player design to a stage, which is sized 720 x 1280.
First, let's create a new Animate document before importing the design from Illustrator.
New Document
Click on New File.
Click on the Web tab.
Set the Width field to 720 and the Height to 1280.
Set the Frame Rate to 30.00.
Set the Platform Type to HTML5 Canvas.
Here is a closer look at the new document settings:
For this exercise we'll be using a series of panels, including the Components window, to drag a video on to the canvas.
All of the panels can be found under the Window menu ribbon. They are as follows:
Window > Code Snippets
Window > Actions
Window > Components
Window > Component Parameters
Now that the new document has been created and the panels required for the lesson are open, let's import the Illustrator design to Animate. In the practice files folder, you will find an Illustrator file called video-player.ai.
Import to Stage
Click on File, hover over Import and choose Import to Stage.
Choose the Illustrator document included in the practice files and click Open.
If you have an Incompatibility Report prompt showing within the window, click it to resolve any style issues. These are usually styles applied in Illustrator that are not immediately recognized once imported to Animate.
Once you are satisfied with the selections, click Import.
Here is an image slider looking closer at the Import to Stage settings:
Keep in mind the image from the Illustrator file that's been imported to the stage is only a placeholder. We'll use this as a reference when placing and resizing the video in Animate.
Import Video
In the Components panel, collapse the Video folder.
Click and drag the video player icon to the canvas.
Open the Component Parameters and, next to Source, click the pencil icon to add the video file. In this case, locate the file in the practice files saved podcast.mp4.
Ensure that Match Source Dimensions is checked. This allows you to maintain the aspect ratio when increasing or decreasing the size.
Click OK.
Once the video is placed on the canvas, adjust the width and height in the Properties panel, under Position and Size. Ensure that the width and height values are locked before decreasing the size.
You can also use the Selection Tool to align the video on top of the placeholder. Once you have the video in position, delete the placeholder image from the canvas.
To test the movie, save the project first. Once it is saved, go to Control > Test to launch the project in your default web browser.
The next part of the lesson will focus on how to add your own play and pause controls. For this, we'll have to turn off the regular playback controls first.
Click on the video on the canvas with the Selection Tool and, in the Component Parameters panel, uncheck the control option. You can also turn off any other options that aren't necessary, such as autoplay.
Now let's focus on adding Code Snippet actions to the Play and Pause buttons to control the video. Before doing so, you'll have to convert both the Play and Pause icons into Symbols.
Convert to Symbol
Click on the Play icon and go to Modify > Convert to Symbol.
Name the Symbol playBtn.
Set the Type to Button.
Click OK.
Click on the Pause icon and go to Modify > Convert to Symbol.
Name the Symbol pauseBtn.
Set the Type to Button.
Click OK.
Here is how the Convert to Symbol settings should look:
Once the icons have been converted to Button symbols, it's crucial to add instance names to both. This can be done by opening the Properties panel and, under the Objects tab, add the instance name. The instance name can be the same as the symbol – playBtn for the Play button and pauseBtn for pause.
The next step is setting up Event Handler Code Snippets to both Play and Pause icons. Code Snippets are built-in javascript codes that can be applied to objects.
Before we add the Event Handler Code Snippet, let's create another layer in the Timeline called Actions. This will allow you to contain all the coding on this layer.
Even Handler Code Snippets
Click on the Play button and, in the Code Snippets panel, collapse the HTML5 folder and then the Event Handlers folder.
Select the Mouse Click Event option.
Click the Add to Current Frame icon, which can be found in the upper-left corner of the Code Snippets window.
Repeat the same step for the Pause button.
If you open the Actions panel, you can see the code you applied to this point. Both Event Handlers will appear here. Clean up the code so it looks like this:
Next, we're going to focus on adding the Play and Pause component snippets to the video. Before doing so, let's add an instance name to the video player.
Click it with your Selection Tool and, much like when adding the instance names for the buttons, go to Properties and in the Object tab give the video an instance name. This can be called podcastVideo.
Components Code Snippets
Click on the video and in the Code Snippets panel collapse the Components folder within the HTML5 Canvas folder.
With the video still selected on the canvas, click on Play a Video.
Click the Add to Current Frame icon.
The code will appear in the Actions panel. The line of code you're looking for will be $("#podcastVideo")[0].play();
Copy and paste this code as you see it in the image below:
Great! The final step is copying this same line of code and pasting it in the same area under the Pause Event Handler, but changing the word from play to pause.
Just like this:
The video player should now be functional with Play and Pause button triggers to control the video. Again, to test it out in a web browser, go to Control > Test.
Here's how it should appear once completed:
