Create an Interactive SVG with Adobe Edge Animate

Key Takeaways

Hello, Gary Simon here, designcourse.com. Today we're going to experiment with SVG animations and this time we're going to use Adobe Edge Animate. And if you have a Creative Cloud subscription, you can install the Creative Cloud desktop app and you can install Edge Animate as a result. Just load that up and just click install and it'll install it real quick. Uh, and so yeah, what we're going to do is get started in Adobe Illustrator and we're going to use the designcourse.com DC lettermark and we're going to make some adjustments and then import it into edge animate and then create some mouse over and mouse out events to make it animate in between itself uh based on that cursor movement. All right. So, basically, if you need access to the project files, and you do if you want to follow along, uh they're available for free at designcourse.com, and you can find the link at YouTube in the description. All right. So, let's go ahead and get started. All right. So, uh go ahead and download the project files and there if you go to YouTube, uh you'll find the link directly uh from designcourse.com where you can download those files. Just requires a very quick free in registration. And once you have that open, you'll see here in Adobe Illustrator, we have the designcourse.com lettermark logo. So if you just select it, control C. We're going to go to file, new, and we're going to make the width and height 500 by 500 points. And hit okay. And then just paste that in the center there. And I'm going to scale it down just holding shift and alt right around there. All right. So, basically, when it comes to the animation here, we want to only work with two layers. This one and then one where we're going to duplicate this, except we're going to get rid of the fill, the blue fill here, and instead add a stroke. And then, when it comes to Adobe Edge Animate, we'll go ahead and transition between those two based on a hover on and hover out effect or mouse out and mouse on. So, for this first one, we're already done. All we have to do is just save this. So, control S or command S on Mac. And we'll switch to SVG. And I've already done this previously, so I'm just going to name mine pretty full. You can name yours whatever you want. Going to overwrite it. And then make sure SVG profiles is SVG 1.1. And then pretty much everything else here can remain the same. All right. And then what we'll do is just take this and if we switch to our fill right here, click on this in the swatches panel. If you don't have it open, just go to window and swatches. This little red slash will get rid of the fill. And then we want to switch to the stroke and give it this color, which is the same color as the fill. So, we're going to give it a stroke of 2 pixels and leave it right around there. And then also click on stroke and we're going to make this uh line stroke to the inside. All right. So now what I want to do is go ahead and go to file, save as, and this is going to be pre-outline. Yes. And okay. And that's all that we have to do in Adobe Illustrator for this very simple tutorial. So, let's go to Adobe Edge Animate. And if you don't have this, but you do have a Creative Cloud subscription, you can download that by going to the Adobe Creative Cloud Manager application. And what we want to do is hit create new. We're going to make our width 500, height 500. And this will match exactly the specs of our SVG files. So basically, let me try to drag this down and reorder things so we could see this whole area. All right. So, what we want to do is go to file and then import. Take both of those, hit open, and you'll see they're both placed on over here in our elements, which is basically equivalent of layers in Photoshop. And then also a timeline down here, which looks pretty similar to Adobe After Effects if you've ever used that. All right, so by default, it's just importing both of them. If we hit play and real quickly, if you want to preview this HTML document in the browser, it is control or command and Mac and shift or and enter. So, control enter. Let me bring this up. It loaded this up on another screen. Let me put this into place real quickly just for future reference. And this is our our two SVG files overlapped on an HTML document. And so, nothing happens at all. So what we want to do is click on stage and you'll notice our properties change. So your properties change based on you know what whatever it is that you're clicking on over here or over here. So the stage we have an option called autoplay. We don't want it to autoplay. So we want this off. All right. So now what we want to do is we want to click on preful and we want to add an event here. All right, that reveals I just moved that over because I wanted to be able to see this. So if we click on this, we can add some type of an event based on if you wanted to click, you want something to happen, double click, mouse over, uh touch start. This is like a for mobile and yeah, a bunch of really cool stuff. So, we're going to focus on mouse over. All right. So, it says insert code to be run when the mouse hovers over the object. Well, by default, if you remember, we well, I hope you remember. You would have a really bad memory. Uh, we made sure that autoplay wasn't on. So, by default, it's stopping the timeline. It's not going to run anything. So, what we want to happen is play the current timeline when we have this mouse over. All right. So, pretty simple. Uh, let me go ahead and close that out. All right. So, nothing we've add we have added nothing basically to this timeline. So, even if we hover over it, nothing will happen. So, that's up to us to go ahead and add some sort of animation. So by default, we want the preful to be at a zero opacity so that we only see this. All right. So let's go ahead. If we click on this, we can add a pin, which is kind of like a key frame. So if we move this over to around 1 second, we can make this come back in to 100% opacity. All right, very simple. So, let's go ahead and hit control enter. Oops. Let me refresh that and just show you that it does stop. Nothing's happening because we haven't mouse entered over that area. We can even come over here and rest of the HTML document. But if we enter that 500x 500 pixel canvas, you'll see now it actually goes over there. All right. So, we also see some weird things happening because it's going through the animation and basically replaying it. So, what I want to do is over here, if we click on this little insert trigger, you'll see it adds a little trigger based on where we're currently at. And all we have to do is hit enter and just hit stop. Stop at Yeah. So, you want to choose stop at and then 1,000 frames is where we're at at 1 second. All right. So, we'll go ahead and close that. And now we want to add an event for mousing out. All right. So the way you do that is we'll go ahead and with preool still selected click the over here and then click on plus and then mouse out. And then what we'll do is click on play from 1001 because if you leave it at 1,00 1,00 if you remember we have a stop so it won't play. So 101 it will play everything after that. All right. So I'm going to close that. And now what I want to do is go ahead and also before I I kind of forgot I wanted to do something. I want to take pre-outline and come over here and make that a zero opacity. All right. So, it's kind of transitioning between both of them. All right. So, what we can do now if we take both of those holding shift and selecting on these lines, hit control C. And then with our timeline right at one second, we can go to edit, paste special, paste inverted. All right. So what that does is take whatever the animation that we have selected and it will reverse it. Pretty simple. All right. So let's go ahead and hit control enter to preview this in the browser. All right. So notice it stopped there even though we have more animation. If I come off of it, it'll go back out. Pretty cool. All right. So, let me go ahead and come back here. And we can even add more things to this, more animations. For example, if we wanted to say after this was done for some reason, um we wanted to make this pre-outline basically maybe to scale in or rotate for some reason. Obviously, in a real world scenario, that doesn't make sense, but this is just for learning a couple new things here. So what we could do is uh if we click on trans uh the transform tool right here, you'll notice that we can basically let me come over here, scale this down or rotate it. So if we real quickly just move this a little bit like in, we'll see that it adds a scale X and Y. So it has by default, let me bring this up so we can see it a little bit closer. From a 100% to 98. I So what we can do if we bring that bring that back to 100%. You'll see that now it has the key frames, but there's nothing really uh happening because they're both at 100%. So what we can do is move over here maybe just to around a half second. And now if we take this and scale it down after it does this animation from one to two, the inverted animation, it'll also come down and come back. And in in order to make it come back real quick from that scale, Ctrl + C, taking those two, edit, paste, special, and paste inverted. All right. So, let's go ahead enter, hover over it, hover off of it. Very simple. So, as you can see, uh you could probably do a bunch of different interesting things with this. This could be used for a variety of purposes potentially for uh I guess you could say a banners, display banners. Uh you could also do it for page elements. You can even add these triggers. You know, right now we're just using hover on and hover out. Uh you could specify I believe page squirrel so when it becomes visible in the viewport you can make an animation play with your SVG files. Um, and I remember seeing also several more. Uh, let me come down here. Swipe left, swipe, swipe right. Uh, I even remember seeing one, I'm not sure where I saw that at, uh, for changing the orientation, for example, of a of a phone from portrait to landscape. Uh, but yeah, a lot of stuff can be done. And this is just a very quick tutorial. I I just installed Edge Animate myself. So I definitely plan on getting more in depth and doing more real world sort of uh tutorials with this that are applicable to actual you know practical usage uses a usages sorry. All right so yeah that is it. Uh if you wanted to save this obviously you can just save as I don't know why that issue keeps coming up this error every time I try to save. Anyhow you can save it as an HTML file and then upload it to server. check it out on your phone. Uh, another option real quick. Uh, let me see here. If I click on stage, this can also work with responsive scaling. So, if you if you basically uh enabled that uh if you had it in like a uh some sort of div container uh that was responsive in and of itself, it would it would scale down appropriately. If we try to view this in the browser when there when there's no container inside of it, it becomes like this massive document. So, not really practical, but yeah, if you're going to actually use it in a uh in an environment where you have a web page or whatever, you have it's inside of a container, um having it responsive scale would be a no-brainer basically. Um so, yeah, uh that is it. So, uh, go ahead and check out designcourse.com if you haven't yet and subscribe here on YouTube. All right, see you tomorrow.