A

Get the most of your digital life

M OT I O N CO M P O S E R
USER GUIDE

MIBI/Cap Omega, Rond Point Benjamin Franklin 34960 Montpellier France

w w w. a q u a f a d a s . c o m

System requirements

Introduc2on

Anima2on structure

Document

Pre loader

Components

Slides

States

Transi2ons

Eects

Ac2ons

Groups

Display List

Building a rst anima2on

Interface Overview

9
14

Main window

15

Main edi2on view

16

Preview

17

Slide list

18

Inspector

19

Presets panel

20

Transi2on list

21

Component list

23

Managing Images

25

Adding an image from an external source

25

Image library

26

Cropping an image

27

Using Eects

28

Adding an eect to a newly created component

28

Adding an eect manually

29

Applying a preset to the eect

29

Customizing an eect

30

Publishing

32

Actual publica2on

32

Inser2ng the publica2on in your website

32

Coding considera2ons

32

Flash and HTML5

33

HTML5 restric2ons

33

System requirements
Mac OS X 10.6.8 or above
1-GHz G4, G5, or Intel-based Mac
512 MB of RAM
Flash Player v9.0.45 or above
Internet connection required for registration and online publishing
.me account (optional)
MotionComposer is compatible with Snow Leopard and Lion

Introduc2on
MotionComposer is an authoring tool that produces animations for the web. Its two most
distinctive features are its graphical user interface and its publication system.
The interface is designed to be easy to use while allowing to create rich animations. It
uses the base structure of presentation editors (like Keynote or Powerpoint) but introduces
new concepts that make creating complex animations possible.

The publication system relies on two different parts:

1. the main part is the flash publication that relies on the flash player ubiquity to
display the animation in a large majority of web browsers.

2.The second part is the html5 for webkit publication that displays the animation
on iOS devices. It is important to notice that while the publication uses HTML5
features, it is tightly tied to the CSS3 implementation of webkit and will only be
visible on webkit based browsers like Safari or Chrome. That is why the flash
version is displayed in most situations.
You can find more information and video tutorials here:
http://www.aquafadas.com/en/motioncomposer/videos

Anima2on structure
In order to understand how MotionComposer actually works, it is important to understand
the structure of a MotionComposer animation and the few key concepts that are part of its
design.
Document
The document describes the basic information of the animation: its size, background, and
a time factor setting that allows you to speed up or slow down the animation.
All of this can be changed at any time, but you should always start by defining the
document size.
Documents are saved on disk as a package containing both the structure of
the animation and all the assets used in the document. The default
extension is .mcdoc.

Pre loader
A document can optionally define a pre loading spinner that will be displayed while the
animation assets are loading when the animation is inserted in a web page.
Components
A MotionComposer animation displays graphical components. Those components are
limited to a few simple types (more types of component will probably be added in future
versions), but each type of component features a large list of settings that can be changed
throughout the animation:
- Rectangle: displays a basic shape component. Settings include rounded corners, a
border and a background gradient.
- Image: displays any image inserted in the image library.
- Text: displays a basic text field. Fonts and styles are limited for technical reasons.
- Groups: groups can be created dynamically inside a slide and are used to animate a set
of components like a single one
Slides
An animation is divided into several slides (simple animations may contain only one slide)
that display different sets of components. For example, an animation could contain an
introduction slide that only displays the animation title, a main slide that displays several
images, and a conclusion slide that displays a The End label and a replay button.
You can optionally define a different background for each slide.
Slide transitions

