Adobe Animate CC: Add to HTML web page (Updated Version)


Hello, everyone welcome back, OK So I have this animation that I’ve made an Adobe animate CC using the HTML5 canvas document Type, and I want to embed this into a web page So let’s take a look at what we have here okay, so Here is the folder that contains my animate project I need to publish it so that I can generate the hTML and Javascript So I’m going to come up here to file Publish settings Make sure that Javascript HtML. Is selected. I’m going to move everything else default settings and select Publish Okay Now we can see that. We have a htML and a Javascript file I’m going to double click on the htML file here and It opens my animation up in a chrome browser Ok I’m going to embed this now into a web page So I Have this basic web site here. It’s just a very very basic bootstrap website I’ll go ahead and double click on the Adventure HtML. What I want to do is add the animation right here So let’s take a look at this We don’t actually need this file here, but we will need the code from this htML. File here. We some of it We will need this Javascript file, and we will need This image here to be inside of a folder named images if I drag this images folder into my basic website root folder I will overwrite the images that I already have in there ok As you can see I have an images folder in here as well with a couple other images So what I need to do is I need to go into the iMages folder here And just copy that so I’m going to just copy it I can also drag it You know just drag it in there, but I want to keep everything in place, so I’m going to just copy it Go into my basic web site go into images and paste it So now I have the images that go with my animate project Inside a folder named images in my root folder of my basic website here Okay, next what we want to do is we want to add the javascript, okay? I’m going to do the same thing here I’m going to just copy that file I can also drag them in and I’m going to go inside my root folder of my basic website here and paste that file Okay, so now I have the Javascript File. I Have my images here they go to my animate project inside a folder named images okay, and You can change the names and move things however you want to and point to them however you want but pay attention to what everything is name and where you’re placing all your files because we have to point to these files in the HtML code Okay so Let’s see here the next thing. We need to do is we need to add some of the code from this htML. File here To this adventure dot htML. File here, okay? I’m going to open these up in brackets all right, so I’m going to let’s see here. I’ve got brackets open right now You can use any code editor. You want. This is adobe brackets. It’s free. I like that you can split the windows which is really useful in a situation like this although most code Editors will do that alright, so I’m going to Drag the Adventure HtML into brackets and I’m also going to go into my coy banner here and grab the coy Banner HtML and drag that onto brackets as well alright Okay, now that we have both files open. Let’s go ahead and grab the code that we need from the HtML Generated from Adobe animate and add that to our web page so what you want to do is pay attention to the Location of the code you’re grabbing because we have to put it into a similar area When we paste it into our new web page for example See right here where it says write your code here when you generate your htML Adobe animate will add that for you, okay. Write your code here Just select from the write your code here and go all the way down to the next one write your code here Okay, this script block here within the head tag. This is what we need okay actually it’s several Script blocks, okay, we’re pointing to a Javascript File that we need then we’re pointing to our khoikhoi Banner Javascript file Which we also need and then we have within these script tags here this chunk of Javascript That’s actually embedded right into the web page itself all right So just grab all of it alright. So write your code here line 15 all the way down here for me It’s on line 86, okay. Just grab all that code and copy it Okay, when you paste that into your your web page You want to make sure that it’s inside the head tags you’ll notice here’s a closing head tag everything we grabbed was inside of the head tags okay, so we have to do that again, so The easiest way to do it is just go down to the very bottom here where the closing head tag is and just paste it In front, okay, I’ll go ahead and make a whole bunch of white space here Okay, just so that we can see in the video nice and easily where this is going alright, so I pasted it in okay And we’re inside that head tag right? Okay now Let’s take a look at this code now We are pointing to this Javascript file online that we need okay? We also have the Koi underscore banner dot Js. File okay, and that is why I wanted to move that Javascript file right here, Koya Koya Underscore banner j. S in to our Root folder of our website okay? Alright, we’re not done yet. We’re very very close. This is actually pretty easy, so the next thing that we want to grab okay is Here’s the body tag now the body tag is all Inside the body tag on a web page is all the stuff that you see it’s what the browser actually renders that you can See all right, so I’m going to come down here to the body tag okay? And notice how this one just is just a regular body tag all right this one Here is a body tag, but it has this onload right here. You want to grab that Okay, you can and I’m not going to grab the style thing here because I don’t I’m not worried about that. I just want this Onload initialize right here okay, so just from that quote mark here all the way to right here. It’s like so okay Just copy that inside of the body tag here out of space and just paste that in okay And so this is what it needs to look like all right? Just like that Okay, almost there now the next thing here is this dIv block here, okay? And this div block here see how it says animation container alright, so notice. I’m between the body tags I’m not copying that I’m just grabbing this dIv right here like so okay I’m copying that now wherever we put this in the website is where it’ll show up, so let’s see here I want to put it I’m going to put it right here alright right above my text all right like so I’m going to save that Alright, so that was that We actually don’t need this anymore, all right It’s all within here now and this we can actually publish online or whatever let’s go ahead and test it out So I’m going to double click on my Adventure HtML There we go. There’s our animation embedded into our web page

Leave a Reply

Your email address will not be published. Required fields are marked *