Saola Animate is a powerful HTML5 animation creation tool, suitable either for novices or pros. It lets you create interactive HTML5 animation easily with handy and advanced features. Let’s check out this brief tutorial to see how to preview and export HTML5 in Saola Animate.
This tutorial covers:
Previewing Scenes and Projects in Browser
Preview helps you review your work and notice any required change. In Saola Animate, it’s possible to preview HTML5 animation at any time during the editing process. Two preview modes available: preview scene and preview project.
The former allows you to view a single scene’s animation and interactivity. However, in this mode, you cannot perform any action navigating to other scenes. On the other hand, the latter lets you preview the whole project. That is, you can review all animation and interactivity within a project, from the first to the last scene.
To preview the current scene in a browser, do either of the following:
- Use shortcut CTRL+ALT+S.
- Click the Preview Current Scene in Browser button (1) on the toolbar.
- Click File > Preview Current Scene in Browser (3) from the menu bar.
To preview the whole project, do either of the following:
- Press CTRL+ALT+P.
- Click the Preview Project in Browser button (2) on the toolbar.
- Click File > Preview Project in Browser (4) from the menu bar.
Note: It’s possible to preview your HTML5 animation right inside Saola Animate. You can click the Play/Stop button in the Timeline pane to play the current scene. Also, drag the Playhead along the Timeline to get the same result. Remember that this only plays scene’s animation, no interactivity involved.
Exporting Projects to HTML5
Once you’ve done creating a project, export it to HTML5. After that, you can embed your HTML5 animation into websites or applications.
Updating Document Properties
Before exporting a document, you may want to update the document properties. Document properties directly affect the appearance and behavior of all scenes and their timelines or elements.
To work with document properties, access the Document pane. If you don’t see this pane, on the main menu, click View > Document.
You can adjust the following:
- Title exports its content in the <title> tag. The <title> tag is required in all HTML documents to define the document title.
- Description, Keywords, and Author describe metadata in HTML documents. Metadata is often used in the content of the <meta> tag. Metadata will not be displayed on the page but will be machine parsable.
- Autoplay is turned on by default to make a document automatically play in a web browser. If you turn off Autoplay, you must use interactivity to trigger the document playback. Click the Event Handlers button to add events and actions to the document.
Apart from Export options above, you can also edit the following:
- Alignment allows you to select whether to center a document in a browser window or not. Available values: Center (both horizontally and vertically), Center Horizontally (default value), Center Vertically, and None.
- Container Width and Height allows you to change the size of all scenes in a document.
- Preloader allows you to select whether to use the default Preloader or create a Preloader of your choice.
Exporting Projects to HTML5
In order to export a project to HTML5, do as follows:
Step 1: Press CTRL+ALT+E. Or, click the Export to HTML5 button (5) on the toolbar. Alternatively, select File > Export to HTML5 (6) from the menu bar.
Step 2: Specify the location where you want to store the output. By default, Saola Animate creates a folder named “projectTitle_HTML5” inside the project folder.
Step 3: Click the Export button (7) to export the document. After that, a dialog box appears giving you three options to choose:
- Click Open to open your HTML5 animation in a browser.
- Click Open Folder to open the folder where you store your HTML5 project. From here, you can also view the output.
- Click Cancel to close the dialog box without viewing your output or accessing the output folder.
When exporting, the file structure of a Saola Animate document typically appears as below:
- preloader_res: Optional folder containing all resource files (image, media, etc.) that you insert to customize the preloader.
- resources: Folder containing all resource files that you insert into a document.
- demo.html: HTML document named after the project title. Open this file to play the project in a browser.
- demo.js: Document data named after the project title. It defines all scenes, timelines, elements, and animations for the document.
- slplayer.js: The runtime player for all Saola Animate documents.
So that’s how to preview and export projects in Saola Animate. Try Saola Animate today to build stunning HTML5 animation.