Hey, I'm Hunter from Skillthrive and in this tutorial you'll learn how to take
any artboard in Sketch and easily animate it in Adobe After Effects to
create this mock up animation. Before we get started, make sure you download the
course files by becoming a free member on Skillthrive.com. That way you can
follow along with me in today's tutorial. There's a link in the description that will
take you to a registration page where you can join. So, with that said let's go
ahead and jump in and get started on today's tutorial. So the first thing that
we need to do is to install the plug-in. Now if you download this from the link
in the description or from the course files you'll see that you get this
zipped file. Now just go ahead and double-click on that to unzip it, come into the
Sketch folder and you'll see that you have this JSX and then Sketch plug-in
file. Now, to install it into Sketch all you have to do is double-click on this
file and it will automatically install into sketch. Now, it's a little bit more
of a process for After Effects but all I have to do is come over to applications,
come in to your version of After Effects, come in to scripts, come in to script UI
panels, and just copy that that file into this folder. And you can see that I
already have it installed here, and that's all you have to do in order to
install this in After Effects. So now let's come into the Sketch file that
we're going to actually be animating today. If you download the course
files you'll see it here and it's called Form Factory. So let's go ahead and just
double-click and open that. I'm not going to go over how I actually built
this in Sketch because that kind of defeats the purpose of this tutorial, but
I am going to talk about some things that you need to consider when you're
using this plugin. The first one is how to handle text. Now I realized when I
was first using this that text would kind of be glitchy and things like
tracking or the spacing between characters wouldn't carry over to After
Effects. So the way I found to overcome this is to convert those text layers to
outlines or vectors, and it's really easy to do. But before you
do it you might want to duplicate that layer so you can come back and edit that
text file if you wanted to make changes because once you convert it to an
outline you're not going to be able to come back with a text tool and change
that. You can see here on section one that if I double-click on this "Ideas
Made" that this is actually still a text file. So I can come in with the text tool
and make changes. Now if you want to convert this to an outline, all you have
to do is right-click and come down to "Convert to Outlines." Now I already did
that here on this artboard. You can see if I double-click on this "Ideas Made"
that you have this grouping with all of these different vectors, which make up
this shape. That's going to handle how to move your text shapes over to
After Effects smoothly. Now the next thing I want to talk about is how
symbols are handled in After Effects. So you can see here that I have this symbol
right under this one called the "Hire us button," and what that's going to do is
actually create a pre comp in After Effects. Now I'm going to explain later what
a pre comp is if you don't know what that is, but if you do know what a pre
comp is you can see how this is already really awesome and really helpful.
The last thing we talked about is how grouping layers work in Sketch and then
how it works in the After Effects. So on this grouping here I have it as "Title
Section." Now once I'm within After Effects, what it's going to do is
create a blank layer called "Title section" that's then–these are parented
to these three layers that are in the grouping. What that's going to do is,
let's say for instance I wanted to move the position of all three of these at
once, I can just apply that position animation on that title section layer.
If I haven't lost you already, it's going to make a lot more sense here once we
start actually animating this in After Effects, so let's go ahead and do just
that! The first thing we want to do is just select this artboard, then I want
to come up to Plugins, Sketch to AE, and then Copy Selected Layers. Now you can
actually save the selected layers and it's going to create a Sketch to AE file,
but in this instance I'm just going to go ahead and click on Copy Layers. Now it's
going to ask you a place to save some of the images here in your artboard,
that way it knows where to reference them in After Effects. So you can see
here that I have a folder called AE for After Effects and then this assets
folder, and then I'm just going to save my images here. Si once you do that it's
going to work some magic here and create this code that you want to then
paste into After Effects. So just give this some time to let it work. Once that
happens it will say "Copied four layers to clipboard," and that means it's successful.
We can come into After Effects now and open this up and then paste that
code that it just put on our clipboard into After Effects.
So once After Effects loads, go ahead and click on New Oroject and you
can actually go ahead and create a composition if you want, to the size of
this artboard, but there's also the option of just creating a new comp from
this plugin. So let's come up to Window, and then come down to Sketch2AE.jsx.
You can see that it's a really simple panel here. You can see at the top
that you have two buttons, and this one's going to allow you to paste in the code
and this one's going to allow you to upload the file if you decided to save it.
What I'm going to do is click on new comp, I'm going to set the the scale
here to 1x, and then I'm going to click on this red button. Then
command-V to just paste that in then you click on Build Layers and let the magic happen.
All right, so when once that's finished go ahead and click out of this panel. You
can see everything moved over almost perfectly. I think this plugin is
absolutely awesome! So the only thing that messed up here is this image, but
all you have to do is move it over a little bit to the right. So let's go
ahead and just zoom in here. I'm going to hold shift and just move this over
to the right until it's in the position of where I want it, so something like
right here is getting close. And we can go to move that over just a couple
pixels, and there we go. So now we have it in the spot that we want it. You can see
here that, you know, the text looks perfect, all the spacing, the shapes,
even the shape have an outline and a stroke effect to it–so all that
information is going to carry over really nicely into After Effects.
Then we can start animating that so with that said let's go ahead and start doing just that.
Now, you'll remember that I mentioned earlier that Sketch is going to create
these invisible layers in After Effects that are then going to be parented to
the layers that were grouped underneath it. So for this Title Section here, we can
actually use this Title Section invisible layer in order to animate all
three of these layers beneath it. So, let's go ahead and hit P on our keyboard
to bring up the position I can go ahead and come into, you know, like one second
here, and just do 1:20. I can set a position here move to the beginning of
this and then just move this y-value down just a little bit. Then what I
can do is come into this next keyframe here I can go ahead and go into a
Keyframe Assistant, Easy Ease and then to the Graph Editor. We can just make
this to an influence of all the way to a hundred percent. We can come in and set
this to half and then make sure that we move this down over here just to the
area that we want to actually render. So let's go ahead and do just that. You can see
that all three layers are animating with that parent. So now let's go ahead and
adjust the opacity of this. Now we're not actually going to be able to use the
Title Section opacity to change the opacity of all three of these, we have to
do them individually, but we can still do that really fast. Let's go ahead and
hit T on our keyboard to bring up opacity, come to a spot about right here,
and go ahead and set a keyframe. Move it to the beginning and set another one but
at zero. Then we can go ahead and ease this as well and adjust that in the
Graph Editor. So let's go ahead and play this through. You can see that the
Form Factory has this nice opacity. So just go ahead and copy these keyframes,
command-C, and paste them into the Ideas Made and in the Hire Us button, so command-V.
And now this has a nice move up and fade and animation.
Cool! So there's one more thing that I
wanted to do on this section and that is to animate these rectangles, or these
lines next to the Form Factory. Now you'll remember that I mentioned symbols
and pre-comps. So you can see by this icon that this is a pre-comp, and what
this is going to do is I can double-click on this, and this is in its own
composition, and I can animate just this without having all those extra layers to
make it more complicated to animate. so what I can do is is come in and zoom in
here, I can come in to the left line and I actually want to move this anchor
point to the right. Now I'm using this Reposition Anchor Point plugin, which is
a name-your-price plugin and I use it in a lot in my tutorials, so I'll be sure to
include those as well in the description and in the course files. But what you can do
here is go ahead and click on this right arrow and then click on Reposition, and
it's going to move that anchor point over here,
That way when we animate this, it's going to be relative to that. Now, on the right
line we can move that to the left center, then we can come in and come in to scale
and we can set a keyframe here for scale and actually uncheck this link because
we just want to scale the x-value. Then we come over–it's about, let's say 8
key frames–and we can set this value to 0. Then let's go ahead and just move
this to something like 1 second in, and then we can go ahead and just easy ease
that, come into the Graph Editor, and adjust the influence on that as well.
Now let's go ahead and just preview that animation. Awesome! So let's go ahead and
just copy these keyframes and apply that to the right line as well, so now both of
them are animating. Cool. So go ahead and just close this up, come
back into our website outline, and now you can see that we get this really nice
smooth animation for both of those lines. So the next thing I want to do is move
on to this first browser window. You can see here that in this layer we have
Browser One, which is also a pre-comp, so we can double-click on that. I actually
included some course files–in the course files I included some images here. So let's
go ahead and bring in this cuba website PNG. I already resized this to be the
width of this browser, so what we can do is just drag this into our composition.
I'm going to click and hold shift to just move this down. Then let's go ahead
and zoom in to make sure that we have this lined up perfectly.
And now what we can do is go ahead and move this layer beneath this mask and
then come into Toggle Switches and Modes and then set this to an alpha matte to
the Cuba Website Mask, which is that grey rectangle. So now when we come back
into this outline it's not going to be hanging out this composition, it's going to
be nice nicely masked here. Now once we're, you know, in this Website Outline,
let's go ahead and add a drop shadow to this. So come into your Effects and
Presets, and if you don't see that it's going to be under Window and then
Effects and Presets. Then go ahead and type in a "drop shadow"–make sure you add
a space there. You can go ahead and just drop this onto the Browser One. I'm
going to set a direction here of 180, increase the distance a little bit, and
then increase the softness quite a bit as well, so something like that looks
good. What we can do is actually go ahead and just copy this drop shadow
effect, so command-C, we can move down to this one, and just command-V to duplicate that.
Let's actually drop this opacity down to like 30% because I don't
think we need as big of an opacity here. All right, so now what we
can do is we can animate this right here to kind of look like a timer, so the
stroke of this is going to go around in a circle indicating that, you know, the
next hero image is about to play. So what we can do is come in to this Next Button,
which is also a pre-comp, and what I can do is duplicate this oval.
So command-C, Command-V. I'm going to come into the bottom one, and under content,
I'm actually going to turn off the stroke and on this top one I'm going to
turn off the fill. Then I'm going to come into "Add" here and then I'm going to add a
Trim Paths. Then I'm under Trim Paths, I want to come in and actually increase
this. I think to a hundred, let's see here. Actually, set all these to zero and then,
yeah, I can animate that. So let's go ahead and set this one for the end, both
start and end, set to zero. I'm going set a keyframe for end and then let's do
four seconds–we'll have this animate. We can go ahead and set that to 100, and
you'll see that now we're going to get this nice animation here that's going to
work really well for this. All right, so we're done with that, so let's go ahead and
close that. Actually, now that I'm thinking about it, let's go ahead and
have this fade in at the same time that this does. So let's come to the Hire Us
Button, hit T to bring up our opacity keyframes, command-C, move this to
the beginning, and then apply that to the next button here. So that's going to fade
in and have that really nice animation that we just did. The last thing to
animate on this is this Cuba browser, so to do that what we need to do is
actually turn this into a 3d layer. So on Browser One, let's go ahead and click on
this box here underneath this cube icon and that's going to allow us–under
transformation, you'll see that you have X, Y, And Z rotation and some extra
dimensions here for your anchor point position and scale. You'll see if I
move this around–so you see that it doesn't–it's not actually moving,
that's because we have this icon turned on here, which is Collapse Transform.
So if we turn that off, we're going to be able to actually see those changes.
Let's go ahead and move to about 120 here, we can set the Y position, and we
can set the position keyframes. Then move over to one second and let's go
ahead and set the Y degrees to 25 and then that's going to move the Y position
down just a little bit, something like that. Then let's go ahead and ease
these keyframes. Adjust that here in the Graph Editor. Let's go ahead and just play that through.
All right, and one more thing that we can actually animate here is this value here.
So let's actually make it a little negative value, move over the X a little
bit, maybe move this up. Let's go and play that now.
Cool, so now what we need to do is just add some opacity here. So let's go ahead
and click a keyframe here and let's say we want the opacity to actually come in
about right here. So click this one to create a keyframe, click this arrow to
move back to our first keyframe, and set that to zero. Then we can go ahead and
Easy Ease this as well and then edit it in the Graph Editor. So if we play this
through, we get this really nice animation. Now I think I might actually
move this Y–this Y rotation. Let's go ahead and just move this back a little
bit, and let's go watch that one more time.
All right, I think it looks good. So now what we can do is animate this Cuba
composition to actually scroll. So what we need to do there is come back into
this Browser One. This animation finishes around 1:20, so let's go ahead
and just animate it about 1:25–we can actually start animating this scroll.
On this one, we can come in to 1:25, on this PNG hit P, we set a keyframe here,
move it to–let's do 2 seconds or 1 second more–and we can move this value
down something like right here. Move it one more second, so 3, set a keyframe and
then let's go ahead and set it to 4 seconds more and then we can move it
down just a little bit more.
Then we can go ahead and ease these keyframes, edit that in the Graph
Editor. Go ahead and just play this through. So that pause felt a little long,
just go and watch out more time. Yeah, so let's go ahead and just actually move
these in a little closer. Watch that one more time.
Cool, so maybe something like that feels good.
Let's come back into this website outline and preview this. You can drag
this out just a little bit more to four seconds, there we go.
Cool! I think that feels really good! Now what we can do is go ahead and just move
this entire composition down and to view this second section.
Now what am I actually going to do on this is create a new composition. So
let's come up to Composition, New Composition, name this like Final Render.
1920, let's do 1080, you set the frame rate here to 60 and the duration
let's keep it at like 20, and then click OK. Now what I can do is come into the
project and come in and bring in this website outline here. I can hit P on my
keyboard and just move this down until this is about right there. This
animation finishes around 4 seconds, and let's make sure we have this on half
resolution so we're not taking as long to render this. So right when this
finishes, about right here, let's go ahead and just move the page down. To do that
we can go ahead and set a keyframe here on this position, we can move about, you
know, let's go one second longer, and we can just go ahead and just move this
Y-value down until about right there. Go ahead and ease this as well and then
edit that in the Graph Editor. Let's go ahead and just preview that motion.
All right, so that feels really solid. Now what we can do is start animating the
rest of this. The first thing I'm going to do is animate this background
image, coming in from the left to the right. What we need to do is come back
into Website Outline, and this animation finishes around 5:29, but I actually want
this to start animating in about right when this starts to mov, so around 4:30
is when I actually want this to start animating. We can move to 4:32. We
want–we know that we want this background to finish in this position, so
go ahead and hit P on our keyboard and set that keyframe here around, let's do
5:32. I'm going to go ahead and just move that down there, and on 4:32 we can go ahead and
just move this x-value over to the left so it's out of the–out of the
composition. There we go. Then we can easy ease this keyframe as well, come into
the Graph Editor, and let's go ahead and just preview this animation.
Cool, so it looks good here, let's go ahead and check it out in the final
render. Let's move this over.
Cool, that's perfect. Now what we want to do is have this animate in, and what I
can do first before we animate that in is actually come into this composition
and put that image there so it's not this this grey box. What we can do
is come back into the Website Outline, we can double-click here on this
composition Browser Two, come back into our course files, and bring in this
Burgundy website PNG. Move it beneath this mask and go ahead and click on
alpha matte Cuba Website Mask. There we go. Hit–then I can click, hold shift, and
just move this down till it's in the spot that we want. Let's go ahead and just
zoom in, make sure we get that perfect.
So now if we come into the the website outline, we can animate that similar
to what we did up here. With this one I'm going to hit U and I'm going to copy these
key frames, everything actually besides position because I don't want to copy
the position. Command-C, come back into Browser Two to make that a 3D layer, and then
turn off this icon here that looks like a star. I'm actually going to just to
keep this easy–move this to the beginning of Browser Two and then command-V.
That's going to animate in like that, and hat we can do is drag this to
where we want it, so let's go ahead and start animating in about right here.
I'm just going to drag this layer all the way over so it starts here. I'm going to
hit U to bring up the animations, and on this one, instead of 25, I'm actually
going to set it to negative 25 so it's coming in and kind of laying on top of
this as it's coming in. Now you'll see if I preview this, that there's some
ghosting going on, which is a this effect, or this look here from the opacity. So I
might actually bring this in just a little sooner so we don't get that as
much–so scrubbing through this really fast.
Now another thing we can do is go ahead and just bring this opacity ending
keyframe in a little bit, so it comes in a little faster. There we go, I think that
looks good. If we play this through, you probably will not even see the
ghosting. So let's go ahead and just preview that really quick. Yeah, you don't really
notice it that much. Let's actually now come into the
position, so I'm going to hit P, set a keyframe, and then hit U so I see all of
my editable keyframes here. Let's go ahead and move this over. Now this one
I'm actually just going to move it this X a little bit to the right, then we can
easy ease this, edit that in the Graph Editor, and go ahead and just preview this animation.
Awesome, so I think that looks really good. So let's go ahead and actually look
at it now in the final render, see what that looks like. Perfect! Now we just have
a couple more things here to animate. Let's go ahead and focus on this
Visit France. On this one, I want it to fade in–have these animate the
same way as we did up top and then have it kind of come in from the right. So we
need to head back to the Website Outline, come in to this Visit France, and I'm
actually going to come into this Form Factory right here.
I'm going to copy these keyframes, close that out, and then come back and
come into this composition. We can go ahead and reposition this left one to be
on the right and the right one to be on the left. Move this header to the
beginning, select this right line, left line, the command-V, and those are going
to animate in perfectly. Cool. Then we can go ahead and close that out, and we can
actually do the same thing here for the opacity. So let's go ahead and just copy
the opacity here for the Hire Us Button, and we want this to come in, let's
say, right here is when we want this to start. So let's come into Visit France, and
again to keep this easy, let's actually move it to the beginning here for this
Visit France layer and command-V, and then move this entire layer to the
position where we want it to start, so about right here. We can start
animating this in–perfect. Then what we can do is just add a little bit of a
movement here, so hit P to bring up the position, we know this we want this to be
this final spot. Let's go ahead and move it to about 5:48, set a keyframe,
again move back to the original one, and just move this x-value over to the right
just a little bit. Then go ahead and ease that keyframe as
well, come in the Graph Editor, edit that, and then let's go ahead and just preview this out.
So it needs to come in a little sooner, so but right here I think you can start
animating in. Let's go ahead and preview that out. Perfect. Now all we have to do is
animate this section, and I'm going to do a similar animation of what I did up
here on this one and that should just move it up and have a really slight
opacity. So let's go ahead and just copy the paste here from this Visit France.
So I'm going to hit T to bring up the opacity keyframes, command-C, and we can go ahead
and just paste that in to our Explore Button in our Filler Text, but let's go
ahead and do that in the beginning of these layers and then just move these
layers to the position that we want them to start. So, there you go, those will have
a nice fade in. Then with both of these layers still selected, I I can hit P to
bring up the position, set a keyframe for both, move over to this here and set
another keyframe for both of those, and then move back to the first one, and we
can just use our arrow keys with shift and just kind of move that down about
three clicks. Then we can ease both of these and then edit them in the Graph Editor.
I'm going to move these out just a little bit so they come in a little
slower, or actually go out a little slower. All right, and there's just one more
thing to do and that is to add the similar scroll effect here that we did
up here. Again, we can just copy the keyframe. So let's come back into Browser
One, we can copy these keyframes. We have this starting on about 1:27, so one
and a half seconds in from when that actually starts to come. So let's come
back into Website Outline and we can come back into Browser Two and then we
can go ahead and just command-V to paste those keyframes, and we'll get that same
animation. So let's come back into this and move these keyframes in a heck of a
lot more. So let's go ahead and hit U and drag these in about right here, and now
let's go ahead and check this out. There we go, so now it's going to bring this out.
And now let's go ahead and move back into the final render and let's go ahead
and just preview this entire thing to see what all of it looks like, even with
the the big page scroll.
All right, that completes the course! Check out these videos if you'd like to see
more courses like this one from Skillthrive. And, if you haven't already, be sure
to subscribe and like this video if you found it helpful!
Again, I'm Hunter from Skillthrive and I'll see you in the next one!
For more infomation >> Intro Kalkan (30 Likes for 20 fps xP) - Storm & SublimeFX - Duration: 0:13. 
For more infomation >> PREPARING FOR TOMORROW|FLIRT WAXING LOUNGE|SilantroFILMEX|itsnicolefactor - Duration: 11:18. 
For more infomation >> How to Draw Butterfly Coloring Pages - Art Colors for Kids, Drawing for Kids, Picture Coloring Pages - Duration: 5:03. 
For more infomation >> (Eng Sub) CNT Men's Team Ready for 2018 WTTC -- CCTV 5 - Duration: 2:11. 
Không có nhận xét nào:
Đăng nhận xét