Adobe Animate CC

IMPORTANT: If you want to create a Rich Media ad, it is always recommended to start working from one of our templates. Our templates are developed and maintained by a dedicated support team and contain lots of bug fixes.

The standard way to build Weborama compliant ads is to use our templates as starting point for your creations. Although this is the common way, sometimes we get the question, how can I use Animate CC for my creation if it is not a template? And, does this affect the standard way of building ads? The answer is, yes, Animate CC material can be integrated in our platform.

Existing Adobe Animate CC creations can be integrated in our platform. There are three methods to do this:

1. Modify the Adobe Animate CC HTML file in order to make it Weborama compliant.
2. Move the Adobe Animate CC content into an existing Weborama template.
3. Create holders in Weborama standard HTML templates to load Adobe Animate CC content.

Which one to choose?

It depends on the type of format you are working on. If it’s for a regular in-page ad, the decision is easy: option A. If your creation will run on a more complex kind of format/set, for example a floor-ad or a home-page takeover, you would be beter off using option B or C.

Preparing your ad in Adobe Animate CC

There are some preparations needed in order to run on our test and live platform.

First, all loaded assets need to be local to the HTML file without using subfolders. This means that all images, sounds, JavaScript files, CSS files, and all other loaded files, need to be placed on the same level as your HTML. To change this follow these steps:

• Change your “Publish Settings” so that all assets are on the same level as your project/HTML. Simply use “./” for the 3 paths, as shown here:

Note: Another option is to change the paths directly in the JavaScript after publishing. This could be necesary if the source files are not available. It implies editing the library options object within the manifest property and needs to be done for all loaded resources. In the following example you would only need to remove “images/” from the used image:

lib.properties = {
    width: 300,
    height: 250,
    fps: 24,
    color: "#FFFFFF",
    webfonts: {},
    manifest: [
        {src:"images/logo.png", id:"logo"}
    ]
};

• Publish again and you will see all assets are duplicated next to your HTML file.

• If you choose option B or C, we recommend to change the create-js library path for our (latest) copy: //media.adrcdn.com/scripts/external/createjs/createjs-2015.11.26.min.js (more available here)

Now your Adobe Animate material is ready for all conversion options. As mentioned before, if you are making a Rich Media kind of format/set, for example a floor-ad or a home-page takeover, you would be beter off using option B or C. If it’s for a regular in-page ad / banner, we recommend option A.

So let’s see how the options work.

Option A: Modify the Adobe Animate CC HTML

This option is easy and recommended for simple in-page ads. It implies changing the "Template for Publishing HTML" in the Publish Settings.

Follow these steps:

1. Download our publishing template: Adobe Animate CC Weborama Banner
2. Open your Publish Settings (File > Publish Settings) and go to the second tab (Advanced).
3. Click on Import New... and select the HTML file you just downloaded.

What does this new publishing setting do? It automatically changes 3 things:

1. Our meta data, indicating the type and size of the ad, is added.
2. Our "Screenad" library is included with a script tag.
3. Our click command is added to the whole canvas/stage. If you don't want this, because of extra clicks for example, set the canvasClick setting (in the HTML file) to false: var canvasClick = false;

 

Option B: Move Adobe Animate CC Content

This option implies not modifying the Adobe Animate CC material but moving it into one of our plain HTML templates.

Follow these steps to move/duplicate your creation into the template:

1. Copy and paste the create-js script line into the head of the template. We recommend to change the create-js library path for our (latest) copy: //media.adrcdn.com/scripts/external/createjs/createjs-2015.11.26.min.js (more available here).

2. Copy and paste the JavaScript functions into the head of the template. This includes the init function.

3. Call the init function from the start-up function in the template. This function may vary depending on the type of format. The most common ones are onShow and onStart.

4. Copy and paste the canvas tag into a content holder element of the template.

5. Use our screenad click command for the exit click. Syntax: screenad.click();. More information about this is available via our API. This command can be used directly in the Adobe Animate CC interface when building/coding your creation.

If everything went as planned, the template now has the library, the canvas tag and the necessary JavaScript to display your Adobe Animate content.

Option C: Use Loaders in HTML Template

This option is easy to implement but has limitations. In our plain HTML you can add an iframe tag in order to load a second HTML which is produced in Adobe Animate CC.

Remember to "prepare" your ad for these changes, as set out earlier in this guide.

Be careful with the properties of the iframe; use the right size and disable borders and scrollbars.

In order to use a screenad property or method, for example a click command, you need to add window.parent as a prefix so that the scope is correct. For example:

window.parent.screenad.click();

When uploading your files to the previewer, make sure the template HTML files are set as indicated in the spec sheets, and assign the Adobe Animate CC HTML files as Assets.

  

Questions, help?

If you have any questions or suggestions please let us know via support@weborama.nl, or submit a new request by using the menu at the top of this page.