PRODUCT
Follow

Prerequisite

Before proceeding please make sure that you completed all of the steps marked in this guide in order to be able to work with our API within the Animate cc. - Animate CC | Setting Up a Project

Structuring your config.js file

Base formatting for any config.js file used for dynamic canvas ads looks like the below, with svData array being comprised of dynamic item objects:

define({
  "SV": {
    "svData": [
	//your array of smart item objects
    ]
  }
});

There are 4 types of objects we can use but since this is canvas environment, only 3 are really useful, we are not dealing with DOM, so we can leave out "adkit-html".

String:

You just need to set the "svType" to "String", and then choose a "svKey" you will use to reference "value". Once the ad is setup on the platform, this can be changed for each version, however when reviewing locally, seeing that the ad is pulling in the value from config.js is proof of a working implementation.

{
      "svKey": "copyText",
      "svType": "String",
       "value": "Copy text"
}

Image:

Make the "svType":"Image", choose a  "svKey" to reference it in the setDynImg method. Once the ad is setup on the platform, this can be changed for each version , however when reviewing locally, seeing that the ad is pulling in the value from config.js is proof of a working implementation.

{
"svKey": "imageOne",
"svType": "Image",
"value": "img1.jpg"
}

Video & Poster:

Make the "svType":"Image", choose a  "svKey", set the poster up as a  separate "svType":"Image", reference Video and Poster "svKey" in setDynVid method here. Once the ad is setup on the platform, this can be changed for each version, however when reviewing locally, seeing that the ad is pulling in the value from config.js is proof of a working implementation.

{
"svKey": "videoFile",
"svType": "Video",
"value": "video1.mp4"
},
{
"svKey": "videoPoster",
"svType": "Image",
"value": "poster.jpg"
}

Example of config.js file with all 3 different applicable svType variations:

define({
  "SV": {
    "svData": [
		{
            		"svKey": "copyText",
            		"svType": "String",
            		"value": "Copy text"
        	},
		{
			"svKey": "imageOne",
			"svType": "Image",
			"value": "img1.jpg"
		},
		{
            		"svKey": "videoFile",
            		"svType": "Video",
			"value": "video1.mp4"
        	},
		{
			"svKey": "videoPoster",
			"svType": "Image",
			"value": "poster.jpg"
		}
    ]
  }
});

Make sure to copy all your initial assets as well as the created config.js file to the publish folder of your project.

Creating Text instances with Dynamic String

1. Create a container movie clip we will later use to  position and animate text:

Start with a shape for our text box and give it any color, but make sure that the alpha channel set to 0, and without borders.

Convert the shape to a Movie Clip Symbol, you can do this by hitting "F8" and picking "Movie Clip" as a Type.

2. Name the container movie clip instance:

Select the movie clip instance on the stage and give it an instance name, in this case we will name it "textBox", but it can be anything.

3. Write code to append dynamic text to container:

Now that we have the instance name we can reference the movie clip instance, and append the actual text inside it.
We are going to use createjs to create a new text instance, passing in 3 arguments as options.

new createjs.Text(adkit.getSVData("copyText"), "18px Tahoma", "#000")

First argument is actual text string, second is size and text font and third is text color.
To get the value for the first argument in this case we are using:

adkit.getSVData("copyText")

to get value of the copy text sv item we defined in config.js, E.g:

{
      "svKey": "copyText",
      "svType": "String",
       "value": "Copy text"
}

Then appending it to the container we created in the previous step:

var copyText = new createjs.Text(adkit.getSVData("copyText"), "18px Tahoma", "#000");
this.textBox.addChild(copyText);

Please make sure that you are not referencing the container in the script on the keyframe before the container is actually present on the stage. As you can see on the screenshot above, first keyframe of both "script" and "Layer_1" layers are aligned.

Creating Image instances with Dynamic Sources

1. Create a Movie Clip container

It's always good to match the size of the image with the size of a container.

