HTML Templates for HTML5

Hey, in this video we're going to talk about HTML templates. What we've been doing in this one is we've been publishing stuff from Animate, we've hit 'File', 'Publish', and it coughs up some files, some HTMLs, some Javascripts, some images. Then we would be opening up this HTML and doing some amends to it. Bow down to the necessities of my ad network, and what we've done so far is we've added this 'Create JS', we've changed the link to their Google specific one, and we also added this code down here in ClickTag.

The problem with Adobe Animate is that if I now go and hit 'Publish' again, it's going to overwrite that HTML with the default one every single time, so I'm going to have to go back, copy  and paste all of those bits and pieces in Dreamweaver; what a pain. So what you can do-- there's two things you can do. You can now go to 'File'. 'Publish Settings', enter this one, 'Overwrite HTML file on publish', turn that off, now hit 'Publish'. What’s going to happen is it's going to publish all of the Javascript, which is like the animation that goes on, or the images get re-exported but it's not going to go and override my HTML. 

So, let's do it. Hit 'Publish'. Unfortunately, if I go into here now, open up in JavaScript, you'll see it's gone back to its old JS code, Create JS, and down here, there's where my ClickTag has gone. You'll do that a couple of times before you realise. Make sure you turn this off.

There is actually another way to do it that's even better. It's called a template. What you do is you export it, which we just did. I'm going to open it up, and, just going to do a little change. I'm going to open Dreamweaver, and I'm going to go and add-- I'm going to change this one. Let's say we changed a lot, and there's a few things we're going to still change in this course. We've changed our Create JS, and we've added our ClickTag code here, and we’ve saved it. What we can do now is use it as a template. You might give it a different file name, you might save this thing now, not as-- I called it ClickTag, or Click through, remember. Spaces should be there. I call it DoubleClick template. Copy and paste this. I'm going to call this one 'double-click'. 

Now what it just means is I can keep that on my network drive, or shared folder, or somewhere I can get to it for the company, and go into Adobe Animate, and go into here. I can go 'Publish', that's fine, and that's going to overwrite my file. But if I go to 'Publish Settings' now, instead of having to go and add all the bits and pieces, I go into here and say-- actually 'Advanced', I'm going to go to import a template. And that's it, if I hit 'Publish' now, the cool thing about is, every time I hit 'Publish' it's going to use this double click which is going to stick that HTML-- they call it HTML wrapper, it's kind of just the junk around the outside of my ad that makes the different adworks go.

Now, hopefully if I go through and check this one now, it should have my bits and pieces all installed. Fingers crossed. There it is there, cool. So what you do is, say you only deal with one adgroup, so you go through, you mess around for a while getting the right ClickTag in, playing around with Create JS file, getting everything working, and then when you finally do that, and save it, save it somewhere separate, and then every time you need to export to that adgroup now you've made it super simple. What lovely people like Sizmek have done is they've already created that template, so they've already given the stuff you can download from the Sizmek website, and I can go to that exact same file there, and go to 'Import New', this one, the one they gave me, that's brilliant. It's just not mature enough yet to have all these extra bunch. So it's 2016 now, say in 2017 you're watching a  video, if you find some of these, make sure you dump them into the comments sections in here just to help other people around. At the moment, I kind of find a few of them because a lot of them aren't made yet but they will get made.

So, make sure when you're dealing with those HTML templates, they can be super handy, and if you're not you can just untick this one, make sure you're not overwriting this stuff you've done. What might also happen is that you might be working with a developer, and what you can do, is you can say, "Could you adjust, and send me the template?" then you don't need them at all. Now, for your next job, say they do some amends to HTML, you can say, "Can you send me that HTML file" and you use that as a template. What they're probably going to be doing as well is they'll be doing something similar. They'll be grabbing your ad, getting rid of the code around the HTML ad, and just injecting their own specific adgroup stuff.

Alright, that is HTML templates. Super useful to make this kind of complicated publishing thing a little bit easier to do.