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 two methods to do this:

1. Move the Adobe Animate CC content into an existing Weborama template.
2. Create holders in Weborama standard HTML templates to load Adobe Animate CC content.

Which one to choose?

It depends on personal preference. Both option A and B are suitable for all our HTML templates.

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.

And lastly after publishing you need to open your HTML file and change the URL for the createjs.min.js file to the same file on our CDN. This has to be done because some publishers do not accept URL's from the code.createjs.com domain.

Change this.

<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>

To this.

<script src="//media.adrcdn.com/scripts/external/createjs/1.0.0/createjs.min.js"></script>

Now your Adobe Animate material is ready for both conversion options. 

So let’s see how the options work.

Option A: 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. Please download the relevant CreateJS file and upload this with your creation into the previewer. You can also use the create-js library path 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 B: 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.