Normally you would start with a transparent shape of the designated dimensions.

Then hit "F8" to convert it to a movie clip.

2. Name the instance so that you can reference it in the code on the timeline

3. Select the frame where your image should first appear and paste the code snippet

We need a bit of logic to get the path to the image based on whether it's a work-space or additional asset. It's highly recommended to use this function definition as it is, passing in the svName string and container instance as arguments to the function invocation :

function setDynImg(svName, containerMC){
var dynImg = new Image();
if(EB.getAssetUrl(adkit.getSVData(svName)).indexOf("http")==0){
dynImg.src = EB.getAssetUrl(adkit.getSVData(svName));
}else{
dynImg.src = EB.getAssetUrl(adkit.getSVData(svName), adkit.getSVData(svName));
}
var bitmap = new createjs.Bitmap(dynImg);
containerMC.addChild(bitmap);
}

setDynImg("imageOne", this.imageBox);

referenced dynamic item from config.js:

{
"svKey": "imageOne",
"svType": "Image",
"value": "img1.jpg"
}

All you need to do here is adjust function invocation arguments to reflect your config.js dynamic item's "svKey" and your movie clip container instance object: 

setDynImg("imageOne", this.imageBox);

Using Dynamic Videos with Animate CC video component

Videos in Animate CC are handled by a component that basically overlays your canvas stage with a video player, controlled by in-stage code. 

To make those videos dynamic, please follow the process below:

1. Go to "Window > Components"

2. Drag and drop the video component on to the stage

3. Name your video component instance (don't set video or poster source).

Make sure not to set source and poster image in order not to have to traverse existing values.

4. Paste and adjust the code snippet.

Paste the code snippet and adjust function invocation arguments to reflect Video and Poster dynamic items "svKeys" as well as your video component instance object, on to the first frame of your stage.

Referenced Dynamic Video and Image for poster from config.js:

{
"svKey": "videoFile",
"svType": "Video",
"value": "video1.mp4"
},
{
"svKey": "videoPoster",
"svType": "Image",
"value": "poster.jpg"
}

Actual function definition and function invocation example below.

function setDynVid(svName, videoInstance, posterSvName){
	if(EB.getAssetUrl(adkit.getSVData(svName)).indexOf("http")==0){
	videoInstance.on("added", function() {
	videoInstance._element._$this["0"].src = adkit.getSVData(svName);
		if(posterSvName){
			if(EB.getAssetUrl(adkit.getSVData(svName)).indexOf("http")==0){
			videoInstance._element._$this["0"].poster = EB.getAssetUrl(adkit.getSVData(svName)); 
			}else{
			videoInstance._element._$this["0"].poster = EB.getAssetUrl(adkit.getSVData(svName), adkit.getSVData(svName));
			}
		}
	}, this, true);
	}else{
	videoInstance.on("added", function() {
	videoInstance._element._$this["0"].src = EB.getAssetUrl(adkit.getSVData(svName), adkit.getSVData(svName));
		if(posterSvName){
			if(EB.getAssetUrl(adkit.getSVData(svName)).indexOf("http")==0){
			videoInstance._element._$this["0"].poster = EB.getAssetUrl(adkit.getSVData(svName)); 
			}else{
			videoInstance._element._$this["0"].poster = EB.getAssetUrl(adkit.getSVData(svName), adkit.getSVData(svName));
			}
		}
	}, this, true);
	}
}

setDynVid("videoFile", this.movieClip_1, "videoPoster")

Please use the function definition as it is, and adjust the function invocation as explained below.

setDynVid("videoFile", this.movieClip_1, "videoPoster");

First argument is Dynamic Video item's "svName", second is the actual video component instance, and third argument is Dynamic Image item's "svName", used for poster.

Please see this section for information on tracking your videos - Animate CC | Tracking Videos

Additional resources

Index and Glossary:

Using Sizmek API functionalities:

For information on building Sizmek HTML5 base formats please visit:

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments