Exporting Saola Animate Animation to HTML5

Once your animation is complete, you’ll want to export it for final delivery. This tutorial presents how to export animation to HTML5 in Saola Animate.

This tutorial covers:

1. Setting Document Properties
2. Exporting Projects to HTML5
3. Browser Compatibility for HTML5

Setting Document Properties

Before you export animation, you’ll want to set or adjust the document properties in the Document pane. If you don’t see this pane, click the View menu > Document.

You can adjust the following:

• Title: Export the content to the title tag to define the title of the document in the browser toolbar. The title tag also displays a title for the page in search-engine results.
• Description, Keywords, Author: Define the value of the tag to specify the description, keywords, and author of the document. Metadata will not show on the page but will be machine-parsable.
• Container ID: Define a unique identifier of the HTML tag in which the HTML5 output is embedded. The ID can contain only alphanumeric characters (A-Z, a-z, 0-9), underscore (_), and hyphen (-). It must also start with an alphabetic character for CSS selector to work without escaping.
• Resource Folder: Define the folder path containing the resources of the HTML5 output. This path is relative to the path of the HTML5 output.
• Preloader Resource Folder: Define the folder path containing the resources of the preloader. This option is only available when you use custom preloader.
• Viewport Width/Height: Define the value of the viewport tag to control layout on mobile browsers. You can either select a value or enter an integer value in pixels. Device Width/Height sets the width/height of the output to follow the screen width/height of the device. Meanwhile, Not Set excludes any viewport tag from the document content.
• AutoFit: Automatically scale the document without changing the proportion to fit it into the container. This option is also applied to symbol documents.
• Autoplay: Automatically play the document when a browser opens. If you don’t select this option, you must call the document to start using actions.
• Embed System Fonts: Embed any used system fonts in the output using CSS3 Web Fonts Specification. By doing so, text will maintain appearance no matter the font installation on end users’ computer.
• Edit HTML/CSS: Open the HTML/CSS Output editor where you can edit the HTML/CSS of the document. Be aware that tags wrapped within {$} will be replaced by program-generated contents.
• Alignment: Decide how the document should be displayed in the browser window. This option is also applied to symbol documents.
• Preloader: Use a preloader as a visual indicator of the document loading progress. You can use either the default preloader or create a custom one.

Exporting Projects to HTML5

The last step when working on a project is export it to HTML5. To export animation, press CTRL+ALT+E or click Export to HTML5 in the toolbar.

Saola Animate will create the output folder containing the following files and folders:

• preloader_resources: Optional folder containing all resources inserted into the custom preloader.
• resources: Folder containing all resources inserted into the project.
• *.css: Document-specific data defining the CSS style of the document.
• *.html: HTML document. Open this file to play the project in a browser.
• *.js: Document-specific data defining all scenes, timelines, elements, and animations of the document.
• slplayer.js: The main Saola Animate HTML5 player.

Browser Compatibility for HTML5

Saola Animate is compatible with the following:

• Chrome 4+
• Firefox 3.5+
• IE 9+
• Edge
• Safari 3.1+
• Opera 11.5+

The following features require newer versions:

• Gradient Fill: Chrome 10+, Firefox 3.6+, IE 10+, Safari 5.1+, Opera 12.1+.
• Audio/Video: Firefox 11+, Safari 4+. Users still have to use compatible formats that a browser supports.

Saola Animate HTML5 output checks if a browser supports a specific feature or not. If not, Saola Animate will fall back on less advanced options to keep the output compatible. For example, if a browser doesn’t support Gradient Fill, it will use Solid Fill instead. If Saola Animate cannot find a fallback, the feature will not work in that browser.

That’s how you export animation to HTML5 in Saola Animate. Try Saola Animate today to build stunning HTML5 animation.