Adobe Animate Symbols

[Music] all right next we're going to talk about symbols so as i mentioned before there are three different symbol types inside of animate and they have different purposes so i'm just going to start with a a new document and the first symbol type that we're going to take a look at as the graphic symbol so with graphic symbols they can be animated um and but they have they have a timeline but that timeline is shared by the main timeline i know that sounds confusing but i'll try to show you that right now so i'll go ahead and select the ellipse tool i'm going to change the fill color and just go ahead and draw on the lips so right now this is a stage level object you see that it's not in the library remember that from before i'm going to go ahead and select this and i want to make it into a symbol and i can right click on it and choose convert to symbol or hit f8 and i do want to make it into a graphic symbol so a graphic symbol is set i'll just call this circle and a couple things to notice here so we have an option for registration now the registration is going to be important depending on rotation or scaling of the object and the rotation of the scaling of the object with the rotate with the registration set in the top left-hand corner it's going to rotate and scale by that so i'm going to set this to the middle so when it rotates or scales it's going to be by the middle and then under advanced there are some advanced options for actionscript that is available with movie clips notice that it's not available here and i'm going to go ahead and click ok and that item appears inside the library notice that the appearance of the item has changed i have a keyframe this exists on layer one okay now watch up here so up here i have this drop down that tells me that i'm in scene one currently and what i want to do is i want to edit this circle so that i can animate it so i'm going to go ahead and double click on that and notice that i was in scene 1 but now i'm inside the circle animation so what i'm going to do with this circle is i'm going to go ahead and morph it i'm going to change its appearance so i'm going to go ahead and click on frame 2 and i'm going to hit f6 now that is going to create a duplicate copy of the circle in a new frame and what i'm going to do is going to move my cursor over here and i'm just going to pull it out a little bit and i'm going to repeat that process so going to frame 3 hit f6 and again pull this out a little bit more and then again frame 4 f6 let's pull this out some more now there's a feature that i can turn on called onion skinning and that onion skinning will allow me to see the frame before and the frame after so if i turn this on it's kind of hard to see here but you can see it better there where i can see the shape of the object and how it changes over time and then the other thing that i have here is this icon which allows me to insert keyframes so i'll just literally just have to click on it to insert a keyframe and i had previously done that so again i'm just going to morph this object again insert into the keyframe morph it insert a new keyframe i'll just do this for 12 frames and we'll see what we get that's frame 10. and now frame 12. i'll just turn this off it's not really being helpful right now and i'll scrub through this and you can see the animation so this is going to grow now what if i want to make it spring back so it's gone through this transformation phase all the way out here and now i want to make it go backwards well i already have the frames that i need so rather than manipulating this object for another 12 frames having it moved backwards what i can do is select all these keyframes and i just click and drag across them to select them i'm going to right click choose copy frames and then i'm going to click on the frame after this right click choose paste frames okay so this growth is happening again at frame 13 but i want it to go the opposite way so what i can do is select all that that sequence all those frames i can choose reverse frames so then it'll go backwards so if we take a look at the entire animation um this circle transforms and then it comes back okay now if we go we've done all this inside the graphic symbol the graphic symbol now has these 24 frames and they're animated but if we go back to the main timeline by clicking this you'll see that i don't have enough frames here to show what's happening in the graphic circle um so what i need to do is i need to extend the timeline so i can see all those frames so if i click on frame 24 here and hit f5 you'll see that the graphic symbol is now animated because um it's i have enough room now to see all those frames so i can animate those i mean i'm not animating them again i'm just allowing the animation and the graphic symbol to play through on this main timeline and that can be moved i can move this anywhere i want to i can start in a different location if i were to extend this let's say let's go ahead and extend this to frame 50. all right so it's going to play through and it's going to keep playing okay so what's going on there so let's take a look at the properties so if i click on this and i go to the properties panel you'll see that there's a looping option and it's going to a loop right here this option is play graphics in a loop then i have an option to pre-graphic once or play a single frame from the graphic so because the looping is on this is going to play over and over again if i go ahead and change that to play once you see what happens here after frame 24 it just sits there so those are the some of the things that you can do with the graphic symbol we'll get into color effects a little later um yeah so that's a graphic symbol now what a there's two other symbol types we have button symbol and a movie clip symbol so i'm going to insert new symbol and this time i'm going to choose a movie clip symbol and i'll just call this clip one [Applause] okay so now i'm in a new timeline now a movie clip symbol if you look in the library panel has a different icon and a movie clip is basically if you think about it this way it's a container that contains an animation that is independent of the main timeline so whatever happens in that animation it doesn't require the frames in the main timeline in order to play it it's kind of like a self-contained animation so we'll do a simple transform animation here so i'm going to grab this poly tool and what i want to do is set this to a star and the number of sides and let's change the color to like a gold okay so then i'm going to click and drag to draw this out okay now it's not in the center of the canvas so right now this is a move clip symbol it's not on the main timeline and this is the the anchor of that particular air so what i'm going to do is going to try to snap it to that particular location you can also use the align panel to do this if you have the align panel set to align to stage i can align it to the center both horizontally and vertically and then it snaps into that location so i'm in a movie clip symbol but even though i'm in a movie clip symbol in order for me to animate this this also has to be a symbol so now we're getting into nesting so i have a movie clip symbol called clip 1 and what i need to do is convert this star into a symbol so that i can animate that so i'm going to right click on the star choose convert to symbol and this is kind of arbitrary i'm just going to choose graphic and i'm just going to call it star okay so now the star is a symbol let's say that i wanted to create a rotation animation on this so i'm going to go out to frame let's go to frame 36 and i'm going to hit f5 to extend the timeline then i'm going to right click anywhere on the timeline and choose create motion tween now what that means is that anywhere on the timeline wherever my playhead is i can introduce the animation so what i want to do with this is change its rotation so at the last frame so in the transform panel i'm going to go ahead and type in the value of 180 degrees and that's going to change the rotation and then you'll see as i go through the timeline now i have this rotating star okay all right so let's take a look at the library so in the library i have a movie clip called clip 1 and i have a graphic symbol called star and on the main timeline i don't have those yet so what i want to do is create a new layer and i'm going to drag the clip into that main timeline now when i scrub through the playhead here you'll see that the movie clip doesn't play like i said it's independent of the main timeline you'll see that the graphic symbol does play but the movie clip doesn't play however when you test the movie you can hit command return or you can click this button to test the movie you'll see that it does play and it's playing on its own so even though uh the graphics symbol when it stops and starts right the star symbol keeps going okay so if for example let's say that i remove these frames from the first layer i'll just right click on that choose remove frames right so will the star keep playing and when i test the movie here you'll see that the star doesn't move at all and this is what i mean by it's independent of the main timeline but if i test the movie the star does play okay so movie clips are very powerful they also have extra attributes uh for when it comes to programming in actionscript and also when it comes to programming with javascript and you'll see in the properties panel i have color effects there's also an instance name for movie clips so they can be called on with scripts there's a few other options here 3d position and view vanishing point there are some filters that can be added so the movie clip is like the highest level object that you can add um inside of animate it has its as the most attributes so the last symbol i want to take a look at and i'll create a new layer here for it is the button symbol so because animate is capable of creating interactive experiences we need buttons or ctas to allow things to happen so for example if i go ahead and grab the rectangle tool here what i'm going to do is on this new layer i'm going to just draw a rectangle and let's go ahead and change the color this i'll select it and you can change the color okay and what i need to do is i need to convert this into assemble again so this time i'm going to use insert modify i'm sorry convert to symbol and here's the button symbol type and i'm just going to call this my button and then click ok so button symbols have all these properties as well you can give them instance names just like movie clips to be called done by scripting and if you double click into a button symbol you'll see that it has this timeline that's different than the normal timeline so if i go through here you can't see it now but this current state is called the up state then we have an overstate a down state and a hit state now the hit state governs the area that the button is clickable the overstate is the appearance of the button when you mouse over the button the down state is the appearance of the button when you click on it so what i'm going to use here is and use my keyboard shortcut to create a keyframe and now i have this button here and i'm going to change the fill color i'm just going to make it a different color maybe like a darker green so now if i see here's the over here's the up state and for the down state again add a keyboard shortcut f6 and maybe the down state it turns to black now the hit state doesn't show up the appearance of the of the the appearance of the button doesn't matter in the hit state the hit state is just defining what is clickable so if it's identical to the up over and down states then that's only that's the only area that's clickable um you can make it larger or you can make it slow smaller or you can make it a different shape than what these other frames represent but that is defining the area that's clickable now in the main timeline we can't really test the button here so if we test the movie command return you see that i move over my cursor over um move my cursor over the button that's the overstate and if i click that's the down state and you'll notice that i don't see my cursor until i'm in the area that's defined by that hit state later on when we get into scripting we'll talk more about buttons and what we can do with buttons and how to script the buttons and get them to work and do different things

Channel: Al Lemieux

Views: 637

Keywords:

Id: xfToTP1TE1U

Length: 17min 31sec (1051 seconds)

Published: Thu Aug 27 2020