Hi everyone, it's time for another micro interaction.
This one is going to be this cool little Sun Moon thing.
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...
we're actually going to distort stuff.
All right, let's get started.
So this is where our sweet new vector drawing Pen Tool skills...
are going to come into play.
First thing I'm going to do is draw an artboard with my 'Artboard Tool'.
I am going to make a little icon backing.
So I'm going to copy this just because I want the rectangle.
I want it to be square, so I'll make it 51 x 51.
I give it rounded corners. How many rounded corners? 5.
Messing about now. 8, that will do.
So I've got this.
I'm going to lock it, 'Command L', 'Ctrl L' on a PC...
and unlock it because I need to rotate it, for no good reason.
So we're going to start with the Sun and move to the Moon.
I'm going to draw the Sun, 'Ellipse Tool', drag it out, give it no Fill.
I'm going to give it a border, I'll put that kind of slight off-white.
Not sure why I like that at the moment. I'm going to use 3.
It's fine. Get in the middle of everything; nice.
I want to put my little Sun sparkles around the outside...
so I'm going to use the 'Line Tool', draw them out.
I wish you could change the default.
It's always 1, and it's always this gray color.
So I'm going to change it to that off-white.
I'm going to change it to 3, and it's a test.
How do I get the little rounded ends here, remember?
Because I don't want the little stubby ends, it's the capping.
So with it selected, over here, that's this rounded cap.
Nice. So that's that one. Is that centered?
Kind of is.
I'm going to make a duplicate of him.
I'm going to select both of them, actually going to group them...
makes them easier to rotate, so group it, copy it, paste it.
Hover just about outside of it, copy it, paste it.
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 want it to be 45° angles coming all the way around.
The reason I grouped it, just so that it pivots around this middle point.
So now what I want to do is I want to select all these guys and ungroup them...
because I want to animate them separately, so 'Ungroup'.
So I got a bunch of different shapes.
It's all a bit big, so I'm going to select it all, because my background is...
locked.
It allows me to do that.
Still too big.
Remember, you should be at Command 1 or Ctrl 1...
to realize how big your icon is; massive.
That's going to be enough for the moment.
Cool, move on, Dan. Can't do it, I'll fast forward it though.
Now we're back. Just had to make it look nice.
So we've got our first shape, what we're going to do is...
duplicate this artboard, I'm going to do the moon on this one.
So over here, what we need to do is...
we need to double click this, with our black arrow, double click it...
and now we can see these Anchor Points and the Handles.
Handles are the bits that poke out...
Anchor Points, that kind of central bit of the seesaw.
I'm just going to kind of drag it in there to kind of look like the 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 going to click off.
Click on it once, hold 'Shift', make it bigger.
Just outside of these Anchor Points, remember, not on it, just out here.
Rotate it around, somewhere in the middle.
What I want 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.
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.
And the button gets clicked, it's going to...
go 'Tap', and it's going to go to 'Auto Animate'.
Let's give that a go.
Ready, steady? Just kind of faded. I'm like, "Yeah."
Not what I wanted. Watch what happens, just fades across.
This happens because of one of the rules; we can break the rule...
but it means that-- remember, on here, on my Layers Panel...
if I click on this one...
I've got an ellipse, you can see the little icon, it's like...
I am an ellipse, I'm clearly a square.
Over here, because we've destroyed that ellipse...
I'm no longer an ellipse, 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 can't make them both ellipses, but you can make them both paths.
So with it selected, go to 'Object', go down to 'Path', and 'Convert to Path'.
You are no longer an ellipse, you can see, he's a path.
Problem is, he's a different name.
So we've got 2, 3, 5 & 2, 3, 6. So let's just call this one Sun Moon.
Just make sure they're both called Sun Moon.
So over here...
you my friend are called Sun Moon; lovely.
Now let's give it a go.
Let's have a little look; ready?
Oh, look at it morph, doesn't go back yet, we've to make it go back.
So when this is clicked-- actually let's, when this whole artboard is clicked...
you can't just make this button, actually let's just do it for this button.
So 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 Artboard.
It will go back to where it was.
Often that can be more handy if you've got more than...
like it's a non linear animation, you get to it anyway.
Let's preview it.
Clickety-click. Cool, huh?
Can't really zoom in, the editor will zoom in so you can see it.
I love it.
So what we do with the sparkles? Let's have a look.
So they start there, and on this one...
we want to go to 'Design'.
I've grouped mine together, you don't have to.
I'm going to ungroup them all because I want them to go all separate ways.
This guy's going to go up, over here.
Now when dragging, I held 'Shift' to get it to go straight up and down.
While dragging this way you just kind of like...
guess it, and it really wants to go out 45°.
You can do some cool stuff with like adding 20 pixels...
and then minusing 20 pixels off the X and the Y...
if you don't want to get nerdy about it...
but know he'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.
Doesn't work properly.
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 our shortcut...
select them all, hit '0' on your keyboard...
but we can't, because if we type in 0, doesn't work.
We can get down to 10%, which is probably near enough that we need.
Casual Dan.
I'm going to select them both, and put them all at '0'.
Now let's give it a preview. Ready?
Can't preview from this artboard, but I can preview from this one.
Ready, steady. Vector goodness.
Does not work.
Why didn't the little sparkles fire out?
It's because I grouped them over here, so over here it's a group...
saying "I am group number 28". Over here, the little sparkles...
they've got their own little names. So let's go and see if we can fix this.
So ungroup it, they all come back to life.
Luckily they all are still at the same name.
Hi there, I hope you enjoyed the video.
My name is Daniel Scott.
If you would like to do the full course...
there will be a link in the description for that.
Please give this video, on YouTube here...
a thumbs up, really helps me in what I'm doing.
Also, consider subscribing to the channel.
I release a video like this every week, for your viewing pleasure.
All right, bye.