Responsives HTML5 mit Tumult Hype 3 Pro erstellen

1. 01 About this Course: hello and welcome to this course on To Mull Type Now to mull type is an HTML five animator that allows you to build interactions. Html five Interactions that could be used for Web banners. You could be used for E learning for iBooks, author widgets Ah, lot of different applications that you can actually go in and use to mull type, for it is very easy to use. It is very responsive as well. You can build responsive websites, responsive banners that will adapt to whatever screen size or whatever device that the user is using. And so it's a very fun application and it's very Robustas Well, so we're gonna get in and we're actually going to dive in and take a look at what you can do with the mole type Now, First of all, let's go ahead and side and talk about what version of hype and also what you can actually build Using hype. We're gonna take a look at some examples before we get into the tool and actually start using the tool to build outs. These types of HTML five interactions. So the first thing is, let's go to to moult dot com we're gonna go to multi dot com. Okay, So one threat to moult dot com go ahead and up on the top. Click on Hype Pro. Now coming down to High Pro. This will give you a little bit information about hype, pro and the kinds of things that you can do with it. But what I want to focus on is the gallery here. If I click on gallery and then come down, you'll notice a lot of different examples used in two malts or used to build ah, lot of different examples that were actually built using hype. So we're gonna go ahead and take a look at some of these Now, I already have some of these pullup in my tab here, so I'm just gonna go through him and we're gonna talk about them, and then we'll get into the actual course on how to build these types of things. So the first thing is this rocket ship, so you'll notice a couple different things. Ah, in this rocket ship. So you first of all notice how it starts to shake, and then as it starts to smoke starts to come out and then it starts Teoh starts to go and lift up in the air and everything, so that's using To mull type. You can use some of the the animation features. You can use symbols to create your own nested animations as well. You can have things grow. You can have things go smaller. These are the types of things that you can use with tamal type. Now here's another example. Let me actually go back here. This is the Castle one. Now this is using something that's only available in tumult, pro and or high pro. And that's the physics. Let me restart that again. So you'll notice in the physics here on the Cannonball and the Cannonball interacts with different bricks on the castle. And then those bricks just kind of fall to pieces. And that's using the physics inside of tumult, type two multi pro. So that's why we want to stick with in this session we're going to be talking about. Or in this class, we're gonna be talking about the visit are the hyper pro application. So here's another one that I like, and this is an infographic. So if you're talking about, um, if you're wanting to build something that's more interactive. That's a graphic that the users actually go in, and they click on Teoh View Different information. Well, hype is an excellent application to build these types of things so you can click on this item here and you'll notice the purple highlight that comes in on. And as I come, I think start to shift and start to move on those air, different things that you can do within different timelines of to mull type. Okay, so here's another example Now this is embedded inside of a website. So here, as soon as I come to this website, the websites, a normal website. But you'll notice this animation that starts to animate the different parts. Um, and I can go in, and I can click on these different elements here. Now. This part is done inside of Tumult. Dunn's done inside of hype so you can take it, and you can build just different elements inside of hype and then embed it with your current Web site, your WordPress or a regular HTML. Or you can even take these types of interactions and put him inside iBooks author and make your book a little bit more interactive as well. Now this one is a little bit more complex. You'll see a world here. We have a lot of different animated elements. We have this plane that flies by. We have this little roller coaster, um, or this Sorry, this truck that's driving past on different streets and all this train that comes by, Ah, these windmills, a lot of different elements that are going on here and these are actually interactive elements. When you click on different things, then they zoom into different scenes, and then you can click on different elements there as well. So that's a lot of nested animations inside of hype. Um, and a lot of difference has scenes that are that said, That's how you get into the zooming part is in the scenes here. So now here is an interactive banner. Now we've all seen these types of banners, typically in the past. They were built with adobe flash, but it since ah, lot of browsers air not supporting flash. Any more hype is it grates application to build these types of banners and you'll notice that it is responsive. So as I start to resize my screen, it will adapt automatically to the new size. And that's a feature that's hype gives us Now. Here's another banner. Let's go ahead and click on this. This one's a little bit more interactive. It actually allows you to shoot different things. So we have our gun here. Ah, and then we can go in and click on a different item. Shoot it. And then this little banner pops up at the end. So there's another banner I have to click on this plus icon, you could see. Here's a little difference of physics that it does and different animations that will come in at different times. So now this one do you actually have to interact with? You can see. As I dragged to the left here, Ah sub menu will actually pop up, and now I can click on different items here that just allows you to. Or that shows hypes capability to add drag and based on the drag at different elements inside of your animation. There. Now, this one I really like because it has, ah, cool animation of card that's being folded out and so you can see you can do those types of animations here And now all of these samples on types website you can actually download our most of them. You can download where says this hype document and you can actually open it up and you can see exactly how they built it. So they want to share how these different sample files and share how they built it so you can download it and check it out. This one I really like because, um, you can actually click on the plant, that power, and it will raise up different symbols. That's a nested symbol that animates the wills in. You can also click on Fly Solo and that will animate one plane out and then animate the other plane in the middle. You have a lot of different these cloud icons and everything going on. Um, there's so there's just a lot of different elements that you're working with here. Now here is ah, UFO one where you can actually click on the sheep and this UFO will come in. And then I love duck that sheep and you can click on a different item here. And it doesn't matter where this UFO is that wherever you click on will actually go to that sheep that you just clicked on. So and that's using a lot of time lines and the animations and stuff like that that you set up inside a hype. And that's these are the types of things that you can build a type. And so we're gonna teach you the basics in this class how you can get started. I can use thes, different timelines, thes different animations and how you can create your interactions responsive and so they will adapt to the different screen sizes and everything. So we'll be talking about that kind of stuff. But first of all, let's go ahead and get started with how to download hype and how to start using them. 2. 02 How to Get Hype: all right. There's two different ways that you can get some old type. If you go to to moult dot com and then you come over here and again, we're gonna be talking about in this session, we're gonna be talking about hyper pro. We're gonna click on hyper pro, and this gives us the ability to download a free trial. If you want to try it out for free. And if you click on free trial here or you can upgrade from tumult type. If you have already purchased earlier version of hype, you can actually upgrade for only $49 or you can buy it full for just $99. And that's it. One time, um, and you know, and then any upgrade after that, if it's in the same version, like right now, it's tumult. Type three. If they go to four, that might be a paid upgrade, but if they go 3.5, that's usually is a free upgrade. So you don't have to worry about spending money every with every single upgrade that they do here. So okay, so if you click on free trial or if you click on by now, That's one option of actually downloading tumult type. The other option is to actually go through the app store through the Apple App store. Now, Tamal type is a Mac based on Lee application. So you have to have a Mac in order to actually download it. Um, but I'm gonna come in here and I'm just gonna in the search box. I want to type in hype and as soon as I but there it is, right there. Hype three. Um and now it pops up with the hype three. And then I click on this Hype three, and then I purchase it there. Now, however, Hype three here is only the basic version of hype. So you're basically just purchasing it through the app store, the smaller version, But then you can upgrade it, and then it's the full version. But you have to download it purchases at this one, and then purchase the upgrade after. So it's up to you. If you want to do this, any upgrades or any updates that to multiple come out with, they will automatically go through the app store. So if you like managing all your APS and all the updates through the APP store. This might be a good way, and it's also easy, quite easy if you go to another Mac to actually just come into your purchase area and download new versions off your of your APS basically and get your Mac already to go with all the APS that you've already purchased. So it's a nice wayto to make sure that you have all your applications in one spot. Okay, so once I've downloaded the free trial all from here, it'll download on application to either might downloads or my desktop. And then I just have to drag that over to my Applications folder, and that's it. Once it's in my applications folder, then I can come down here and I can just click on Hype three right there. And so, as soon as hype is launched, this is the first screen that you'll see, so it starts you out with the Blink Project. You have your white screen here, you have your different elements, your inspector, your scenes over on the left hand side, and now you can start creating your courses so we'll get into that next of actually starting a project and working with the files there 3. 03 Starting a New Project: All right, So once you have hype up and running, the first thing you need to do is save your project. So that way you have, you know exactly where your project is. You can open up later, and then you just have to hit command s every time you want to save a new version of it or save the updated version of it. So we're gonna go ahead and just hit command s here, or you can go up to file and then go down to save Either way works. And now it's asking me to save this project in a certain area. So I'm gonna go ahead and just save this on my desktop for now. And we're gonna call this sample as soon as I name it. Sample hit. Enter. Now, if I come to my desktop and go ahead and close out that now, if I come to my desktop, then we have this sample project. Now, That sample project. If I was to close out this hyper project here and just double click on that sample project that will open up that project exactly how I saved a inside of hype and then I can get going, and it's really a quick, uh, open. You don't really. It doesn't take much time. You can just go ahead and double click on it, upload it, um, or double click on it. Open it up and start working with it. Now, any time you are bringing in audio files you're bringing in images or anything, it actually keeps it inside of your resource is folder so you can click on over on the right hand side. You can click on your resource is folder and you can get to all those files. So, really, when you're keeping track of those files, you may want to keep a copy of those somewhere. But really, the most important thing is this one project file making sure that you have that project file and that you keep that project file even after you for released your project in order to update new versions of your project or if you need it to make a change quickly, you open up the project file and then publish out your project and then uploaded from there . So that's the process of basically keeping that project file, updating that publishing out the output of that project and then uploading that project to the Web site or importing inside. IBooks, Author, whatever Method that you're actually going to deliver this this hype application here. So So that's how you go in and how you start a new project and how you save the project in how you open the project up, lad, at a later time. 4. 04 Exploring the UI: All right now, let's go ahead and explore the user interface a little bit. Let's get familiar with where everything is that. And so when we start building, these projects were familiar with where to get to everything. So the first thing that you see when you start a new project and you saved the project is your scenes over on the left hand side. Now the scenes is ah, nice way to separate your content. So if you're going to like we saw in that interactive map on the first video, if you're going to have the map as the main scene and then you're going to go into zoomed in parts of that map, well, you would come in and you would create new scenes for those zoomed in parts of the map on. And that's how you can also separate content. If you're building, let's say you're building on interactive learning elements, and that interactive learning element has different different tabs or difference information Will. You can use thes different scenes to actually jump to those different elements in the different information, just by coming over and clicking on the plus icon that will allow you to create new scenes . We'll go more into depth with scenes later. But the next thing is the layouts. Now the layouts is not highlighted by default. But if I come in here and I click on it, then it will pop open with the layouts and we'll talk about layouts more in depth. But it's just a way to be able to create different break points on Ben. Adjust your content depending on those break points. So if you want something to look completely different on a phone that it does a tablet, you would create a different layouts, and then you would use that layout to create those elements there, Um, and rearrange those elements and differently on the different devices in different break points. Now, coming across the top here, we're gonna come into the Elements section. If I select the drop down box in the Elements section, we have a couple different things. We have our text elements where we can insert text buttons, textured buttons, images, videos, audiophiles, html widgets so we can bring in external html, um, inside a hype and use that to embedded inside of hype. And then we can create our own shape so we could do rectangles, rounded rectangles and ellipses or circles, basically, And then after that, we have symbols. Now we'll talk about symbols more in depth, but their way to create nested timelines so you can have even know. Let's say your main timeline is paused. You can still have something kind of spinning independently of your main timeline. And again, we saw that in the map where we had the different trains going through and we had different , like the carousel going around and around and around. Those were all nested are different symbols, basically with her own timelines running those different to animations on their own timelines. And you have cup. You have two different options now. One is the new symbol, and one is a new, persistent symbol. Ah, we'll talk about that more into depth, but the persistent symbol. If you have multiple scenes and you create a symbol, it's just gonna be added onto one of those scenes. A persistent symbol will add it onto every single scene automatically, so it's nice if you have a background or something and you don't want to copy and paste it into every single scene. We'll add as a persistent symbol on it will be on every scene automatically. Gonna be careful with that in case you want to hide and show different things. But if you wanted to have its across every single scene automatically, that's the way that you would do it. So the other element is the group we have ungroomed we have bring to front bring to back those air normal applications or normal elements that you can use and pretty much every tool. Zoom in and then we also have a preview. Now the preview will use the default or whatever. Your default browser is minus safari. But if your default browsers chrome or something, you might see a chrome symbol there. However, you can also to best practice to test this and this many browsers as you can. Ah, and you can still see this drop down box. And that drop down box allows me to test it in other browsers that I have installed on this computer. So, for example, Firefox and Chrome, um, and I could do that. I can just basically select the drop down box and then select fire boxer chrome, and it will preview my project inside of there. Now, a short cut key is Thekla manned inter symbol or command Enter key. And if you select that without even select coming up here and clicking on that button, it will preview your course so I can hit command, enter and then it will pop open. I have it on my other window here, but it will pop open with the preview and there we go. So now I can just hit command enter again and it will refresh whenever I have open there. The next thing is my inspector, If I turn off and on my inspector, it's this right hand panel and it has a lot of different elements and inspectors that we're going to be talking about more in depth. So, document Inspector. Ah, this is where I add on actions. This is where I use physics on this is where I add on different give labels to my different elements on the stage. This is also where I make things flexible and responsive and add on justice size for my stage and everything. So this is something you're gonna be working with a lot and will be going more to death with it Now. The other element on across the top here is the resource is this is not highlighted by default. But if I select on that, this will give me a list of all my resource is so every time I bring in an image, every time I bring in an audio file, every time I bring in a video file, those will all get placed inside of my resource is folder and then I could just take those elements here, drag and drop him on this stage and use them over and over again across multiple different scenes or anything like that. This is also where I can come in and create job. A script functions. So if I wanted to get more into depth, um, with the capability, that hype comes by default and I wanted to add on JavaScript and other different elements I can create a function here, and then I could run that function on any other action any other trigger or anything like that. I can create the function here and then do that. Now, adding a file also allows me to bring in external Java script elements. Oh, so if I have if I wanted to use green Sock, for example, or if I wanted to bring in other types of JavaScript, Jake Worry libraries. I could do that inside of here and attach those files here and then take advantage of those here as well. Now, I don't also can add fonts. If I have a custom fonts that I want to do, I can do that. Inside of the resource is next element is the actual time or the stage itself here. So this white area is what's going to be visible to the end user. So you want to add your element. You would rearrange it and design it inside of here. You can also click on play, and you can click on record and and different elements straight from the timeline. Um, now, above that, win the stage area, though you can drag difference bars if you wanted to get exact positioning and get different smart guides and everything. All you have to do is come up to the ruler, click on it, drag it down, and this will provide the guides for you so you can arrange things a line, things exactly how you want it now down here at the timeline again, we have our play. We have our record, and we'll talk about record once we get into animations. Ah, you have the ability to modify the actual timeline so you can zoom in on the timeline and get really in depth with your animations and your key frames. You also have different elements. Once you start inserting things, you start adding different circles and squares and other things that you're going to animate. You can select those different things along the time line and then below that is the properties. Now, the properties is basically the elements that you can anime once you have something selected. So if I select something on my timeline, I'm gonna go ahead and just create an element here so I can show you how to create create a rectangle on my timeline, Um, or on my stage here, and you can see that if I don't have it selected, um, nothing shows up in my properties. Now there is a rectangle in my timeline layer. However, I have to select on that rectangle in order to see the properties that I can animate down below it. So now once I've selected that, now I can come in here and I can animate the opacity. I can animate the left, the top the size that with. But I can also select this drop down box and then anime. Ah, whole bunch of other properties. Here we have contrast, brightness, other stuff. These are all elements that you can enemy, and you have to have the the image or the object selected in order to view those properties . Now here I can also toggle the visibility so I can turn it off and on. If I just want to focus on certain elements, I can hide everything else on. Then I can also lock it so I don't accidentally select it and move it if I have it in the exact spot that I want. So those air different elements that you could do with your timeline. That's just a basic overview of the actual user interface. Inside of tumult, type 5. 05 Previewing Your Content on Mobile: all right. We briefly talked about how to talk or out of preview your project in the previous video, but we're gonna talk a little bit more in depth on how to do that. So here I can come over to the preview section. I can click on this safari symbol. Since safari is my default browser, I can drop down here the option to preview instead of Firefox or the option to preview inside a chrome. Now, a couple other things that I can do is if I have the tumult type reflect application on my phone, which you can get through the APP store. You can actually send the information over to your phone directly. So if I come in here and select the drop down box, what I have to do is first of all, be on the same wireless. And so right now I'm on the wireless. My phone is on the same wireless as my computer. And so since I have it here and I have the application pulled up here, the tumult type reflect. Um, it's a free application. Once I have it up here, then I have the option. Once I select the preview to actually preview on that device so I could have that same reflect application on my iPad. And if I wanted to test that out, I can do that. But for here, I'm gonna go ahead and just click on Jeff bats iPhone and then it will send that information. You can see that it's just updated automatically, and, um, there it is right there. Have my erecting. I know it's a little hard to see there, but I have my rectangle there, and I can actually test everything on my phone directly. And that's all I have to do is actually select that drop down box, have the application up, and then it works automatically. And then it could start testing it out without having to put this on a website somewhere or uploaded and then go to navigate Teoh u R l or something with my device and then tested out . This is a whole lot easier to have the application, which is that the hype reflect application downloaded on your different devices, and then you could test it from there 6. 06 Zooming In and Out: when you're working with tumult type and you want to zoom in on different parts and you want to really get into the fine detail of your animations, which happens a lot. You want to use the zoom tool you'll notice if you come up to the zoom up on the top bar and select the drop down box. Here, you'll have a lot of different preset options. So I consume into 25 50 75 ah 1 25 all the way up into 3200%. Ah, and that allows you to get it really detailed and says Human on the certain elements off your actual animation. Or if I come in and said or scroll down a little bit more Ah, I can see that the zoom in and zoom out has a little shortcut key, which is the command and that the greater sign or the less, um, the less than sign. So if I come in here on my stage area hit command and then just a greater or less than it will zoom in now I have Those is triggered is something else. And so it was actually gonna pull up something else. I would have to adjust the hot keys and the shortcut keys on my preferences inside of my system preferences to make sure that no other application is using the shortcut keys. So that's one thing to keep in mind. But for now, I can go ahead and just use the drop down box to zoom in on the different elements. And now, once I have this, I can come in and just scroll around, used my mouse to scroll around and see those different elements in here. So that's way to zoom in to really get to a fine detail. Someone examine a little bit more. Uh, you can see that I could come in right to the shape and see exactly how to modify that shape or C. Okay, what's going on with that shape? And I can go in there and adjust it, thereby zooming in. And then I could zoom back out. Just coming into your going back to 100% will take me back to the actual size of its Now. I have not created any responsiveness or anything like that yet we'll talk about that later . So what? I'm actually seen here is going to be the size of the animations once I publish it out. So that's how you zoom in and how you use your mouth on your project. 7. 07 Working With Shapes: all right. In this video, we're gonna be talking about the different types of shapes that you can use inside of tamal type. And there's basically three different types of shapes. There's a rectangle, a rounded rectangle or ellipse tool or circle tool. Basically, now, out of those tools you can then go in and you can manipulates. You can then go in and add on your own colors and other stuff. But those were the three basic tools, so you can use that for transparent backgrounds. You can use that for ah Grady in color, background sent or any other type of shape that you want to inside of tumult type. So the way that you add, um, a shape inside of tumult type is by coming into the elements panel and coming down under this line. Here on the drop down box, there is a rectangle rounded rectangle in a lip stool. We're gonna go ahead and add just a rectangle tool. Now, with that rectangle tool selected, you'll notice a couple things down at the bottom. We have our properties now. These air the properties that are being affected that you can effect with the animation on the object that you have selective, which the object that we have selected currently is the rectangle tool. Now, if I come over to the right hand side, which is Thean Specter window, that's where I have different elements that I can change about the rectangle. Now you have to make sure that you have that rectangle selected, but you'll notice this shapes one, which is the elements, inspector, Um, and that element inspector allows you to affect the shape of the object that you have selected over the color of the different elements, the properties of that shape. So the first thing that you see is the background. Now this allows me to select the drop down box from Color Teoh Radiance or to image if I have a pattern. If I wanted, like a wood pattern or something like that, well, you can go find a wood pattern image and then come over to image here and then select what image I actually want tohave replace or be repeating or something like that. Um, color is a solid color, or if I come into credence, it'll have me. Ah, it'll have to colors which will allow me to have a top color and then a bottom color. And then I can adjust the rotation of that Grady int as well. Just buy entering in the number here or just taking this little circle on this, taking the dial and adjusting the Diallo's well, So I'm just gonna stick with a normal color. I'm going to select the color selector, and this is a standard apple color selector so I can come in here and adjust different elements about it if I wanted to enter in the hex value. If I have a specific color that I want to use, I can just come in here and enter in the hex value right there. And the next thing is the border. The border allows me to adjust the basically the bar that goes around at the stroke that goes around the shape and I un selected it so I can see this a little bit better. And you can see it's just kind of a light, darker gray color. I'm gonna go ahead and I'm gonna up the width of it by up the with event. Now he could see it a little bit better. I could see this border around the shape. It allows me to go in and adjust that shape or just outlines the shape. Basically Now, if I wanted to adjust the radius of that border, I can come in here and I could up the radius, and that way it starts to make a little rounded curve. But it's affecting just the radius. If I wanted to affect the border as well, well, that's where I would have to come in and add a rounded rectangles. It's just affecting the radius of the border itself. That's something to keep in mind now. If I wanted to have just certain rounded corners on certain objects or certain sides of the actual rectangle, will you just uncheck here in that way, it will just have, um, certain areas and fight check here and then I can adjust the radius. I'm just in that one area so you can see that I took the radius down on the top right hand side. I took the radius down to zero. Now that it's down to zero, everything else has a rounded corner. Except for that one side. That one side has just a square corner may sickling so now, I'm gonna come in here. Um, and I can adjust the color of the actual border by selecting this color here. Um, actually, let me just switch it back to all. You have to switch this back toe all over the middle here, and I'm gonna switch the color of the border just by selecting that is the same drop down box. Let's go ahead and up this to a darker color and that will up the color there. Now, by using your own shapes instead of trying to, like, recreate shapes inside of tamal type Instead of bringing in images from photo shop or something like that, we'll help with file size. So if you want to make it a little bit smaller, try using shapes and colors right in the side of here. And especially with button this if you could try to affect the buttons inside of tumult type, you still get all the functionality of the buttons, the hover state over the down state and everything. So I'm gonna come in here and now you can change the opacity of an object If you wanted to make this Ah, little bit transparent. I can't really tell now, but if I come over here, it's actually duplicate the shape. And you could see that now that I've duplicated, if I have or over another shape, that's where I can see that. Yes, there's someone passively to it. If I take the opacity a little bit lower, you'll notice that it almost disappears there. Now keep in mind that there any time hype, actually, does you do something that hype that mean, not work in some browsers. HaIf will actually warn you about that. So there's this little yellow symbol right above the opacity. Let's go ahead and click on that now it tells us in AII eights. The opacity will not be displayed when there is Ah, corner rounding. Ah, background radiant or a box shadow applied. Now that's I ate. So if you're concerned about AII eights, if that's something that you know you're trying to address, you're trying to target um, I e eight and below. You may want toe take that into consideration. If you know that you're gonna just worry about ie nine and above which I get nine has a lot more support for stuff. Well, then, just ignore that you can just go ahead and hit dismiss, and some they'll still show that warning. But that's just something that hype is trying to let you know that saying, Hey, this is not gonna fully work inside of I e eight If you're trying to focus on that, Okay, so the next thing is the shadow. Let's go ahead and get rid of one of those shapes. We're just gonna stick with one for now. I'm gonna up the opacity back to where it was 100% and I'm gonna take the shadow. I'm gonna change some different elements. Now, there's a couple different things that I could do with this. I can take this little circle right in the middle here, and I can adjust that just by dragging that over and you'll notice that it creates that shadow. The farther I go on, the farther the shadow, the distance between that square and the shadow actually goes. So that allows me to adjust visually Dragon drop or it can come in here and just enter in certain numbers. If I want a certain number, I'm gonna go ahead and to say, Let's do three x and let's do a little blur we want to have. The thing with the shadow is yes, it's basically creating a duplicate shape. We want to have a little blur to it, because that's typically what shadows are. Someone had a five, and then I'm going to come in here and added three for the why. And now when you come into the color, now the color, I'm going to adjust. Right now, it's a really dark. It's really black, so I'm gonna go ahead and just that to be a little bit lighter. I want the shadow just to be a really light effect, and so, by adjusting the lightness of the shadow, it makes it so. It's not such a harsh shadow there. Now I can come in here, and I can adjust some of the filter effects now in any of these types of effects. Keep in mind that once we get into the animation section of hype, you can animate thes these different elements so you can animate a shadow moving across. If you wanted to simulate a son, and as the sun moves, the shadows of the different objects move as well. Well, you can animate that with hype. Same thing with these filters. If you wanted to animate the blur if you wanted to animate the sepia, the saturation, the hue, brightness, contrast. Those were all different properties that you can enemy inside of tumult type. And so that's just one thing to keep in mind when you're adjusting this stuff you wanted to animate, inanimate out like the opacity. Um, that's what's going to these different elements is what you're animating. Okay, so I can adjust. These different items will play with those later. But if I get totally out of control and I mess up everything as I'm trying to affect this while instead of trying to remember what the difference default elements where I could just click on reset filters to defaults and that will go back to the default filter itself and then we have a couple different other items The next section is the reflection which allows us to add on a reflection of any object that we have selected. I can do the depth and then I can do the offset. Ah, how far away is the actual reflection? So if you wanted to make it look like it was on a certain surface, and then that surface was reflective and you wanted to. And the reflection on there tumult type allows you to do that, which again, also, you can animate the reflection so you can have that enemy in animate out and do different things like that some. All right, so that's shapes. Know everything that we've talked about with rectangles and rounded directing our applies to rounded rectangles. Everything that we talked about also applies to the Ellipse Tal. Now the Ellipse tool does not give us the option. The only thing that's different does not give us the option to adjust the radius because that's the circle injustices on the amount of radius that it is. So now. If I wanted to adjust the shapes, I can go ahead and just stretch out on the handle bars, and I could make this as far as wide and as high as I can go, Um, and then I can also, if I wanted to keep the proportions of it, I just hold down the shift button and then grab one of the corners and just dragged that out. Now, as soon as I've done that, now it resize is it in proportion and keeps its, Ah, on my keeps a proportional, basically, no matter what size it is, and I can make it exactly the exact size that I want something with the Ellipse. If I wanted to grab that and make that a little bit bigger, I could do that as well. Now you can do these types of shapes. You can hang some of them off. You can manipulate them so you can get the type of shape that you want. Keep that in mind and also keep in mind like I mentioned before that the more shapes you use and the less images that you're bringing in, the smaller the file size will be. That's one of the benefits of trying to use shapes I, instead of bringing in your own images for everything there. So but we still have all the other elements. When it comes to lips, stools and rounded rectangles, it basically allows us to keep all of that pretty much the same. They're all right. So that's how you create shapes inside of tamal, type 8. 08 Arranging Items: all right. So when you have these different shapes on your stage and you want to rearrange them, there's a couple different options that you can do inside of tumult type. The first option is by selecting these different elements. Let's go ahead in Nestle just so we can tell the difference here. I'm gonna change the color, change this circle to read. I want to change this rounded rectangle to a little bit of a green, and we'll keep the rectangle behind it, the same shape. So okay, so you can see that the red circle is in front of everything else and we have the green rounded rectangle that's in the middle, and then we have the large rectangle that's behind everything else. So if I wanted to bring that round or that's a rectangle, the large rectangle in front of everything now there's a shortcuts that I can actually take without having to come down to the timeline and drag that above everything. I can do that if you wanted to. However, up on the top there is this front button, and that from Button will take whatever object that you have selected and bring it to the front automatically. So by selecting that it's brought it in front of the circle. It's brought in front of the rounded rectangle, and now that's on the top of the timeline. So on the timeline here we have that rectangle up on top there. Now, the same thing with bringing it to the back is you can actually see what that object selected. You can just hit back there, and we'll take it all the way to the back behind every object. So if you have a time line that's pretty big and you have multiple different layers. Well, using these buttons, if you wanted to take one element that you wanted to bring it to the front, edit it and then bring take it to the back. This is a great option for you to be able t Just rearrange those different items. Now there's not just a bring forward. Once spring forward, another one and everything like that is just those two buttons will just bring it forward all the way or bring it back all the way. If you wanted to just do one layer at a time, though, that's where just coming down to the timeline itself and dragging and repositioning that. You just take this and move it. We arrange it in that order wherever I wanted to. There that works out a little bit better, but that's how you arrange your whatever element it is if it's an image. If it's a video of its audio files, that's how you arrange your timeline, bringing stuff to the front, taking stuff to the back or just rearranging it certain layers at a time. 9. 09 Grouping: all right. So if I have different objects that I want to group together in order to move those objects or hide those objects all at one of the time so I don't have to go through ah, button that has multiple layers and individually hide. If I wanted to just focus on one element, I want to individually hide those. They can just take that group, and then I can hide it from there without having to create a symbol. Now, symbol is another way of doing it. But a symbol just creates a completely new timeline. I don't want to do that with this. I just want to actually go in and group certain elements together. So I'm gonna come in here and select different items on the stage. So I want to select my rounded rectangle and I'm gonna come in here, and it's like the large rectangle, and then I'm gonna come up and click on Group. Now it will take those different elements that I have selected inside of my timeline, and it will put it in the side of a folder. Now I can double click on that folder, and I can change just to whatever I want. So let's say this is the background and I'm gonna have that background here and now I can then take the little twirly thing on the side of the menu or inside of the folder, and I could select that. And then it will twirl everything down so I can still see all the different elements inside of here. But it at least allows me to rearrange the background just by dragging and dropping that one element. And it has all the stuff that's in that group. So those are the different elements. If I wanted to, I can also come in here and I can take other things. If I wanted to add it inside of a group later, I can grab this like this ellipse shape. If I wanted to add this inside of the background, let me just grab that, hover over in the background and then let go. And now that Ellipse tool is now within the group. If I wanted to then UN group stuff. If I decide OK, this isn't working. Let's go ahead and on group and have the different elements showing why can select that background layer come up to the top and then click on on group. And then we'll just basically take that folder on, Take all the elements in that folder and then un group a mall, and now you can use him inside of our. Now they're all just separate layers inside of your tumult type project here. So that's how you take out different elements and you group, um, not putting them inside of symbols, but how you group and then how you add other stuff to the group and then how you undo the group at a later time. 10. 10 Working With Text: All right, So now we're gonna be talking about We talked about how to build shapes, how to use rectangles, rounded rectangles and how to use your lips. Had a group those arrange them and different things like that. Now, the grouping in arranging applies to all the different elements that you may use on the stage. So if you're using text, if you're using video, if you use an audio or anything like that, all of that will apply, and it will be the same. Now we're going to be talking about next, how to use text or and then we're gonna talk about audio and video and different things like that. So So let's go ahead and first focus on text on how to insert text, how to use text on how to update text. So I want to come into the elements section. I'm gonna go ahead and click on Miss Drop down box and then select the text, and this will add a text element to my stage and really all from here. All they have to do is just start typing. So I'm gonna just insert some text. This is some sample text, and it will automatically just take that text. Whatever you start typing and will stretch it out to the length of the text. Now if I wanted to If I come into text in the nice um, I wanted to stretch out a certain area of that text. I can do that as well. Now the difference between just letting it auto fill itself and taking that with is now the I come in here or taking the with and automatically sizing it to that. Now when I come in here and I start typing it automatically resize once I hit, enter to that size there so the auto size will just as you start typing. That's the with of the actual size. If you specify the size of the rectangle before you start typing or the square, whatever it is and of your text, then it will only take that size. And then it may as you're typing, that may look like it's taken longer, but as soon as you enter, then it will just basically take that and take it to the next line as well. So I'm gonna go ahead and delete that for now. But as I was typing. There is also something else that came up. If I come in here, we just get rid of that Texan at a new text here. This is some sample text, and as I was typing here, you'll notice. Right below this text is a little pencil. Now that pencil, if I click on, will pop open a little pop, a little pop open window and it looks pretty much the same has the same text. So you're wondering why What's the difference there? Why don't I just type it on the stage? Well, the difference is, with this little pop up window, you can actually insert HTML tags inside of here, and that will use the attack. So if I wanted to tag or bold, for example, this is, let's say we wanted to add that instead of strong tags, I'm gonna go ahead and just type in a strong tax before this and then type in at the end of it. We're gonna go ahead and close out the strong tag and you'll notice now on the text. It's a little bit harder to see on the screen, but it says this is in bolt now. It can come in here and let's just add a little break. So I'm gonna add up br slash and then I'm gonna end that and you notice that automatically even know inside of this little pop up window, it made no difference. But instead of the actual text itself, the rendering it brought that added a break. And so it brought that line. Um, that between the anything after that break the br, it brought it to the next line. And so now it actually has that inside here, you can add your own HTML tags and build your own HD or use your own HTML tags inside it symbol type. That is a huge and nice feature to be able to do that so you can style I certain elements. If you just wanted certain text to be certain color. She wanted certain tax to be bold. You can do that inside of here Now you can also come in by selecting the text. Here, you can come into the typography, Inspector, the typography inspector allows you to change different elements about the text. So if you did want to come in here and bold and just certain elements if you're not comfortable with HTML. Um and you are comfortable with just just changing the inspector window. They're right. Most people are Well, you can just select the different items of the text, and you can come over here and click bold italic, underline and do different things. But what you can't dio is you can't add on like, um, on order list so you can have, like, a bulleted list item like normal html. When you do that, you are you l tag, um, or Ally Tag or anything like that. You can't do that Or this Ah, whole br tag that we had an, um you couldn't do that inside of, um, inside of just the inspector. So that's where the benefit of being able to edit HTML comes into play because you can do that instead of the little pop up window you Kansteiner allies inside by selecting tax and coming over to the typography inspector. But you can't add on other HTML tax. They're some of the other elements that you can edit inside of the typography, Inspector is Thea Font family. So I can come in here can change the font family, whatever option that I have selected here like we learned before. If you wanted to add your own fonts, you would actually have to come into the resource, come down to the plus icon, go down to font. And once you've added the fonts, it should show up in this window here. But I can adjust the size I can enter in a specific size of the funds that I wanted. I can also just come in here and select a size there. Or I could just come in here and just select this little slider, and that will just basically just drag it up and make it bigger as you drag up or make it smaller as you drag down. So then I could come in here, do your italics. You can also come in the color. Here's the add more fonts where it can come in and it allows me Teoh, that's Ah, hit Cancel for now, and we're gonna come in here and click on Add more funds and now it's has me add my own customer. I could go through Google fonts. I can add any type of Google font, or I can click on custom CSS. Now there's a lot of different fonts on Google funds. Or if there's fonts that year company uses that are specific funds, you can probably find something that similar on Google fonts and then bring that in there. And if I click on let's come in here and and this one right here. And if I click on Add Funt, then that font has now been added. And so I can't remember where I think is this one or hear this Martel. And so that's the one that I just added. It's now in my selection here. If I come into my resource is there it is right there. My font has been added to my project, and some I can use it as part of the selection there. That's how you had custom fonts there. Or you can also come in and under the drop down box at Custom CSS, And this allows you to attach the CSS for any other fonts. That's a very specific fonts that you want to use in bed. HTML. You can do with that are embedded head html to insert that, and that's how you add your own custom fund. Now you could do the alignments, you can switch the alignments from left aligned to just center. You can also do left. You are right, justified or block justified as well. If you want to time the block of text, you can also do letter spacing you. Let's say you wanted spacing between the different letters, and that's the different letters of the words, not just the words themselves. You can also add words spacing, so there's gonna be more spacing between the words, and you can also add the line height. How much height is there between the line above it between compared to the line below it? You can adjust that as well. Now that comes in handy. If you're adjusting Thea size of the button, you may need to position the actual text label of the button. We'll talk about that once we get into buttons. We need to may need to adjust that and change that with your button as well. And then, just like we did with our Elements panel, where we were able to adjust the shadow of the different objects that we had selected, we can add a shadow to our stuff to our letters as well. So I can do that by clicking this little circle icon and dragging that over. Um, I can also adjust the blur. I can adjust the color if I wanted to have little contrast to the color, um, and and adjust that now if I don't want there to be a shadow and just take this back to zero all those different elements back to zero and that shadow has been removed. But that's how you add text, um, and inserted inside of your project. Now, with that text selected, you can then animate the text. You can fade it in. You can move it over if you wanted bullet points to flying at certain times. You can do that as well and said that all those elements that apply to shapes and apply to images will also apply to text. And so you just have toe do that once we get into the animation section. But that's how for now how you edit your text, how you change some of the HTML, some of the different elements, how you add your own custom fonts and everything inside of tumult, type 11. 11 Buttons: all right. Next, we're gonna be talking about how to work with buttons inside a hype. Now you can bring in your own images if you wanted to, but in used ism as buttons and add on actions and different things like that. But hype does have some default buttons that have hover states and down states and everything. So if you come into the elements, panels select on the elements that come down to button. This will add the button inside of inside of your stage area. Now you can see there's just like the text. There is a pencil like on. If I select that pencil icon, I could actually format that button in any way that I wants the text label within that button just by double clicking on that and I can add on my own HTML tags, just like we did with our text. But if I have this selected, you'll notice something that's a little bit different than what we saw with their text is we have 100 state oppressed eight and then we have a normal state. Now, with those different items selected, I can change the colors and I can change the different elements about whatever I'm in those different states, and that will then show whenever I'm hovering and over or whenever I'm pressing. Now, when you're on the mobile, I like if you're on an iPad or if you're on Android or anything like that. Ah, the hover won't show. The hover will basically just not even be visible. At that point, only the pressed will actually show once you've pressed it. So it's important that you update all three of those different states for the hover and the press and the gifts, the users, some type of indication that something's been selected. So I'm gonna come in here under the normal state. I'm gonna change those different two different elements that we talked about already. One element of the first element was just the elements inspector, which was allows us to change the colors of shapes and the borders and different things like that. Well, that's the same with a button is basically we're working with combined ah combined shape, a rectangle and a combined text elements, and you can change within the inspector. You could change the elements, inspector, and you can change the typography inspector information to update and make the button pretty much. Look, however you want it to look so I want to come into the Elements section first of all, when it's like the drop down color and that's gonna go ahead and just changes to a green color and I'm gonna come in just like we learned with their shapes. I'm gonna actually remove the border. I don't want the border to be there. I want to take the width of the border just up. Take it down to zero now. It could also just take this style if I wanted to have a style, whereas solid double or anything like that, I could change that to none Both ways work if you want to just hit the down arrow for zero or select the drop down box and select none either way works. So I want to come into the typography and I like I like whites on the the color background . So I'm gonna go ahead and actually change the background where the typography to be a white label. And so with that white label now I can come in actually looks a little blurry for my view. But, um we'll keep it like that for now. But if I click on the hover State, you'll notice that anything that I just changed in the normal state also passes over to the hover and the press date. What I need to do is they need to differentiate, differentiate what is going to be different with the however state what is going to be different with the press state. So with the hover states selected, I'm gonna come back to my l It's elements panel. I would actually change the color here. I'm just gonna make it a little bit darker. And so that way, when it's actually hovered, you can see it's a little bit darker, and when pressed, I'm actually going to do the same or actually making even slightly darker than that. So when you come into the pressed section, changed on the color or select the color and then just make it even darker than what it was inside of the hover. Now, if I go back and I check my hover, you can see that the hover state is still there is the same color that I just selected about. My normal state is the same color than I did before. So again, anything that you change instead of the normal state will just cascade into the hovered in the press just in case. But if you wanted to have a different hovered, impressed item while you can go into the hovered, you can change, go into the press and change the difference elements in the elements, inspector. Or you can go in and change the different elements inside on the typography. And if you want in the text to change, let's say one that when it's hovered, I want the text to be in a little bit bold. So I'm gonna come into the hover and I'm gonna come in and stylized the bolt. And so now hover the text gets a little bit bold. But if I come back in here, the text is not bold. So it's basically allows me to differentiate whatever I want there. Now, if I come in here and I insert, uh, if I wanted to insert some more text, I can come in here and just change the label and then have the text beyond. I can even have the checks change when I hover. Um, whatever you wanted to do there. So that's how you come in and add a button and said, Change the different elements in the button. But I can also do the same thing with my textured button. The only difference with my texture button is I can come in here and instead of a regular color. It's actually a Grady in color. And so now I can change the different elements. Ah, the Grady INTs inside of my button here. So when a change the first color to kind of a lighter green second color to a slightly darker green. And now I'm gonna change also the 10 the typography to, ah, white label. And so let's get rid of the border. We have a border on there, so when you change the width to zero and there we go. So now I can come over to the hover state And let's just take on both of these elements of the Harbour State on the lighter. What? I'm just going to take that a little bit darker and darker. One. I'm just gonna do even a little bit darker than that. And there we go. So now if I come over here my hover and my pressed There is a slight difference. I probably need to make it a little bit more drastic, but there is a slight difference with my hover and my press there. Now let's say I wanted a very specific shape or less. I wanted an image and I wanted that said to have different hover and press states as well. Well, with an object selected. We haven't talked about images yet, but with a knob, it object selected. I can actually come into here, and I can come to the edit menu and go down to show button controls. When I click on this show button controls, it will pop open with my normal, my hover and my press state with this shape. So it's not exactly a button, but it is. It does still have a hovered and oppress state that I can enable, and then it can come in here and change the different elements about the shape to enable the hover and to enable the press on any shape that I want, or any image that I want as well. I can also come in here, and if I'm not seeing the HTML elements I can come into the edit and I can click on, um at it elements inner HTML and that papa box that we saw before with the labels and what the text now pops up on the texture so I can actually come in here and on my shape, I can insert text into that shape. So that means that I can basically add on HTML tags, and I can add on other elements. I can even do an eye frame or any type of embed code or anything like that inside of this HTML, and you can do this with any object on the stage. You can edit the HC male within their and again that's by going into the edits and then going into either ah, show button controls or hide button controls or going into the edit elements in our HTML and allows you to get those two items that we've worked with already with both the button and with the text. So that's how you insert both the regular button and the textured button and how you take a pretty much any shape and convert it into a button inside a tumult type 12. 12 Images: all right, We've talked about shapes. We've talked about being able to insert buttons and text and everything in the side of tumult type. But we haven't talked about actually had a work with different images that you've built outside, like in photo shopper, Adobe Illustrator or something like that. So in this one, we're going to be talking about that, how to bring in an image. And that's in the same elements section that we've been working with. We're gonna come into the elements, were going to select the drop down box, and then I'm gonna come in and select image here. Now all they have to do is go browse for that image. I can just come in here and on my desktop. I have Ah, thumbnail here. I'm just gonna select open. And you could see that that has been brought in on my stage area. Now, with that selected, I can then come in here and just slide it over to where I wanted to be. This is a J peg. I can bring in John gifts. I can bring in PNG files different image files, and I want to. Now from here, I can come in and change the different elements you'll notice in the image background it's actually set. It's It's like a shape. But instead of the fill style being as a color or ingredients, it's actually just a image. And then we have a different option to scale. To fit repeats, repeat vertically or repeat horizontally. If I wanted to have a pattern or some type of background like you normally do inside, HTML were just kind of scale to fit. So what actually fits inside of my stage area? And so and then it's not repeating and what that object selected if I wanted to swap it out at any given time, I can click on Choose, and then I can come in here and let's say, Let's say I haven't updated J Peg or updated PNG. I can come in there, select that object and swap it out as well. I can also adjust the borders opacity if I come down to opacity, adjust the shadow, the blur and everything. Same thing you did with the difference shapes that says the same elements there. Now the other nice thing is, I could work with SPG. Snow. SPG is if you're known on The difference between J Pegs, P and G's is when you take a J peg and PNG and you stretch it out, you're actually gonna get some pixel ization. If the image was made very small and you start to stretch it out, you're gonna get some pixel ization. It's gonna look blurry. It's gonna look distorted or anything like that. Now, with SPG es, you can actually take that and make it as large as you want or a small as you want. And you're not gonna get any type of distort ation. So if you're working with Illustrator, you can save it. As as SPG es. If you're working with photo shop, it takes a little bit different or a little bit different approach to work with S. P. G's there. But I'm gonna come in here and I'm going to click on the Elements panel, go into image and then come in into the shape. SPG is the file that I have on my desktop, and I'm gonna go ahead and click on open. Now there's my shape, and what I can dio with the SPG is I could make that shape really large and you can see that there's no pixel ization whatsoever. And that's the nice thing about ah, saving your files. If you're working with Illustrator highly recommending saving his S P G's if you're gonna animate those things inanimate amount, it does take a little bit more file size. So if you're if you're not gonna be animating growing them, making them smaller, anything like that, then just saving the mess P and G's or J packs will be just fine there. But keep in mind that anything that you do any type of J. Peg or A P and G you want to take use the same practices as normal Web development, so you want to make sure that you save them for the Web. You say, optimize them as much as possible. And so there This file size is a lot smaller because anything, any image like that if it's a really large image and you bring it and set it symbol type well, that's gonna make your high project even that much bigger. So you want to make it small file size as small as possible, and you do that typically within Photoshop or illustrator or something like that, um And then bring it inside of tumult type. And then if I come into resource is I then have my You can see right here I has my spg there. I have my J peg. Um, And then I also have the option to do reference or a reference retina files as well. If I wanted to have a retina display. So if I'm working on iPad or iPhone and I want to get a little bit sharper display, I can do that as well. But also keep in mind that that ups your file size for your entire Web project there. But if I come in here and I don't have a retina one yet and I wanted to add a retina well, with this thumbnail selected, I can come into the retina at times, too, and I can come in and add source file. And that's where I would add the source for this thumb. Now, Now this thumbnails already large the I'm not sure what's even named thumb now, honestly, um, but it's already large to begin with, so I don't really need a retina one. But if I wanted to have different elements when it's on a retina display. It automatically knows to pull in that and some. Then I'm just adding the source there. And there we go. Now that has it looks crisper, cleaner on an iPhone or iPad or very large resolution. Ah, computer. So there you go. That's how you insert images, how you answer SPG es how you swap him out. You can also come in here and select on the object you can select. This were, says remove. When no longer reference will remove the object to help speed up your code, it's gonna pre load that image. And so, before the interaction, our animation even starts to play until preloaded and may take a little bit longer toe load . Um, and then it also automatically optimized when exporting. So if you wanted to optimize, But if you find that wind it's optimized, it will. Actually, you don't like the distortion that you're getting with it. Will you just simply uncheck that here and then any time you can replace an image without affecting anything that I've done on my animation? So let's say I've used this and I've animated everything's own place, and I'm like, Oh darn it. I need to update that image without affecting that image there. I could just come in here and replace ah, upload a new image, and then it's actually going to update that Well, I did it on the wrong shape. I did it on the SPG shape instead. When a select here, click on replace Go Thumbnail here and then you could see it flashed for a second because updated the image wherever it was used throughout the project. And that's all I had to do. Was just going there, replace it there. Um, now within my one other thing toe reference inside of my resource is, is I can also come in here and have filter this out if I wanted to look just for images. If I wanted to look for just videos, audio files, functions, fonts, anything like that, I can do that just by coming in here or just if my resource is become really large, I could just start typing in the Minch, find that image and then replace it from there. So that's how you work with images. SPG files P and G's gifts, J. Paige's or anything like that Inside it. Small type 13. 13 Audio: We worked with images. We worked with the shapes we've worked with text. Now let's go into the audio file and then next we'll talk about video. So in order to answer audio inside of your temple type project, you just come into the elements. PanAm come down to audio, and then, with that audio selected, I can then find the audio on my desktop, which I have a sample file here Azaz audio dot mp three. I'm gonna click on open and said that automatically traits a button for me. Now that audio button will then converts that audio into or actually not convert. But in order to play the audio, if you wanted to make sure that it plays on all devices, you can see that here it's placed. Inside of my resource is Folder, an audio folder that has a reference to the audio dot MP three. Well, there's a couple other things again to in order to play on on multiple different devices that I would probably want to convert or fire or convert the audio file into a dot org or dot whv away file. And so you can do like Adobe Edge or sorry adobe audition. And to convert that over you can also dio audacity and export that out to the different elements to the Ogi file or the way file. And then once you've done that in order to, you know, to not disrupt the project because right now I don't have to have those files. Now, I can actually work with those that can, um, insert them and use the audio whenever I want in order to, But in order to before, I'd want to do this before I publish this out in order to have it, make sure that works on all devices. Well, I'd want to make sure that it come into here and on my resource is select the audio slash o g and then come into ad source and then go find that Ogi file that way. It knows that it's the same audio file, but it's the Ogi version or is the same audiophile in its the w version, the way version. But I don't have to have those for development as of yet. I just want to make sure that I get those before I publish amount. Now, once the audio is actually in place it automatically creates a button because the audio needs something to be able to trigger. So I'm gonna come in here and so come into my actions. We haven't talked about this yet, but right now it is theatrics in is set to play sound. And that sound is going to be the audio file. And I can also this is a spot where I can link my MP three version my O G. A version, or my wave version if I wanted to. Same spot. And if I don't do that, you see these warnings that says OK, Firefox 3.64 point 5.0 and above a nog or wave audio sources required for playback. So since those warnings are, I can neither have a nog or away file my Disney neither one. So if I have a way filed, then I could just link that. And then that warning will probably go away after that. At that point, if I wanted this to ah, play automatically, I can come in here and in my scene, Inspector, which is the scene? Um, the initial scene. When I come into this page, why can come into on scene load and select the drop down box and then come down to play sound. And if I select the from this drop down box, what the sound I want to play by, select the audio file there. Then it will select the It'll start playing the sound without the person actually having a trigger. That button. If I have an image, let's say, Let me go ahead and just insert my image here. I'm just gonna bring that image back the random image and I come in here and insert 12 disco file image. The insert that image here and then I can come into the actions, come down to mouse, click, select the drop down box to play sound and then select that and say, OK, there's the audio file. It's gonna play that sound. Ah, when the person clicks on the image, so it's not specifically that you can't play, just have audio play. It's just you have to specify when the audio is being played. However, we still have a warning with seen load. You'll notice the drop down box. There is one more warning that's ah, not specific to having the Ogi format or away format, it says right here. Android 2.3 and certain IOS um, elements that will actually pretty much all the IOS elements cannot auto play audio on mobile devices unless it's, ah, home screen Web app. So if it's a home stream web up, it will auto play. However, IOS needs or even some versions of Android need the user to initiate the sound or initiate something, and then the sound complain. After that, whether that's ah begin button where you'll typically see on different games or interactions. Ah, begin button when they click on begin After that, then you're OK to initiate different sounds and use different elements. It's just there needs to be some type of user input in order to allow you to do that. And I think that's a Napoli restriction that they want three User to not just have this this these all these audio files is playing randomly. They want the user to engage in the audio file the same thing with video you can't have on IOS devices video just automatically playing their user needs to engage with it, and they need to press the play button and in order for it to start playing. So that's how you actually get in here and insert audio and how you use audio on different triggers, whether it be the scene load to automatically start playing. And again, I probably wouldn't want to do that on IOS, but that's how you would want to do that if you're just targeting desktops or anything like that, but also how you add on the audio to start playing on Ah Preston image or anything else like that. That's how you work with audio. 14. 14 Video: next, we're gonna be talking about how to insert video inside of your project. So I'm gonna come up to the elements section, come down to video, and when I come down to video, I have to, um, find my video, which right now I have this Monty Python killer bunny video just as this sample gonna click on open here and that's gonna insert the video inside of my project. Now, down at the bottom, you'll notice that there is a video track. If I go into my properties, I have to make sure that it's selected. I'm gonna stretched out this property section and you notice I can actually see the different elements of that video here. Now, that's nice, because then I can trigger or insert timeline elements toe happen at certain point to the video. But for now, right now, by default, I don't have We haven't talked about those triggers yet, so I'm not gonna worry about that. But that's just something to keep in mind. Now, with this Elements panel selected, um, I want to come in here and actually you'll notice couple different elements with this elements panel selected. The first thing is the video itself gives me a little warning. Here, A says mobile safari auto. Um, auto plays ignored, so won't auto play. And then it tells me the on fire Fox video sources required for playback. So actually need this Oh, gv file or this w this Web m file. So just like the audio, I actually need to make sure that have the three different formats for the different browsers in order to make sure that I take my project works in all browsers. I didn't make sure those formats are correct are formatted in the correct format in order for me to work with inside of tumult type. Now, Adobe Media encoder allows you to encode video so I can take this. And before that, I have go into adobe media encoder and then converted into the right formats in order to use it inside of here. And then I have a couple difference that controls down here. I have this auto play, but again IOS will ignore that. And then we'll show a play buttons. They actually have to hit play If I wanted to show the controls or not. If I want the user to be able to control it. I can do that. I wanted to be muted by default. Seiken just select muted. And if I wanted to loop once it gets to the end of the video, does it return back to the beginning of the video and start over? I can do that as well. So if I wanted this to be, ah, kind of a looping video and I wanted to be muted in the background, we'll just take that video, stretch it out to the full stage area here and now. I could just have this looping, and it's gonna have kind of your animated video going in the background like you've seen on some Web banners there. That's one way of doing it there. But I'm gonna come back. Bring this back into the controls here. And one thing gonna you're gonna notice here is if I preview this in different devices, is it depends the controls depend on the device or the browser that you're actually using. So and, um, the device to So if you're using an iPad, it's going to use the default controls that you see on an iPad and iPhone. Same thing with mandroid it's going to use the default player controls for that same thing was far. It's going to use the default controls with that. So if I come in here, click play here, you'll notice there's the default controls and I have go back 30 seconds. I also have that going to full screen so it can go into full screen. And I can also make sure that this adjust to auto play as well. So that's how I go in here and just adjust different elements in my video selecting the different objects here and some I can go in and some have auto play. I can have it control, show the controls. I can have a muted. I can have a loop in different things, but that's the basics of using video inside it to multi pichon also come in here, um, enemy in the opacity. I can also animates Ah, the video I can have a fly in if I wanted Teoh animate it in animated out. So a lot of different elements, the same elements that you use with normal shapes and difference. A text files and everything like that will still work on side of video and audio files, while not audio but buttons that have audio files attached to it. So that's how you work with video inside its Immel type. 15. 15 HTML Widget: the last element thing that we're going to be talking about inside of tumult type is the embed herbal html widget. So I'm gonna come into the Elements section. I want to go down to HTML widget. What that will do you'll notice on the label here, says html widget in Humo Wedge A is used to display embedded HTML in your scene or embedded in my frame of a different Web object so pretty much it just gives us the ability to add whatever code we want. So up on the in the elements, Inspector, we have this HTML widget. I can click on this edit code snippet, and if I click on the add a code snippet now, this should be familiar. This is what we're working with before, where we can actually type in whatever code we want. Html code Now. Typically, we were doing just different text files or different text elements, but I could really just put in one of her tags that once inside here just keep in mind. It's just something that, um, whatever code that you're actually working with, you just have to make sure if you're referencing different objects, you reference it in the right correct spot and everything. So so we can either edit the HTML right inside of there, or we can actually come in here and inside of the elements. Inspector weaken. Just a specify u R L that we want to use that on embed and I frame code inside of there, so that's pretty much it with the HTML widget is you can insert other HTML. You can link to websites or ah, bringing other elements like that, or you can answer in your own HTML. Add in your own eye frame or anything like that inside of ah to mull type. Now the one nice thing about that is, if you're just specified in a certain area to be that HTML like a Google Maps or something like that, you can then animate in those maps at certain times, and you can have those only at certain pages and everything. But that's how you use the HTML widget. Inside of tumult, type 16. 16 Symbols: All right. So the next thing we're gonna be talking about is symbols inside it. Small type. Now, symbols are really nice feature because it allows you to have nested animations. If you want to have certain elements. Let's say you're using your timeline to jump to different points. But you wanted have elements that are independent of your timeline and are still can continuously animating even if you stopped your timeline. Basically on. We saw that the very beginning when I was showing the different examples of the map and you saw the map just kind of staying in one spot. But then you saw the different elements, like the carousel or the train that kept looping over and over. Those were all nested timelines inside of the hype animation thing here. So now I'm just gonna I like to think, keep things basic. I'm not actually gonna build out something very complex here. And so you're wondering, OK, how did I even get to that spot to begin with? I just like to keep things with different shapes and different elements really basic. So we learned the core concept, and then in other tutorials or other courses or something like that after the basics, after you know how to do just with normal shapes, then we can get into the more complex stuff, like, Okay, how do I build this specific thing knowing that the basics that I've already know, how doe eyed, Then take that and then implement into different areas and stuff so we'll get into that is just again. My style is to just keep with the basics, keep with basic shapes. So you're not wondering how even got to a certain point or anything once I've set up a sample file or something like that? All right, so we're gonna come in here and click on new symbol. You have two different options. You can just click create a completely new symbol, or you can create a shape that's going to become a symbol. So I'm gonna come into a rectangle, and I'm just gonna with that says, rectangle selected, going to select that symbol on, says new symbol from selection. So if I had multiple items that are going to be animating within that symbol, I may want to select all those items and then come into new symbol from selection. Well, I'm gonna click on new symbol from selection here, and it really hasn't changed much. You'll notice instead of rectangle down at the timeline. It now says symbol, get rid of my HTML widget there. But it just says symbol and I could name that whatever I want. However, when you're wanting to and we're still were working with the main timeline in the main area , not in any symbol whatsoever. If I wanted to come into that symbol and then work with that timeline, I can do that as well. But in order to get that concept, I'm going to first of all, animates and we haven't talked about animation yet, but we're gonna do just a quick enemy anyone to come in here and just animates. So I'm gonna set this off at a current position, and then I'm going to animates. I clicked on this red record button. Now that's gonna record any movement that I did. Now I wiggled this object just to register that this is the initial state of the button or sorry of the rectangle, and I'm gonna move my cursor or this timeline over to one second, and then I can stretch this over Teoh animate to the right hand side so you'll notice one thing and again we'll go into depth with the animation. But you'll notice this blue line that gets created that is theano mation on the main timeline. We're not working within any symbol whatsoever. Now, if I wanted to go into this symbol and animate something within that symbol that's independent of the timeline that I just created while I could go into let me just make sure I'm gonna hit stop record first of all, but I'm gonna go into this symbol to go into the symbol you have to double click on the object that the symbol itself. So I'm gonna select this a symbol and you'll notice. Now I have this purple line that shows up on my timeline. This actually gives me some bread crumbs to let me know where I'm at because you can have a symbol within a symbol within a symbol, and you can get us deep. Is you want basically, and this again allows you to just keep track about now because I went into this symbol with the rectangle, um, it does not have anything that I just did on the main timeline because this is independent of what we just did on the Maine time. Like now I can create my own animations at this point that will continuously loop over and over even though the main timeline stops. So I'm gonna come in here, click on the record button and someone to move. I'm gonna actually stretch out here. We just take this rotation and I'm gonna come over to my elements property, and I'm and then going to come over to my rotation. Think my rotation action. My rotation is in my metrics, Inspector. I'm gonna come into my rotation, and I'm just gonna up that rotation to be something like, Let's say ah 3 60 Well, that's make this actually, uh, to 73. Looks like we're on and get a little closer to 72. Probably to 70. There we go. I just wanted to keep it in the same boundary boxes what we had before. And, um, now, actually, we need to start this one out of zero. Apologize. I need to move my timeline. Remember, we're gonna talk about this, and once we get into the animation section where you need to move your timeline toe one second or however long you want. And now we can go ahead and take this around one time completely. And let's just do a whole 3 60 there, there we go. So basically just flipped over one time, all the way to 360 degrees and some That's it. So but we need to do One more thing is we need to loop the animation toe loop, the animation we actually need to add a trigger. And just by clicking on the plus icon inside of the diamond, we can then go into action and then we can go to Let's come down to start timeline and we're gonna go to Main timeline. So inside. And we haven't talked about timelines multiple timelines yet. But inside of each mean timeline or even symbol, you have different timelines. You can come in here and you can see it. Right now. I just have a main timeline, and that main timeline is going to just run through once by default. But what I want to do is I want a loop it back to run through again. So but everything I'm doing here is just within this symbol on. So I'm looping just the animation, which is the rotation in here and so that the main timeline should not be affected whatsoever. Okay, so one thing that we have failed to do so far, if I hate preview is that nested timeline does not automatically play well, how do I get it to start plane? So one thing I need to do is actually on my main timeline or my main layer itself. I need to come in here and select that symbol. And then I need to come down to the properties and under symbol actions. I need to actually click on this plus icon and then and pops open with this symbol action. And then I select the drop down box to start timeline. Well, it's going to specify which timeline on, but I'm gonna have multiple timelines here. And when the name it's the one that's on there just by default is main timeline. So I'm gonna make sure that that's selected, and that's pretty much it because I'm talking to the symbol timeline. I'm not talking about to the overall project timeline. I'm just talking to the symbol timeline, so I want to go a hit and hit preview now and you'll notice that the timeline, the main timeline that we have stopped because we're not looping that one, but the rotation, one word looping over and over and over and over. It's going to continue to animate, and that way we have basically the main timeline. Stopping and independent of that timeline is another timeline that's continuing to loop over and over and over and over like that. So that's the beauty of symbols. Now, one other differences, persistent symbols that allows you to take that symbol and pretty much having a crossed any new scene that you actually create. We're gonna be talking about that in the next video. 17. 17 Persistent Symbols: in the last video, we talked about symbols. In this video, we're gonna be talking about persistent symbols. Now. The difference is pretty much it's the same thing. You can still have, um, functional animations. You can have timelines independent of each other. And so, even if your timeline itself is being, your timeline itself is actually being ran on the meantime line and you have another timeline that's being looped over and over. Oh, that's the same. The only difference with persistent symbols is the fact that it goes across all scenes. So if I come in here and in my scene section, let's go ahead and just add a new scene. By clicking on this plus icon, it's gonna add a completely new scene. I'm gonna come back into seeing one, and let's say I have a background that's gonna be similar, grassed all the difference objects. We may think OK can come in here, select the create a rectangle hair and just stretch out that item. And now that's gonna be my background. Well, I'm gonna come into the elements panel, change that to read, and there we go. Now. If I wanted to have this go across all of the different scenes. Well, I would just have to copy that and paste it into every scene that could become a nightmare . And you'd have to spend a lot of time on that. Um, if you wanted to basically just in one fell swoop, have that across all your different scenes will make a persistent symbol. So I'm gonna come in here and under symbol. I'm gonna go click, make new, persistent symbol from selection, which I have the rectangle selected. And it's going Teoh, give me the option to see added to current seen or added toe all scenes. Well, let's go ahead and add it to all scenes and you'll notice automatically and seen to it now has that persistent symbol there. I don't have to create. I don't have to do anything. So if I create a new scene, it's gonna have that persistent symbol there again. And so that's the nice thing is I can still come in here to that timeline or that symbol, create on whatever animations I want. It can have an animated background having different objects going through like like we saw in that map. You have the care sell. You had the different elements animating independently of the actual main timeline. You can do that here, too, but then any project or any scene that you creates that has different objects flying in or flying out has that same background symbol really useful, extremely useful feature that you have inside. It's a mole type that I have not seen another, um, projects or other files are applications like this itself. Okay, so But if you wanted to on specific scenes, hide this persistent symbol, well, you have it in your timeline. Still, so you could just click on the, um, eyeball, and that would actually hide it from your timeline. So it's not inside of your main time or that time line, but it's an every single other timeline, even if I create more timelines. The new timelines have that symbol, but the other on that specific scene is hidden there now. Any changes? The one of the nice things about symbols or persistent symbols? Is it pretty much any changes that you make in one area will go across the board. So if I come in here and under this persistent symbol, double click on it and then change the color to, let's say, green well across to everything else. All of my differences scenes. That project has now changed to or that's a background has now changed a green. If I added other elements going into that symbol and then adding other elements like, let's say, a text element here now has added that to all of the instances of that symbol. So if I come back into seem to seen one, well, they're Innis, it's there. So I basically make my change in one spot. And then it's a cross on the board on all elements, and that's the same thing with just normal symbols. If you're gonna have a button that's gonna be assembled, we'll create the button and then go ahead and then put that button and use that button and throughout all of your different scenes. And if you need to make a change to that one button, let's say you need to update the colors you need, update the labels or something. You change it in one spot, and when you change in one spot and then cascades to all the different items, that's another huge feature of working with symbols inside. It's a mole type 18. 18 Main Timeline: we're gonna talk about the main timelines inside. It's a mole type now in a new project. If you come over toothy left hand side here a the bottom, you'll notice. If I select this drop down box, there's a couple errors that lets me know that it is a drop down box and I can switch between the different timelines available here and I can go in. And right now I only have one time line, which is the main timeline. But I can actually come in here and click on new timelines or go to edit timelines. Another way to get to my timelines is by coming up to my inspector and then going over to my scene. Expect er clicking on the scene and then I can adjust or ADM or timelines by coming over here and clicking on the plus. Or I can select the timeline and remove that timeline as well. So one of the things about timelines is it's basically optional animations that could happen so you can jump to different scenes. You can have different content, different layers as well, and you can have separate out your content even with symbols and everything like that. But the thing about timelines is you can have these optional animations, and that's really what timelines, at least how I see timelines is optional animation. So if someone clicks this button, it can run this timeline timeline one. Or if someone clicks another bun, it could run timeline to and so on. So you can have these difference things, basically, that these timelines, where these options will animate based on what's clicked or based on any type of condition or anything like that. So it's not persistent symbols or is not symbols where you have an animation kind of running on its own timeline, and that's inside of another timeline. It's a completely separate timeline where things can completely different. Things can happen it depending on what is clicked and what's not collect or whatever happens at that point. So again, it's up to you. It's if you click on an option that says relative right here, it'll take the object from wherever it's at that point, serve you animated at Main Timeline one, and then you click on the button that goes to timeline to, for example, Then it would take it wherever that main timeline was and then animated to wherever it is inside a timeline to. So the best option that I can see is basically, if you wanted something to go one way or the other way, and you can use a timeline to animate it one way and then use another time lines and animate the animated the other way. We're gonna dive mawr into timelines later on in this course. But for now, that's at least an introduction. Right now, we're just going to be working with the main timeline. So let's go into the next video and actually start animating some objects. 19. 19 Animaton Timeline: Now let's start animating some objects on our stage. Now there's two different ways that you can actually animate objects on this stage inside of tumult type. Let's go ahead and add an object. So I want to come up to my elements, go down to rectangle and let's go ahead and move this rectangle over. Now I'm going to go into my shape, Inspector or my element, Inspector, I want to change this color just so it's a little bit more obvious. Before it was that gray so kind of blended into the white. But now that that's there, I want to come down to my main timeline. And when a double click on this to go ahead and rename this and I'm just going to say object one, go ahead and click. OK, now, from here down at the bottom, I'm going to stretch this out a little bit more so we can see him. But you can see if I come in here and stretched out this timeline, I can see all of my objects here, but then I can see my properties down at the bottom. Now we're gonna talk a little bit more about what the properties are and what you can do with this. So now, for now, I'm just gonna go ahead and come down to my properties and I can click on plus for the origin left in the origin top. So that's basically from the left to the right. That's gonna be the left. If you're going to animate it from the left to the right or even from the right to the left , you still use this option, and then top is, if you're gonna animated bottom or top to bottom or bottom to top, then it's either way, you're basically going to use these two elements. So in order to start a time liners to start a key frame, then I come in here and move my timeline down here. This using this scrubber, and I'm gonna move it to the point that I actually want to start this animation. So I'm gonna go ahead and click on plus for this diamond icon and that's gonna be the plus . Okay, I'm gonna animate my left and then I'm gonna go ahead and hit. Plus, for Animate Top is well, so that starts out my animation. This is where it's going to start from. So now from here I'm gonna go ahead and move my key frame over a little bit. And now I can move my object to another location and then click on plus again and then plus again as well. Now it doesn't actually animates over automatically. I actually have to go in and make sure that that this happens automatically. You can see that. In fact, sometimes when I do it this way, it doesn't even register that I've moved it over to somewhere else. So I need to come back to it and then move it back over to where it was before. Now, if I wanted to get the exact dimensions, I could come in here, come into my metrics, come into the left and come into the width coming to the top, coming to the height. And I could actually go in and get this exactly where I want it positioned from the very beginning. And then if I wanted to move it over to the very end. Now I can adjust the placement of the very end as well, so that creates automatically This ah Tween basically between one key frame and the other key frame against. Sometimes it doesn't register the first key frame, so you may have to wiggle it around a little bit on the first came frame in order for it to register and then move it over, move your scrubber over a little bit and then move your object over to where you want it to animate, too. So if I go ahead and hit play on this, you can see that it pauses for a second, and then it plays the object. Now, instead of having to insert these key frames for every time I want to animate something, there is an easier way. And there's this record button. So I'm gonna go ahead and select this timeline or this animation for left. I'm gonna hit delete, and she could see that. Now it just as the top and bottom. I want to go ahead and select that one as well and hit, delete. And so right now, at this point, I don't have any animations whatsoever. So the easier way of doing this is actually grabbing the record button, clicking on the record button and then moving my scrubber over here and you can see that a two very beginning of this. This is the very beginning of the timeline and so I can actually move this point. OK, where do I want this animation to start at the very front of this animation. And then I can move the scrubber. OK, where do I want this to end? And so I set those two points. And if soon as I set those two points, all they have to do is actually move my object and you can see that automatically registers the front key frame and the last key frame. And it has this animation in the time that I started, this key frame right here started in this animation. And then when I ended it, which is right here now I could stretch this out. I could make it smaller. I can make it larger as well, but it's just animating the same properties that's going from one location to the same location. No matter the amount of time that it takes to do it, it just doesn't automatically. The nice thing about the record is just the fact that I do not have to click on the add key frame. Every single time that I wanted to start out. So I'm gonna go ahead and just click on UN record or stop record. Then when I move my cursor over and I'm gonna click on the record button again Now I can move my starting point to be somewhere else. Let's go ahead and move this to be three seconds, and then I'm gonna move my scrubber over to be about five seconds there. Now, if I move with those in place now, I can go ahead and move my objects somewhere else. And you can see that it pauses for a second because I started a new timeline or I started a new animation at three seconds. And then I ended that animation at five seconds. And so it does that for me automatically so I can go ahead and just hit, stop record again and then do the same thing. So if I wanted to move my scrubber again, I can animate this as many times as I want. I can come in here at other elements, animate those elements as well. So that's how I get started with the animation, both doing it by my own in the key frames, or actually using the record button to record my animation as well 20. 20 Easing Animations: So in the last video we talked about animating along your timeline. Now I already have an animation here to begin with. If I take my scrubber and I want to preview that animation, I could just move it left and right here, and I could see it goes from the left hand side to the right hand side, a pretty simple animation there. If I don't see my properties down at the bottom, I could go ahead and select that object, and now I could see the animation. The only thing that's really animating is the left property, and it's going from left to right now. The nice thing about this is you can actually add on what's called easing, which easing adds a realistic starting, so it doesn't actually stay the same speed the entire time. If you have unease in, that's think of in and out as start and finish. So if I add in the East End, that means it's going to have this ease at the very beginning. At the start, if I add something that says he's out, then it's going to have this ease or this slowing down at the very end because it's easy out, so he's in means start ease out means finish now. If you select something that says he's in and out, then it will both ease at the very beginning, and it will ease at the very end. So what am I talking about when I say ease? Well, if you wanted to select the option, I can go ahead and select this year. I can come over to the right hand side and select this option here where says he's in and out and it will give me a pop up box of different things that I can actually choose from here or another way to get to that same menu is by double clicking on the animation. And if I wanted to tie this to a very specific one that I can double click on it over on the right hand side will actually apply that same easing to all of the different properties that are animated. So this allows me to get very specific with them. So if I come in here, I can select. If I want this to be instant and you can see there's no slowing down, there's no starting a little bit slow and then getting faster. It just happens the same speed the entire time. Um and then linear is actually instant just happens. There is no animation whatsoever. Just happens instantly. It just jumps to the new area. Linear will basically just say OK, it stays the same speed at the very start and at the very end, ease in, say's Okay, Whatever ease that I apply will happen at the very beginning. But it will not happen at the end. It will kind of stay the same and you can see this with the graph. It kind of stays the same towards the end. Ease out will stay the same at the very beginning. But then kind of slow down at the very end, he's in and out will stew both. Basically, it'll start out slow the very beginning, and then it will go slow at the very end as well. Then I have things like bounce where you can see that it kind of bounces. If I wanted to get a basketball and I wanted the basketball itself to look like it's bouncing, I can do this elastic kind of overshoots its mark and then comes back to it similar to bounce. It just bounces back and then back basically says, Okay, it's gonna overshoot its mark, but then slowly come back as well. Now the nice thing about any of these options that I choose from, you'll notice that I have these bars right here that I can actually grab out. And I can adjust this however I want, so I can customize these ease that ease in and ease out in any way that I want. Now a couple other options that I have is you can see that if I select on ease out, for example, I can come in and I can choose Cubic Quad Court, quince seen or Expo or Cirque. Now these basically just give me different options. So if I come in here, I can see how the graph will actually change, depending on what I've actually selected. So if there is something that I like a little bit more than I can come in here and click on Expo, I can come in here, click on Cirque or something like that. So it's just basically says, um, it's really a preference, so whatever you like the most, you can go ahead and test it out. Hit play and you could see it started out really quick and then just kind of slowed down at the very end. If that's the effect I'm looking for great. That's how I apply it. If I that's not exactly what I'm looking for, that I can come back in here, double click on this and then choose a different option and get something mawr allying to what I'm looking for there so you can see that one's a little bit slower and it starts out normal, and then it just gets a little bit slower towards the end. So that's how you apply in this, basically any of the properties that you animate. So right now this was only applied Teoh the origin left. But if you have things like size, height, the width or anything like that, you can apply this ease in or out to any of those property animations 21. 21 Animating Other Properties: up to this point. We've only animated movement. We animated from one side of the stage to another side of the stage. Now we're gonna be talking about animating other properties so you can see I already have this animation. I could come in here and I could actually add on more properties. The ones that I have options. The options that I have right now are opacity left, top hype and whip. There are other properties that I can also adjust coming up here towards says Properties. I can select this drop down box, move my mouse down a little bit and you can see there's a whole lot of other properties that I can actually adjust. I can adjust the background image. I can animate the background image. Any of these options are things that I can animate so I can add to my animation. I gonna does adjust the brightness that font size, the font family. You can change the font family animated from one fund to another font. It's basically just whatever you want. Whatever style that you want, I can animate the border. I can animate the border color on the bottom on the left border radius border with as well . If I wanted a border on a certain size, I can do that as well. I can animate the boldness, the background color. I can also animates patting if I wanted there to be more padding saturation. CPL. Um Ah, lot of different things. Textile line. If I wanted to go from the center to left justified, it's up to you Inter html line height as well. So these are all the different types of auction options that I can use so I can come in here and just select the one that I want, and then it could go ahead and animate it from there. However, I'm just going to stick with the ones that are here for now. So I'm gonna go ahead and let's animate this. I want this to fade in so it's gonna be the opacity is going to be zero to begin with, and then it's going to animate into fully transparent. So I'm gonna or then that's going to animate in to be fully, they're going to go ahead and click on add a key frame. I want to come over to. Okay. At this point, I wanted to be fully there is when I had another key frame now going to come back in here and select this key frame, and then I'm gonna come in here and I'm gonna going to change the opacity. So when it come into the elements, inspector here and this is where I changed the visibility. So I want to go ahead and select this visibility to be zero. I don't need that to be at the end, because when I created this key frame, the opacity for this object was already set 200% so that already had those properties. But now that I've animated it from the very beginning, you can see that it just basically, as I take my scrub, remove it from left to right. You can see that it's fully gone at the very beginning, but it starts to fade in at the very end of this. Now, I could do the same thing with the height, so I'm gonna go ahead and select the height, and I'm gonna make sure that I create some key frames on the hype built at the beginning and the end. Now what I'm going to do with the height isn't gonna go ahead and just stretch this out a little bit and you can see that it's automatically animated from the very beginning to the very end, and you can see that it starts to get bigger. I could do the same thing with the with. Let's go ahead and just add a key frame with whipped at the beginning. Add a key frame at the end for the width and let's go ahead and just change this the with a little bit as well, so you can see that it starts out as a small box and starts to grow to a larger box. I can do this on record as well. Let's go ahead and delete this just like we learned in the last video. We don't have to create those key frames I could actually hit record here. Go ahead and let's just move this around how it is. Let's go ahead and move this to the very end of the animation, and then I'm going to go ahead and just hold down the shift button. Stretch this out and you can see that it automatically created that animation the size for the height and the size for the width. And so now if I come in here, you can see that is grows from smaller to larger in the record button. Basically, just help save time, you can see Okay, start from here. And then at this point, and I want you to be something different and you can adjust the color. You gonna just other elements. Let's go ahead and just hit the color button or the record button. Come over here and I'm gonna chuck change the background color to be a red so you can see that the color starts to actually change. So it starts out green. I know we can't really see it with capacities, So let's go and get rid of that opacity for now. And let's just up the in the properties up the capacity so you can see at the very beginning that starts at a green. But it starts to change colors, and at the very end, it turns over to read. So that's how automatically just hitting the record button coming over to my properties automatically added this background color property to my animation. And there it is. And so now I can start. Pretty much anything that's over in the property section on the right hand side is allows me to animate it so I can start it out at one color. Changes to a different color started out at one size changes to a different size at animate . That shadow animates other objects, like border radius or corners for something. If I wanted to go something from a square to a circle, I can animate that as well. So a lot of distant, different possibilities. But that's at least how you add additional properties and how you use the record tool to be able to animate those properties or even the key frame tool to be able to animate those properties as well. 22. 22 Changing Keyframes: Let's say after I animated something, I need to come back and I need Teoh a just one of these properties or any to adjust a certain element about that property or key frame. Will. You can come in and select the object and then come back over to my properties and I can select one of these properties. And if I move my scrubber here at a certain point, I can actually take in and select. If I select this element up on top, it will select all my properties. But if I come in down here and select just one key frame, I can adjust that key frame. And I could say, OK, the size is gonna actually take a little bit longer, meaning that all the animation is gonna happen right about there. But then the size is actually going to keep animating there. I could even come in here and add an additional key frame so I could move my scrubber to the point that I wants to have it. I'm gonna go ahead and select that here and then I'm going to come over to these diamond with the plus and then click on that and now that's going to be a new key frame. The important thing to keep in mind with key frames is key frames means that something different is going to happen now the Tween or the animation going from one point to another point going from one point, something looks like a difference or something looks at a certain way and then going to another key frame, which means that it's now going to look this way. It's gonna have a new height. There are new, with or anything and then between automatically animates okay from this how it looked from here to how it looks new after the end of this animation so that Tween happens automatically. Now, if I wanted to add additional key frames and okay, at this point is gonna jump to here and then at this point is gonna jump to their we can come in here and I can add those key frames and you can see that on the height, let's actually make it a little bit smaller. So at this point, it's gonna actually go us a little bit smaller. And then as soon as it hits this key frame, it's now going to animate to the larger one so I can have something animate in small. And then as soon as it hits a certain area, then I can have it enemy or stretch out a little bit longer as well. Ah, lot of different possibilities. But that's how I can come in here, and I can animate this key frame, and I can even go in and drag it to where I want. I can stretch this out. If I wanted to be a little bit longer, you can stretch this key frame out if I wanted the first animation to go a little bit quicker on the height and then a little bit longer After that animation happens. It's up to you. But that's how you insert new key frames, additional key frames. I could come in here and even select that that's Ah key frame point and then just sit delete. And then it will take that key frame that started out or in the middle, and I will just completely delete it. And now it's only animating from this key frame to that key frame again. Key frames are when something difference or something different happens or it looks different at a certain point, or some properties have changed or something like that. That's a key frame. And then anything in between. This bar is basically the animation going from that one key frame of how it looks at that key frame to this new key frame and how it looks at that new key frame. And we'll enemy whatever that property was at the beginning, to the animation or to that property, how it looks at the end, I don't have to animate it. If I don't want Teoh, you could actually turn off the animations, and so it just automatically jumps to a certain point. But that's really not animating. That's is basically changing the properties at a certain point. So that's how you at least work with the different key frames. Add on new key frames and adjust your timing of your key frames as well 23. 23 Duplicating Animations: one other thing that you may want to do. She may want to copy your animation that you did on one object and paste it to another object. If I come in here and add a completely new object, let's go ahead and add this circle here. I want to change the background color to be a difference color here. And then what I'm going to do is I'm going to select this object to the square, and I'm going to go ahead and select the animation. If I want all the animation, a copy over a condition like that animation hit command, see and then come over here and select my circle and then hit Command V and that will paste it. But the thing is, is animates at the same width and height, the same origin which is left and top. So it's really actually behind that object. But if I needed to, then get rid of the square. I can go ahead and deletes the square here, and you can see that now it's changed over to the circle, and because I had a specific color, it changes the color as well. But now I have that circle automatically and made it. If I needed to change the object, if I needed a change, a certain element and then that animation that I took the time to create. On that element, I just copy and paste it over, which is nice. If your wire framing and you don't exactly have all the visuals yet, you can go ahead and set up some just boxes for now. And then. Once you get the visuals, you can copy the visuals from that box or the animation from that box, and then you can pays to into the visual that you actually get. You can also just do it on a certain line elements. If I come in here and select that line element, I could copy that line animation. Come over to a different objects here, and let's go ahead and just pace that lining animation. So it did not paste everything. It just pasted that one property that I animated. If I just want that same animation in this animation is from left to right. If I just wanted that same animation on that one object, I could do that as well. One other option is I could come over here, right click on it, come down to duplicate, and that will duplicate my objects. So it's the exact same object, and all of the animations will happen or stay the same. But you can see that because I'm at the very beginning. If I make this object a little bit smaller, it's still gonna animate to this one key frame point point. So I couldn't move this over a little bit more, and now it's gonna take a little bit longer on that animation. So that's how you copy animations that you've done toe one object and paste it to another object. 24. 24 Motion Paths: now, one thing that I may want to do is, as I'm animating objects, I may want to adjust the curve of the actual object instead of just having an inmate from the left to the right. You may want it to go up a little bit and then down a little bit as well. You can do that with an object, someone to come in here and just create a new rectangle that I'm going to come in and select the color to be a different color. And then I'm going to go ahead and animate this. I'm gonna click on the record button. Let's move this to two seconds and then let's just move it over to the right hand side. Now you notice that as I have her over this blue bar, it actually allows me. It highlights a little bit and lets me know that I could select this and I can add basically a point that will curve it so I can just select that here and then move it up a little bit more and then allows me to adjust the curve of that animation, and it gives me some handlebars that I can actually stretch this out a little bit more. If I wanted to be more curved on the right hand side or if I wanted to be more curved on the left hand side, I could do that. And then I can angle the curve as well. Now, this basically gets me Really Ah, great detail of how or control over these over this animation, I can come in here and had other points as well. So if I wanted to have kind of curve up and then down on like, a wave, I can do that automatically as well. So this just gives me the ability to create this curve. And now, if I go ahead and hit play, you could see that that object animates along that Kurt. Now, another thing that you may want to do is you may want to have this this object, For example, if you were trying to animate a bird or something, you may want to have that object followed the curve. And so the head of that object, if it's a bird, will actually go down and make more sense other than the body or the tummy of the bird. Just go down as well. So you may want to align to that animation. You could do that inside the properties by coming over to the properties here and then coming over to rotation and clicking on rotation follows Motion Path. Now under this, this is under the metrics, inspector coming down to the rotation section and just selecting this option. You can see now if I come and hit play, that's rectangle or that square will basically follow the path. This is a very sharp turn, so I kind of jumped a little bit. But it will follow the path of that animation, and that's all they had to do with Select Us Now. I could animate that the rotation myself if I wanted to and create some key points if I wanted to get really fine detail of how that's rotation happens, But in this case, this is good enough so I can go ahead and just leave. That selected at rotation follows Motion path, and then it will automatically follow that motion path. And so when I preview this, this animated this HTML object is basically animated along this path, and that's how I do motion pass inside of tumult, type 25. 25 CSS Filters: now, one of the thing that you may want to anime is the CSS filters. This is a little bit different than normal filters or normal properties because sometimes thes filters, it depends on the browser that's actually being viewed sometime. These filters don't actually work, but what I mean by this is let's go ahead and click on the record button. I'm gonna go ahead and move my my scrubber here to two seconds, and then I'm going to go ahead and let's just move this over. A little bit of my record button got undone. Someone move this over, but I'm gonna come into the elements, Inspector, I'm going to scroll down to her says filter effects. Now, this is where I can adjust the blur. I can adjust the CPI, yet I can adjust the saturation, Aiken just the hue and everything like that. Now that the same is what we've been animating already. So the top, the height, the width and everything like that pretty much is the same. However, one thing that you will see is over on the right hand side. Is this warning? If I click on that warning, it will let me know that. Hey, this is CSS three filters and their unsupported by thes browsers, which are pretty old browsers. But that's just something to keep in mind. If you're not concerned with that, then you can go ahead and just keep this year. But one word of caution is don't make this animation crucial to your actual application that you're building this website that you're building. Because if you're using this and for some reason your users are on one of these older browsers, even I e. 11 or something like that, then this animation will not work exactly how you didn't. So that's just one thing to keep in mind. Teoh, be aware of that warning. Take a look at that warning and if you're okay without warning, then you can go ahead and continue. If you're not, you may want to think about animating something different or having some other type of property color. Whatever you wanted to do. Ah, have that changes well, So that's how at least a word of warning when you're using were animating CSS filters 26. 26 Timeline Actions: in the last section. We talked about animations in this section. We're gonna be talking about actions now, actions are a piece of code or piece of logic that will happen at a certain point in the timeline. Or it can happen when something is clicked or it could happen at others type of determination at rotation or drag or anything like that. So we're gonna be covering out how to create those actions and how to add those actions. Two different objects into your timeline. So in this video, we're gonna be first of all, talking about the timeline actions, timeline actions will happen at a certain point inside of the timeline. So once it reaches five seconds or once you reach is two seconds, you can run some type of code runs, some type of logic. You can pause the timeline. You can continue the timeline when something is clicked. Utkan. Basically, you can even control the timeline as something is dragged or a lot of different possibilities to choose from. So again, to keep it simple, we're not going to show you a complex thing. They have to figure out how it was built. I'm just gonna keep it Simple elements explore some of these options that you can go in and you can use to create these types of actions. So, first of all, in order to see the different timeline actions that you can do, I want to go ahead and come into my hype sample here. Just a blank canvas. If you wanted to just start a new project, you can. I'm gonna go ahead and add an element, just a rectangle element. Now I'm going to change the background color of this scene. So I'm under the scenes properties. I'm gonna come over to background, select the drop down box to a green color here and go ahead. And let's animate this like we learned in our last video. Go ahead and click on the record button and you can see that we have the starting line here . I can move that to wherever I want and then also are ending line. Let's go ahead and move that 23 seconds, and then I can go ahead and just drag him holding the shift button down to get a straight line, and we're gonna drag that to the other side of the stage. now, that's the only thing I want to do for this little animation. So I'm gonna go ahead and just uncheck the record button. And now we have our animation going from the left sand side of the stage. Do the right hand side of the stage. Now. What I want to do is I want to add a timeline trigger here. So if in the middle of the timeline what's gonna happen is it's gonna pause the timeline, so it's gonna pas right in the middle, and it's not gonna continue that timeline. In orderto add a timeline trigger, I come over to the left hand side, right where says Main timeline and I go ahead and click on this diamond that has a plus in the middle That's basically adding a key frame or, in this case, a timeline action in this code, as will happen as soon as my scrubber, which is this white bar. I can place this wherever I want. That's where the action will happen. And I'm gonna go ahead and click on this new action and it will pop open this timeline action. I can go ahead and select the drop down box And then this is my default actions that I can do so over here. And it may not look alike a lot, but there is some of the actions that you can dio offer a lot of flexibility, like run, drive a script or trigger custom behavior, or play sound or start a certain timeline or something like that. So I'm gonna come in here. I can also jump to a certain scene. I can go ahead and start the timeline Positive timeline. And I can even specify which timeline in my talking about, because over on the right hand side in my stage properties, you'll remember that we can have several different timelines, which is basically several different types of possible animations. And I can trigger those possible animations, depending on certain logic or certain points of the timeline that they get two or the main timeline. So there's a lot of different possibilities there. So I'm gonna go ahead and pause timeline, and I'm gonna leave it at where says Timeline is the main timeline, and that's pretty much him. So if I need to come back into that and modified it later, all they have to do is double click on that diamond, and it will pop open with my timeline action that I can modify later. Let's go ahead and preview that. So I'm going to hit, Save. I'm gonna hit command enter to preview it and you can see that the animation stops right in the middle so it doesn't allow me to continue or anything like that, even if I click on it. If I tried to do anything, it's not going to continue. I have to somehow trigger that the animation or the action to continue with something else . I can trigger that by a button click or something like a play button or something like that . And so we'll learn about that in the next video. How to add in action onto an object. But that's at least how you add in action to the timeline when Teoh reaches a certain point inside of the timeline, and I could come back in here to heIp and I could have several different actions that will play along my timeline. So if I wanted to place certain audiophiles at certain points, I could do that with timeline actions. So in the next video, we're gonna go ahead and talk about how to continue this animation. Once this rectangle is clicked on 27. 27 Object Actions: All right. So in the last video, we talked about timeline actions. But in this video, we're gonna be talking about the different types of actions that you can add on to objects . So if I want to add in action when this is clicked to continue the timeline, I simply select this object. And then I come over here to my inspector area, make sure that this is enabled. If you don't see it, make sure you click on where says Inspector, up on the top. And then I'm going to come over Not to my scene, Inspector, like we've been exploring in previous videos. I'm gonna come over to here where it's my actions. Inspector, is this hand basically? And this, basically is the different actions that I can apply. And you can see here where I says on mouse click, this will basically be in on a mobile device. This will be a tap on mouse down. This will be when it starts to touch when they start to touch it before they lifted up, and then on mouse up, it will actually be the touch. And as soon as they lifted up, so any of those types of actions. If I do it on the device itself or if it's on the desktop, it'll just be a simple mouse click or or so on on. If it is a desktop, this basically won't apply to this code. Won't apply to touch devices. But if I wanted to run code on mouse over when it's hovered over or when it's my mouse actually goes out side the object, I can run some code there as well. I can also do on drag or interview. Port means that as soon as this scene actually gets visible, I can run some logic as well. Or when this scene is exited or left, you leave this scene to a different scene. You can run some code as well, so I'm gonna go ahead. Just do a simple on mouse click and go ahead and click on this. Plus when I want to add in action and I'm going to select the drop down box and you'll notice the drop down box is the same one that we had in our timeline action. These are the different default choices for our actions inside of tumult type, so I want to go ahead and say, OK, once they click on it, I just want to continue the timeline. So it pause the timeline automatically in our timeline action. But now I want to continue that timeline. And what time the timeline do I want to continue? Well, it's gonna be the main timeline, the only time line that I have. And then I can also click on play in reverse and then give you the option to can restart timeline if needed as well. So if I wanted this to play but and go back to where it was before, I could do that option as well. But that's pretty much all that I want to do for that one. And you could see that. What if I select on my stage here? This actions actually shows up here where it's the entire stage. I could add some actions onto the entire stage just by selecting anywhere in the gray area . You'll concede that that means when I click on any of the stage, I could pause the timeline and then restart the timeline if needed. I could also come over here and so okay on mouse over of the desktop itself. I could have trigger something as well, but I'm gonna go ahead. And if I need to come back in here, it can still like this. Come back in here and modify this action. Let's go ahead and preview this. Someone go ahead and hits command enter. You can see that it pauses in the middle of that timeline, but if I go ahead and click on this, it will now continue that timeline. We've now successfully added in action to that object inside of tumult type. So let's go back into hype. And now let's go ahead and explore a couple other things. If I select this object, I can also add on several other types of actions I click on. Plus, you can see that adds an additional action. So if I wanted to go ahead and add on more actions, I can do that as well. So But in the next video, we're gonna be talking about removing these actions, rearranging these actions if needed, as well 28. 28 Removing Actions: all right, So in the last couple of videos, we talked about timeline actions, and we talked about adding actions onto objects. Now what happens if I need to remove those actions? You come in here, and if I select this, I can't really just go ahead and hit. Delete. You have to come in here and under the action, select the drop down box and go to remove, and that will remove just that one action so I can come in here. And if I have several, come in one of the time and remove those different actions. So it's just not visible. So I wanted to make sure that that was at least pointed out that you can come in any action that you add. If you decide that you don't want to have that action, you can come in here and select the action, drop down box and go down to remove. Or if you decide that you want to switch it from, let's say, a jump to seen action to another action. You can come down here and switch it to a different action and then fill out the different information to do that new action So that's at least how you remove that action from the object. You have to make sure the opportunities is selected or coming into my timeline, I can slick this drop down box and go down to remove or in the timeline. It's a little bit different because I could select that timeline and I could hit the delete button on the timeline. But you can't do that over here, or you can't even do that on this stage because you'll delete the entire object. So you do have to select the drop down box to go down to remove to remove the object. So that's how you remove different actions inside, it's a mole type. 29. 29 Exploring Default Actions: in this video. I just wanted to explore some of the different actions that you can actually use inside. It's a multi pass. So these air the default actions will talk about custom JavaScript actions later. But this is at least how you go in and add some of those actions. So I'm gonna come in here and under mouse click. I want to go ahead and click on the plus icon, and I'm gonna come down here to jump to seem when I click on Jump to Seen This will actually allow me to jump to a specific seen by default. It is just the next scene. If you wanted to jump automatically to the next scene, it will be there. Or you can select the drop down box to first seen, last seen. Or this is where it will give us a lot of different. Seen all the different scenes available. Right now, we only have one scene over on the left hand side. I could double click on this And let's just name this scene one. And I can come over here to this plus icon at a new scene, and we're gonna name this scene. Sure, I spell right seeing too, And I want to come back in here. Well, before we do that, let's just make sure we know that we've jumped to the scene. So when you select the text here and say this is seen to go ahead and type that in there and now coming back into seen one, I want to come into this rectangle, and now it's going to jump to scene, which is the next scene. But if I wanted to jump, specify a specific scene and come in here and select that scene or I can just say OK, well, its next scene, I'm just going to jump to the next scene now we can also select the transition, which the transition will be. Instant cross fade, swap, push left, push right, push from top to bottom. And that's kind of the animation, the parallax effects that you get when you want to go from one page to another page. So let's go ahead, and I'm gonna change this to push from bottom to top, and I'm gonna save that. Go ahead and preview it. And now I'm gonna select on this square here, and you can see that that scene is now pushed from the bottom, and now it's pushed or up to the top. And I could even come back into seem to let's go ahead and in the scene, too. If I wanted to have, like, a back button or something. Let's go ahead and just select this rectangle double click on it and say back obviously, I may wanna have Ah, let's bring in a button here. This might be a little bit better. All right, so we're gonna stay back here and now what will happen is on this mouse click. Let's go ahead and hit, plus jump to seen and we're gonna say previous scene and this is all going to instead of from bottom to top. This is gonna be from top to bottom. And so it's going to if it's going back, it's gonna be top to bottom as though it's animating back up. So I'm gonna go ahead and preview this click on this square. It will animate to the next scene, and then I can click on Backend will animate back to that scene so you can have different sections that kind of run parallax through from one page to another page, they may be thinking, Why is it just in a section? It's because this isn't really responsive yet you could come in here and select under the scene Properties select the scale that will be 100% and the heights to be 100% 100% on the with 100% on the hype. And now I can just go ahead and hit save, and you can see that it's kind of stretched out a little bit more. But if I hit this square again, the whole page will actually animate from the top from the bottom to the top and then also the same thing. If I click back, this will animate to the back. We'll talk about responsiveness and how you can attach this into certain areas or anchor in certain areas in a different video. But that's at least how you would change it to, ah, 100% if you wanted to have the entire window, the entire area animate from the bottom to the top. So let's go ahead and explore a couple other things, So I'm gonna come back into the actions panel. We're going to switch this over to run Java script. Now, JavaScript is thief functionality that you can run and we'll talk more about this in depth . But if I did want to go ahead and create a new function, Aiken, go ahead. Just like that option. And now you can see here function entitled function. I can place JavaScript code inside of here, so I could actually say alert and that color is going to say hello. So if I save that when this is clicked, it's actually going to alert. Hello. So I'm gonna go ahead and preview this click on this square and now there's my alerts. It says Hello. I can go ahead and hit close there so I could run JavaScript. And there's a lot of other stuff that you can get. You can navigate to different pages. You can have variables and other stuff inside of the JavaScript, which will learn about in a later video. Let me go ahead and switch this over to we're gonna come back to trigger custom behavior. But I wanna go to you Are l here. And so let's go ahead and just pull up learning dojo dot nets a pace that you are l coming back into hype. I'm gonna pace that right into here. So I copied the URL from Safari and I paste it in there but wanted to open this up in a new window. I could, or just leave it unchecked if you wanted to take it out from the current window. Actually, let's go and just open it from a new window. So go ahead and hit, save and then click on this square and you can see that it opens a completely new window to whatever you were well, that I've actually attached there. That's great. So let's go ahead and try something different. You can see composed email. It's Ah, you can have this email right to a specific person if I wanted to. So Jeff, at learning dodo dot net, I could have a subject. I could also have some body text here, and then when this actually happens, let's go ahead and hit preview. I'm not sure if my email client is up, but let's go ahead and preview. Yeah, it's pulling my emails. You can see it's automatically addressed to Jeff got my sample subject line. I didn't put anything well I did put something on the body textile have to look into why that's not point in there. But that's at least how you go in and add the compose email place. Sound will allow you to attach a sound I haven't brought into any sound. We'll get into sound later, but I would need to bring in the MP 30 G. A and wave file Now. The reason why is because this basically is prepping to be on any browser to be compatible with any browser. So you need to bring in the MP 30 G A and way file to for it to play on the different browsers available. I wanted to loop. I can do that as well. Stop Sound is the same thing. Start timeline will. Basically we already learned about pause and continue. Start with timeline will. If I don't have a timeline played by default, I can started at a certain point or go to a timeline a main or time inside of the timeline . I can select what time it is, and then I can come in here and in seconds. I'm gonna actually say I'll jump to five seconds and that will automatically jump to five seconds instead of the timeline. So that's some of the default. Different sugars will go. Come back into the run job script and dive more into the run JavaScript later. But that's at least some of the default triggers available inside of tumult type. 30. 30 Drag Action: one other cool element that I want to introduce you to is the drag element sound. The drag element allows you to do a couple different things. So I want to come in here. And first of all, I'm gonna create an animation for my objects. I want to click on these Record coming down to my timeline, and I'm going to go ahead and stretches out the three seconds and then let's animate that from the left to the right. So now from here is I want to create another object that will control that animation. I'm gonna go ahead and click on the A nor the stop record, and I'm going to come in and select this rectangle here. We're gonna create a new rectangle and stretch this out to be a certain area down at the bottom. So once we have this object, now we can come in here and select this drop down box, and we can say control timeline. What this will do is what time line do we want to control? Well, that's gonna be the main timeline. Do want toe control the horizontal access by dragon it horizontally, Or do we want to control it. If we drag up and down vertically, that's another option that we can do. We can also have a go forward or we can have a go backwards based on our timeline. So I'll change that and also the speed. And then this is option the change. Or you could do speed as well as continue after drag after I dragged. You want the momentum to continue after that? So let's see what this does. I want to go ahead and save it and then preview it and you could see that the timeline will still play. But if I come in here and select in drag, I'm clicking and dragging this anywhere inside of my timeline, you can see that the timeline is controlled by this drag area so I can come in here and kind of flick it if I wanted to. And you can see I'm letting go right now, and it just kind of flicks and keeps that momentum going. It doesn't do all the way. Ah, I can come in here and just flick it. However I want now, I could do it that way where I'm just kind of sliding my finger across than controlling this timeline or the other option is to come in here. Let's make this a little bit smaller, and we're going to not only control the timeline, but we're also going to select and add a new drag. Select this drop down box and we're gonna come down here and say, Control element, position, control, element Position means that it's going to drag that object with the stage itself or I started with the fingers, So I'm gonna go ahead and hit Command intern so it plays the animation. But what I can do is as the animation starts to play, I can actually click and drag that object, and you can see that it actually controls that object based on what I have. Wherever this object that I'm dragging is located on the horizontal access so I can control it on the timeline where I'm kind of sliding my finger across, or it can control it here by actually dragging the object. Now, some applications. You may be able to do this if you wanted to have a timeline. Animation like a difference. If you're trying to explain different points in a timeline, you can have the user actually click their finger or tap their finger and drag along the time line and have different animations start to play. Based on that timeline, if you don't want the animation or the timeline to start playing automatically, you can stop that, and then it's just controlled by your actual drag. So that is how you do some dragging inside of small type. If you wanted to have some type of logic that as soon as you let go of it somewhere, it will determine if it's dropped on a certain area and then do some other logic that would actually have to be run. Drop a script and so you would have to go in and determine the position and other stuff, and we'll get into more of job script later. I don't want to dive deep into that right now, but those are the two options that you have, which are either controlled timeline were control element position, and then the third option will get into later, which is the run job script. And that's that's how you use some of the different types of actions inside a tumult type 31. 31 Timelines: Now we're gonna be talking about timelines. Timelines gives us the option to be able to create difference options or different outcomes for the user. So let's go ahead and start with a new project here. I'm gonna go ahead and save this project. That's just a blink project for now. Gonna save it on my desktop, and we're just gonna call this timelines and go ahead and hit Save their. Now I'm gonna go come into the elements and come down to just erecting. We just need something to work with here. So when you go ahead and move that to the left hand side and we're gonna create multiple timelines for this but in order to have the options to go to these different timelines, what I want to dio is a lot to create two buttons that says Timeline one or timeline to because you have to be able to trigger the timeline somewhere. I could trigger it with the timeline action here. Looks like I already have one. I want to go ahead and delete that, but I can trigger with the timeline action Oregon trigger with some type of input user input, like a button So I'm gonna come in here to the elements. I want to go ahead and click on add one button and we're gonna call this time line one, and we're gonna come over here. Just put it on the bottom left hand side. I'm gonna go ahead and insert a new button and we're gonna call this one timeline to so these air gonna be our two options here that I can select and have this go to Timeline one or timeline to now, on my main timeline or my main. Yeah, my main timeline here. I can have this option animates and do whatever I need to. So I'm gonna go ahead and just have this animates start from the very beginning and then anime over to the right hand side and that's it. If I hit save and then preview, you'll notice my option. My rectangle just animates over to the right hand side. Great. That's what we need to begin with. So we're gonna go ahead and just hits stop on the record there. But now we're gonna come over to our seen properties, and that's over. If you don't see it, you have to click on the inspector come over to the second option here, seen inspector and then come down to her, says animation timelines. The 1st 1 that we've been working with. You see that? It says Main timeline, But we can come over here and we can add additional timelines. If I click on the plus button, let's go ahead and call this one time line One just so were consistent with the buttons down here. We're gonna go ahead and add a new timeline and we're going to say timeline to again. I like to think of these as kind of, like choose your own adventures or optional outcomes to this animation so I can have different animations based on user input. So on timeline looks like I missed belt that you can double click on it to change the text if you wanted to. I want to go ahead and select Timeline one. I'm gonna select this rectangle over here, click on the record button, move my scrubber over a couple of seconds and then move this down to the bottom left hand side here. So that's Timeline one. That option will happen, and so let's go ahead and select timeline actually looks like I was still on timeline to Oh , I forgot to do. One thing is I forgot to actually select this and click on show time line. If you don't do that, then you'll actually be working with the timeline you were on before. So now I'm on time Line one. Let's do the same thing there. Someone click on record, move my scrubber over a little bit and then go down to the bottom left hand side. You can sell that. See that I have a duration of two seconds and 20.27. That means that's that is the timeline that was just affected. So I'm good there. When you click on Stop record, come over to timeline to click on Showtime line, and now you can see on timeline to There's really no timeline options here, so I'm gonna click on record here, and then I'm going to move my square just down to the bottom right hand side there so you can see if that is now taking 2.20 seconds. And so I'm gonna go ahead and hit. Stop record. Now let's just preview this for now, and you can see nothing actually happens at this point. It's if I click on Timeline one or time like to nothing happens because I haven't triggered those to actually show up. So I'm gonna go ahead and come back over here and we're gonna go to the main timeline Click on Showtime line, and I'm gonna come over to Timeline one here. The timeline one button and I'm gonna come up to my actions, inspector. It come over to our says on mouse click, Click on the plus, And they were going to select an option to start timeline. Now, which timeline or we're going to start? Well, in this case, we're gonna actually start Timeline one. If this is selected, it will start timeline one. Now it can go ahead and select the same thing for a timeline to let's like that button jump down over here, too. Where says start timeline and select the drop down box to timeline to Now these air just options that these timelines will play if these buttons air selected. So we'll go ahead and hit save and you could see the main timeline plays just fine. But if I go ahead and hit timeline one it will actually take it from its previous location because that was the end of time, like the main timeline and move it over to the location that we defined for Timeline one. 32. 32 Relative Timelines: Well, let's see what happens if we click on timeline to you can see that it jumps back to where it was before and then moves it down at that point. So pretty much what happens is it ignores Timeline one, the location that it was that in time Line one and just says, Oh, well, this is where it was starting before and moves it down if you want to do If it was moved over here to, then move over to the right hand side, Well, it's a simple, just clicking check Mark. If I come back into my scene, Inspector, I can go ahead and just make this timeline one. If I select that, we just hit show timeline just to make sure that that's the one. Yep, that's the one we have. So I want to click on this relative button, and then I'm going to go ahead and click on the relative button for timeline to as well. If I hit saving preview now you can see the same thing happens on the main timeline by Click Timeline. One same thing will happen, but what will happen on time, like two is it'll take it from this location and move it over to that final location that it was that it was that before I did the same thing with timeline once. So if I click on Timeline one, it'll take it from its current location and move it over. So this is why I like to think of it as choose your own adventure or different options that you can select it based on user input. You can have an enemy based two different or on different locations, and then you can even trigger these different things to happen on the timeline as well. So if I come back into main timeline, let's click on Showtime line. I'm gonna come down here and on this timeline trigger, I'm gonna go ahead and add a timeline action. And that action is going to start timeline, and we're gonna go ahead and start Timeline one. So now the user doesn't even have to input that I could go ahead and hit, save it, will animate over and then automatically start animating over to the left hand side. That's also a way that you could if you wanted to sequence your timelines and not have them all on the main timeline and you wanted to do one timeline, play this another, and then once that's done, play this timeline, it kind of separate them up. You can do that as well, so it's just up to you on that. But that's at least how you create new timelines and how you trigger those timelines, both through user input and through the timeline actions. 33. 33 Looping Timeline: What if you wanted to loop your timeline and have it start over and over again? Unless a user actually stops the timeline, Well, that's an option that weaken do. So I'm gonna go ahead and come over here to the previous example that we had. We had a couple different timelines, but I don't need those extra timelines anymore. And I don't need these extra buttons. I'm gonna keep one of the buttons, and I'm actually going to say stop animation that's going to stop the animation. Other than that, it's gonna just keep looping over and over. I want to get rid of this previous one that I had before this timeline action. We're gonna add another one here in a second, but I just wanted to get rid of that. So right now, if I go ahead and preview this, it should enemy. But then it'll just stop at that point. So and what I want to do is I want a loop it over and over. So just begins. It stops and starts and everything automatically. So I'm gonna go ahead and at the end of this animation, so I'm just gonna make sure my scrubbers at the very end of the animation itself. I'm gonna add a timeline action, and that action is going to go ahead and say, Start timeline, main timeline. So now if I go ahead and hit, save and preview, it's going to get to that point and then it's going to start automatically over. If I wanted to, I could also play this in reverse. Let's go ahead and just double click on that and you could see this as play in reverse. So I'm gonna go ahead and hit, save and preview, and it's gonna take that and it's going to animate it back to where it was before. So it's going to get this bouncing effect. We noticed that once it gets to the reverse, there's no action to actually started again. So what I'm going to do if I wanted to have a kind of bounce back and forth, I'm gonna add a new timeline action, and I'm gonna go ahead and hit start timeline, and this time I don't need to do a play in reverse. Is just going to start timeline there, so it's gonna bounce all the way over to the right hand side I was gonna come back over to the left hand side. It's gonna hit that new action and then bounce right back. So now we gotta kind of infinite loop of going back and forth. There may be some times where you want that there may be. Sometimes we don't want that, so or you want to give the user the ability to stop the animation. So now we're gonna come back into hype here. I'm going to select this action, come over to my mouse actions, and instead of start timeline, I'm actually going to select the drop down box to pause time light. So now if I hit Pause Timeline, which timeline do I want to pause? Well, I'm gonna pause the main timeline. And so now let's go ahead and hits preview. You can see that our animation starts to loop back and forth. Well, let's go ahead and hit Stop animation and you could see the animation stops dead in its tracks. Well, how do I started again? Well, I can go in here, and I can I'm go ahead and add a new button if I wanted to. Let's go ahead and add a new button that says Start animation, And we could do a simple trigger to continue timeline. And if I wanted to jump to a certain point in the timeline, I could actually go to timeline time in timeline and say, Okay, go at this certain amount of seconds. So I'm gonna go ahead and hit, Save here, hit preview, stop the animation, But then click on Start the animation to start it again so I could have this whole animation. I can give the user the ability to pause the animation to stop the animation and then resume it when they want to come back to. And that's how you do it through these different controls and also how you would actually loop your animation if you wanted one continuous ah loop of animations or some type of like will that continues to animate or some type of smoke that continues to animate. You wanted toe loop it over and over. You can do that through these timeline triggers 34. 34 Creating Scenes: all right. The next thing we're gonna be talking about is scenes. Now, scenes are inside of tumult type and they're basically different pages that you can navigate Teoh So you can come in here and in the main screen here. If I come over to the left inside, I can click on scenes here, and this will give me a list of all the different scenes available to me inside of this project. Now the first scene is an untitled scene. And if I want this to or if I want to navigate to this later, I may want to change that to something that makes a little bit more sense. So let's just call it Main scene. And then now I can come in here and they can add new scenes. So I'm gonna click on this plus icon to add another scene, and you can see it adds another untitled seen. So let's go ahead and name this seem to and then create one more that says seem three. Now, the content that you have onside inside of one scene does not always transfer over to another scene. So if I come in here and I click on the rectangle. I have my own timeline for this, and I have my own. We're just going to stretch this out of it. So I have my own timeline with my own objects here. And if I come to seem to there I have. That's object that was on the main scene is not on this scene. So unlike the timelines, if I come back over to the main scene and go into the scene, inspector, unlike timelines where it shares the same objects that are on the stage across all the different timelines, the scenes themselves do not share any content. Unless you make something a persistent symbol, a persistent symbol means that it will be on one scene, and then it will automatically go to every single scene cascades to every single scene. Or you can specify what scenes don't have it and hands on a scene by scene basis. But that's up to you. But on the main seen, you at least have. That's one object here, and you can work with this object. But when you're ready to move on to something with completely differently out, that's where you would create a new scene. So I'm gonna go ahead and delete that for now. Okay? It actually deleted my main seen. So I want to go ahead and create that scene again, and I can drag and drop those scenes, organize them how I want Teoh. So let's go ahead and it call this main scene, and I'm gonna insert some text. I'm gonna give the user the question. What is the best answer? I'm gonna go ahead and position that in the middle and let's select rectangle and let's go ahead an insert in the lips here and I'm going to give the user a question here and based on their choice, I'm gonna show them Ah, choice or I'm gonna show them the answer. So on the first scene, or actually seem to here, I'm gonna go ahead and insert some text and say, Correct. That was a rectangle. And just to make a little bit more sense, we're going here. And let's change that to select the rectangle. So now here their challenge is to select the rectangle, and then if they select, it's gonna come to this one. If they don't select that, then it's gonna give them answer of Sorry, how that was not correct. All right, so simple scene. But again, it's more to work through the logic to make sure that we understand what needs to happen here. So I'm gonna go ahead and come back in here and I'm gonna insert a trigger that if this is selected, it's gonna go to seeing to, if this is selected, is actually going to go to seeing three. So I'm gonna go ahead and select that object. Come over here to the actions panel, come to my mouse, click, and then when it's like the action to jump to seen and I could select the drop down box to seen to. And then the next thing is, I'm going to select the Ellipse, and I'm gonna come over here at inaction to jump to seen, and this one is going to be seen three. If I just wanted to go to the next scene, I could do that. If I want to go to the first scene, it can do that. The last thing I can do that But in this case, I'm specifically going to go to seeing three. I don't want to select last seen here, even know what it is, the last scene. I don't want to select that because I may add other pages later. Now, if I go ahead and hit, save and preview, you can see there's my option here. I can select the rectangle that says, Correct. That was the rectangle We go ahead and hit, Refresh to come back now. If I select Ellipse, it will select the Ellipse or it'll go to the Ellipse option. They're great. So that's working great. So that's working. And so in the next video, we're gonna be talking about transitioning from one scene to another scene and the different options that you can do for that. 35. 35 Scene Transistions: In the last video, we talked about creating new scenes and triggering by a button click or a mouse action to go to a certain scene. Now what we're going to do is we're going to transition to the scene because currently, if you select one of these objects, it just goes to that scene. So what if you wanted to transition that were wanted, some type of parallax effect animation effect that goes to the next scene? Well, there are some options that we can choose from. So if I select this option and come back over to her, says on mouse Click, I just like this option where says transition and I can see that Aiken go to a cross fade, use a cross fade swap or this push actually allows me to get that parallax effect so I can go push left to right, push right toe left, push bottom to top or push top to bottom. And so I want to go ahead and select one of those and then hits, save and preview. Select one of those options, and you can see that it pushes that from the top to the bottom. I may want to have a code down like it's going from one scene to another sheet from the top to the bottom. So I'm gonna go ahead and select that safe bottom to top and then go ahead and hit preview and you could see that animates out. And the new scene animates in now because of the background. I may not be able to see that very well, so let's go ahead and change the color of thesis een. Here. I want to go ahead and change the background color to some green and then on scene to I'm gonna change the background color to some shade of red. Now, if I hit save, you can see that the entire scene here is there, and as I see it, scrolls outs and the new scene comes in. It's now red now, one thing to keep in mind. That's if you change the background color of the first page. It will actually inherit to be the background for all of it. If you click on this and the new page comes in with a different color, the outside will still be bad color, so if I click on skill, it will apply that to 100%. And then, if I come into seem to, I want to make sure that this scale is also applied to 100% there. And so now if I go ahead and hit preview, click on that rectangle, then that whole pages going to slide out and the new pages going to slight in. So it's not just that section, it's gonna take up 100%. So that's at least how you transition or apply a transition to go from one page to another page inside a tamal type. 36. 36 Triggering Transistions: we've already talked about how toe add a trigger using the actions panel. And so when you click on this, it will navigate to the next page or how to trigger to a different scene, not just the next scene itself. But I want to talk about one more trigger that you can do to be able to trigger these training transitions to another scene. So I want to come into the scene, inspector, and when a scroll down here and you'll notice that on Swipe left, swipe right, swipe up and swipe down. We have certain sugars that don't apply to specific object but apply to anywhere on the scene. Basically, and this is a great way to especially for mobile, to allow navigation to just be intuitive, to be able to swipe up and swipe down itself. So I'm gonna go ahead and select or says, Swipe up. I'm going to select the trigger and I'm going to jump to a scene and I'm going to go ahead and select the specific scene that says Scene two, and I'm gonna go ahead and keep it at push bottom to top, and then I can also change the duration here is well, so you can decide how long this will actually take to go from one scene to another scene. I'm gonna hit, save and hit preview, and now I'm gonna swipe up and you could see as soon as I swipe up. So I clicked and dragged from the top from the bottom to the top and automatically swipes or automatically transitions like as though it my swipe itself triggered that animation, that transition. So I'm gonna come in here and do the same thing with this scene. So now I'm on scene to I want to swipe down to go back to that page. So I want to go ahead and save jumped to seem, and then I'm gonna say, seen main scene. And now it's going to instead of bottom to top. It's gonna be top to bottom. So that way it's the navigation itself. If I went down one time, I don't want it to go down again in order to go back a page and wanted to go from where it's currently at back to the top here. So I'm gonna swipe down, and then I'm gonna go ahead and swipe up here. It's gonna take me back to where the scene was before. So just a way to to create this navigation, to go from one scene to another scene and get that kind of parallax effect to go as though it was going from one section to another section. So that's how you do that and said it tumult type. 37. 37 Percentage based stage scaling: All right. Now we're gonna be talking about ways that you can make your tumult type applications responsive, so it adapts to the different screen sizes. It's resize is where anchors to different parts of the screen as well. But the key point is that it just doesn't stay the same size that it changes and a response to the different device screens. Now there is a way to be able to create layouts, which, in other words, are kind of like break points saying, Okay, now this is going to disappear. At this size, this is going to come in at this size. This is going to look a little bit different at this size. There's way to do that. But before we get into that part, I'm gonna be talking about just how to actually take advantage and have your your stage take advantage of the entire screen. So first of all, I'm gonna go ahead and answer a text or a shape element, come over to the rectangle, and we're just gonna place this kind of on the right hand side of the stage by default. If I preview this, you'll see that it's set to over on the right hand side. It's kind of in the middle of the box itself. Is kind of right about here because this right now, current size is 600 by 400 this is set in my scene properties over in my inspector area, and it doesn't really go beyond that. So if I go ahead and I resize this, go and take that, you can see that it doesn't respond or it doesn't adapt to the different sizes. It pretty much stays the same size. We can change that inside of tamal type. Just by coming into the scene, inspector and in the screen size, you can select the drop down box. You can see the different screen sizes available to you if you're trying to target initially a certain size. But if you wanted this to adapt to the entire screen, all you have to do is click on this scale check box right next to the width and the scale check box right next to the height. Now, what will happen is if I save this in preview it, you'll notice that it actually moved over to the left hand side. The reason why is because this has now become responsive. So it takes up the entire screen. We can't really tell that just with the white background. We can tell that however, if I come in here and change the background to a different color. So I'm gonna change that background hit, enter, and now you can see that it's adapted to the to the latest or is now taking the full screen . Ah, and so the full page itself has the new size. If I come in here and I wanted Teoh create a different layout, I do have this responsively out, but we'll get into into that section in the in upcoming videos. But for now, I'm gonna go ahead and just select this object. You noticed that this object doesn't actually respond based on my size because that is not a percentage base and its anchor to the bite D fall. It's anchored to the top and the left hand side of the screen so it doesn't actually adapt or flow with the right hand side of the screen. If I was re sizing this on the left, you can see that it kind of stays the same or is in the same place on the left hand side, but it doesn't do that on the right hand side. If I wanted this to be anchored to the right hand side, I can come into my metrics here, and I can come over to the flexible layout and you'll notice I have the option to pin and size. So this allows me to actually pin this to the rights, the left, the top or the bottom. I can do all three. Aiken do all four I could do to Aiken do one. It's pretty flexible there, So I'm gonna go ahead and hit, save and preview, and you'll notice that it kind of changes for both the left and the right hand side. It's anchoring this way. It's anchoring on the left, and it's anchoring on the top. However, it is not anchoring on the bottom. If I wanted it to anchor on the bottom or pin on the bottom, I could do that. You can see that it kind of gives me a preview saying that this is gonna be in the middle and it's going to adapt to the different sizes so it changes when I go up and down changes when I go left and rights and so on. So those were different ways that I can adapt that or penance If I did, if I wanted it to, mostly stay on the right hand side of the screen. I can click the pin on the left and just make sure that's unchecked. It's unchecked when it's grey, it is checked when it's blue, and now if I hit saving preview, you can see that over on the left hand side. If I kind of adjust that it pretty much stays the same. However, when I adjust the right hand side, it does adapt and it stays over on the right hand side. So I can kind of fix things in certain areas and have things always in a certain area here . Not only can I do that with the positioning where the pins, but I can also do that with the sizing so you can see these two arrows going left and rights and two arrows going up and down. If I wanted to adjust and have the width be a percentage, why can just select this option? And you could see these arrows have now become highlighted. I can also select the top and bottom arrows, and now it will stretch out both, um, the width wise and height wise. If I go ahead and hit save in preview, my box has now become a little bit bigger. As I resize my screen, you can see that the box will resize depending on my width and height of my browser. So by doing all this you can have things that get smaller, get larger that anchor or pin to certain sides of the your screen. It doesn't change contents. I can't say Okay, once it gets to this point, come over here. That's where the different layouts will come into play once we get into the layouts. But this at least allows you to create some responsiveness and have things anchor to certain locations as well. If I come over here and select this option, you can see that I have some more options here for scale behavior. I can select this drop down box. I can see shrink to fit or expand to fill. If I click on shrink to fit here, let's go ahead and re sizes and you can see it stays a little bit more proportional rather than stretching out the with it keeps it in its proportion there if you want. If that's the desired effect, you can do that or expand to fill. You can see it does a similar thing here, just the way that it kind of does it in the background. You can either do expand to feel, or you could do shrink to fit, or you can keep it. It's default if stretch, but that will stretch both the width and the height as well. So that's how you do some of the scaling on and adjust your your screen to be automatically adjust to the difference sizes browsers. And that's how you do some flexible layouts with different objects. You can do this with text. You can do this with difference elements, buttons and stuff like that's and this will automatically resize for position elements in certain areas. Then you can start if you wanted to Ah, change based on the screen size. That's where you'll start adding break points or you start adding different layouts so we'll get into that video in the next video of how to create different layouts and adapt your content based on the screen size 38. 38 Creating Different Layouts: in the last video, we talked about adjusting their screen size to automatically respond and not just take. Oppa sets size but actually take up the size of your entire browser. But there may be times where you need to adjust your content based on the layouts. So that's where the layouts option over on the top left hand side comes into play. If I select that option, it gives me a new panel called Layouts. If I wanted to hide scenes for now, I can go ahead and uncheck scenes and just have my layout option now by default. This is the initial layout that I'm given, but I can come up here and I can add new layouts, and I can rename this layout as well. So I'm gonna call this one default, and I'm gonna go ahead and click on the plus icon, and it gives me the option to adjust or create. Size is based on the iPhone, the iPad in Portrait, the iPad in Landscape and then desktop as well desktop. Right now we're at about 600 so we're kind of in between were actually in between the iPhone and the iPad. Initially, eso we may want to design the iPad portrait. We may want to design the iPad landscape and so on. So let's go ahead and just first of all, start out with the iPad portrait and it's going to tell me what the break point IHS and the break point right now is 7 68 I'm gonna go ahead and click on add a layout. Now, this will work for anything that gets to that size of about 7 68 So android tablets basically, since you're working with a Mac, I think that's why they just have the IOS sizes there. But anything that gets to this point, like if it's an android tablet, will automatically resize or at have this break points happen at that certain size. So I'm gonna zoom out. This is kind of large, and so I'm gonna take my zoom up on the top and zoom out so I can see a little bit more of my stage so you can see this is the iPad portrait size. And so anything that I do here will actually adapt or change depending on that size, so you can see right here the default one if I switch back over is over on the right hand side, but the iPad portrait is now over on the left hand side. So if I hit saving preview, you can see the left hand side were a little bit larger than what an iPad or than the 600. So what's gonna happen is when I start to resize and I get to that 600 point, you can see that my object has changed, and it's now taking this layout instead of this other layout. And so if I wanted to get very specific, I can come in here and added an iPad landscape here. Let's go ahead and add bats and you see it still has my contents from over. But now I can say, OK, well, in landscape mode, it's going to now be over on the bottom right hand side. I can adjust the size, I can adjust the wit, and you could see that it does not affect the size or the width of my other object. Well, what happens if I have an animation? Well, let's come in here. Let's add an animation. And I'm just gonna move my cursor. My, um, scrubber bar over to the right hand side and move this over and go ahead and hit uncheck on that. So if I come over here to the iPad portrait, you'll notice that the animation doesn't happen. So I have different timeline options that these different sizes and it can create a real specific experience for the iPad portrait or a specific experience for the iPad landscape or specific experience for the iPad or the iPhone or desktop Now. Typically, the initial size of hype is very small. 600. So I actually like to get rid of that layout. Aiken, right, click on it and go to delete layout. And then I like to keep it at iPad Landscape iPad portrait at a desktop in there, one for the larger sizes. And then I want to go ahead and add an iPhone Here again, it doesn't it. Basically any android phone that's gonna get to this point. You can go ahead and still develop it for this size, and then any android phone is going to take advantage of this size. It's not specific to the iPhone, meaning that this size is only going to work on the iPhone so I can come in here and resize this and say OK on the iPhone. There we go. We can go ahead and it's gonna look like that. So I'm gonna hit safe and preview, and I'm gonna show you an example here. That's actually going to let me come in here real quick and I'm going to show you how to preview this on different devices. If you're using safari, if you're using chrome, it's a little bit different. But on safari, if you hit option command are at the same time, it will actually go into a preview here, and you can see what this is going to look like at the different sizes. So we have an iPhone S e. We have an iPhone six. We have an iPhone six. Plus. If I click that icon again, it's gonna rotate that to a different size. If I come over here to the iPad Mini four in Landscape, you can see that our animation happens. Well, let's rotate that over to portrait mode, and you can see now this is what's going to look like an portrait. Now. The iPad Mini four and the iPad Air two are pretty much the same size. So if I switch over here, this allows me to see what it's gonna look like on landscape. This is what it's gonna look like on the portrait mode. I can also come in the iPad pro, and I can go up to different sizes as well. It does have a drag bar on the left hand side, left over here, right hand side here and then the bottom. So if I have a very specific screen size that I wanted try, I can do that as well. Now what? How do you get to this kind of thing Inside a chrome? If you're used to using chrome, will you come into here where you go view and then go down to developer, come over to view source or developer tools? I'm gonna go to developer tools here, and I'm going to click on this toggle device tab bar or toolbar, and this will actually allow me to adjust my different size of review my different sizes here. So I from 56 plus six iPad, iPad, pro and Galaxy nexus and other stuff. If I click on that, you can see what you're difference content is going to be with that. If you use chrome, I typically just use safari. But if you're using chrome, that's a good way toe. To do that as well. To get out of it, you just click on Option Command are again, and that will take you out of that preview area. So that's how you create the different layouts, and you add new layouts for the different sizes of tablets and desktops and phones in the next one. We're gonna talk about creating a custom size if you know that you're trying to target different devices. And it's not one of these different sizes, and you wanted to create a custom one. We're gonna talk about that in the next video. 39. 39 Modifying Breakpoints: So in the last videos, we talked about adjusting your screen so automatically takes advantage of the entire screen size. We talked about creating new layout so you can get specific content for specific layouts in the different layouts that are available by default. But what happens if you have a very custom layout or you wanted to? Let's say, in between iPad, portrait and iPhone, you wanted to have a layout for iPhone six plus or something like that. Well, that's where you can come into the layouts, and you can actually add a new layout just by saying Break point with coming in here and adjusting that with say, Okay, well, I want to have something at abouts 500 500 itself and then I can come in here and say, Okay, now this is from 500 to 7 68 It's going to have this layout. I can also come in here by on my scene, inspector adjusting or adding the new responsive layout. I can come in here and say Add new layout and it will do the same thing so I can add in the iPad layouts the desktop layouts. If I haven't had them already. Or you can come in here and injustice size and save 500 click on add new layout. Now it will admit layout in between my iPhone and my iPad portrait, and I can come over here and say, Okay, well, this is going to be iPhone six plus or iPhone seven plus or, you know, whatever size it is at the time. So now I have this. And if I wanted to, I could come over here and adjust the height. If I wanted to have the initial height, be it something. But the scale pretty much takes advantage of the height. Then that's going to be 100% of the hype anyways, So you don't have to get very specific. At least have to get it to the initial point saying, OK, here is where this is going to be. One other thing that you might want to take advantage of is coming over to the iPad portrait. Let's just go ahead and come into our to our metrics. Inspector, you may want to actually come down and adjust the left the top at the height, or there with initially. So the left is coming over on the left hand side. This it will actually adjust from the left over, and this is going to be the initial placement, even though this is anchored on the right hand side, you still adjust the initial placement over on the left hand side now, so that's just something to keep in mind that even know it's anchored to the right. It's going to being originally positioned at that, so you always have to place it originally at some point. But when it's adapting or re sizing to the entire screen, just keep in mind. That's Ah, wherever you place, it is going to be initial, and it's gonna be a percentage at that point from that from your initial thing, it's going to be that percentage 40. 40 JavaScript Actions Intro: we've gone over a lot of the parts of being able to animate your different objects, being able to adjust some of the settings inside of tumult type. Now we're gonna be talking about adding some custom functionality using JavaScript actions inside. It's a mole type. So I have a sample project here. I'm just gonna go ahead and save this on my desktop. I'm just gonna call it sample again. I'm more worried about just kind of getting the functionality down, and then hopefully later on, and the training videos will have different examples that you can work through. But I'm gonna go ahead and just hit save here, and then I'm going to come in and create an element. I'm gonna come down and clear, click on rectangle. And that way we just have something to work with on the stage. Now, to add a custom JavaScript code onto a stage or onto any difference object, you need to come into either the scene, inspector, or you need to come into the actions, Inspector. If I come into the scene, Inspector, this is where it can come in and add on actions to on see seen load on swipe left on, swiped right on, swipe up, down and so forth. So if I wanted to have some custom JavaScript code in one of those elements or one of those actions that can do that here, I'm gonna go ahead, just select this object. And I want this code to run as soon as this select on it. So I'm gonna come over here and select this mouse or the actions that hand actions inspector, and I'm gonna come over and say, OK, let's just have this happen on the mouse clicks I wanna click on Plus select the drop down box and I'm gonna come down to run JavaScript. We want to run some javascript. Now what happens is inside of my resource is you'll notice as soon as I create a JavaScript function is going to add it. Inside of my resource is because the nice thing about this is I can reuse this JavaScript function with any button or any element that's actually calls it. So once that creative function, it is reusable. Inside, it's a multi pass, so we're gonna come down and select this drop down box. If I had already created a function it would actually show up the different functions here . But in this case, I'm gonna go ahead and just click on new function, cause I don't have anything started yet. And this is what it shows his shows. Here, pops, open a new tab, but come back over to here to untitled Seen this will. This allows me to come back to the timeline, and you'll notice that in the resource is we now have this untitled function. However, if I come back toe entitled function, the first thing I want to do is I want to name this function. Now, this is you're working with all of your code does need to go inside of this function. And so we're gonna go ahead and just name it something that double click where it says untitled function. And I'm just gonna name this sample funks or bunk, um, and have that visa. Let's just add the one to it, cause we're gonna add several functions, but we're just gonna go ahead and add that here. No, it is passing in a couple parameters. Ah, hype, document elements and event panel. This is not a job script course. And so, if you want to learn all about JavaScript? I highly recommend you go back to learning dojo dot nets and sign up for our JavaScript course there. So I'm gonna go ahead and come in here and we're just going to do a simple alert. So I'm gonna do open Prince These close parentheses, open quotes, close quotes and we're just going to say, Hey, we're just going to alert a simple Hey there now. What's gonna happen is if I come back into my entitled seen, you'll notice that the function inside of the resource is has actually changed. So that will update depending on the tab here as well. It will update depending on whatever I named it right here that the same rules apply with JavaScript. You're functions have to be one name. They can't have spaces or anything like that. So just follow those same methods as far as what you're naming. All right, so let's just go ahead and see if this works. I'm gonna hit, save, and then I'm gonna preview this, and as soon as I click on it is when that function will happen and you can see here it is my javascript function that does its simple alerts right inside of there, however, you may want to add additional functionality besides just alerting if you wanted to, there's a lot that you can dio if I need to get back into this function. For some reason, if that tab is closed, I could come back into the resource is and double click on this or click down on at its source. However, the quickest way that I find is just by clicking on this and then clicking on this arrow right here and that will actually pop open in the new tab and take me back to that function . There is a lot that you can do with the JavaScript, but you need to know how to reference your documents in sour your elements inside of tumult type. And the nice thing about it is that says we're here. OK, The element is the HT male document that triggered the function. So whatever triggered this function that will be the elements. The event is Theo event that's triggered this function. Basically, if it's a mouse event or a tap or something like that, you could determine that and use that as kind of if and statements if you needed to. However, you may not know everything else here, so it down at the bottom. We have a list of different resource is that you can actually do. We're gonna go over several of these in the next couple of videos, but for now, I just want you to know how to actually go in and add one of those. So you need to First of all, place your cursor somewhere inside of the function and then find the one that you want. So let's go ahead and say, Um well, let's just go ahead and say document I d. Here we just need to do with this is the one that I want. I want to go ahead and double click on it and you'll notice it now, places that code inside of that function if I needed to. I can add a variable and say sample far equals the hype document. And then that way, if I place it inside of a very black and then alert, it's someone to say alert sample bar. And now, if I hit preview, it's going to alert this index. Underscore hype underscore container. So a lot of different elements that we're going to go over how to do some of these. You can start and stop the timeline. You can get elements by. You can get the property. You can then set the property of a certain element to to be opacity zero. If you wanted to hide and show stuff, if you wanted to go in and jump to the next scene through the JavaScript, you could do that. If you wanted to pause the timeline if you wanted to start the timeline. Some of this stuff is the same as what an action would seo. There may be cases we don't want to do it, but you may wanna have a conditional element saying, If this is playing well, then stop this, or if this is the duration of this is a certain amount, then stop that or play. That's or do something like that. So it is useful in some situations to be able to reference this code. So I'm just gonna go through the next couple videos and we're gonna show you how to do a couple of these, starting with the document how you can work with the document by getting the I d or setting an I D and how you can set some different element properties, so we'll go ahead and get started on on that in the next video. 41. 41 Document Events: in the last video, we talked about creating this function from a mouse action. And so in this video, we're just gonna go ahead and explore some of the difference code elements that we can do down here, the different code Hansen stuff that we have available to us now if I wanted to, like you learned in the last video, if you just double click on something, if you wanted to use that and then you can modify it from there. But the first thing I want to do is we already talked a little bit about the document named Dr Night. The resource is folder and functions. I don't really use those ah lot. They are there. If you need Teoh, reference them a little bit more. And if this doesn't give you enough information about what you're going to be working with , there is a more info button which will pop open with a documentation for tumult type, and it goes into a little bit more depth of what you may want to use for, like, the timelines, how you start these different timelines or something. So that's just something to keep in mind is you can click on it and get a little bit more read a little bit more there. But if you're like me, I like to see stuff in action. So let's go ahead and explore some of this. I'm gonna first of all, come over to get element by i d. So we can actually get a specific element if we're going to talk to an element, especially if we're going to hide a certain element. That's not the element that was clicked on because you'll notice here we do have the element getting past in. So if we're talking just to this element, then all we need to do is reference it by element. But if we're gonna be talking to another element, well, then we need to actually go in. And we need to get the elements and we need to identify that So this is useful for that kind of thing. So I'm gonna go ahead and double click on this and then you can see it says hype document dot get element by I D. And then within quotes is I. D. Well, there's really not an element that's called I d out there so we actually need to go into our scene and we need to create an element that has an I d. So I'm gonna go in and create this circle and you can give the elements a 90 by coming over to the inspector window over here on the right hand side. And this is actually the identity inspector and we're gonna come down right now. It says display name. That's what's displayed right here. I can change that here. Or it could give this a unique element. I d and so every elements. It cannot have the same class that cannot or cannot have the same I d more than one elements. You need to give it a unique one. If you wanted to talk to several things all at once, will you can do that by class name, and so you can give it a bunch of different class names and reference it that way. But in this case, we're just gonna be talking to this one specific item because the events that's being called is on this element. So we're not talking to that specific one. We're gonna talk to something else, So I'm gonna go ahead and just call this circle and then I'm gonna hit, save and come back into my sample function. One here and we're going to say, Well, this is going to be circle. We're gonna talk to that circle. So But the nice thing is, if I wanted to reference this inside of other elements, if I'm going to add more code, it's probably easier to place this inside of a variable. And so we're going to say circle equals and then have that right after. So now, from now on, I can go ahead and use the reference circle, and it will be talking about this elements on the stage. So that's one way of actually referencing the i D. But we can also get the different properties about that I d. So I'm gonna go ahead and double click on this here. And so we're gonna say hype document, get element property and what element we're gonna talk about. Well, we're not gonna talk about the one that was clicked on. We're actually gonna talk about this circle, So I want to go ahead and double click on that. And then what property name are we going to do? Well, we're going to say left. So let's get the left property. What is the left property? I want to know. Well, in order for me, if I preview it here and click on that I don't really see that because I'm not doing anything with that information. So I need to do something with that information. So let's just go ahead and wrap this inside of a simple alert. I want to have an alerts that will pop open with the element property there. So I'm gonna wrap the hot hype documents, gets element property circle and everything inside of parentheses and alert parentheses. There. I'm gonna hit, save, and then preview. And if I click on it, you'll notice this says, 445. That is the left property for this. And so I can gather some information about different elements on my stage. That's where it becomes useful. And then, if I die, then I can add statements like if the get elements circle left property is greater than this, then do that. And so you can add on some conditional stuff inside of there, which, in order to do that, I'd place it inside of another variable. I'm gonna get rid of that. Alert the open parentheses, close parentheses there, and then I'm going to save our equals circle left and say, OK, that is going to be the property of the left here. And then we're gonna go ahead and say, if the circle left is greater than or equal to 500 well, then we're going to alert. So say, yo, sorry. Less than on. That's what this is less than if circle left is less than or equal to 500 then quotes Or do that, I'm gonna try one thing here just to see if we can do it without the quotes. And yet we can so you can do it. The quotes will be a string which in this case, it works. Um, but if you wanted to have the exact value of the of the property, then I would do it without the strings there. So now if I wanted to do greater than then I could do like, ah, 200 here, and you could see 445 is greater than And so that's what's useful about getting these element properties placing them, and so at then, adjusting the logic, and that's something you can't do with just the normal triggers inside. It's a mole type. So let's go ahead and do one more thing. Let's actually set the element property. I don't need this anymore because I just got it. But I'm gonna go ahead and say, Hey, circle, we're gonna set your element property by coming down here to set element property. When a double click on that and we're going to say document dot set element property and we're not talking to the element, the one that we clicked on. We're actually gonna be talking to the circle. So I'm gonna copy that and paste it here. And what property name are we going to talk? Well, what's the options down here? It tells me what the options are, says top left with height, rotate, Z scale, X scale y opacity and Z index. If I wanted to bring things ah, up the layer or down the layer, I can use the Z Index. We're just going to say left and then the value right here. Well, what value do we want? Well, let's just go and say it's gonna be 100 and do we want this to take over or two enemy. If we don't, we can just take that. This is the number of seconds, and we could take that down to zero, and that will happen instantly. If we do, then we're gonna go ahead and just leave that at 1.0, which is one second. And then I can say, Here's my ease in and out so I could do just ease in, ease out if I wanted that to tease in or he's add some easing to that. So I'm gonna go ahead in just a preview on this, and as soon as I click on it, you'll notice my circle animates from the right hand side to the left and side, and that allows me to get a little bit more specific with it. And then I can choose to animate several things all at once and that way, the time like and run on its own. And then this allows me to trigger this animation whenever I want there. So that's one useful thing about it. Now. There are some other things so you can trigger a custom behavior. If you have another behavior somewhere, you can trigger that. I don't really tend to use that much or have not come across any situation where I've used that and really out if necessary. If you wanted to explore a little bit more, you can take a look at that as well. But that's at least how you work with the document. How you get some of the elements on the stage, how you update some of the properties on the stage as well. Um, and it will how you animate those properties to the next value as well. 42. 42 Referencing Symbols JavaScript: All right. So the last section I'm gonna be talking about is the symbol Instances Now, the symbol instances if you actually come and take a look at the timeline and the different symbols right here or get elements. Sorry. If you look at the timelines and also scenes, anything that it's inside of the symbols, It says basically how to reference a symbol by I d. By name as well. And then you can This will show you how to actually start a timeline of a symbol how to continue a timeline, how to get the duration of the timeline within a symbol how to see if that symbol is playing or not so different things that you can do. But symbols are a little bit different than what the elements are. So you're just referencing this in a little bit of a different way. So we're gonna go ahead and come back into seen one here, and we're going to converts one of these objects over to a symbol. So first of all, I'm going to do a difference object here. Just so we have something a little bit different, gonna make it smaller, and I'm going to change the color of this to a different colors. So let's go ahead and change it to like a green here and I'm gonna right click on this and I'm gonna actually I want to come out to symbol and then go to him. Sorry, this group undo. I want to do select that, go to new symbol from selection and that will create a symbol for me. So, like we learned in previous videos, if you skip those videos for some reason, I highly recommend going back to the symbol section. But the symbols have different timelines inside of it. So if I double click on it, it will take me into that symbol. And if I stretch the timeline out here a little bit more, you can see that there's my symbol. There's my different properties and so on. So I'm in here. This purple bar lets me know which symbol I'm in. I'm inside of this symbol, and I'm gonna go ahead and just create an animation for second animation here, and we're going to just go ahead and let's just have this move over to the left hand right hand side there, and that's pretty much it. So if I go ahead and hit, save and then enter, you'll notice that that symbol, the animation of that symbol, is playing within the symbol itself. Because if I exit out of that that animation itself, it's not on the it is on the main time. Linus far is viewable here, but it's actually the animation. I can't change that animation without going into the symbol itself, double clicking on it and then going into the symbol there. So if for some reason at the same time that I want to pause this animation or do something with this animation, I also may want to reference this animation itself. I could do that. And first of all, you need to give it an I. D. So when you come into the identity inspector and I'm gonna give this an I d. Of Green Square and now I'm going to come into my sample function, And if you don't see that, you can go ahead and select this object here, come into your actions panel and then click on the arrow and that will pop up in the sample function. Now what I need to do is I need to reference that symbol. So I come up to the symbol section and I'm gonna go ahead and first of all, create of our and we're going to say Green Square equals And then I'm gonna double click Where says get symbol by I d make sure that I'm clicked here and there we go. I'm gonna change out the i d to Green Square. And that's what I gave the I. D. Inside of the identity inspector. And so now I can reference that and talk to that green square just by typing in Green Square here. Now, I can do more than one if I wanted to. If I wanted to talk to several different instances s so I'm gonna go ahead and say, OK, symbol name. If there is some type of symbol name, I can talk to every symbol that gets symbols you can use several times. And if you wanted to talk to all of them, you can do it this way as well. And so the next object is Get simple Instance If you wanted to get a symbol instance by certain name, a symbol name returns the symbol name if you wanted to get that if you wanted to get a element and side of the symbol because the symbol itself could have several elements. You can do that. In this case, we're just gonna come down. You can start the timeline, and you can pause the timeline. Now, I have to know the name of the timeline. So I'm gonna come into this symbol again, and I'm gonna come into mice. I want to come into my symbol, inspector. And you can see that the symbol inspector says main timeline. And so I'm gonna go ahead and just come into my sample function and come down the line, and we're gonna pause. Double click on that. I'm gonna Sure you come down the line here when a double click on Pause Timeline. And I'm gonna replace that with main timeline. We'll see. What symbol are we going to get? We're going to say Green Square. Oh, sorry. Don't replace that first part with Green Square and let's go ahead and just click on that and you can see now it's paused. So I have to replace that first part. But it just says pause, Timeline named, and we're going to name the timeline itself is in main timeline, so we're going to posit that timeline. We can then continued the timeline. We can go to a certain time in the timeline like we learned in the previous one. We can get the duration. We can see if it's playing, but it's just you have to reference this in a different way. You have to get the symbol in a different way than what you did with the elements. And once you do that, you can pretty much do the same thing that you're working with before you can still get changed. The properties of the different elements you can go in and get that elements inside of the symbol and adjust the left property. Adjusting capacity. Adjust pretty much whatever you need to get with this symbol instance. All you have to do is type in. If I was to click here, go in and say simple instance. Sure, I click up their symbol instance and get that element, and then I just basically have to define what element that I want to get some. That's how you work with symbols there. One other thing that note is inside of your symbol inspector, you can change this symbol from standard to persistent, persistent, basically adjusted. So you can actually have this across multiple difference scenes or multiple different pages , scenes, whatever you needed to with that, but pretty much else. Everything else is the same, and it allows you to go in and reference that symbol with your functions with your job script there. 43. 43 Timeline n Scene JavaScript: in this next section. I want to talk about scenes and timelines. So these are two different things that you can do inside of tumult type to navigate to a certain scene or to start a certain timeline, deposit certain timeline, or even check if a certain timeline is plain. And so we're gonna go ahead and just explore a couple of those. And so the first thing we're still in the same function where we have the entitled scene and we have this rectangle that is basically triggering this function. I got rid of getting this. I still have the element I d right there. But I got rid of referencing that for now. So we're gonna go ahead and in order to jump to another scene or to go to another scene, I need to come over and make sure that May scenes panel is showing here. Click on the plus icon and then go ahead and create a new scene. So let's just go ahead and name this scene. One double click on this and I'm gonna say scene one, and then I'm gonna name the next one seem to, and now what we're going to do is on scene to I'm just gonna add some text saying this is seen to Just so we know that we've navigated to that seem to now again, you can go in and you can add on ah, through this events you can add on a go to scene. But doing it through the job script allowed you at toe add a little bit more functionality saying, Well, they have to click this this and this before they actually go on. So this is something where may come useful to do this still, but by adding some more logic to it. So I'm gonna go ahead and under the scene section, I'm going to say current seen name when a double click on that. And then let's just place this inside of a variable. Actually, let's just place this inside of alerts so we can see what the currents seen name is, and then you could see that it will alert seen one, and that way Toe lets us know that that is the scene, and we can run some logic saying, if seen one do this if seem to do this and so forth. So let's go ahead and get rid of that. So here and the next one is a show seen named, and this will allow us to go to a certain scene, and it even allows us to go to or specify the transition or cross fade so you can see the here, says K. Seen transition Cross fade. Well, what other options do we have? These are the different options that we have available. Cross fade, swap swipe or sorry Swap pushed bottom to top. And those were the same options that we have We can define in the number of seconds that it takes to actually go to that. Now we do have to specify the scene names, So I want to go ahead and say seeing two and then we're going to hit. We're going to click on that and now it's going to go to seem to, and you can see that it's did the cross fade Vaid from one scene to the next scene. By doing that Javascript there Now, if you don't know what the next scene is going to be, you don't have to specify the name. Specifically, you can go to and click on the next one show next scene and this will go to the next scene and you could specify the transition as well. Or you conduce previous seen this well, So let's go ahead and get rid of that double click on previous scene and that will go to the previous scene. So that is basically just be the scenes. And again, the you can do this through the triggers and said it small type with the real power of it is you can specify an add additional logic. Additional JavaScript check variables to see if something has been clicked on before you actually run that transition. So that's the rial benefit to that. If you wanted to add on some conditional logic there, So let's go ahead and talk about timelines. Now, Now, timelines, if you notice back in our seen inspector, if I come into the scene Inspector here, this is where I can add on additional timelines. So I want to go ahead and create a new timeline and we're gonna call this time line to and in time line to make sure I click on Showtime line. I'm gonna go ahead and click on record and just move this over here my circle here, and that's gonna take about four seconds. Great. Let's go ahead and go back to the main timeline Click on show Timeline. But if I hit, enter that timeline doesn't actually play. So let's go back into this sample function and we're gonna go ahead and say, Start timeline named and I want double click on that. And it's basically going to want that timeline name which we named it Timeline to, and you can either do it in forward or you can do it in reverse is well, so I'm gonna go ahead and hit save in preview. And now, as soon as I click on that, it'll start that timeline. Now I can come back in here and say, Well, if that time, Linus plane. So let's go back in here and start a main timeline. We're gonna add a animation to the main timeline, and I'm going to say this is actually going to move up here, and that is going to be on my main timeline. Well, now let's go ahead, and I want to pause that if this is clicked, we're gonna pause this instead of going to the or playing the other timeline. I want to positives current timeline. So let's get rid of that code back here. Go ahead and hit. Delete on that and we're gonna double click where it says Pause, Timeline will which time later, we're gonna pause. That's gonna be the main timeline. So within the quotes, I want to say Main timeline and make sure that I have that space because of going back into my seen my timeline name does have that space as well. So now go. Go ahead and hit, save in preview. And you see, if I click on this in the middle of the animation, it will pause, and then I can trigger it to play again if needed. So that's another option to pause. We also have continued timeline, and so this will. Basically, if it's pause, continue the timeline if needed, or it can go to a specific time in the timeline. This is useful if you want to jump to a certain point. Ah, we know that the timeline name is going to be main timeline and then we're going to jump to , let's say, two seconds. And when I hit saving preview, click on this real quick and you could see that it kind of jumped. If I click on this again, you can see that it jumps back to that to second timeline. This is where you get into there's not really a drop down function for this kind of thing. So this is where you can get into some additional functionality. So current timeline named your current time and timeline This basically, if we place this inside of a variable and save our current time equals and then let's double click on this What? We're gonna get the current time in the main timeline, and now I'm gonna alerts the current time. And now, if I click on this that you can see it alerts here. And this is where I can say start adding on some additional functionality. Well, if currents time is less than or equal to two seconds, then when this is clicked, we're going to alert timeline not finished. Now, if I go ahead and hit preview, you can see the timeline not finish starts or triggers at that point. But if I then click on it again, nothing actually happens. Because now the current time is more than two seconds inside of that timeline. Well, let's check out the next option. Let's say duration for timeline. So we're going to say, OK, let's alerts this one open close parentheses and then with my cursor in the middle of my parentheses. And when it double click on this outlets, that was the wrong one. We're going to say duration for timeline, and this is going to alert the duration of the main timeline. So no matter when I click that it just going to alert, it sets at six point to the duration of that timeline. But this also allows me to say Okay, if the duration is at a certain time and if the current time is, you know, finished with the duration than I could do some other logic as well. So current direction for timeline, this is basically saying is going forward is going backwards. That allows me to get some information there, but then the final one is the is plain if I want to check to see if it's plain, if it's not playing than run some logic, but let's go ahead and double click on that and you can see document is plain timeline and named, And we're going to say we're actually gonna say timeline one. Go back in here and make sure that's the name of timeline to is what the nameless and we're going to check to see if that's plain. If it's not that we're going to do something else. So we're going to say, Let's just alert that So I put this in parentheses. Is it plain? It's gonna should give me a true or false there hit, save and you could see that it says faults. Now what I'm going to do is instead, if it's fault and so let's go ahead and place this in a variable so we can work with it a little bit better. So I'm gonna save far timeline to plane equals and then we're gonna say is playing there and then I'm gonna say if timeline to plane is equal to then what we're going to dio is we're going to play that timelines when I come back and hear, Start timeline named and we're gonna say timeline to, and we're going to start that at that point if it's not playing, so it's not playing right now. If I go ahead and hit this button, you can see that it was started that timeline. I don't have the option for relative selected. So I'm gonna go ahead and just select both of these to be relative and now hit preview and you can see it starts to animate over. And it's the relative wherever the position was that. So now it's automatically animated over with that timeline. So it basically adding this different job script functionality with the with the timelines of the scenes basically just gets a lot more details, and you can add more conditions to its inside of symbol type. So that's the real benefit of being able to do this kind of thing. 44. 44 Reusable Functions: If you've created a function and you want to reuse that function in different instances, when something else is clicked and you don't want to have to rewrite the code, will you can come in. And if that function is inside of the resource is folder here so you can see that I have this. A sample funk. One inside of the resource is if I want to also trigger that same thing when this is clicked on here, I can come in and click on the mouse. Actions go down to mouse click, select the drop down box for run JavaScript, and then I can select the Dropbox to run this sample funk. One is, that's the nice thing is, once you've set up this function, you could really trigger that function in any way. You can trigger that function when its dragged. You can trigger when it's mouse over, you can trigger when it's tapped to. You can trigger when it's when that swiped and different things like that you can just run that same function. But that's just a simple way of basically saying OK, once I've created this function, I'm gonna trigger that same function several different times 45. 45 Attaching jQuery: one of the nice things about two multi peas you can bring in other external JavaScript libraries from any place basically from green sock from J Query and other elements that you want to bring in and use that functionality. That's part of that JavaScript library inside. It's a multi pits. A really nice feature toe. Have I want to show you how to do that? So I'm gonna bring in one of the standard ones, which is just basically J query. I wanna go. Go ahead and come over here and I went to j query dot com and then the download section. And this allows me to download. And I selected the download. Compressed production Jay Query 3.1 point one. If it's a later one, this will still work. If it's an earlier one, it'll still work as well. But I downloaded that to my desktop. So I have this Jake Worry 3.1 point one men dot Js. So I'm gonna come in here and go back into tumult type and inside of tumult type we're gonna come into the resource is panel. We're gonna click on this plus icon and we're going to say add and JavaScript or Add file and we're gonna come in here select to the J. Corey Mobile one star, not Jaqui Mobile, just regular Jake Worry. And now that has basically been added into our resource is. But if I select on this, you'll notice that it says include in Document Head. This means that it's going Teoh attach this. If I preview this, let's go ahead and see this. And when you right click, go to inspect elements when it come up to the head and you'll notice right here we have a script that's attached that's going to into the index dot hyper or Hypo Resource is slash. And then there's RJ Query Mobile one. By selecting that basically and making sure that this is selected to include in the document head, we can now use that Jake Worry function in any or how we referenced it for objects in any location, any Java script that we use. So I'm gonna come in here, and I still have my sample funk one here, and I'm gonna go ahead and use the standard way of referencing and object in J query. If you remember, this circle has an i d. We gave it an I d of circle. So instead of it referencing it like, um hype does, we're gonna go ahead and reference it like Jaqui does if you're already familiar with this . So we're gonna dio a dollar sign, open close parentheses and then within quotes. We're gonna go ahead and do a hash tag, which is this is an I d that we're talking to. If it was a class that we added, we would add the dot But in this case, we're going to say hashtag and then we're going to say circle that is the name of the I D. We're gonna do a simple dot hide that is a J quarry function to hide. That's ah, that's element. Basically, the whatever object has that I d. So I'm gonna go ahead and hit save in preview, and as soon as I click on this, you'll notice the circle has now gone away. And so if I wanted to, I could do a ta go hide. I can do a show I could do if it is visible or not, and so I can do whatever J. Corey functions that I'm already familiar with inside of tumult type. And so that adds on a lot of additional functionality. Some of my favorite JavaScript libraries are you have green sock. You have Jake weary and there's a whole lot outs out there. But those are my kind of top two favorite that I really like. So So that's how you use Jake Worry inside of tamal type or any additional JavaScript library and said it small type. 46. 46 Global Variables: Now we're gonna be talking about global variables because right now we've already done this in previous videos where we've created inside of our JavaScript Ah, local variable, Same var. Let's just go ahead and say Numb equals five. And there we go that creates, ah, variable called numb, and we set a value to five. But the problem is, if I run another function somewhere, it's actually not going to be able to access this variable. So if I come in here and let's say, Well, that function is gonna be run here. So let's alert this numb here. And if I run that function, you can see alert five greats. That works. But let's try to access that same one from a new function. So when you come into my actions and I'm actually going to create a new function and we're gonna call this alert again, it's up to you. What, you name it there. But let's go ahead and just try to alerts. Five. Since it's already been created or alert, numb so that will work. The variable has been created. However, when I click on the circle, nothing happens because it doesn't know what to alert. And so we're gonna go ahead and come in. And in this sample function, we're gonna do one thing to the numb. We're actually gonna say window dot Numb equals five. And now, if I come in here and click on this, it'll say five there. But now, if I click on the circle, it will save five as well. So basically, what I'm doing is just saying, Hey, window, which is the entire window or the top level window. We're going to create a variable called Numb, and it's going to equal five and because I've created it there once, I try to use it again because I've created it there. Once I try to use it again, I can if I want to just have it at the very beginning, instead of having a function that runs as soon as it clicks. I could come in here going to my scene, inspector and come down here and click on on scene load. We can go ahead and run a function that creates the variables that we're going to use throughout the entire pages or throughout the different scenes and everything or the difference functions and stuff so That's really all that you need to do in order to create a global variable, just saying window dot numb equals five, and then once you've created that, you can use that variable in any function, any location inside of your project. 47. 47 Publishing Your Project: all right. So when you're ready to get this to a website somewhere, you can't just take the project file that we've been working with and uploaded to a website somewhere. You need to actually publish it out to, uh, html file as well as its supporting files, and then take that and upload it to a sample or to a website somewhere. And then your users will navigate to that website or you can place the content somewhere, like inside of an e learning course or something like that. It's just basically, it has to be exported out. This project file is only for editing. You do want to save it for future editing later, but basically this bile itself cannot be previewed when someone does not have the hype, tumult or that small type of project. So in order to do that's once you have this project, let's just go ahead. I just have a sample blank project. I'm gonna create some content, and then I'm going to export it out here. So I'm gonna hit, save, go out to file and come down to export as HTML five. Now I can go to export his movie if I don't have any interactive elements where button that's clicked on or something that has to be interacted with, and it's just an animation. Then I can actually export it out as video animated GIF or PNG sequence. And so, if you wanted to get something just quick as an animated GIF for something like that, then you can actually do animated inside of tumult type and and export it as a gift or a video or something like that. But in this case, I'm gonna export it as html five. We're going to talk about the different options in the different video. But for now, I'm just gonna go ahead and come up to Folder, and we're gonna make sure that these options air selected where it will save in html file. It will include the text contents for search engines, and so it could be searchable by the different by the difference Web engines like Google and other things. And then I'm going to create this inside of an enclosing folder. If I do not have that inside of an enclosing folder, what will happen is it actually will pay place all the files on side of my or on my desktop , and I would make my desktop very cluttered. So I wanna make sure that this is included and then going to go ahead and hit Save and that's it. So what's happened if I go back over here is it's created this folder for me called Sample and if I double click on it, it's now going to say sample that HTML file and then I have my sample. That hype resource is inside of here, which has my GIF files. It has my JavaScript files, any attachments that I did. If I did like a J query attachment or something like that, it would have that inside of there. Now, the nice thing about this is I can actually go in, and I can update the code later. If I wanted to open this up inside of a text editor or something like that. If I have pulled us up inside of like, sublime text, you'll notice. Here is my HTML editor. I have my CSS right here and then I have this container so we'll talk about why this container is useful in a later video. But for now, this is at least where you can actually take this, um, container. Or you could get to the HTML file and you can update it later. So that's the package file. You would take both of these files uploaded to a website somewhere and then point your users to that website, and then they can experience the interaction that you created inside of tumult type. 48. 48 Importing Hype: now what? If you want to actually take your content, you want to embed it inside of some other HTML file? So you want to have some other type of wrapping or anything like that, and then place this inside of that HTML file. So what we're going to do is we're actually gonna pull up in sublime text, which is a text editor, and I'm gonna go ahead and I'm going to save A like I was creating a website, a standard website. I'm gonna create a folder, and I'm just going to call this example, and then inside of there, I'm going to create an index dot html file and then I'm going to start creating, just, like sample html hit, enter sample websites now inside of the body tag. I'm just going to start creating some different elements. 1st 1 I'm just gonna create a paragraph. This is in example, Riggio, maybe like a heading as well. And there we go. So if I was to go ahead and preview this right now, I want to go up to the example. Double click on index dot html file, and I'm gonna bring this over here, and you can see that it has my standard HTML and my age to my paragraph as well. But it doesn't have any type of styling, So we're not going to talk about this. Isn't a class about CSS or anything like that. So we're just gonna go back into sublime text and I'm gonna show you, actually, how to take the content from your tumult type project and place it inside of any other HTML . So I'm gonna come back in here and just gonna hide everything, and we're gonna take the sample project that was exported from hype, and I want to grab the sample dot Hype resource is folder and I'm going to copy that into the location of my website. And so wherever your website is, this folder at least needs to be inside of there. I'm also going to open up the sample that html file inside of sublime text, and I'm also going to make sure that's my index file is opened up as well. So let's go ahead and just kind of resize these two. And when it's Regulus over. So we're on the same project. There we go. So now I have my sample html and my index dot html. Now I want the hype project to play be placed inside this index dot html. So I want to come into the HTML file that gets wrapped up inside of when tumult type was produced. And I'm going to go ahead and copy this code right here. And it tells you, exactly copied these lines of code into your documents. And this is where the end the copy is going to go ahead and copy that. Come over to my index that html file. I want to go down a couple lines and then just hit paste there. Now that is going to be the contents of my HTML file, my hype project. Basically, and that's all I have to do if I come back into this index that HTML file, which was my new website. I've point pasted in the sample hype Resource is folder, and I've also added the HTML file that code snippet into the index dot html file. Now, if I double click on it, you noticed my normal HTML file is still there, and then I have my hype project right below it so it automatically takes bets placed inside of the other content as well. So the other option that you have inside of two multi pissed to export as a, um, file and O A m file is actually a basically a wrapped up adobe project management or adobe file. That's a single file that you can import inside of Dreamweaver, where you can import inside of If you're using adobe captivate or something like that, it's just adobes way of zipping it up and then importing it into their websites or to their structure, basically, and so you can use thes external files and then use and publish it that way. So that's just something to keep in mind. In the next video, we're gonna be talking about iBooks and how to actually take the content you built and then exported four iBooks and how to import into iBooks and use it inside of iBooks. Author 49. 49 iBooks Author: one of the nice thing that small type does for use. It allows you to export content easily To iBooks author Now, iBooks author is an application from Apple that allows teachers or instructors to create their own textbooks. But to go beyond the normal just kind of page Turner and allows it to create interactive elements, interactive quizzes on insert other things like videos or images or audio files and stuff toe to bring the book itself Toe life. Now one nice thing about to mull type is the iBooks Author allows you to import HTML files , and you could build your own HTML files. But in order to get it inside iBooks author, you would need to know how to zip it up. You also need to have some extra files. You need to know how to take a screenshot for and place it in a certain location and name in a certain thing as well. So there's a lot that has to go into creating that's and then packaging it up so it could be worked so it could be imported inside of ah ibooks author. And so what hype does for use when you create this interaction. You can export it out and it zipped already for you, and you could just import it right into my books out there. So it's a nice way to create the interactions inside. I books out there and export amount and use them inside. IBooks. Author. So I have this sample interaction here. It's really not much is just an animation. So let me go ahead and drag this over, and I have thes animations that kind of animates from one side of the stage to the other side of the stage, and when one is clicked on, it jumps to the other stage. So again, not much is happening there, but it will at least give us an idea of how to take a content file that we we've done inside of tumult type and export it out before I book's authors. I'm gonna go ahead, go ahead and come up to file, go down to export as html five and then come over to dashboard or iBooks, author widget. So if I click on that, I'm gonna go ahead and name it. Whatever. I want to save it to my desktop and then click on safe. That's it. If I come over to my desktop, let me go ahead and hide that. If I come over to my desktop. This is now my iBooks author. Ready widget. It's also the dashboard. If you use your dashboard it all for their Mac, you can actually install this as an interaction inside of your dashboard. I personally don't use the dashboard a lot, so I'm not gonna do that right now, but this package file is ready for me to import it right inside of iBooks. Author. So I'm gonna pull up iBooks author here, and I don't have much created in this iBooks author book yet, but I'm gonna come up to widgets, and I'm gonna go down to where it says html. And as soon as I click on HTML, it allows me to place this HTML file on the location that I wanted to be for the book. And then I'm gonna say, plays on page plays full screen or plays automatically. And so now, basically, these were just the different options that I can choose. It's like any Mac application. You have your inspector window here, and then I'm gonna go to the html five widget, click on choose and then move that over a little bit. Now I can choose that html five, which it which is this package file? Click on insert. And it takes a screenshot for me automatically inside a temple type. And that's the screenshot that gets used. So the learner won't actually see when they're looking at this inside of their iBooks. That won't see this interaction until they go into it and they have to tap it to actually go into it. So I'm gonna go ahead and preview this, and if I had an iPad plugged in, it would actually give me the option to select my iPad. And all I have to do is pull up by books on my iPad. But in this case, I'm gonna go ahead and just click on preview here and then click. OK, let's go ahead and just close that for now And now I can expand this and there's my animation that I created and set it symbol type its animating. And it's also interactive, so I can use this to place it inside of iBooks author and make the interactive content help the learners interact with a little bit more and learn the concepts that they're working with. Ah, and you can use tumult type to be able to create these types of interactions and insert them inside of iBooks author. 50. 50 Document Inspector: now in this video are in this section. We're gonna be talking about the different inspector panels and the different options that you may use that we haven't really been able to dive deep into. So we're gonna just basically talk about some of the different options. So over on the right hand side, just make sure that your inspectors showing in the first video this section we're gonna be talking about the document inspector. So right now, this HTML page title is automatically generated, But you can go ahead and overwrite that just by typing in some page title. The other couple options you can show loading indicator as this is actually loading. I don't know. It might be too quick to show it locally here, but as that's loading, it will actually show a loading bar as the videos loading or something like that. If you wanted that to happen, then you can go ahead and click on that, make background transparent. So if there is a background, then you can actually make that transparent. Let's go ahead and try changing the color and see if this works here. If I go ahead and hit preview, you'll notice it fills up the entire screen. But if I click on a make background transparent, then you notice that it does not fill up the entire screen and Onley it basically the background itself, even though it's green, is going to be transparent. So if you place this on a website somewhere, that's not gonna have a background. Whatever background you used on that website, well, then take place. And so it's just a basically anything that I insert here will still be there. And I could see that put the background itself is gonna have no effect. And it's going to take the place of wherever it's wherever the content is placed on. So that's just another option. They're gonna come back in here and change this back to a white color there. Okay? And now we're gonna go back into my document. Specter, the next thing is create offline application cash. So if this is basically going to be cashed, or if the user is going to look at this website offline later, then you want to create that cash and so it can save where they were at take and save different informations about it. If I wanted to get into the head. HTML. This does allow me to come in here, and I could actually attach a job script file that's using a cdn. So if I want to, a cdn is basically just a hosting for different JavaScript libraries. And so if I wanted to place that inside of here inside of the head tag or if I wanted to attach my own CSS, I can do that inside of this head file. You can also do it inside of the resource is folded like we learned. But if you wanted to get right into that head html file, this is the location to do it. The next thing is the advanced options. Protect your external links and or your external styles, and so therefore the users can't get to. It's going to basically modify it sort of change in a way that it's encrypted. Ah used Web kick graphics acceleration. So any browser that uses Web kit this will use the graphics acceleration to make it perform a little bit better position with CSS top and left. So instead of positioning with the X and Y, it's going to use the top and left values instead. And so mobile options It basically the view port with is going to be the document with or you can do it based off the device with or the device. Ah, hype. Now, the document with is basically what you set as the adjustment which right here is gonna be 600. But if you go document with, it's basically going to set the view port size at that initial scale. This is more for, like, if it's going to be used for mobile, you do want to make sure that that is selected because that will make sure that it renders on the high resolution phones it renders correctly. And this is allows user to scale if you want them to be able to pension or not. If you do not want them to be able to pinch in, you just simply uncheck that. Now this does give me a warning saying Hey on android. Preventing user scaling is not when we pop that up on gingerbread prevents user scaling is not supported. So ginger breads kind of old, so it really doesn't matter. Ah, use touch events show on the mouse click. It's basically going to say Okay if I have a click, it's also going to be a touch. If I uncheck that, you'll notice that usually it says like or tap here. So it says on mouse click. It doesn't have that tap option, so it's not actually going to be workable on a mobile device, so I don't really see why not to use that. So if I select that you can see here it is tap, touch, start, touch, end and things like that. And then right here, home screen Web app. Basically, this allows me to. If I wanted to save this to the home screen, I can set the status bar. If it is launched again, I can set the status bar to translucent or black or default, And so when it opens the screen again into full screen, it's it's going to be we're going to get rid of the status bar or change the color and then also show browser compatible E compatibility warnings. This is if I want to adjust to some of the browsers and say, OK, I'm not really gonna support Mac Safari on anything earlier than 6.0 point five, and so don't show me those warnings. That's not gonna work on their same thing with i e. It's if you're really not going to support anything, because Microsoft really doesn't support I e eight anymore. So if you're really not worried about that, then well, don't show me those warnings anymore. If you're going to just support, I eat 11 or something like that or are you 10 and then also ibooks author, Just whatever. The latest ISS. Um, then it will give you those warnings if it's not gonna work in iBooks author so that those air just settings for the document as a whole those air, the different options that you can choose from and you can check these off and on inside of the document, Inspector. 51. 51 Scene Inspector: All right. The next inspector panel. It is the scene inspector. So if I scroll up here and come up to the scene, Inspector, we've already worked a lot with the scene, inspector. So I'm not gonna cover everything, cause we already talked about scaling. We talked about adding new break points. We worked a lot with timelines and everything. But a couple things to keep in mind, though that we didn't really dive deep into is you can set the initial scene size to whatever size you want. So if you're going to initially target ah, large or a medium websites, then you could select that over and it's gonna automatically And when I zoom out here, but it's are automatically going to set it at the 1000 by 5 40 And that's going to target that's device. Or if I wanted to target iPad landscape, then it's going to set up the 10 24 by 7 68 and it's gonna automatically set the default size of that Or if I scroll back and go back to the default and has 600 by 400. This is the default size that any tumult type application starts out with, but I could come in here and adjusted really to whatever I wanted to for the default size again. Keep in mind that you can add new break points and different layouts based on the size is that you want there. But you initially have to have one set size to begin with. Another couple things that I want to mention here is on scene load. If you wanted to run some Java script and you wanted to create some variables, typically the global variables that you may be using is best to do that on the scene load. And so if I click on this plus icon, I'm gonna come in here and run JavaScript. We're gonna create a new function, and I'm gonna call this function Just load variables. And one of the nice thing I'm like about being able to just have different functions here and there is I can separate my code. Instead of having one big, long JavaScript file. I like to separated into different sections and only use those at certain times. So this is where I would come in and do the window dots. Numb equals five. The initial value of that. And now it's going to be a global variable that can be used pretty much anywhere in any, uh, any location, any JavaScript function that gets called later on. I could just have this one function as soon as it loads that I can then use that that variable in different JavaScript files or Jim Doubt JavaScript functions or something like that. And so also, if I wanted something Teoh unload or change when I change Saints Aiken do that. Keep rest. If I click on Key pressed, it allows me to jump to a certain scene. Allows me to go to ah, how'd I can change that based on the actions that we've learned? But this is basically just keep in mind this is any key pressed. If you wanted to create a custom behavior, you could do that, Um, but right now, just key down, keen up key key or sorry, Swipe left, swipe right. And that's just swiping anywhere. If you swipe any on any location or anything like that, it's going to do some type of action or something, and then the last one is drag on drag. It's going to do some location or do some action as well. If I drag a certain item, I can control the timeline or I can remove Sorry, run job script or do something. So now the drag. If I drag an item Ah, and you control the timeline by Dragon. We've already learned that in a previous video. So if you wanted to dive deep into that, I recommend going back to that video in some of our previous sections. But that's the scene inspector that's really the most. What you'll be working with is the sizes adding nude layouts and then adding on scene code or seen functionality or swipes or or something similar to navigate from one scene to another scene. 52. 52 Metrics Inspector: in the next video, we're gonna be talking about the metrics, Inspector. Now the metrics, inspector, we've worked with the lots already. So we've done the placement. We've done the width of the scale. We've also done the flexible layouts and we haven't done as much of the rotation or the transform origin or the content overflow. So I'm gonna talk a little bit about that and in this section, so you know what you can do with those? So first of all the content float, it allows you to define an area if it goes beyond a certain element or certain width and height, as how is how is it controlled? And so, in this case, I'm gonna come in here and just to show you, I'm gonna click on this text elements here, and I'm gonna come over and grab some Laura Ipsen text and someone I already have this up. I'm just gonna grab a paragraph here, gonna copy that, come into tumult type, and then just paste that there. So let's resize this a little bit more and I'm gonna with this selected come over to the metrics like the drop down box, and this is where I have the option for hidden scroll bars or autos, Crowbars, squirrel auto scroll bars is it will just indicate if it's longer than a certain area that will automatically create that scroll. But you notice right here This text actually goes beyond what this this width and height is so I can fix that and, you know, a couple different ways I can actually come in here and adjust the width and height if I wanted to. So the top in the height right here, if I wanted to adjust that, and then it would take the whole entire screen, I can adjust this, But really, what I want to do is I want to create just a certain area to be the text box, and anything beyond that is just kind of scroll herbal. So if you're on an ipad, you can just kind of flick down to see the rest of the text. And right now, with this content overflow set as visible, that's not gonna be the case. So I actually need to select either auto scroll bars or squirrel bars, and that will define anything beyond that point. The width or the hype is going Teoh be created with the scroll bars. I want to go ahead and hit save in preview and you'll notice my texas kind of cut off. But that's OK, cause that can scroll down. And if you're on an iPad, you can use your finger to kind of flick down as well. Not only can you do that with text, but you can also do that with grouped elements. So I'm gonna go ahead and create a couple different items. So I'm gonna create a rectangle, come in and creates a circle here. And then I'm gonna come in and create a text item. Let me actually create that text item later. Let's go ahead and just select these items. I'm holding the shift button down. I'm gonna right click and then go to group. And so now in my timeline, let's expand that out a little bit more so you can see it has a folder with the group inside of there. With that group selected, I'm gonna go ahead and select some text and make sure that the Texas actually placed inside of the group and I'm gonna go ahead and move this text over a little bit, but I'm gonna have an outside of the group when we have it below the group. Now, with the group selected, I'm gonna come back over to the content, overflow and select the scroll bars, and now it's not visible there. But if I go ahead and hit preview, I can scroll down and see whatever the text is down there. So that allows you to define a group to find certain elements and then create a scroll bar to see the elements if they go beyond the width and height that you've actually defined. And so one of the thing I want to talk about is I want to talk about the rotation and the transform origin. But that's the visible contents. One go ahead and hit the lead here. I'm gonna come over and then inserts another rectangle, and when I start to rotates, you'll notice as soon as I start, you can use the angle of Z. I can also use the angle of why an X will talk about those later, but you'll notice that kind of rotates in the middle. This Centrepoint, as I'm rotating, is directly in the middle. That's because the transform origin here. The X offset in the white US offset at 50 50 puts that offset. Or that's where the transform Middle Point middle point is directly in the middle itself. If I wanted this to be just on a corner, I could say, OK, 100% and then go to offset Why? 100%? And then what will happen? As soon as I actually start to rotate this, you'll notice it's on the top right hand corner there. Because not only is the X over there, but the why is over there and assumed as I rotate it rotates on the corner. Just depends on how you want to actually transform or animate these different objects. If I was animating the rotation, this is how it animates. Not in the middle, but it would animate on the corner. It's up to you how you want that to rotate. It just depends on what object you're actually working with inside of tumult type. Now, other thing that I want to talk about is three. Why rotation? So you notice I could get some three D effects and I can get some X s 03 d effects with both the X and Y values. But one thing to keep in mind is there are a lot of browsers that don't support that. So it just depends if you're targeting and they're mostly the older browsers. But if you're targeting the older browsers for some reason, like I e eight or nine, then you want to stay away from those. If you're targeting the new latest browsers, like chrome or safari or something like that, then you can go ahead and use those. There's just something to keep in mind there. But that's how you used the metrics inspector, inside of tumult type. 53. 53 Element Inspector: All right, So now we're gonna be talking about this shape, inspector. Now this shape or the element expect, er I also call it the shape Inspector because it has the shapes for the icon. But this is the element expect er, and this will highlight as soon as I have some type of elements selected, and it gives me the different options for that element. So I'm gonna come in and insert a button, for example, and the options for that button are selected when I actually have that button selected, or it come back into the shape, and the options for that are selected here as well. There are a couple different options. You can select the drop down box here for the background to either be a solid color, selecting the color to choose what color you want. Or you could do ingredients as well, which will have two colors. And you can adjust the angle of that radiant on however you want. Or you can also insert an image and have that image be your background, a repeating background or something. So on the buttons, same thing. You can have Grady INTs for your button. If you wanted to. You could have an image for your button. Whatever you needed to dio on that if you select none as the feel, it'll just have the outline. So you noticed. Now I have the just the outline itself kind of that hollow. If I wanted to change the color, we can change this toe white here. And if my background was a darker color that's hollow color there. It allows you to change that and then I can go into the text and change the color there as well. Now a couple of other things, something go ahead and just delete the button. For now, let's just work with the shape going to turn it back to just a solid color and a couple things that we can change in the next section is the border. So we can adjust the border with we can adjust the border color. We can also adjust the border style. So we have dotted dash group your typical settings there. So I'm not gonna go over all of them. If I wanted to get rid of the borders and I could just set that to zero and now the border is no longer there. If I wanted to adjust the radius, I can come up here and adjust the radius of that border as well. So you can see. And now we have the rounded corners. So I'm gonna come in. And if I wanted to adjust the radius just for one corner, I can select in this area the one corner and just up that a little bit more as well. So now I get a nice shape. I still have the rounded corners on the other ones because when I adjusted this in the middle, I had all of these options select are adjusted this in the middle. Then I basically adjusted all of them. But if I select just one of them, then I'm just selecting one of them. I can define that radius for just one specific one. So I'm gonna go hands like that in the middle here. I'm gonna come to the next section, which is visibility. This ability allows me to adjust the couple things first of all, the opacity if I wanted to make this transparent, but also the display. So the display itself is one of the properties in the animation. If you scroll down, you can come down and add the display so you can actually in your timeline, turn things off and on as it's growing through. For some reason, if you wanted to not show at the very beginning, I can select a key frame, come over to display and select that at hidden. Then when it gets to four seconds. If I wanted to just appear that I can come in here, select the key frame and then select this back too visible. Even though it looks like it has an animation, it really isn't the display dozen enemy. That's more of the opacity that will animate if I you could see right below. Here we have the opacity, but the display doesn't anime. It just kind of as soon as it hits the next key frame, it appears, And so you can also use that. If you're using JavaScript, you can change the element of display, and you can change that to either visible or hidden and adjust that as needed there. But that's the next section there, and then you also have the ability to create a shadow so you can up the shadow by adding some X and Y values. You can also add the blur values if you wanted to blur a little bit more and then change the color of how you want. So changing color to kind of a lighter grey makes it look like it's a little bit more transparent. And then you can even adjust the opacity if you wanted to and get some cool shadow effects there, or if you didn't want to just input it there. You can actually use this nice shadow dragger, and this will actually allow you to drag both the distance of the X and Y value. And you can just kind of drag that into the location that you want there. And then finally, you have a couple different things that filter options. Gonna go ahead and just get rid of the shadow. Let's just take these down to zero and so you have blurry F sepia. You have saturation. You have hue, brightness, contrast when you're getting into these stuffs a couple things that keep in mind that a lot of this stuff it just depends on the browser. So just make sure as you're starting to work on this, you're looking at the filters, making sure it's not a browser, that you work with the lots or you're trying to target or anything. So keep that in mind. But it's really just kind of adjusting here. Either the foreground or the background. You can adjust a couple of those, and then the last thing is the reflection. I gonna add a reflection to any object. I can add the depth of the reflection, like how much this reflection show that object. And I can also add the offset How far of a distance is there? So if I wanted to some type of reflective surface off these different objects, I can add a reflection at any point. So those are some of the options that you can do with the element Inspector over in your inspector panel inside a temple type 54. 54 Physics Inspector: in this video, we're gonna be talking about just a simple introduction to physics and the different things that you can do with physics. Now I'm hoping to in later time have different tutorials on how to use physics to build different types of games. This is just uninterested action to how to get you started with thermal type and how to get you started with physics themselves. So if I come in here and go into the elements, I can select the drop down box and just actually do a circle here. So I want to go ahead and select a circle and I'm gonna have that just kind of up on the top now, by default. The circle does nothing at this point. So I'm gonna go ahead and add some physics to that circle. So we select the drop down box and go down to dynamic. And what will happen as soon as I select that to be dynamic is the physics themselves will start to apply. Now I can do a couple things with seen as I can say, OK, how fast I want this forced actually happen so I can adjust this to be Let's just try 100 for example, and you can see that it happens really quickly that it's basically the force. That's the gravity force is basically really strong at that point. But by default is just leave it at one so just kind of falls at a normal pace. The next thing I could do is I can adjust the angle, so by default it is 180. But let's go ahead and try adjusting this to, like, 90 or something around there. So 90. And what will happen is that now the angle itself is it says the gravity point is this way 90 degrees instead of the 180. Well, I suggested over to the left hand side, and you can see that now it falls to the left as well, so you can adjust how that does in the scene by default. And so another thing that you can use you can control the gravity with the tilt of your device. So if I go here and I actually am on an iPhone or an android phone or anything, I can actually, with the tilt to my device control, where the gravity actually falls where makes that ball fall itself. Which allows you to create some cool kind of interactive using the accelerometer using creates, um, interactive contents there some. Okay, so I'm gonna go ahead and adjust this back 280 then we're gonna come up here and adjust a couple things is, let's say I want this to stay inside of my scene and go ahead and hit um, rectangle here, and I'm gonna have this kind of interact or bounce off of this rectangle just now. Kind of like a bar. If I was just to hit that hit saving preview, you can see that it passes right through in order for something to interact with this. This actually needs to be called static or changed to static so interacts without movement . And that way, what happens is it's just kind of bounces against it. A couple things I can do is density is basically how heavy is this thing. So when it interacts her pushes other stuff. Is it going to be a good push like a heavy push, or is it just going to be kind of a light push? There's a couple things that you can do, or just in the density. I'm gonna come in here and on that ball. I'm gonna It's like the bounce effect and just kind of adjust that. So you can see that balance is really bouncy now, so it's gonna bounce for a while. It's gonna take a while to kind of bounce down as well. But if I wanted to adjust that to be extremely bouncy, I can also adjust that a little bit higher as well. And friction is an air drag is kind of the air drag is thief friction with the air. It's, I almost think of it like if the ball is dropping and there's a fan below, will that fan depending on how the strength of that fan may cause the ball to fall a little bit longer? Or it may cause the Balti even not fall at all or something. So that's what the air drag icis. What's the friction to the air? If it's windy, then you're gonna the balls not gonna drop as fast itself, so you can adjust those kind of things now, depending on the angle of your screen, you may also want to, or the angle of your objects. Let's come into the element, Inspector. Here actually metrics, inspector. And let's adjust the angle of this bar a little bit. You can see here the ball will kind of bounce off of it a little bit and roll off. Or if I have an animation to this, let's go ahead and just hit record and then have this kind of enemy up a little bit more, and you can see that the kind of animation twirled a little bit and bounce the ball off so you could even trigger that animation based off of a click and have the beginning of a game of kind of interacting with it. If I don't want the ball to leave the screen at all, why would have to create several kind of rectangles here and let's go ahead and then what I can do is I could take each of these rectangles holding the shift button coming to my physics inspectors like those all to be static but also come into my element specter and make the opacity zero so I don't actually see that itself, but you can see that it's it is interact with it. But the user does not actually see it, so it kind of contains it in that box. Well, I'm gonna click on this again, this little spinner bar, and I'm gonna add a trigger to go ahead and start the timeline over again. So we're gonna say, start timeline and it's gonna be main timeline and then play in reverse. So now when I click it boom, it plays it in reverse again. So you can just start interacting with these objects using the static elements. That's essentially what physics is. If this was on a device and I had that control, what tilt? It would allow me to also use my device to kind of control it, have it bounce around as well. But that's an introduction, a small introduction to physics again, hoping to have tutorials to go more in depth of physics later. But for now, this at least gets you started with how to start playing around with the physics Inspector 55. 55 Identity Inspector: The last inspector panel that we're going to be talking about is Theo Identity Inspector Panel. The identity inspector panel is found on the last tab of the inspectors section, and there's a couple things that you can do with this. You can see that right now I don't really have any place to click on, but if I select this item, it allows me to add a couple of things I can add alternate text. And that's good for if there's some type of text reader screen reader or something like that, this will describe what this element is. So it is good practice to whatever element that you have on the stage to add some alternate text to keep in mind the screen readers for those people who cannot see and this will add, the screen reader will will basically describe whatever put you put here basically, and the other thing is included in keyboard navigation. This is also important for different keyboards. Um, if someone needs to tab through something to get to certain content, then you'd want to increase or to include this in the keyboard navigation if they need to get to it, especially if they need to interact with it if they need to click on it or if they need Teoh Navigate or to read it or something like that, so and then you can decide. Okay, what is the tab? Index? Meaning the first item in the index is going to be the first tab. Second item is going to be second tab and so on. So you can decide when that actually happens. And then the next thing is the display name the display name. We've learned about this in ah, couple previous videos. But you can see here the Ellipse name right here. This will actually be the display name. I can change this to whatever I want. My name, that sample. You'll notice that the timeline actually says sample as well. Another thing that I can do is I can give it a unique I. D. We learned about this mostly in the JavaScript section. So if you want to reference the javascript section, you can do that. Or if you're going to attach an external CSS file or if you're going to attach an external job script violent, you want to talk to several elements on the stage Well, you can give this a class name as well. So if you want him to give this a class name a circle, then whenever you reference or add some external CSS to that class, it will take advantage of whatever that is. So any background images or any colors or borders or anything you do on the CSS or do inside of the JavaScript will take place with that class name. So that's essentially it. That's how you work with the identity inspector. Inside, it's a mole type. 56. 56 Conclusion: I just wanted to say thank you for taking the time to go through this to mull type course. Hopefully, it's given you the introduction that you need in order to get started with thermal type. I know there's still a lot that you can learn. I hope to have more examples and hopefully some starter files that you confined at learning Joe joe dot net. And that way you can download some of these sample files and get started with some more help files in block posts and everything like that. So check out my website at learning Joe joe dot nets for more helpful files. But thank you. Thank you for taking this course in making it all the way to the end. So I just wanted to say thank you. And if you have any other questions, feel free to contact me at learning dojo dot net