Since each slide displays something different than the others, it is possible to specify a
simple animated transition between two slides on order to make the changes less abrupt.
The slide transitions are completely optional.
States
Each slide is subdivided into several states. A state can be seen as a keyframe of the
animation. A state has a certain duration and maintains a list of transitions that describe
what are the changes that make the animation go from one state to the other and how
they are animated.
Transitions
Transitions are automatically created by the editor whenever you make changes on a state
that is not the initial state of the slide.
A transition always contains the following information that describes what the transition
changes:
- the target component on which the transition is applied
- the property of the component that is changed
- the previous and new value of the property
Example: the rotation of a rectangle goes from 0 to 90.
Then, additional information describes how the transition is animated
- a delay and a duration. It is important to notice that those are not absolute values: they
are not defined in seconds but as a ratio of the state duration.
- a easing function
Example: the rotation starts at the half of the state (delay=0.5), lasts till the end
(duration=0.5) and is animated in an elastic way.
This applies to most of the numeric properties.
However, some properties that are not numeric values like the align property of a text can
not be animated. Their transitions can have a delay, but no duration or easing since the
change can only be instantaneous.
The source of an image or the font of a text can not be changed during the animation, and
can never be used in a transition.
Finally the visible property is a special one: it can behave like a non animated property, but
you can also choose to associate an effect to it and will then be able to give it a duration.
Effects
Effects can only be applied on the visible transitions of texts and images (no effects for
rectangle components). As a result, there are four types of effects possible: appear and
disappear for image or text.
All effects work on the same principle: the elements is first split into pieces: images are cut
in a grid and texts are divided into line, words, or glyphs.

The pieces are then animated in a specific order, that can be from right to left, left to right,
random, etc. For each piece, transitions on the x, y, rotation, scaleX , scaleY, opacity can
be created. This basic system allows to create a large range of fancy looking effects.
You will not necessarily need to edit all of this yourself since the application ships with a
list of predefined effects.
Actions
Actions allow you to introduce complex behaviors inside your animation.
They can be triggered in two different ways:
- when the user clicks on a component
- when a slide or a state starts or end
There are two main types of actions:
- actions that control the animation (play, pause, go to a specific slide or state)
- actions that interact with the browser (go to an url or execute some javascript)
For example, a common type of action would be to specify a pause action on the last state
of the animation to prevent it from looping back to the start (which is the default behavior).
Another common use case is to make an image open an url when the user clicks on it.
Groups
Groups can be created at any point during the animation. They replace a set of
components with a single one. Groups make it possible to move rotate and scale all the
components as a single one.
Once a group is created, its child components can not change until they are ungrouped.
Automatic transitions are created on the states where the group starts and ends.
Display List
Each slide contains a list of components. The order in the list is used to define the order in
which the components are displayed. The first component in the list is the one behind,
while the last one is displayed in front of all the others.
This is ok for most situations: the display order remains the same for all the states of the
slide, so one list is enough. However a different display list can be defined in any state of
the slide for different reasons:
- a group is starting. In that case, the grouped components disappear and are replaced by
the group. A new display list is automatically created to handle this
- a groups is ending. Same thing but the group disappears and components are put back
in the list
- the user specifically asked for a different display list. This can be used to make one
component appear behind another component and later on make it appear in front.

Building a rst anima2on

Now that we have seen what the basic concepts are, let us jump right in and see how we
can create a first simple animation.
1) Start by opening MotionComposer and select New Document

2) Set up the document in the inspector. Change its width to 300 px, its height to 250 px,
give it a black background.

Notice how the main edition view and the state thumbnail in the slide list automatically
becomes black.
3) Add a rectangle component in your slide by clicking on the rectangle button in the
application tool bar.

A rectangle appears in the main edition window and the state thumbnail immediately
displays it too.
4) Drag and drop the rectangle out of the document area to the left.

We do not want the rectangle to be visible at the beginning of the animation and that will
put it outside of the visible area.

5) Add a new state by clicking on the + button next to the state thumbnail

A new state immediately appears in the slide list and is automatically selected:

6) Drag and drop the rectangle to the center of the document area.

Doing this will make the rectangle move to the center of the document. Notice that the x
value of the rectangle has changed in the inspector, and that a new transition has been
created in the transition list.
7) Add a new state

8) Set the rectangle opacity to 0 in the inspector.

This will make the rectangle transparent and a new transition will reflect that change in the
transition list.
9) Preview your document by clicking on the preview button below the main edition view.

You should see preview playing. The rectangle comes in from the left then fades away.
The animation will loop repeatedly.
Clicking on the preview HTML5 button in the application toolbar will show you the same
animation playing in Safari.

Interface Overview
After this rapid overview of the user interface, we will now give a more detailed explanation
of all its features.
h%p://www.aquafadas.eu/documenta6on/Mo6onComposer/quickstart_en.pdf

MotionComposer
1

Drag & Drop your images

