Adding Static Text Boxes in Adobe Animate for HTML5
Overview
Daniel Scott
Founder of Bring Your Own Laptop & Chief Instructor
instructorI discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.
Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.
Hi, in this video were going to look at adding text into adobe animate. Now if you feel like hmm, maybe I could skip this one, it seems basic. Don’t for this one because there's some weird things that go on with flash (adobe animate) that will cause you problems. Sorry, not flash, I promise to stop calling it flash, it looks so much like flash. Adobe Animate, you need to make sure before that you can run into problems later on.
So what were going to do is we’re going to go into file, open and were going to open up this one called type and fonts. And all I've done here is I've created a little background, I've locked it, I'm going to make a new layer, I'm going to call this one type. And it’s always good to keep everything on its own layer. If you get to a point where you have 20 layers, don’t worry. It’s typical for Adobe Animate to have these separate layers. So I've got my type layer. I'm going to grab the type tool, I've picked a font, I've picked a weight, this is how heavy my one is, 100. Size wise, lets guess it, say 30 and mines going to be a colour of white, you can pick any colour you like. I'm going to click once and I'm going to put in ‘dude I need some space, I'm going to put a return after there to get it settled in there. I'm going to bump the font size up, you can see here you can click here and type it or you see what I was just doing, I was clicking, holding and dragging to the right to get a more appropriate size. Move tool, and put it back here.
The thing you have to make sure is you're using this one called static text. If I use static text, everything is going to be perfect. What happens is, just so you know, is that the font gets outlined, so what happens is it gets smashed into shapes that resemble letters so that you have no problem when it comes to delivering it on a website. You don’t have to have the font, so that’s perfect. But if I use dynamic text, say this one here, depends on what you used last whether it’s going to switch to dynamic text or static text. Dynamic text, if I do the same sort of thing, click down here and I go ‘more info’ if yours does this, can you see mine breaking this kind of width. I have to drag it bigger so I can fit in here. It’s a problem with dynamic text box. I'm going to put him down here, I'm going to make the font size smaller, great.
The only trouble with this is if I go and preview it in a browser, so I'm going to save it and I'm going to go to my control test, it loads up in a different window. I'm going to drag it down here for you. Can you see, this one here, you can see they're both broken, what happened is somehow I went and changed that from dynamic text to static text. So that ones dynamic and that ones static. So were going to publish again and I'm going to use my shortcut, command return and you can see this ones come through as my nice font because its not actually looking for this font, this is just in our picture of text. This one here is actually going off and trying to find the font that I was using called musio and that can be a big problem. If you are having problems when you're going out to production, it’s probably because you’ve used dynamic text instead of static text. Dynamic text tends to be where people input text themselves. So you might have a field that says name and you use a dynamic text field for them to be able to enter their own name in. so we wont use that very much, or you wont sue it at all when you're banner advertising. So, goodbye dynamic text, make sure, hello static text.