(Last Updated: March 5, 2018)

Saola Animate offers background fill styles to modify the background of a scene or an element. In a word, you can fill in a scene or an element with colors or images, or even make it transparent. Keep reading to learn more details about these background fill styles and get some tips to use them when creating HTML5 animation.

This tutorial covers:

  1. Filling Background with Solid Colors
  2. Filling Background with Gradients
  3. Using Images as Background Fill
  4. Making Transparent Backgrounds

Filling Background with Solid Colors

By default, scenes and elements are filled with a solid color. Specifically, Saola Animate makes scenes completely white, whereas DIVs or shapes are in blue. Meanwhile, text elements are made transparent, but you can always change their background to a color.

To set the background fill styles of a scene or an element, first select it. Then, go to the Properties pane > Fill section. Solid Fill is the second style which defines a solid color for the background.

solid background fill 1

To change the background color, click the Color button (1). Solid Fill uses the RGBA Color Picker. The default alpha (A) is 255.

solid background fill 2

You can:

  • Pick a color from the default color palette.
  • Click More Colors to define custom colors.
  • Click Eyedropper to sample a color from anywhere within Saola Animate.
  • Drag the alpha slider or click directly on the alpha bar to change alpha value. If alpha is 0, the background fill becomes transparent.

Also, it’s possible to animate the background color. By default, your animation gradually changes one color into another. But you can alter it, that is to say, make a color instantly change into another. To do that, right-click an animation segment and select Remove Transition.

solid background fill 3

For more details about creating HTML5 animation and adding animation keyframes, see:

Filling Background with Gradients

Besides setting the background to be a solid color, you can also set that background to be a gradient. Gradient is a band of two or more colors in which one color gradually fades into another. At a minimum, gradient transitions from one color to another; however, you may add multiple colors to it.

gradient background fill 1

Saola Animate offers two types of Gradient Fill:

  • Linear gradient creates a straight progression between two or more colors. A linear gradient can go horizontally (left, right), vertically (up, down), or diagonally.
  • Radial gradient creates a circular progression between two or more colors. It radiates from its center, either in an ellipse or in a circle.

Linear Gradient

Linear gradient creates a gradual straight-line blending between two or more colors. By default, it has two color points, i.e. black and white. Add as many color points as you like to create different linear gradient effects.

gradient background fill 2

To work with linear gradients, take note of the following:

gradient background fill 3

  • Gradient strip (2): Show a “live” sample of the gradient. Use it to make changes to the gradient in a visual manner.
  • Color point: Each color point on the strip is a distinct color. The selected color point has a red triangle at the top (3). To add a color point, click on the strip or click the Add button (plus icon). In contrast, click the Remove button (minus icon) to delete a selected color point.
  • Position: Specify the position of a color point, where you want a color to “start”. For example, the starting color point has the position of 0%, whereas the ending color point has the position of 100%. To change a color point’s position, drag it along the strip or enter a new number in the Position box.
  • Color: Use the Color Picker to define a color. Gradients support transparency, allowing you to create stunning effects. For example, stack a gradient with a background as in the figure below:

gradient background fill 4

You can even stack multiple gradients to achieve some fancy effects like this:

gradient background fill 5

  • Angle: Set the angle of direction for the gradient line. By default, a linear gradient runs vertically from bottom to top with an angle of 0 degree. 90 degree creates a left-to-right horizontal gradient. As the degree increases, the gradient direction rotates clockwise.

gradient background fill 6

Note that it’s possible to set a negative value to the angle. Negative angles make the gradient run in the counter-clockwise direction. For example, -90 degree makes a right-to-left horizontal gradient.

Radial Gradient

Similar to linear gradients, radial gradients create a gradual blending between two or more colors.  The difference is that a radial gradient radiates from its center, i.e. a center point. To work with radial gradients, select Radial from the Gradient Type box (4).

gradient background fill 7

Then, be mindful of the following:

  • The Gradient strip, Color point, Position, and Color of radial gradients are much the same as those of linear gradients.
  • Shape: Define the shape of the gradient. The value can be either ellipse or circle, of which ellipse is the default.

gradient background fill 8

  • Size Param: Define the size of the ending shape, i.e. the shape where the last color ends. There are four possible values:
  1. Farthest corner: The gradient ends at the corner that is farthest from the shape’s center. This is the default value.
  2. Closest corner: The opposite of Farthest corner, where the gradient ends at the corner that is closest to the shape’s center.
  3. Farthest side: The gradient ends at the side farthest from the shape’s center.
  4. Closest size: The opposite of Farthest side, where the gradient ends at the side closest to the shape’s center.

gradient background fill 9

  • Origin X, Y: Adjust the location of the center point. For example, Origin X, Y [value: 50%, 50%] sets the gradient at the center (default). Meanwhile, Origin X, Y [value: 0%, 0%] sets the gradient to start at the top left. Animate these properties to create animation where the center point moves from this position to that position.

gradient background fill 10

Note: Saola Animate is compatible with: Chrome 4+, Firefox 3.5+, IE 9+, Edge, Safari 3.1+, and Opera 11.5+. But for CSS gradient fill, newer versions are required: Chrome 10+, Firefox 3.6+, IE 10+, Safari 5.1+, and Opera 12.1+.

Using Images as Background Fill

Apart from colors, background fill in Saola Animate allows you to fill elements with images. Using Image Fill style, you specify an image as the background of a scene or an element. You can choose an image from the document library, i.e. the Resources pane, or from your computer.

image background fill 1

After selecting an image, remember to set the fill option to resize and reposition the image within the element. This comes into play since the image’s dimensions and proportions may not always match the size of the container.

The best fill option depends on your personal preferences and the proportions of the image you are using.

image background fill 2

  • Stretch (5): Extend the image to all edges of the container by distorting or shrinking it. Thus, Stretch may only work for some abstract images, not the “figurative” ones. This is the default.
  • Center (6): Center the image inside the element. If the image is smaller than the container, you’ll see a transparent area around the edges. Otherwise, you’ll see the very center of the image, with the rest outside of view. Choose this for images with the center focus.
  • Tile (7): Repeat the same image throughout the background, making multiple tiles of the image. It is meant for small images or patterns.
  • Fit (8): Scale the image as large as possible without cropping or stretching. For that reason, the whole image is shown. The empty portion of the container is made transparent.
  • Fill (9): Scale the image as large as possible without stretching. If the proportions of the image differ from the container, the image is cropped so that it covers the entire container.

Making Transparent Backgrounds

As mentioned earlier, the background of text elements is made transparent by default. That’s because these elements use the No Fill style. No Fill fills elements with a transparent background.

html5 animation transparent background fill

So, for scenes or elements, access the Properties pane > Fill section and choose No Fill to make them see-through. Another way to make a transparent background is to use the Opacity property. A value of 0% opacity sets selected elements as completely invisible. Use this to create animation where an element fades in or fades out a scene.

So you’ve learned all about setting background fill styles when making engaging HTML5 animation. Different background fill styles are sure to help out when you explore your possibilities with Saola Animate.

Pin It on Pinterest