How to make Adobe Animate CC 2019 HTML5 Canvas Responsive on WordPress | Haydn Adams | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

How to make Adobe Animate CC 2019 HTML5 Canvas Responsive on WordPress

teacher avatar Haydn Adams, Creative Technical Educator

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

13 Lessons (46m)
    • 1. Intro

      0:58
    • 2. Setting Up Your HTML5 Animate project

      2:49
    • 3. Setting up for a basic animation

      5:09
    • 4. Create a Classic Animation

      3:07
    • 5. Saving and Previewing the Animation

      3:44
    • 6. Making the project responsive and no sprite sheet

      3:20
    • 7. Uploading your Animate Project to your Website

      4:47
    • 8. Previewing your HTML5 project online

      1:46
    • 9. Writing CSS in WordPress

      8:17
    • 10. Writing the HTML

      7:12
    • 11. Did it work?

      1:52
    • 12. Testing it on other browsers

      1:44
    • 13. In conclusion

      1:22
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

266

Students

1

Project

About This Class

Adobe Animate is awesome right now. The latest version, Animate CC 2019 is fluid and awesome at publishing to HTML5 (not .swf). However by default it's still what's considered pixel perfect, meaning it's not meant to scale. 

That's where this tutorial comes in. It picks up where Adobe Animate left off, when it came to fully publishing scalable and responsive HTML5 projects. 

You'll learn in this tutorial:

  • How to turn an HTML5 animate project to responsive¬†
  • Write code in WordPress so it scales proportionately¬†
  • Test in multiple browsers

This is a beginner step-by-step lesson. Note that you will have to probably stop during the middle and figure out how to connect to your web host via FTP. But a phone call or an email to your provider should solve that challenge. 

Note you will need the following software:

  • Adobe Animate CC 2019 (released Oct. 2018)
  • WordPress 5.x
  • Optional: WordPress classic editor

Meet Your Teacher

Teacher Profile Image

Haydn Adams

Creative Technical Educator

Teacher

I grew up in two words—the web design / development world where I wrote HTML, CSS and now JSX, and the graphic design world where I mastered H&J's in Quark (yes, I said Quark).

I've now shifted nearly all of my work online but find that the design elements shouldn't change just because they've shifting to pixels rather than paper.

In 2020, it's crucial to understand how to code, especially as a designer, and more so to learn how to design through coding.

