(Last Updated: July 23, 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 animations, 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. Saving Projects
  3. Opening 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.

Click the New button to create a new project.

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 this moment or later, when you edit the document.

Fill in required information in the New Project dialog.

Creating Non-Responsive Projects

To create a non-responsive project, specify the project name, location, size, and number of blank scenes.

  • 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, select the Responsive Layout box. In a responsive project, each scene has different layouts created based on breakpoints. The scene size starts at 100% of the container and the viewport width is set to the device width.

Selecting the Responsive Layout box enables the Breakpoints button. Click this button to add and manage breakpoints before creating a responsive project. Be aware that you can still adjust breakpoints later when you edit the document.

Add and manage breakpoints in the Breakpoints dialog.

A responsive document has different layouts created based on breakpoints.

Create a responsive project.

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.

Save a project as a file with a different name.

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.

Opening Projects

There are several ways you can use to open an existing project. You can access the project folder and double-click the manifest file (*.saola) to open up the project. Besides, on the Welcome Screen or in the editor, you can:

  • 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.

Click the Open Project button to open an existing project.

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.

Import a project from a package file.

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

Pin It on Pinterest