Display animation made with MotionComposer, a paid product from Aquafadas

Description

The MotionComposer Macro allows integrating and displaying animation produced by MotionComposer®, a product from Aquafadas. MotionComposer® bridges the gap between enthusiast and professional web designer, giving everyone the ability to create their own HTML5 or Flash® animations easily (see MotionComposer Web Site for details).

This macro create the HTML structure required (without iFrame) to display an animation from a ZIP file attached to a document and containing the content of a local publication produced by MotionComposer. Additionally, the optional macro content can be used as a placeholder for the animation. It will be displayed until the animation start, or if the animation cannot be started for any reason (including disabled Javascript). The animation only gets started if the enclosing element is large enough to display the animation to allow responsive design alternative.

Attaching a MotionComposer® animation

To display a MotionComposer® animation, you need it in a ZIP file and attached  to any accessible document. The ZIP Explorer Plugin is also required to access the content of that file.

The ZIP file needs only to contain the following at its root:

• mz.swf (optional for HTML5 only animation)
• mzDoc.js (optional for Flash only animation)
• assets folder (optional for Flash only animation)

All these files could be generated by a Local publication of your animation from MotionComposer®. Other file generated are useless. (Note that the MotionComposerMacro document has an attached ZIP file containing the content of the mzMini folder.)

You will also need some information contained in the generated mzFrame.html file. In that file, you will find a ligne similar to:

var player = mz.loadAndStartAnim( "MC1234567890123456" , 123456789012 , options );

The number following MC is required for the animationid argument. This number stay the same for all modifications of the same animation in MotionComposer®.
You will also need the document size that you have set for that animation into the document properties pane in MotionComposer®.

Macro Parameters

animationref

The reference of a ZIP attachment containing a packed MotionComposer animation. The package should only contains at its root, the mz.swf, mzDoc.js and the assets folder.

animationts

This is the second argument of the call to loadAndStartAnim. You may found that identifier in the mzFrame.html file.

width

Width of the animation. This should be the width defined for the animation document in MotionComposer.

height

Height of the animation. This should be the height defined for the animation document in MotionComposer.

format

The default value is ['flash','html5']. You may want to change it to ['html5', 'flash'] if you want WebKit browser to use HTML5 even if flash is available. You may also use ['html5'] or ['flash'] alone for animation only available in a single format.

classname

If specified, this argument is set as the class attribute of the container that will contains the animation. This could be use to easily add a background to the animation, while not adding it to the placeholder content.

Macro Content

A placeholder used while the animation is being loaded. If the animation provide a loader, this content is visible behind that loader. The content is removed when the animation start. 

IMPORTANT ! The animation will only be loaded and started if the parent node containing the animation is large enough to display it. The check is done during page load, so ensure that the width of the parent node is known before rendering by properly setting a width through a CSS rule.

Some samples

Animation with an image placeholder, in flash and html5

{{motioncomposer animationref="[email protected]" animationid="1234567890123456" animationts="123456789012" width="800" height="400"}}
[[image:[email protected]]]
{{/motioncomposer}}

Animation without a placeholder, in flash and html5, but priority to html5

{{motioncomposer animationref="MyAnimation.zip" animationid="1234567890123456" animationts="123456789012" width="800" height="400" format="['html5','flash']"}}

Prerequisites & Installation Instructions

We recommend using the Extension Manager to install this extension (Make sure that the text "Installable with the Extension Manager" is displayed at the top right location on this page to know if this extension can be installed with the Extension Manager). Note that installing Extensions when being offline is currently not supported and you'd need to use some complex manual method.

You can also use the following manual method, which is useful if this extension cannot be installed with the Extension Manager or if you're using an old version of XWiki that doesn't have the Extension Manager:

1. Log in the wiki with a user having Administration rights
2. Go to the Administration page and select the Import category
3. Follow the on-screen instructions to upload the downloaded XAR
4. Click on the uploaded XAR and follow the instructions
5. You'll also need to install all dependent Extensions that are not already installed in your wiki

Import the Macros.MotionComposerMacro document from the downloaded XAR. You may rename the document if you want.

Release Notes

v1.1

After discussion with Aquafadas, it appears that the animationts parameter could be cleverly removed to simplify publication of updated animation.