2.3 Setting Up Your SVG

Hello, and welcome back to Advanced Animation with GSAP plugins. In this lesson, I wanna show you in Adobe Illustrator how I created the starburst shape that we used in the last lesson as well as how to set it up for what we're gonna be doing in the next lesson. So I'm using Illustrator here, and by the way, if you don't care about Illustrator, if you're gonna be using as fvg graphics that come from somewhere else, you're not going to be creating them for yourself, then you can skip over this lesson. That's fine, but for those of you who are interested, I do wanna show you how I set this up and how we're going to prepare this shape for what's going to happen in the next lesson. So, in Illustrator I've created a file that's 200 pixels by 200 pixels and I'm gonna save this file in the project files folder so that you will have access to it. And I'm gonna create a shape underneath the rectangle tool, we have the star tool. That's the one I'm going to choose. And I like to just click in the center and then fill out my options here. So we have a radius 1 and radius 2. Remember this file is 200 by 200 pixels. So our radius is gonna be, our outer radius anyway, is gonna be 100 pixels. So this bottom radius down here I'll set to 100 pixels. And then our first radius we'll set to maybe half of that, we'll set it to 50 pixels. And then for our points, we can put as many as we want, I'm gonna put 10 for now. If we put too many, there's gonna be a lot that we have to copy and paste in the next video and we'll see why later. But I'm just gonna click on OK with 10 points. And there we go, there's our basic shape. So now we can jump in an edit the shape. I wanna change the color of it to, I don't know, a medium orange, and then will just get rid of the stroke altogether. So there's our basic shape and then that's really all you need for what we did in the last lesson where we're just rotating this shape. However, in the next lesson we're going to start morphing this shape. And we're going to do a very simple morph. What we're gonna do is we're going to take our outer radius here, the points on the outside of the shape, and we're going to animate them inward while we take the innermost points here and animate them outward. So it's just gonna be kind of moving back and forth between those two states. So I wanna set this up in a way that's gonna make it really easy to just copy and paste the values that we need later on. So first of all, I'm gonna save this as an SVG in its current configuration but before we do that I'm just gonna save the Illustrator file so that you now have access to it. So again in your project files folder, it's called star.ai. So now, I'm gonna go to the File menu, I'm going to click on Save As, I've already saved it as an Illustrator file but now I'm going to save it as an SVG. So with our Save As dialog open under the Format option, I'm gonna click on the dropdown and I'm gonna move down to SVG. Not SVG compressed, but just SVG. I'm gonna click on that and click on Save. And then we have an option here to click on SVG code which will just give us the HTML code that we need to use in our site. And we can stretch this out so that we can see all of it, but this is the basic code that we can just plug in to our HTML to make it show up on the page. Now keep in mind that we don't have to have these first two lines here. We don't have to have this XML declaration and we don't have to have this commented section just below it, so we can get rid of that. Also we can get rid of all of this version stuff. We need this SVG tag but we don't need the version stuff, so we can get rid of that. There might be instances where you wanna keep it, but we're not gonna get into that. We can get rid of this xmlns as well as our x and y. I'll just delete all of that. I'm gonna keep the viewBox there to make sure that it shows our entire shape. And then you'll notice there's a style here we really don't need this style either, and we can get rid of this XML space preserve also. And there we go. Now one thing we can do is we can go in and add a width and height. Now the width and height act differently than the viewBox values here, but we're gonna be using the same values. So I'm gonna set width equal to 200 and I'm going to set height equal to 200. Now, you'll notice playing with my quotes a little bit, it jumped straight to Text Edit, and I'm actually gonna use something different. I'm gonna use TextMate just to make sure that it doesn't put any weird characters in there that I don't want. So I've got TextMate open. So I'm just gonna grab all of this and copy it. I don't want this in Text Edit, so I'll copy that, get this out of the way. And then in TextMate, I'm gonna paste it, there we go. And then I'm gonna skip a couple lines, several lines. So here's our starting value here. We have our points laid out for us here. These are all of the points of that star. These are the coordinates for all of those points. So our first point is at an x,y coordinate of 100,50, our second point, etc. So again this is our starting location. I'm also going to copy and paste our ending location after we set that up. And then we're gonna morph between those two values using the ATTR plugin. So let's jump back into Illustrator here and I'm gonna hit Cancel. I don't wanna actually save the SVG, I just wanted to copy the code for it. So I've cancelled it and now I wanna go in and alter the shape. So one thing that's gonna make this a little bit easier, so if I hit Cmd+Y, or Ctrl+Y if you're using a PC, that'll give us outline mode which will make it a little easier for us to select the points. So if I were to click and drag around some of these points you'll see that those points are all highlighted along with the rest of the shape. So I need to actually switch over to our direct selection tool so that we can click on one point at a time, like so. So now if we click and drag around some of these points, you'll see that it selects just the points we drag around and not the ones that we don't, obviously. So I wanna start off by grabbing all of the, well let's start with the outer points. I'm gonna click and drag around everything. And that highlights all of our points but then holding on to Shift, I'm going to click on each of these inner points to deselect them. And we can also click and drag around a couple at a time to deselect multiple ones and that might make it a little bit quicker. But we wanna just keep clicking and dragging around certain points until we have deselected all of the inner points, and we wanna double check to make sure all of the outer points are still selected. So the way I'm gonna transform these outer points is, I want to basically scale them. I want to bring them all in towards the center. So I'm gonna do that by going to the Object menu, going to Transform. And we're going to choose the Scale option. So with the Scale option I'm going to turn on our preview, and I'm gonna make it uniform, and I'm going to set this to 50%. Not 500%, 50%, and then when we hit tab to go to the next field we can see that those shapes, those points all move in towards the center. And it looks like we now have a circle. And that's where we want it, so I'm gonna click on OK and then I want to deselect all of those. And select all of the other ones. So now it's a little trickier because they're all around the same curve but if we just start with this top one, click on it, and now all the rest are deselected. Now we can hold on to shift and click, excuse me, on every other one until we have the entire circle selected, or at least every other point in the entire circle selected. So now we're gonna do the same thing with those. We'll go up to Object > Transform > Scale. And this time, we're going to scale them up. And I want them to be twice as large they started off, so instead of 50%, I'm gonna bring it up to 200%. And when we tab out of that, you'll see that looks really good. It takes up the full height and that's what we're going for, so we click on OK. So now we can hit Cmd+Y or Ctrl+Y on a PC to exit out of Outline's Mode and we can see a very similar shape that we saw before. The difference is it has slightly transformed. If we were to hit Cmd+Z a couple of times, we can see that initially we had points that reach the left and right edges. And then if you look at the top and bottom, the top and bottom are kind of pointing inwards. But if we undo or if we redo what we just undid, a couple of times, now we have the top and bottom points reaching the edges and on the left and right, it's pointing inward. So we've really just swapped out the inner and outer points there, and we're going to animate back and forth between those starting in the next lesson. But first we need to save our new point coordinates, so we're gonna go to File > Save As again. And then in our format dropdown, we're gonna choose SVG, click on Save and then instead of clicking on OK, we're gonna click on SVG code. Now this time we don't need the entire SVG code because of the way this plugin works. We're just going to be animating this points attribute here. And so all I really need is this string of points inside that points attribute. If you want to be clear, you can grab the whole points attribute, you can do whatever you want, but we're going to need all of these numbers here. So I'm gonna copy those and pull them into that same TextMate document that we were using before. And as you remember, I skipped several lines here, and then I'm just gonna paste what we have there. So now I'm gonna save this document so that you have access to it, and I'm gonna save it in our project files folder. And once we're in our project files folder, I'll just call this Star.TXT, that'll be good enough. At least we'll have a place where we can copy and paste these values from. So I'm going to save that and then we'll move on with the next lesson. Thank you for watching.