Animation

With the Printess Editor you can create Animations to export a mp4 file or to copy the HTML code. You have two options to display the Animation Timeline in the Editor:

The Animation Table

  1. You can select the option Show Animation Timeline by pressing the “t” key or through the Settings Menu of the Top Menu Bar. You access it by pressing the gear icon at the upper right of the Top Menu Bar.

Show Animation Timeline

  1. You can do a right mouse click on a selected single Frame to open it’s Context Menu. Here you choose the option Add Animation.

Add Animation Frame Option

Add Animation

If you have selected a single Frame the Animation Table will look like this:

Animation Table

  1. Button to add a Animation Timeline to control the selected Frame.

Please be aware that this only works with single Frames. So even if you have one Frame with several Adobe Illustrator paths included, this option will not be selectable. So if a frame is not suitable for the animation, or no frame is selected, the button of the animation table is displaying:

Animation Table

Note: If you like to add an identical Animation to more than one Frame, select all Frames and group them to a SubDocument Group.

SubDocument Group: Select the Frames you would like to group and do a right mouse click on one of these Frames. In the Frame Context Menu you can now select the option Group as SubDocument.

  1. Animation Window

Animation Window

Duration
Type in the duration of the video - maximal 20 seconds.

Banner Width
Define the width of the video in pixel.

Copy HTML
Click this button to copy the HTML code of the Animation.

Timeline Zoom
Zoom the Timeline in and out.

If you click on the small triangle icon next to Animation you open the Context Menu of the Animation Window.

Context Menu Animation Window

Here you can:

Copy ALL Timeline Layers to copay all Timeline Layers of the current Animation Table.

Paste Timeline Layers to paste ALL Layers into another Document or Printess Template.

Current Timeline
You get a list of all your different Documents of your Printess Template which includes an Animation. This gives you the option to choose any of those for your current Document.

Choose Animation From Different Document

Default Timeline Settings

As soon as you add an Animation to a Frame a window pops up to type in a title for the Timeline.

Define name For Timeline

After you pressed “ok” a Timeline Layer will be added to the Animation Table.

Default Timeline

In small window at the upper left you can skip back and start the Animation. It shows you the current time and you can lock the Animation. By pressing the “p” key you can start the Animation from the beginning and stop it.

Any new Timeline Layer automatically includes a slide-in and slide-out which you can not remove. But you can deactivate them. And it got the Emphasis Effect “shake”. This could be removed by selecting it and pressing the “backspace” key. You can add one Emphasis Effect by pressing the Plus icon.

If you click on one of these features in the Timeline Layer the Animation Window changes it’s content to show you the settings of the selected feature.

General Settings

Slide Window

Active
Turn on and off the effect.

Custom Animation icon
If you click on the Pencil Icon a separate window will open where you can customize the Animation.

Custom Animation Window

  1. Name
    By default the name of the effect is displayed but you can overwrite it.

  2. Origin x/y
    It defines the focal point for the movement and is default set to the center of the Frame (50%/50%).

Animation Origin

  1. Preview This illustration shows how the settings affect the movement of the Frame.

  2. Timeline
    By default the Timeline got two values. The start point at 0% and the end point at 100%. If you press “Add Row” at bottom the left you can add rows to the Timeline. A window will pop up to ask you for the time stamp in “%” of the additional action. After you clicked “ok” the additional row is added and you can define values for Movement, Rotation and/ or Scaling.

  3. Movement x/y
    By default the slide-in-left starts by -100%. This means at the left edge of the Document minus the frame’s size. So that the Frame starts it’s movement outside of the Document.

This example shows a slide-in effect from the left with an down and up movement. Therefore one row was added with a time stamps and a positioning values for the y coordinates. So the y position starts at 0%, moves to 10% and then back to 0%. To create a natural movement, the values between those you defined are automatically interpolated.

Down And Up Movement

As a result the circle is not just sliding from the left to the right but also moving down and up.

Animation Origin

  1. Rotation x/y/z
    By default the rotation is set to 360 degrees at the z-coordinate. So that the Frame is rotation around it’s center.

  2. Scaling x/y
    By default the scaling is not active. The x- and y-coordinate starts and ends with 100%.

Intensity
Define the Intensity of the move. If you set it to zero the Frame will not move at all. If you set it to 100 the Frame will perform the full movement.

Easing
Here you can choose from different Easing Functions.

Easing lends a natural, organic movement to motion. A linear animation will move mechanically without slowing down or speeding up. As this kind of consistency in speed doesn’t occur in nature, we perceive the movement as unnatural. That’s why many different Easing Functions are available. You will find an overview of the different functions at: https://easings.net/

In/Out You can choose from a slide-in, slide-out and slide-in-out.

Slide Settings

Fade
Turn on and off the Fade of the opacity of the Frame.

Slide from
Select how the frame should move.

Slide Options

Emphasis Settings

Emphasis Window

x1 x2 x3 x4 Define how often this effect should be executed.

Emphasis Effect

If you press this button you can choose from the different Emphasis Effects available.

Emphasis Effect Selection

Timeline Layer Context Menu

If you click on the small triangle of a Timeline Layer it’s Context Menu will open.

Timeline Layer Context Menu

Rename Timeline-Layer
To change the name of the selected Layer.

Add to Prev/Next Chain
For slide-shows you can create a chain of several Timeline Layers. It enables the Buyer to stop the Animation to skip through the different Timeline Layers of this chain manually.

Therefore you have to add skip buttons to your Animation. Read here how this works.

Slideshow

Play on Hover
For Emphasis Effects only! If this option is selected the Emphasis Effect will be executed by a mouse over independently from the Animation.

Add/ Remove Emphasis Effect
Add or delete the Emphasis Effect from the Timeline-Layer.

Copy/ Paste
Copy a Timeline-Layer to paste it onto a different Document’s Animation Table.

Move Up/ Move Down
To change the order of the Timeline-Layers by moving them up or down.

Remove Timeline-Layer
Remove the Timeline-Layer from the Animation Table.

Animation Timeline Action

These Actions are only available if you have turned on the option Use Frames as Button. So first select the Frame which you would like to use to go to the Buyer Side Settings to turn this option on.

Use Frame As Button

Now you can choose from the different Animation Timeline Action.

Animation Timeline Actions

previous
If the Buyer presses the button the Animation will stop and will be skipped to the previous Timeline Layer - if both *Timeline Layer are part of a Timeline Layer Chain.

Read Add to Prev/Next Chain here to learn how to add a Timeline Layer to a chain.

next
If the Buyer presses the button the Animation will stop and will be skipped to the next Timeline Layer - if both *Timeline Layer are part of a Timeline Layer Chain.

Read Add to Prev/Next Chain here to learn how to add a Timeline Layer to a chain.

start
If the Buyer presses the button the Animation will start from the beginning.

title
After you have selected this option you can choose one Timeline Layer to define it as the Title. If the Buyer presses the button the Animation will stop to skip to this Timeline Layer.

link
After you have selected this option you can type in a URL. If the Buyer presses the button a new browser window will open with this URL.