Full Vector Change
Hi everyone. It's time for another micro interaction. This one is going to be this cool little sun moon thing. Okay. And it's going to be using things like our pen tool or the vector drawing techniques we learned earlier on. So instead of just like moving things around and changing colors are actually going to distort stuff. Alright, let's get started. Alright so this is where our sweet new vector drawing pen tool skills are going to come into play. So first thing I'm going to do is draw upward with my outboard tool. I'm going to make a little icon backing. Okay, so I'm going to copy this just because I want the rectangle, I want it to be square. So I'm gonna make it 51 x 51. Get rounded corners. How many rounded corners? Five messing about down now. Okay, so I've got this, I'm going to lock it. Command el control l on the pc, unlock it because I need to rotate it no good reason. Anyway, so we're going to start with the sun and move to the moon. We're gonna draw the sun lips. Still dra...
g it out, give it no Phil I'm gonna give it a border a border of that kind of slight off white. I'm not sure why I like that at the moment. I'm gonna use three Fine. Get in the middle of everything. Nice. I don't want to put my little son sparkles around the outside so I'm just gonna use the line tool, draw him out and I wish you could change the default, It's always one and it's always this gray color so I'm gonna change it to that. Off white. I'm going to change it to three and it's a test. How do I get the little rounded ends here? Remember? Okay because I don't want the little stubby ends. It's the capping. Okay, so with that selected over here, it's this rounded cap. Nice. So that's that one, is that centered kind of, I'm going to make a duplicate of, I'm gonna select both of them actually gonna group them. Makes them easier to rotate. So group it copy it, paste it have a just about outside of it copy and pasted. Um If you just hold nothing down it can move these things around which is cool but if you hold shift while you're rotating it it will lock it into kind of like basic. I wanted to be 45 degree angles kind all the way around. The reason I grouped it just so that it pivots around this middle point. So now I want to do is I want to select all these guys and um group them because I want to animate them separately. Right? Um So and group so I got a bunch of different shapes. It's all a bit big so you select it all because my background is locked allows me to do that even then it's still too big. Maybe you should be at command one or control one to realize how big your icon is massive. That's going to be enough for the moment. Cool. Move on dan. Alright, can't do it. I'll fast forward it though, so Alright now we're back. I just had to make it look nice so we've got our first shape. What we're gonna do is duplicate this art board and we're gonna do the moon on this one. So over here, what we need to do is we need to double click this okay with our black arrow, Double click it. And now we can see these anchor points and the handles, handles of the bits that poke out the anchor points, that kind of central bit of the seesaw and I'm just gonna kinda drag it in there, kind of like a moon. The other thing I want to do is kind of make it bigger. You can't do it while you're in this mode, I'm gonna click off have become once they can hold shift to make it bigger, just outside of these anchor points. Remember not on it, just out here and rotated around somewhere in the middle. And what I wanted to happen is actually let's just preview it for the moment because it's not going to work. I'm going to show you. And so Click on this one, preview it. First of all, I haven't added my animation so when this gets clicked, let's switch to prototype mode. When the button gets clicked it's going to go tap and it's going to go to order animate. Cool. So let's give that a go ready City. Just kind of faded like it seemed not what I wanted to watch. What happens just fades across. This happens because of one of the rules. We can break the rules, but it means that remember I hear in my layers panel, if I click on this one, I've got an ellipse and you can see the little icon, it's like I am in the lips. I am clearly a square over here because we've destroyed their lips. I'm no longer in the lips. I'm this little pin path type thing. So there's different names, which is not really the problem. It's mainly that it's a kind of a different core object. So to make this guy over here instead of being an ellipse, you want that, you can't make them both ellipses because he's not an ellipse. But you can make them both paths. So with the selected go to object and go down to path and convert to path. You are no longer no longer an ellipse. You can see he's a path. Problem is he has a different name. So we've got um 235 and 236. So let's just call this one Sun Moon. Just make sure they're both called sun moon. It's over here. You're my friend called Sunday, lovely. Now let's give it a go. Let's have a little look ready. Look at it morph doesn't go back yet. Let's make it go back. So when this is clicked actually, let's win this whole art board is clicked. You can just make this button actually let's just do it for this button. When this button is clicked, go to you can say go drag it back to this one here or you can say go to previous outboard. It will go back to where it was often. That can be more handy if you've got more than like it's a nonlinear animation. You can get to it anyway, preview it's Clickety click. Cool. Huh? Can't really zoom in. The editor will zoom in. Okay, so you can see it. I love it. So what do we do with the sparkles? Let's have a look. So they start their on this one. We want to go to design. I've grouped all mine together. You don't have to, I'm going to group them all because I want them to go all separate ways. This guy's going to go up so it's gonna go over here Now when you're dragging a held shift to get it to go strapping down. But dragging this way you just kind of like guess it and it really wants to go out 45 degrees. You can do some cool stuff with like adding, I know 20 pixels and then minus ng 20 pixels on the X. And the Y. If you want to get nerdy about it but nobody's going to notice you might be very different. You might have a very different opinion about that casual dan? Let's just get it looking good. It doesn't matter if it doesn't work properly. Okay. The other thing I want to do is when it's out here, I want it to be faded. So I'm going to select them all. We're going to use a shortcut, select them all hit zero on your keyboard But we can't because if we type in zero doesn't work. Okay we can get down to 10%, which is probably near enough that we need casual dan. But I'm gonna select them both and put them all at zero. All right now let's give it a preview. You ready. Can't prove you from this outboard, but I can prove you from this one. Ready city victor goodness does not work. Okay, why didn't the little sparkles fly out? Because I grouped them over here. So over here, it's a group. Okay, and saying I am group # 28 over here. The little sparkles are, they've got their own little names. So let's go and see if we can fix this. So it's a new group. It they all come back to life, luckily they also have the same name. Yeah, preview it and preview the right art board, preview it and there we go sparkle sparkle out, The moon changes. Just a simple thing, but you can see cool little micro indirection. You might be asking yourself why, why have you got this Micro indirection. How does it fit in with the instructor? HQ. It doesn't just needed an example. Sunday moon seemed like a good, seems like a good and easy thing for us to all do and get our heads around. Remember john to dribble and look for the gifts and get ideas of how it might work for you and your app, especially when you're working on your own projects. Alright, let's jump into the next video.