on your document from the
Media Manager

Interface Overview

ToolBar

The Toolbar allows you

to add text, images and
forms to your document.
You can preview your
document in HTML5 with
Safari, publish it, access
your image library and the
Media Manager.

Working area

This area is the space

where you create your
scenes.

Play Bar

Settings

The settings area provides

several tabs.

The Play button allows

you to preview your document, slide or state during
the creation.

Document: adjust size, background and opacity of your

workspace.
The slide: set up the style of
selected slides.

Slide transitions: adjust the

selected slide transition.
State: adjust the selected state.

Slides area

The slides area allows you

to animate your content.
You can add, delete, duplicate, and move slides, and
add states and transitions
to each slide in order to
build your animation.

States
Each animation begins with an initial state.
Add states to your slides in order to create
different steps in the animation. Play your
animation and preview the result instantly!

List of transitions

When you move an object into a new state

of a slide, it will create a transition (horizontal axis,vertical axis, rotation, change of
opacity, etc.). You can adjust the transition
of the different states.

Element

This tab shows a list of each element in a

selected state. The different elements are:
image, text, objects, and group of objects.

Componant: adjust element

size, colors, and opacity.
Effects: add different effects to
text and/or images.
Spinner: add an icon in order
to show the document download.

Main window
Here is a basic overview of the MotionComposer editor window.

The window toolbar contains 3 groups of buttons:

- the one on the left allows you to add components to the current slide. Only rectangles,
texts and images can be added this way, groups can only be created via the edit file menu
or by using the command+G shortcut.
- the second one contains the HTML5 preview button (it will always open Safari since the
HTML5 player for compatibility). The second button starts the publication.
- the toggle button in the right group commands the right panel, while the other one
controls the image manager display.
The preview control is used to launch the document preview inside the main edition view.
The right panel of the window is divided in several parts.
Depending on the top right toggle button, it will either display the image library or the
edition panel. The edition panel itself is divided into three main collapsible parts: the
inspector, the transitions list and the components list.

Main edition view

The main edition view always displays the current state of the document.
Zoom can be selected at the bottom left, you also have the possibility to change it using
the command+plus or command+minus shortcuts.
You can scroll using the scrollbars or by holding the space bar and dragging the preview
with the mouse.
Rules and guides can be displayed or hidden in the application preferences.
You can move, resize or rotate component in this view, which does the exact same
modifications on the selection as changing the values in the component inspector.
Resizing a component is done by dragging one of the handles of a selected component. A
few keys can be used:
- holding shift while resizing will maintain aspect ratio (this will do the opposite for groups
and images since those components maintain aspect ratio by default).
- holding alt while resizing will maintain the center position, resizing the component in a
symmetric way.
Rotating a component can be done by keeping the command key down and moving one of
the component handles.
It is also possible to change the rotation center of your component by dragging the center
target.
Additionally, you can edit the content of a text component by double clicking on it.

Preview

Whenever you click on preview start, the main edition window is replaced by the preview
of the document.
You can choose to start different types of preview.
- document preview is the exact preview of the document that shows what the flash
publication will look like. It is the only mode during which navigation actions are enabled
- slide preview only displays the current slide
- state preview is the most interesting one. It will only display the current state but it allows
you to access the right panel, allowing you to live preview the changes you do. That is
especially useful when setting up transitions and effects
- slide transition preview can be used to configure the current slide transition
- pre loader preview can be used to configure the pre loading spinner
The player control bar allows you to control the player (play, pause, go to). Depending on
the preview mode, some controls are disabled.
You can get out of the preview window by clicking anywhere in the black zone or by
clicking on stop in the player control bar.

Slide list

The slide list gives you an overview of the document structure. It is used to navigate
through the animation and the blue selected state is the current state whose content is
displayed in the main edition window.
The buttons on the left allow you to add, remove or move slides in the list. Keep in mind
that a document must always have at least one slide which is why a single slide can not be
removed.
The plus button on the current state allows you to insert a new empty state in the list. You
will use this button a lot when building an animation: place the components in the current
state, then click on next state, make some changes then click on next state, etc...
If you choose to remove a state, all its transitions will be removed which will impact the
animation on all the following states. Keep in mind that the initial state does not have
transitions and can not be removed.
The duration of each state can be modified by clicking on it and changing the value.
Finally, you can add or remove slide transitions in the list, in the exact same way as in the
slide transition tab of the inspector.

