Images are essential to compelling HTML5 animation. Today’s tutorial shows the ways to add images to HTML5 animation with Saola Animate. Also, it describes the techniques for working with the background image within an image element. Specifically, you will grasp how to replace the background image and use it to create animation.
This tutorial covers:
Adding Images to HTML5 Animation
In Saola Animate, you can add a vast variety of image formats to your HTML5 animation. Supported formats include JPG, JPEG, PNG, BMP, SVG, and GIF. It means that you can use both static and animated images, and both raster and vector files as well. For the vector image format, it’s also possible to draw many types of shapes that are all pre-defined in SVG.
There is more than one way to add images to HTML5 animation with Saola Animate.
The Resources pane is a good place to manage and view all of your resources. Use this pane to add images without them appearing on the Canvas. That way, you have your images ready for use at any time you like. Do either of the following:
- Drag and drop images into the pane.
- Click the Import button to import multiple images at once.
After you have images in this pane, drag and drop them onto the Canvas. Right-click an image and select Rename to rename it if you want.
On the other hand, you can add images to HTML5 animation using the Canvas or the toolbar. That way, you directly create image elements on the Canvas. Do either of the following:
- Drag and drop images onto the Canvas.
- Copy and paste images from your computer.
- On the toolbar, click the Image button and choose images from your computer.
By default, an image element preserves its aspect ratio when resized thanks to the Link Width and Height button. This button appears as an intact chain link in the Position & Size section of the Properties pane. To ignore the image ratio, deselect the button.
Renaming and Removing Images
An image in the Resources pane is a resource of your document. When you move it to the Canvas, it becomes an image element. It now appears in both the Timeline and the Elements panes. You can:
- In the Timeline and the Elements panes, double-click an element name to rename it.
- On the Canvas or in the Elements pane, select an element and press DELETE to remove it. You cannot delete an element in the Timeline pane.
Note: Even if you rename or delete an image element, the matching image remains in the Resources pane. To completely remove an image, you must delete all image elements of the image. Then, delete the image from the Resources pane.
Working with Background Image within Image Elements
For image elements, the Properties pane lists out the Image section. Here you can work with the image embedded within an image element. In particular, you can replace the image, animate it, and use it to create sprite sheet animation. In this article, we’ll look at the ways to replace the image and animate it. Details about creating sprite sheet animation are saved for another tutorial.
Replacing Background Image
Saola Animate supports replacing the background image within an image element. This comes in handy when you want to change the content but maintain all existing animation. For example, you haven’t had an image ready yet, but you do want to start animating.
To swap an image with another, access the Image section in the Properties pane. Then do either of the following:
- Click From Resources to choose a new image from the Resources pane.
- Click From File to choose a new image from your computer.
Note: Replace an existing image with a new image of the same size. Otherwise, the image may be resized and look messy.
Animating Background Image
Saola Animate enables you to animate the position and size of the image within an element.
- Background image has the Background X and Background Y properties. These properties are respectively equal to the Left and Top ones of an element.
- By default, the image size unit is set to percentages. This makes the image resize when you scale its container. To keep the image size the same when scaling its container, change the size unit to pixels.
Tip: You can center the image within its container and keep its size the same. That way the image will never be distorted or scaled. Do the following:
- Set the width and height of the container, i.e. the image element, to percentages.
- Set the background image position to [X, value: 50%; Y, value: 50%].
- Set the background image size to pixels.
So you’ve learned the ways to add images to HTML5 animation and work with the background image in Saola Animate. Don’t hesitate to download Saola Animate and give it a try. Feel free to contact us if you need any support.