(Last Updated: June 7, 2018)

Saola Animate makes it easy to create HTML5 animation for different screen sizes. When working with the application, the first thing to do is create a new project. Then, you’ll import content, create animation, add interactivity, and finally export the project to HTML5. In this tutorial, you’ll learn the first step: creating a new project.

This tutorial covers:

  1. Creating New Projects
  2. Opening Projects
  3. Saving Projects

Creating New Projects

To begin, open the application. On the Welcome Screen, click the New button (1) or press CTRL+N to create a new project. You can also click New (2) on the toolbar to get the same result.

new project 01

In the New Project dialog, fill in required information and click OK to submit. Be aware that you can choose to create a responsive document or a non-responsive one right at that moment or later, when you edit the document.

new project 02

Creating Non-Responsive Projects

To create a non-responsive project, specify the project name, location, size, and number of blank scenes. Remember to clear the Responsive Layout box to disable this option.

  • Name: Name of the project.
  • Location: Location of the project. You can click the Browse button to navigate to a location. Select Use as default location to make a location to be default every time you create a new project.
  • Width, Height: Size of the container in which the document is embedded. The container size is editable afterward in the Responsive toolbar > Container W/H. You can select a preset size by clicking Preset Sizes.
  • Blank Scene: Number of blank scenes you would like to initially create. The scene size, by default, is the size of the container. Remember that you can insert as many scenes as you want when you edit the document.

Once you click the OK button, you’ll have a new project opened within Saola Animate. The project consists of a number of blank scenes as you specified earlier.

Creating Responsive Projects

If you want to create a responsive project, pay attention to the Responsive Layout and Breakpoints options.

  • Responsive Layout: Selected by default to create a responsive document with different layouts created based on breakpoints. In responsive documents, the scene size starts at 100% of the container and the viewport width is set to the device width. Disabling this will create a non-responsive document, but later while editing you can still change the settings to create a responsive document.
  • Breakpoints: Open the Breakpoints dialog to add and manage breakpoints before creating a responsive document. Breakpoints can be edited later when you edit the document.

new project 03

A responsive document has different layouts created based on breakpoints.

new project 04

Opening Projects

You can open existing projects from the Welcome Screen or while you’re working on another project.

  • Press CTRL+O, then browse and open a project.
  • On the Welcome Screen, click the Open Project button. If the project you want is listed in the Recent Projects section, just click to open it.
  • In an opening project, click Open Project (3) on the toolbar. You can also click File > Recent Projects on the menu bar and select a recently opened project.

new project 05

You can also import a project from a package file. Click the Open Project button and select a package file (*.saolapack). Next, fill in the project name in the Import Project dialog and click OK to import.

new project 06

Saving Projects

Save a project by pressing CTRL+S or clicking the Save button on the toolbar.

You can also save a project as a file with a different name. This is useful when you want to make a backup of your project or just want to save the project to a new location. To do so, click File > Save As > Other Project. Fill in required information in the Save As dialog and click OK to submit.

new project 07

Besides, you can save a project as a package (*.saolapack) for faster and easier sharing. Click File > Save As > Package. Provide the file name for the package and click Save to submit.

That’s how to create, open, and save projects in Saola Animate. Stay tuned for more helpful tutorials about Saola Animate and HTML5 animation.

Pin It on Pinterest