Inspector

The inspector allows you to modify the settings of everything inside your document. The
tab buttons defines what you are editing.
The slide, slide transition and state tabs content will depend on the currently selected state
in the slide list.
The component and effect tabs content will depend on the currently selected components
in the main edition view. If nothing is selected, nothing will be displayed in those tabs.
The main part of the inspector will contain one or more settings sections depending on the
type of object being edited. All the changes are immediate.
The component tab is the most used when building an animation. It displays the current
properties of the selected component for the current state.
Every changes you make here are immediately visible in the main edition view, and, if the
current state is not an initial state, automatically create or update a transition in the
transition view.
The preset button on the right is used to open the presets panel.

Presets panel

The presets window allows you to manage and apply presets of the current type of object
displayed in the inspector.
The application presets are shipped with the application while the user presets will be
empty.when you first start the application
The presets simply allow you to save a set of properties for a given type of object in order
to apply them later on, in the current document or another one.
They are mainly used to manage the effects settings that can be quite complex. However if
you find yourself always defining the same type of complex gradients, presets will allow
you to save their settings and apply them at will.
Applying a preset is exactly the same as doing several modifications in the inspector.
Which means that if you apply a preset on a component when you are not on an initial
state, transitions will be created.
Presets are ordered in a tree that can be edited using drag and drop (if the user presets
are selected).
Note that double-clicking on a preset will apply it without closing the panel, while the apply
button will.

Transition list

While you could perfectly build an animation without editing any, modifying transitions
allows you to add life and rhythm. Please note that when fine tuning the timing and easing
of the transitions, it is strongly recommended to start the state preview mode, it makes
things easier.
The transition list is composed of two main parts.
The bottom part is the list itself and contain one transition block per transition available for
the current state of the currently selected components.
For each transition all the basic information are displayed. Some editing option are
available on rollover when that is possible:
- the timing slider allows you to manage the transitions timing on a really basic timeline.
The first thumb defines the point at which the transition starts (the delay), the second one
defines when it ends. The gap between the two thumbs defines the duration, and putting
the two thumbs in the same spot will make the transition seem instantaneous.The exact
durations are relative to the state duration.
- the next value which corresponds to the value at the end of the state can be adjusted
here, it is the exact same thing as doing it in the inspector. Note that if the start and end
values are the same, MotionComposer will not remove it but will flag it as useless.
- the easing button opens the easing picker and allows you to define the type of easing
that will be applied on the transition.

- the remove button will delete the transition and make the component rollback to its
previous value. It can be helpful for removing transitions that where added after a
mistake.
- the initialize button is harder to understand but can be of tremendous help. It takes the
new value of the transition and applies it on the initial state of the animation, removing all
other similar transitions in the progress. This is really helpful when you realize you
wanted the changes you made on the second state be the actual starting values of the
component.
- the rotation picker is only displayed for the rotation property and allows you to define in
which direction the rotation should be done and how many turns it should do.
- the effect picker is only used for visible transitions, allowing to set an appearing or
disappearing effect. It can also be done in the effect tab of the inspector.
The second part of the transition panel, at the top is hidden by default.
It allows two specific actions:
- sort and filter the content of the transition view
- modify all the displayed transitions at once
For example, you can use it to remove all the transitions of a given component, or set the
easing of all the x and y of a bunch of components, etc.
It may not seem useful at first, but it can be really convenient when you are used to it.

Component list

This panel contains the list of the components available in the current state.
Its first use is to make the selection of components easier. It also allows you to lock or hide
components in the main edition view. For example you could lock an image intended to be
used as a background image in the slide, this way, you wont move it by error while editing
the slide.
Then, the most important feature to understand is the checkbox at the top left of the view.
If the current state is selected, the checkbox wont be visible. You are free to reorder the
components in the list, and all the changes affect the following states.
If you select any other state, the checkbox will be unchecked, meaning that there is no
specific display list for the current state. At this point the list is locked and cant be
reordered.
If you check the checkbox, a new display list will be created on the current state. The list in
then unlocked and all the changes will affect the following states.
At first, you shouldnt need to worry about the display lists, always reordering components
in the initial state should be enough. However, understanding this mechanism will allow
you to build more complex animations.
Here is a simple example of how this feature can be used.

