Saola Animating Analysis
Setting Background Fill Styles in Saola Animate
Snippet: Set different background fill styles in Saola Animate by using colors or images. Learn how to create gradients for background fill.
Keyword: background fill
---
Saola Animate offers background fill styles to modify the background of a scene or an element. In a word, you can fill up 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.
Link: (-- removed HTML --) (-- removed HTML --)
Filling Background with Colors
Saola Animate lets you set background fill as colors using two background fill styles: Solid Fill and Gradient Fill. These …show more content…
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.
To change the background color, click the Color button (1) to open the Color Picker. Solid Fill uses the RGBA Color Picker. The default alpha (A) is 255.
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.
For more details about creating HTML5 animation and adding animation keyframes, …show more content…
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.
Saola Animate offers two types of Gradient Fill:
Linear gradient creates a progressive transition between two or more colors along a straight line. A linear gradient can go horizontally (left, right), vertically (up, down), or diagonally.
Radial gradient creates a progressive transition between two or more colors radiating from the center point (the center of the gradient).
Linear Gradient
A linear gradient creates a band of colors that progress in a straight line. 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.
To work with linear gradients, take note of the following:
Gradient strip (2): Show a “live” sample of the gradient. You can make changes to the strip in a visual
Snippet: Set different background fill styles in Saola Animate by using colors or images. Learn how to create gradients for background fill.
Keyword: background fill
---
Saola Animate offers background fill styles to modify the background of a scene or an element. In a word, you can fill up 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.
Link: (-- removed HTML --) (-- removed HTML --)
Filling Background with Colors
Saola Animate lets you set background fill as colors using two background fill styles: Solid Fill and Gradient Fill. These …show more content…
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.
To change the background color, click the Color button (1) to open the Color Picker. Solid Fill uses the RGBA Color Picker. The default alpha (A) is 255.
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.
For more details about creating HTML5 animation and adding animation keyframes, …show more content…
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.
Saola Animate offers two types of Gradient Fill:
Linear gradient creates a progressive transition between two or more colors along a straight line. A linear gradient can go horizontally (left, right), vertically (up, down), or diagonally.
Radial gradient creates a progressive transition between two or more colors radiating from the center point (the center of the gradient).
Linear Gradient
A linear gradient creates a band of colors that progress in a straight line. 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.
To work with linear gradients, take note of the following:
Gradient strip (2): Show a “live” sample of the gradient. You can make changes to the strip in a visual