Using HTML5 components
Use HTML5 DOM based components to enhance your Adobe Animate compositions.
Published
When working within an HTML5 Canvas document, we have the ability to use a full set of components for this platform.
We do this through the Components panel.
To access the Components panel, go to Window, Components.
Now, you will see within the Components panel here we have User Interface, Video and jQuery UI.
I am going to expand the Video set of components where we have a single component here, called Video.
This allows us to drag an instance of the component onto the stage and then modify its properties.
With the Video component instance still selected, let's change the Position and Size.
I am going to position this to around 681.00 and a Y position of 50.00.
I will also adjust the Width to 550.00 and the Height to around 309.00.
As you can see, the Video component instance now completely covers the visual billboard in our background.
What we will need now is a video file to playback within this Video component instance.
Here we have this MP4 file which we can use for this very purpose.
To playback that file within our Video component instance, with the component instance still selected on the stage, notice in the Properties panel we have a Show Parameters... button.
This comes up with any HTML5 Canvas components that we have on our stage and can view the properties of.
Clicking that brings up the Component Parameters panel where we can define autoplay, controls, whether it is muted or not, and whether it loops.
I am going to turn controls off, but I'll let it autoplay, I will mute the audio even though there is not audio in this particular file.
And I will set it to loop.
Of course, the most important parameter is the source.
We need to point to the MP4 file itself here.
So, I am going to click this Edit icon and then browse to my source.
Alright, so here is the HippoVideo.mp4 we saw earlier.
Open.
And now it is pointing to that video, right here.
I am going to untick the box that says Match source dimensions because I want the component to stay at the dimension that we have chosen.
And hit OK.
Alright, let's go ahead and test this by choosing Control, Test.
And there is our fully rendered animation with the video playback in a loop upon the billboard.
What you learned:
Use DOM based components in Animate HTML5 compositions
Use the video component
Presenter