This slide is only composed of three states and two rectangle components.
On the initial state, the purple rectangle is hidden behind the bigger orange rectangle. On
the second state, it reveals itself by going to the right. On the third state, the display list is
unlocked and the order has been changed: the purple rectangle can now appear in front of
the orange one.

Managing Images
In most situations, rectangles and texts will not be enough and you will want to add images
to your document.
Adding an image from an external source
Adding new images to a document can be done with a simple drag and drop. You can take
any picture in your Finder or on your desktop and drop it in the main edition view and the
image will appear in your document.
MotionComposer also gives you access to an image manager that can give you easier
access to all your images in your computer. The image manager is opened by clicking on
the top right button of the toolbar.

Image library
Whenever you add an image by drag and dropping from an external source (be it the
image manager or the Finder), the image is imported inside the document image library.
The image library keeps track of all the images that were imported inside the document. It
tells you how many times each image is used. For example, if an image count is 0, the
image is available but never used in any slide, and can be removed without changing the
animation.
An important thing to understand is that if you want an image to be displayed several times
inside a document, you should only import it once in the library, then drag and drop it as
many times as you want from the library to the document. If you do not do it this way and
drag and drop it several times from the image manager , MotionComposer will import it as
many times in the document. This will end up bloating the publication size and will make
the document much harder to manage when you want to replace the image.
The media library also allows you to crop or replace one of the images in the library. Doing
it will affect all the image components inside the document. This is especially useful when
you want to edit one of the document templates provided with the software: you can
replace all the assets inside the library without having to touch the actual image
components.
Note that you can also replace the image with another image by drag and dropping an
image from an external source into the image thumbnail in the media library.

Cropping an image

MotionComposer allows you to crop resize and rotate any image present in the image
library. This will have the same effect as replacing the image and will affect all the image
components in the document.

Using Eects
An important feature of the application is the possibility to add effects on images and texts.
Effects are always associated to a visible transition on an image or a text. It means that an
effect will always make one of those appear or disappear. You have several ways to
actually add an effect inside a document.
Adding an effect to a newly created component
Whenever you add an image or a text in the document, a popup will appear, allowing you
to apply an appearing effect on it.

On the initial state, the popup will ask you if you want the image to appear with an effect
on the next state. If you say yes, this will automatically set the visible property of your
component to false in the initial state, then go to the second state, create a transition that
sets the visible property to true and assign a default effect to it.

On any other state, the situation is a little more complicated. The first thing to understand
is that while the popup is displayed, all the changes you make on the component will affect
its initial state, not the current one. This allows you to set up the initial values of a just
added component without having to go back to the initial state manually.
Then, the popup allows you to hide the component on the initial state and only make the
component appear on the current state. This is really useful because most of the time,
when you add a component on a non initial state, it usually means that you dont want the
component to be visible before.
Finally, if you chose to hide the component on previous states, you can tell
MotionComposer to apply an effect on the created transitions.
Those popups can be somewhat intimidating at first, but you can just dismiss them by
clicking on cancel or anywhere in the main edition view. However, you will probably find
them to be quite useful in the long run.

Adding an effect manually

If you want to apply a disappearing effect on a component or want to give it an appearing
effect after dismissing the popup, you always have the possibility to do it manually.
The only thing you have to do is make the visible property of the component change at
some point in the animation, then associate an effect to the created transition.

You can also choose to let MotionComposer create the transition for you by adding the
effect using the effect tab of the inspector.

In the end it will always end up to a visible transition being created in the transition list.
Applying a preset to the effect
After adding an effect, you will most likely want to change its animation. The simpler way
to do that is to use one of the built-in presets.
Here is what you should do after applying an effect to a component:
- start the state live preview mode

- open the effect tab in the inspector (MotionComposer usually does it automatically for
you), and click on the presets button

