Flashtalking Tumult Hype Build Guide

  • Tumult Hype - June 2, 2016

Here is a quick guide to getting started building a Flashtalking Video Ad in Tumult Hype.


The below MPU was built using Tumult Hype and published through Flashtalking:

Open a new document in hype, name it and save it, next you need to create a working folder so you can add a manifest.js file to the build. This manifest file gives Flashtalking information about the creative, such as height, width, filename etc.

In the same folder as you new HTML file add a new file call manifest.js and include the following code to that file:

FT.manifest({
	"filename": "index.html",
	"width":300,
	"height":250,
	"clickTagCount": 1,
	"hideBrowsers": ["ie8"]
});

Now you edit this files by making sure that the "filename" is the same as you main HTML file and change the dimensions to fit you creative.

Back to Hype, in the first scene you will need to add some javascript code to "On Scene Load" this will run a check to see if the Flashtalking API has loaded. From your properties menu click on the "Scene" tab then click the + sign next to "On Scene Load", from the "Action" dropdown list select ''Run Javascript"  and next to "Function" select "New Function"

A new script window should appear, rename the function in this script from "untitledFunction" to "setup_FT_api" and copy and paste the below code into the function:


	// Dynamically Load Flashtalking API
	function loadExScript(url, callback){
		var script = document.createElement("script")
		script.type = "text/javascript";

		if (script.readyState){ //IE
			script.onreadystatechange = function(){
				if (script.readyState == "loaded" || script.readyState == "complete"){
					script.onreadystatechange = null;
					callback();
				}
			};
		} else { //Others
			script.onload = function(){
				callback();
			};
		}
		script.src = url;
		document.getElementsByTagName("head")[0].appendChild(script);
	}	
	
	function checkAPIloaded(){
		if(typeof FT === "undefined") {
			console.log("myFT loading..."+myFT);
			setTimeout(checkAPIloaded, 100);
		} else {
			myFT = new FT;
			// you must include the the below api v2.10 directly into the bottom of your .html body tag.
			//<script src="https://cdn.flashtalking.com/frameworks/js/api/2/10/html5API.js" type="text/javascript"></script>
			// FT object has been instantiated, confirm that api has loaded and start your ad
			if(myFT.hasLoaded) {
				console.log("myFT: "+myFT);					} else {
				myFT.addEventListener("ready", function(){
					console.log("myFT ready..."+myFT);
				});
			
			}
		}
	}
	

Your "On Scene Load" dialog should then look something like this:

On Scene Load

You will now need to create a symbol on the timeline which includes the animation and a Rectangle which sits above the animation symbol which will be used for the clickTag. On this clickTag rectangle make it transparent and stretch it the cover the entire size if the ad. While it is still slected click on the Actions tab and click the + sign next to "On Mouse Click" and from the "Action" dropdown list select ''Run Javascript"  and next to "Function" select "New Function". Rename the function trigger_clickTag and add the following code:

myFT.clickTag(1);

So you shoud end up with something like this:

On Scene Load

Finaly once your animation has been created you will need to publish your ad. Go to "File - Advanced Export" and make sure you output looks something like this:

On Scene Load

Notice that the "Use external runtime URL:" has been ticked, in here we can paste the HYPE runtime that is hosted on the Flashtalking CMS.

Click "Export Slice" then open up your index.html file to edit it, then just above the closing </body> tag paste the following code that adds the connection to the Flashtaking API:

<script src="https://cdn.flashtalking.com/frameworks/js/api/2/10/html5API.js" type="text/javascript"></script> 

Save the HTML file and make sure that you manifest.js file is in the same folder and thats it. zip up the contents of the folder and upload the file to you Flashtalking account.

To see how this is already pre-build, please download the above example from the link below:

 

Download Files

Comments