Before making Udemy videos, I was a instructor at Academy of Art University in San Francisco where I taught web design and development for over 13 years. Also during that time, I launched 3 iPhone/iPad Android apps and had the best-downloaded app in the University's history.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Intro: in this tutorial, I want to walk you through how to create a basic animation in adobe animate CC 2019. I have my famous little red square right here on What I want to do is I want to take it out of adobe, animate and imported into WordPress. I've got example here of the finished product. This is a fully responsive adobe animate file with this little red square moving across the screen. As you can see, I can size it down. Aiken size it up. It is fully responsive. And if I make my browser even larger, it just stays in place. I'm gonna take you through the process of exporting out of adobe animate and into WordPress . I'm using Virgin five. So I'm going to create a fully responsive adobe animate html five file and upload in the WordPress that you can use on your website. Let's get started 2. Setting Up Your HTML5 Animate project: all right, just won't let you know before you go too far that I am running Adobe animate CC 2019. So if you are reading 2018 be sure to update it to the millions version. If you have creative Cloud, it'll update almost automatically. So do be aware. Everything I do is in the brand new version of Adobe Animate CC 2019. Let's get the doc over there and get out of the way. The first thing I want to do when I set up my design is I want to make sure I checked the platform Type my a version of Animate for some reason, and this could be yours or could not be yours Still defaults to Action Script 3.0 Action script 3.0. Basically died in 2012 when Steve Jobs, when he was still alive, basically said, flashes dead and killed the platform. So money, That's what seven years ago, So basically what happened was Adobe had to scramble and create a new format for Adobe animate, and they did that in the form of HTML five canvas. It was a long time coming, but I feel it is running great. And I love what they've done so far. Okay, so the first to make sure that I want to say action script 3.0 in the HTML five canvas. Now you can set thes default if you want to, but for my design and for also easy math because I'm a bachelor of fine arts major. So for me, math can be difficult. I'm going to say 1000 by 500 later. Rahmani used this as the ratio or the percent of with two height. This is a 50%. So for me, it's easy math. If you've got 1000 by 1000 that's totally fine. But just make a note of this for down the road. I'm gonna stick with 1000 by 500 html five canvas and create. And that is your basic set up for adobe animate making sure it says cannabis up here if you do create the wrong format. So if I choose action thrips 3.0, which is essentially a swift file, it'll say up here nothing. It will not say canvas. So if you don't see the word canvas, it is set up incorrectly. The reason why I'm making out of it right now is there's no way to change from action. Script three. They're basically you're just saying what version of flash. So if you set this up incorrectly from canvas to Swift, there's no going back and you have to restart your entire design. So do be aware of that from the very beginning, and I'm making a really big point of it to make sure you select canvas versus action script 3.0! 3. Setting up for a basic animation: All right, let's create a basic animation in Adobe Animate CC 2019 in the HTML five canvas. Let me close up the non canvas version. I'm gonna draw a little rectangle. Little are for rectangle. And in my example I did use a red square, So I'm gonna keep that red look, I'm gonna hold the shift key down and just draw a simple square now, animated I can't just keep it in this design. I actually have to put it into a movie clip. So I'm actually going to double click this because the reason why I double click this old school technique and I'll show it to you if I put a stroke around my design let's add like an orange stroke to this and I draw this rectangle Would You probably don't realize Oops, His Let's do it this way If this stroke was his massive size If I single click, I only get the fill. But if I double click, I actually conflict the Phil and the stroke. This is actually from a way, way, way, way back in the Macromedia and even the future wave days. That's how long I go back inside of animate slash flash that if you double click your drawing you conflict Whoa, there, my little magic mouse on steroids. I can double click and get the Phil and the stroke. Since I don't have a Phil, I usually still DoubleClick just in case I forget to So I double click this a lot. So if you hear a little double click in the background just notes what I dio So I'm gonna control Click, and I'm gonna go down to convert to symbol. I actually have an old school keyboard here on my computer desk that actually has the f keys. And I love it because the f keys were still hanging around in animate from the Macromedia and from the future Wave days. Thank you, Adobe, for following your famous rule that once it goes in, it never comes out. But alas, I digress. I'm gonna say convert to symbol and I'm gonna say Red Square Now here's thing you can note the name of the symbol Could be upper case. Lower case space is whatever you want. This is internal. Seem to worry about the name right here down the road. We will be worried about file names, but for right here can eat whatever you want. I'm gonna choose movie clip the button and graphic er from a bygone era back in the nineties and the two thousands movie clip registration Say Okay, all right. Now, if you note when you click on this red square, you don't get the little dot You just get a blue line with the registration point being in the top left. I'm going to now go down toe layer one and double click. Now here saying important has changed from the new version of Animate. If I type Red Square and I have a space in there, it's actually going to convert to an underscore. So it's gonna be read Underscore Square. There is an alert box that pops up, but I have since said, Don't keep showing it to me now. Of course I'm teaching this class, and I wanted it to pop up. But it will warn you if you have not used animate before or you put a space in there, that it will not allow spaces. This is a brand new thing that has changed in adobe animate CC 2019. So here I'm going to say Red Underscore Square, even though it's the same thing just to make sure I got in the right spot. Now here's how you create the animation frame. One is gonna be right here. I'm gonna move over like frame 1 20 office to be a slow move, and I have F keys on my keyboard. Still, if you don't, you can use one of a few ways if I hit the F six key that creates what's called a new key frame. If I undo it, I can also control, click and say, insert key frame. The unique thing is that it doesn't show the F six key right here, but I can still see insert key frame and it's right there and the third way is going up. Insert timeline and insert. Well, there it is, key frame now here saying unique. It still doesn't show the F six key. However, the F six key will still work. Take the Phantom F six key that I have just learned from two decades of using adobe animate slash, slash slash future. Splash to the trivia question like always come back to later on. So I'm gonna create a key frame. And least, in my case, at 1 20 and just so lose back and forth. I'm gonna make a key frame unframed to 40 F six for me. But you can also control click, insert, key frame or insert timeline and key frame as well. You can do one of three things. I was gonna set three basic key frames up, and now I'm gonna move the square back and forth. 4. Create a Classic Animation: all right. Now that we've set up our three key frame, let's move this square back and forth. What I'm gonna do is I'm gonna control Click or I think, on the PC It's Ault. If you do know the answer, please let me know the comments. I'm a Mac person, so I'm always guessing when it comes to the PC side in terms of the keyboard shortcuts and controls or if you have a mouse that is two mouse clicks, I only have the Magic Mountain only has one, but some mice have to. You can right mouse click and pull this contextual menu and I'm gonna say create classic Tween. Now, if you have used adobe animate or flash in the past, you're used to a lighter color purple. They've actually changed the color. I'm not really quite sure why. Maybe some letter was just tired of the boring purple after 24 years. So they have since gone with a darker shade of purple. Don't worry if you're used to that different shade, it's a okay, my two cents I wouldn't change it, but then again, I don't work for Adobe. So I'm gonna do is now gonna have this basic animation. If I slide this back over the 1 20 you will notice that nothing moves. That's because the key frame on frame one and the key frame at 1 20 are exactly the same. But if I Magic Mouse Hello there. If I move this over, I'm gonna hold the shift key. Click and drag. And now, if I go back to frame one note that it moves ever so slowly, I can't the enter key on my keyboard to preview the speed and hit the enter key again to stop it and it moves. Now I'm gonna do next is I'm gonna repeat that process. I have a very trigger happy magic mouse, apparently today. So I'm gonna control click, at least on mine. I have it on 1 20 years. Might feel different If it's faster, slower, I'm gonna say create classic Tween and because to 40 matches to the first frame it's just gonna bounce and go back and forth. So if I had the enter key, it's is going to take a few seconds, but it's going to go from right back toe left and it's gonna invariably loop over and over and over again. Now, once again, Aiken, say loop. If I want to preview that, I'm not going to whom I should turn that off. That was a bad idea. Don't try to do new things in between your usual routine, Hayden. So I'm not gonna have that loop set up. I take that back. I was gonna keep it this way, but by default, this will loop around and around and around until I say stop. Or I suggested only happening once. I want this to play over and over again, So I'm gonna keep it just the way it iss. But that's how to create a basic animation inside of adobe animate CC 2019. 5. Saving and Previewing the Animation: all right, That's all well and good. But let's actually save this file. We have not done that yet. And let's preview it. Using a browser of our choice, I'm gonna go to file and save. Now, do know that if you save it for the first time, that the save and save, as is technically the same thing, So I'm gonna command Asa's. I'm always a shortcut fan. I have a folder called Animate Example, and I'm gonna call this one new dash red dash square. Now, do note that I also used this is important lower case letters and no spaces. This is eventually gonna turn into my file name when it comes to upload ing the work. The computer both PC and Mac is not que sensitive, which means you could run into it's called a false positive. Meaning the computer doesn't care if you have upper case or lower case letters. The Web, especially Web servers. Where we're gonna put this work on is K sensitive. So I have a rule in my classroom when I teach that all file names are always lower case. You'll notice a couple things in the future. We will use upper case. But for the most part, all file names will always be lower case. And so and you also should not have any spaces. So and if you want to get super technical, you should also not have any Asterix is or any special character. So think about letters, numbers and to take the place of spaces you can either use a dash or in underscore those economic tool rules that I have where I'll say new dash, Red Dash square or new underscore Red Underscore Square. So let's save this file. And now that it's saved, I'm gonna preview this whole design. This is a throwback era, one again. I'm a command and the enter key. And when they do that on my other computer screen, I move it over. I have a red square moving back and forth. This is what's called a local host, so it's playing on my local computer, and it may or may not scale, which it does not. So if you notice it when I move my browser, it doesn't actually scale at all. But this is just the first step I want to save in preview. Along the way, the more time that can preview means the more times I can fix rapidly in case I mess something up. And when you're building designing coating, you almost spend 90% of your time debugging and 10% designing. So whenever, like, to do stuff that requires 567 steps, I always check may work rapidly to make sure that I'm not missing a step or things don't work. At the very end. I was gonna make sure throughout the process that it works, as you can see this moving back and forth. So what I wonder next is I'm gonna tweak a few settings, and I'm gonna make this responsive because right now it's not responsive. It's not moving. It's just the way it is. And on the Web, everything should be responsive. It should not be static in this new era of the Web, where we have tablets, computers and cellphones, which are almost tablet sized these days. But still, I want to make sure this moves back and forth on all different platforms, so let's do that next 6. Making the project responsive and no sprite sheet: All right, let's spend some time in the publish settings because we've got the animation working. I'll switch back to the timeline, but I have to make a couple adjustments that I want to do to make sure this is fully responsive and exporting in the best way possible. I'm gonna say file in published settings and change a couple things in my published settings. I'm gonna go over to image settings first. I do not want export document as texture because I want this to export the vector based shape and not turn into images. It does say better performance, larger size. I get it common. Uncheck that when I unchecked the documents of texture, it then asked me to export images as assets. And could you combine them images in despite cheats? I'm gonna uncheck that as well. I only have a vector based shape, but and this is a little more advanced to get into. But my thing is like to have what's called a passed through system, meaning I don't want animate to adjust or change or group my images into what's called a sprite sheet. I wanted to leave it alone, so I always make sure I uncheck The export document is texture, and I export image assets is also unchecked. Now that I have the image settings unchecked, I'm gonna go over the basic and this is important. What I want to do is I want to make responsive. So this is actually a very powerful tool. Make responsive both and scale to fill visible area fit in view. What this means is, if I adjust the browser either by with or by height, it's gonna fill to whatever side it touches first. So I want to say, make responsive both and scale to fill visible area fit in view. I'm gonna say, Publish on this one right here. And it now publishes my work to where I saved my file. Let's go find that I'm gonna go in a different screen as I'm talking. And there it is. Now, in a previous example, I did for a different class. I had the Red Square, so I'm gonna get rid of Red Square, Red Square and Red Square, and I do not need images any longer. So if I double click on the new Red Square html file, let me close my previous edition Now you can see moving back and forth. But here's something important. The new version now scales based upon where it is on the browser. Now, if you saw in the very first video, I did put little blue squares and all showed to you as well. What the little blue squares did was just showed the corners of my design. But for this for pretty much a Okay, I just have a red square bouncing back and forth. And as I resize my browser based upon the with or the height, it stays in view. So now that I've haven't animation and I have it scalable, let's now move these pieces over to our WordPress file and length, um, up. 7. Uploading your Animate Project to your Website: all right. Now, this requires a little work on your part, because every website has set up a little differently. So what I'm using as I'm using a thing called Cyber Duck. It's a free little tool, both for Mac and PC, but in Cyber Duck I have right here you can see about cyber duck. There it is to keep little duck. Let me move the doc, Cyber duck ask you to log in to your website. And mostly, if you're using a self hosted wordpress, you will have access to this. But this might take a little work to figure out what your FTP settings are. FTP stands for file transfer protocol and all basic self hosted servers with WordPress should have that unless your word or you're hosting company does block you. So do be aware on this step, you might need to pause the video while you go figure out what your settings are. But almost all FTP tools. So in Cyber Doc, it's gonna ask me three things. And if using sftp, you will have a couple different set ups right in here. There's also stuff for windows for back blaze. For Amazon. You've got a couple different pieces as well In here with Dropbox, Google drive, Microsoft all this good stuff. But I'm using basic FTP or file transfer protocol. I have already put in my information from a Nautilus Designs account, and I have my ftp set up and I close this window. I can see that in my home folder, My base level folder of WordPress. I've got a couple of from folders, so I have a thing called WordPress five for just this demonstration purpose. But this is where my WordPress filed live and breathe. It's important not to touch any one of these files or WordPress might totally crash. And I'm being serious. All right. What I want to do is I want to create a new folder, though inside of Cyber Ducati's is the same keystrokes as the Mac. So command shift enemy Macintosh, where it might be controlled on the PC. If I am incorrect on the PC, then please let me know. I'm gonna create this. But I'm also gonna follow my rules for file names. I'm gonna say lower case animate because this is the photo. All of my animations from Adobe Animate are going to go. I'm gonna say create and up pops and new folder Note that this will not affect any projects is long. You don't have a WordPress name called Animate in Salonika Page or a Post. You could also name this animate dash files or animate HTML five files, just in case you might have something called animate. I do not. So I'm safe to name it just animate. I'm gonna lock that in. So I had the photo called Animate, and I'm gonna double click and go inside this folder. As you can see here, it says websites slash WordPress dashed five slash animate no spaces and no upper case letters. What I wanted to next is I'm going to drag three things or I should say two things. They don't have an images folder. But if you haven't images folder that you were using or if you brought in a J peg or a gift , those would be the only two pictures maybe bringing a PNG file dependent upon what you're bringing in that you will have an images folder. So if you have that, select that. But I'm gonna select just the Java script and the HTML file I don't need the f l A. If you want to, you can totally upload the f l A file if you just want to keep it for safe keeping up on your server. But we're not going to utilize this, So the f l A is your working file four. Adobe animate the F L. A extension is still there, even though it's animate. F l a Flash. Things don't change. So I'm gonna then upload this new Red square. Note the lower case letters, the non space so I can drag this up into my FTP software. This case Cyber duck Let go transfers. Hey, upload complete. I've now uploaded new reds. Where html in new red square dot Js for Java script. Let's now preview this on a Web browser. 8. Previewing your HTML5 project online: remember I said up to test things very quickly as a do things step by step. This is one of those things. So in my FTP for my set up, my folder is my domain name dot com dot net info dot whatever slash websites slash WordPress dash five slash animate slash new reds where those slashes indicate folder names . So in this case, minds Nautilus designs I'm gonna say dash websites, Aiken type correctly websites dash WordPress, dash five, dash, animate and then not sorry, not dash All those times slash in this case, minds going to be new dash red dash square that html and f a preview it It's either going to give you a right answer or if I purposely maybe spelled with a capital s problems, and it says, Oops, that page could not be found using your air for, 04 page. So do note that this is where K sensitivity does come in. Capital ass is different than a lower case S is long as you can see your project moving back and forth, you're on the right step to now putting this into a WordPress. The first step ist uploaded the second step is to test it. And now our third and fourth step is to write a little bit of code. Don't worry. It's gonna be OK and incorporated into our WordPress set up. 9. Writing CSS in WordPress: all right. Our next step is now toe log in tow. WordPress, and to write a little bit of CSS to make this work. Now, just you know, where I'm at. I am using we look at the updates. I am in a WordPress 5.0 point three. However, I did one thing a little differently. As much as I love the new version of the WordPress posts and pages what's called Gutenberg ? I do have an affinity towards the classics. And so I did install one plug in that in this design. Yosi up. There's a new versions. You know what? I'm on the update. It's always nervous when I do things live on camera and hopefully it's gonna work. But I actually installed a plug in called the Classic Editor for this tutorial. A lot of you will be on an older version of WordPress, but do know you can do this both with the new Virgin of Version five, which has a new set up of paid is in posts, but I installed this thing called the Classic Editor. That's just all. I put one more piece in also of note that I'm using the basic theme 2017. So you might have a totally different look to your design if you have a different theme. Different set up. But I've got a pretty basic established design in WordPress. So I want to do is I wanna edit my CSS now CS esque vans for cascading style sheets. Some themes, depending upon what you have installed, will have a custom CSS area. In this case, I'm using the basic 2017 version and therefore I do not have the ability to add a custom CSS area within a theme somewhere in here. So I have to go into my editor to make this happen. If you're doing this for the first time, you will get a warning message that says, Hey, be careful, you're touching your files. So be careful So you can also edit your CSS This pulled built in CSS editor. I'm kind of going a little old school with this design and just going with the basic CSS. Once again, this might go somewhere different in your theme. So be aware that this might not be the same place, but for demonstration purposes. I'm using a very stripped down version of WordPress from Onley using the default setting. So in this 2017 version in the style sheet, I went down like line 4332. It's a lot of CSS. And in here I'm gonna go down like line 43 34 monotypes, um, code. I'm gonna type, period and whoa, That's not how you have my keys. Animate container. Now do note that in previous versions of file names, I said don't use upper case letters. This is up to you. I have an old style way of programming where I have the first word when it comes to CSS. This actually comes from Flash Way, way back in the early, actually, like the mid nineties to the two thousands where was considered what's called Camel case in camel cases. First word lower case. Second word, first letter uppercase like a camel hump. So you'll see me doing that. In all my examples of both CSS and CSS goes with HTML. So this period represents what's called a class. Like I said, a little coding. But this is about six lines. And don't worry about this anymore. Someone to say period animate container. I'm gonna hit space and I'm gonna say open curly bracket, which is the key right to your peaky and shift curly bracket opens and closes. And what I hit the return key it in dense my type and puts the close bracket one level below. I'm going to say position, colon relative and semi Colon, and I'll show you why this is in a few more lines of coat. I'm not going to give it some space by default, so I'm gonna say margin bottom 10 p x semicolon That just gives a little space below your animation for any type, any paragraphs, any pictures to be down below. This is optional. If you don't want to have a margin bottom, you can take it right out. The important one is we have position relative, so I'm gonna have 10 pixels or 10 p x and the semi colon. Now go down for a couple more lines and say animate container gonna type The same word is built above, so make sure what? How are you spelled your word here that it's spelled the same down below? I'm gonna say I frame and I'll show you why in the next video I'm gonna say I frame no period Uppercase Keep it all lower case you must have I frames spelled that exact way noted Turn green If I do Upper case I frame actually did stay green which should not happen But for the sake of this purpose, let's keep it lower Case I frame and repeat the process again So I'm gonna say open curly bracket. If I type the right key There we go. Return key. I'm gonna write a couple lines of code. I'm gonna say position, Colon Absolute If I can spell it right there it is. And semi, Colon that in that line, I'm gonna say top zero left zero with if I can spell it again with Colon. Wow, Mikey Taping Well, I'm talking is not strong all of a sudden. All right. With 100% and height 100% and semi colon that that is all the CSS You have to type on this screen. There's one more line a type on the next screen. But let's break this down. So we understand how this works in CSS or cascading this animate container is gonna sit outside or around my animation, which is gonna be inside what's called an eye frame. The animation is going to then move based upon the size of the animate container, which says fill the space of with and height. It does appear like a square because with a 100% and height 100%. But we're just saying fill the box on all sides and making sure that's position is in the top left and there's no space in the top or the left. So it's almost just resetting things on the Web. We reset a lot. We dislike things up in the top left. You can move them down the road, but this is the all the code you have to put inside your CSS area. I didn't put in the CSS editor, and you might have a custom CSS area inside of your theme. But once again, this is animate container position. Relative margin bottom animate container I frame position. Absolute top zero left zero with 100% and height 100%. Note that you don't forget that you click update file. Otherwise, this will not save, and there's no way to preview the settings quite yet. We're getting there now. Let's move on and put in our design in HTML and reference thes same numbers in the next video 10. Writing the HTML: all right, we have written our CSS. Now let's go into their page or a post and link up this new red square in toward press When the pages I'm gonna say add new and from here I'm gonna do is I'm gonna say new new Red Square just because why not? Let's have some fun. Now, once again, I'm in the classic mode And if you're in here, make sure you switch from visual to text as this does actually matter in the text area. This is basically HTML that Aiken type in. If using the Gutenberg version of the new version of WordPress five, you can just change your setting from paragraph two html. But in this case, I'm working with the classic editor in visual and text. Also, depending upon if you're using a theme or not, you might have different options to put HTML into this design. But for the sake of this purpose, I'm gonna stick with classic editor and text. I'm going to write the following. I'm gonna say less than sign Div class. So remember we had that period before that period in the CSS denotes the word class off. I say class equals and spoiling this exactly the same animate container I used a capital C I'm gonna say quote, end, quote in style. Now, a style is what's called a in Lyon CSS But this lets me determine the ratio that I have to create the box for. I'm gonna say style equals quote, quote and back inside That quote I'm gonna say padding dash bottom colon a certain percentage. Now what percent away? Put in this goes full circle If I go back to Adobe Animate way, way back when the with in the height is a ratio So I'm gonna type in my calculator, show you how I got this. Let's pull up calculator. There we go. And hopefully there it shows up. I'm gonna type 500 divide that by 1000 now I said before and like the second module that I like easy math And this is why I like easy math. The ratio is 0.5 or if we multiply that by 100 we get 50%. So I know that if I go back now to this code, that padding bottom percent is 50 because I did use easy math. The beginning at 1000 by 500. Do note. You may have a certain number that's not perfect. So if you have, like a different calculation that, let's say, is like 500 by 9 97 just do your bastard or keeping 51% knowing you'll have a little space below. As it doesn't fit perfectly, I can't tight 50.1%. I have to type like 51 or 50 and lose a space whenever a set things up. I think about the actual size I'm working with. So that's a little talk for a simple calculation. I'm aware of that. Patting bottom 50% semi colon that locks it in like that. CSS. I only type it right here because I always want to make sure note what the ratio is of the specific HTML five canvas that I am working with. Now we've written are patting bottom colon, 50 semi colon and quote. I'm gonna finish up with a closed bracket. Whenever I read HTML, I have to have a less than sign and a greater than symbol at the beginning of the end of my coat him and at the return key in type less than sign I frame. Now do note that it has to be lower case to match the lower case inside of my CSS that I wrote earlier I'm gonna say I frame and then SRC this stands for source or I toe essentially say the hooked on phonics style cirque SRC equal Sign, quote, quote and come back to this area and then going to write the following with Jeez, I could spell it correctly with equals 1000 that's gonna match my design over here on the right and close quote height equals 500 and then close quote. And one more thing I'm gonna say, just because I should have probably put this inside of my CSS and a lot of default settings do this. But since mine doesn't have it, since I have a very basic WordPress theme, I'm gonna say style again. S t Y l e equals quote border, colon and then say zero semi colon quote and greater than symbol. And then I have to write a close eye frame by saying slash I frame. Maybe there we go and closing it with a greater than symbol the border means by default. I frames have a border. They're actually pretty annoying and a lot of themes. And wordpress take it out. But since I am using a default theme, it does not. So for display purposes only. I'm just gonna keep it just like that. And that divot the top. What you have to do in HTML is that you have to open what's called a tag and close the tag . So if it's I frame in the beginning, I have to say slash I frame at the end because this DIV tag opens this top part, I have to say less than sign slash div. Now, this all looks good, except for one critical piece, that Cirque or the source. Now I have a tab of this little guy going back and forth from my Nautilus designs. I'm gonna click inside of here this Ural or the Uniform Resource Locator. People think it's universe or universal, but it's uniform. So I'm gonna copy this your URL I'm gonna come back to add new page. I'm gonna paste this code inside of it and then gonna say publish. And that's all the html you have to write in order to make the animate file work inside of WordPress 11. Did it work?: So the question you're probably waiting to see because we've now gone through two modules, his doesn't work. Do we know if this actually did achieve? We weren't Dio now, yes, I couldn't actually stop and preview it before now. But here's the result. Take a look. As you can see, this little red square bounces back and forth, and it's looking pretty good. However, we have to now adjust the browser to see if it does in fact, scale and lo and behold, that this goes back and forth in scales bigger or smaller and hold the ratio. That's the biggest piece of it all, that this will hold the size of the overall design in perfect size. So if I want to put saying below it So if we were to show example of let's say, edit page again inside of WordPress and all say yes, it does work where if years didn't work Oh no, it didn't work. One of the two outcomes will happen. The great thing about coding is it's gonna be a yes or a no. There's no Maybe so if I put some text down below this frame in a preview, it once again. Okay? Yes, it does work or Oh, no, it doesn't work that you concede, e that the type holds right below the actual space. It doesn't move it above or below. That magic came once again when we put the ratio of style padding bottom 50% to the WordPress piece. So hopefully yours did work and magic was achieved. 12. Testing it on other browsers: so I'm running safari cause I'm on a Macintosh. But I also want to see does it work and other browsers because nothing is worse than assuming it's gonna work across all platforms, but it not really achieving that effect. So I actually have fire Fox. Hello, can't Asia How you doing? So I have a long with safari. I have Firefox and chrome because I'm on a Macintosh. I can't check. I eat. That's just the things I have to assume. But because Chrome does have a majority market share on the PC market, I feel pretty safe. But if I test both Firefox safari and chrome, I'm accomplishing and testing across multiple platforms. So here we go. Here is fire Fox See Firefox working alongside safari, both the little guys moving, and now it's test chrome and chrome is, but that's not the right project at the right project. So what works in chrome? It works in Firefox and works in safari. I know now that this works across all platforms, and if I am running either thesis AM sung devices on the mobile because they have crone and or the iPhone, which has safari, that these will work on mobile devices as well, and that is how you can create a basic animation inanimate and put it in toward press and to create a fully responsive HTML five canvas that you can use on ward breasts. 13. In conclusion: Thank you so much for watching the entire to this module. Siris of transforming and Dobie anime html five files in new, fully responsive outputs to use in WordPress. I'm curious. Did you actually get working on your website? If so, send me the u R l Put it in the comments section Take me a screenshot. Take me. Take a screenshot Live and talking for too long. Apparently I want to know Did this work for you? Because I think adobe animate is the bee's knees Right now animate is hot. It is fun. It is so cool to use. But the ultimate question is can you show it off on your website? The answer is yes. You can now show fully responsive html five compatible. Not Swift. Swift will not work on mobile devices, especially on the apple community in tablets. But HD modify fully responsive really robust coding techniques on wordpress that you can show your friends and family. So I'm curious if you made this work. If you got through all the modules, I'd love to hear for you in the comments. Please post a review of this. This would mean the world to me. Thank you Once again. So much for watching these videos. I greatly appreciate it.