- double click on any item in the list and see how it affects the live preview of your state.
IMPORTANT: since effects are associated to a transition, their timing is handled in the
exact same way: their delay and duration can be adjusted in the transition view, but their
actual duration will always depend on the state duration. So you might need to adjust the
current state duration so that the effects look nice (1 or 2 second is a good value for most
presets.

Customizing an effect
After creating an effect and going through the preset, you may want to customize the way
they look or even create a completely new effect from scratch.
All the following can be a little tricky to understand, but changing the values while keeping
the live state preview should be enough to get you started.

First you can define how the component is split up. A text component can be cut into
paragraphs, lines, words or glyphs, while an image component will always be cut into a
grid.
For each element created this way you will define what will be its origin point (default is
(0.5,0.5) which is the element center.
The direction setting defines the order in which the elements will be animated, it can start
from the left the go to the right, or the other way around, be random, etc...
The timing property defines the duration and delay for the animation of each element. For
each element, the animation duration will be: d = timing * effect duration .
If you set it to 0, each element will animate over the total duration of the effect, they will all
start and end at the same time. If you set it to 1, all the animation will be instantaneous.
Here is a simple timeline of a 0.5 timing effect on a text This is some text split on words,
animating from left to right.

Each elements will animate over half the duration of the effect and the delay between each
word animation is the same (1/6 of the total duration).

Finally, the easing parameter allows to change the way the delay between each element
animation is computed.
Here is the same example with a circular ease out effect:

The dura6ons are the same but the delays are not the same anymore.

Once the 6ming of each elements are dened, you can dene how each element is animated.
This part is based on the same concepts as the transi'ons. For each of the following proper6es: x,
y, scale X, scale Y, rota6on, opacity, you can dene a transi6on.
One important thing to no6ce is which of the previous or next value you are edi6ng.
If the eect is an appearing eect, you will dene the star6ng values of each property, the ending
values being the text or image displayed normally. If the eect is a disppearing eect, it will be the
opposite.
Note that in addi6on to dening the ending (or star6ng) values, you can dene a random range
that will aect it.

Publishing
Publication is the last step of the creation process, you can start it by clicking on the
publication button in the application toolbar.
Actual publication

The first step consist in choosing between local and remote publication. With both choices,
the exact same files will be produced. Local publication is really straightforward and lets
you choose a folder where all the publication files will be put while the remote publication
will first ask you to set up a FTP server before choosing a folder in the list.
Choosing one or the other will only depend on your workflow, doing a local publication and
uploading it manually with an FTP client will have the same result as doing a remote
publication from within MotionComposer.
Inserting the publication in your website
Once the banner is published, MotionComposer will open the mz.html file in the publication
folder. This page will show you the running animation and propose you to copy some html
code. Once the publication folder has been uploaded, inserting the banner in your page is
as simple as copying this HTML code and pasting it in your page.
Please note that the HTML code generated depends on the location of the mz.html file
when you open it, the code will not work if the folder is moved or renamed afterwards.
Which is why, after a local publication, you should only open mz.html to copy the code
AFTER it has been uploaded.
Coding considerations
MotionComposer is iframe based. When you insert your banner in your page, you should
actually insert an iframe pointing to the mzFrame.html file located in the publication folder.

The publication was designed this way in order to avoid as many interferences (JavaScript
and CSS) with the host page as possible.
If you know your way around HTML and JavaScript, you can also choose to copy only the
necessary code from mzFrame.html and insert it in your page but that goes beyond the
scope of this document.
Flash and HTML5
The publication code includes some JavaScript that uses the swfObject library to detect if
the Flash player is available. If it is available, then the flash version of the animation will be
displayed. If it is not, MotionComposer will check whether the current browser is webkit
based (Safari or Chrome) and display the HTML5 version instead.
IMPORTANT: the HTML5 animation produced by MotionComposer will only work in webkit
browsers. It was primarily designed to compensate for the lack of Flash Player on the iOS
devices, and relies heavily on the webkit CSS3 implementation. Flash is preferred in all
other situations as it offers the maximum of compatibility.
Depending on the evolutions of the web standards and their implementation of the
browser, this could be changed in future versions of the software.
HTML5 restrictions
In order to avoid performance and compatibility issues some of the features available in
the flash publication are not available in the HTML5 version.
This mainly concerns the filters (shadow, glow and blur) that can be put on the
components.