Saola Animate lets you add six image formats to a project. Supported formats include JPG, JPEG, PNG, BMP, SVG, and GIF. It means that you can use both static and animated images as well as both raster and vector files. For the vector image format, it’s also possible to use predefined shapes or draw freeform ones. Let’s learn how to add and edit image elements in Saola Animate 3.
This tutorial covers:
- Add Images Elements
- Rename Image Elements
- Resize Image Elements
- Replace Image Elements
- Remove Image Elements
Add Image Elements
There are many ways to import images into a project. You can do either of the following:
- Drag/ copy them from your computer or other applications and drop/ paste onto the Canvas.
- Drag them from your computer into the Resources pane to store. Alternatively, click the Import Resources button (1):
When you want to use an image in the Resources pane, just drag it from the pane onto the Canvas or right-click it > Add to Scene.
- Click the Image button (2) in the dockable toolbar, select one or more images that you want to insert:
- Click the drop-down arrow (3), you can import them by one of three options: Background Image, Image (<img>), and Inline SVG.
Select this image type when you want to:
- Create sprite sheet animations.
- Display a specific part of an image by changing its position (X, Y) and size (Width, Height).
- Animate the position and size of the embedded image.
- Use a high-res image as a background but can crop its unnecessary parts in small screen devices by changing its position and size.
For example, let’s take a look at the image below:
By default, its X and Y values are in pixel while its width and height values are in percentage (4). When you resize the image, it will be scaled without changing its original proportion (5):
Now, let’s change the width and height values to pixel, then set the X and Y values in percentage (X=Y=50%) (6). When you resize it, it will be cropped to focus on the central part (7).
Note: When you import an image using the Image <img> or Inline SVG options, the Background Image section is not available.
The Image (<img>) option is used to embed an image in an HTML page. It helps to create a holding space for the referenced image. Using this option is the most straight-forward way of displaying a static image on a page. The Image <img> type should be used whenever an image is actually a part of the content (as opposed to using an image as part of a page’s design).
Note: You can switch the current type to another one. In the Image section, select another type from the drop-down list:
Rename Image Elements
After adding an image to a scene, you can rename it. Do one of the following:
- Double-click its name in the Timeline or Elements pane > enter a new name:
- In the Properties pane > General section > rename it in the Name box:
Resize Image Elements
To resize an image, simply select it and drag the resizing handles. Or, in the Properties pane > Position & Size section > change its width and height’s values.
Note: An image element maintains its aspect ratio by default, which keeps them proportional while being resized. To change the ratio, click the chain icon to clear the Link width to height checkbox:
While editing, chances are you want to revert them to their original size. Just right-click it on the Canvas and select Restore Original Size.
Replace Image Elements
Replacing image elements comes in handy when you want to change the image but maintain all existing animations you created. In the Image section of the Properties pane, click:
- From Resources (8): Select a new one from the Resources pane.
- From File (9): Select a new one from your computer.
In doing so, make sure the new image has the same size as the original one. Otherwise, it may be resized or look messy.
Remove Image Elements
To remove image elements, select it on the Canvas, in the Elements or Timeline pane and press DELETE.
Note: Even if you delete an image element on the Canvas, it still exists in the Resources pane. To completely remove an image, you must delete all image elements associated with it. Then, delete the image from the Resources pane later.
|Introduction to Elements|
Draw and Edit Freeforms
Create Custom Elements
Add HTML Widgets
Use Symbols to Reuse HTML5 Animations