(DDSGN 210, P6) Interactive Infographic in Animate CC

so here's a final simplified image of what we're going to work on for your interactive infographics so they'll be a little animation in the beginning yours will be much more interesting than mine and then we're going to create some buttons that have a hover action so I hover over this and something pops up and then another option is hovering over this and it changes colors and there's words in it so we're using some skills we learned last time and just expanding on it okay so I'm gonna start an illustrator and you want to make the size of your document for a web so I would say if we come into all the presets here I would say the minimum you want to do is 1280 by 800 and that's what I'm gonna work on for this just so it's smaller but you can make it you can make it bigger if you want as well so I would say at least do 1280 by 800 and I'm just gonna quickly show you I have this all set up here the important thing is that you want to have everything on its own separate layer so I have the trees as one layer I have the chart our graph is one layer and I have the hills that I made just with the pen tool as one layer and then the gradient and the background has another layer and I usually lock my background just so when I'm clicking around it doesn't mess stuff up so I'm just going to show you how to make an arrow and the chart really quickly um so to make the chart I come into the pen tool up here which is P on the keyboard and you have your fill color and your stroke color so I'm just gonna double click to get a different stroke color and I'm just gonna click click click you can see my appearance here and I can come to the stroke and increase the stroke just to make it thicker and then if I come back into the selection tool which is V on the keyboard that's a good one to learn you can make it as thick or thin as you want and you can always be selected on it and if you don't like the color you can change the car there too and then for my bars for the chart I just used the rectangle tool and for that I'm gonna swap the fill and the stroke because I just want it filled and no stroke and I can make it a different color and then just draw the bar any way that is gonna make sense for your data oh this had white around it which I didn't realize so I'm just gonna click on the stroke color there and then click the none button which is this with the little red dash through it all right so now it's just filled with red and if I want it around the same size you know the same width you can come in to your selection tool which again is V on the keyboard and you can press option or alt and you see how the cursor changes to two little arrows and you can just drag a copy that's keeping it the same the same width and then I can just bring it down or up depending on what your data is and then I can well it still select a double click in here and change the color so you can have them all different colors so make as many bars as you need then quickly just to show you how to make the arrow I'm in the line segment tool and I'm just drawing a straight line and you can hold shift to make sure it stays straight so you can just press shift on the keyboard and again I'm coming here to my stroke and I'm giving it a color so here we need to add a stroke color I can make it Orange and then I'm increasing the weight on the stroke if you don't see this window here you can just come up to window appearance and make sure that's checked so I'm increasing the weight on the stroke and then I'm opening up the stroke panel by just clicking on stroke here and we have different options for a dashed line which you can there's a lot of different numbers you can input and play around with then I just want to show you the arrowheads so you can choose which kind of arrow you want and you can put one on each side but I think for the chart that wouldn't really make sense you can go back to none so you can just have that as a way to make your data more consistent and more interesting and show people what it's about okay so you're gonna create your whole background file you can create it an illustrator you can you do some elements in Photoshop too if you would like and then you're going to save it with all of the separate layers and we're gonna bring it into animate so click click out of here and I'm gonna come into animate and we're gonna do an html5 canvas same thing as before so click on that and we don't need to adjust the size because when we import our file import import to stage when we import our illustrator file we can choose to have it the same size so I have my illustrator file I'm gonna press open and then we're gonna get a pop-up with some options so we want this to be the animate layers because we want to import it with all the different layers that we have created and you also want to check this box set stage size to the same as the illustrator artboard and it's telling you what the size is that was 1280 by 800 so it's going to make the stage in animate the canvas and animate the same size as our illustrator document I'm just going to come into the timeline give it a second to work and you can see that it's all in there okay so the first thing we need to do is to set up the animation because you're going to have some kind of animation in here and this was a this is a really important step that a lot of people missed in the last project so I just want to make sure to explain it again this time so I want my animation to be one second and then I want it to stop yours can obviously be longer so I'm clicking on each layer at the one second mark which is frame 24 and I'm pressing f5 this is creating a frame what's called a frame span and we're setting up each layers frame span and that's how long the animation will last for that's the the animation won't play past this frame on the timeline so you need to click on each one and press f5 press f5 press f5 and then I'm going to make the trees I'm going to animate them just a little bit so I'm on the trees layer and I'm right-clicking and I'm creating a motion tween and I need to they need to be converted into a symbol I could have done that before but animate is gonna do it for me with this warning so yes I want that to happen and then you can see in my library it's created a symbol for the trees and I'm just gonna make sure to stay organized especially if you have are gonna have a lot of things animated I'm going to call that trees so just make sure you're keeping organized with that okay so I just want my trees to start small and get bigger so I'm going to add some keyframes in here so I'm moving my timeline indicator down I'm right clicking and I'm insert keyframe and I'm just gonna select all for this and since this is where I want it to end up I'm going to insert a keyframe at the beginning and that's where I'm actually going to make the changes so insert keyframe oh and then I'm coming to this tool here which is the free transform tool and I'm holding shift I'm pressing shift on the keyboard and grabbing it from the corner making it smaller and dragging it down and then we see we have that animation path and I can press play down here just make sure it looks okay yours again will be much more interesting remember you can right-click in here and go to refine tween and you can add an ease into it just medium E's are fast and you can also adjust the easing here as much as you want so you can play around with that when you want to get out of this refine tween you just right-click it on again right click on it again and press refine tween so we can see how that looks okay mine's a little boring and slow yours will be much more interesting but I'm just gonna test it I'm gonna come up to control and test to see how it looks okay so I brought it into I'm testing it in Chrome and we can see that animation is just playing over and over again which you might have noticed in your last project so we want the animation to stop so people can work on the interactivity and you know hover over stuff so to do that we're just gonna add a little bit of code at the end so I have my time indicator here at the end at the last frame of my animation and I'm coming up to code snippets if you don't see this you can go to window code snippets and it will pop up I have mine sort of embedded in my panel here so I can just open it up easily so we're in html5 canvas we're in timeline navigation and we want to stop at this frame we want to tell the computer to stop it at this frame and not keep playing it over and over so I'm double clicking on that the the actions panel where the code is going to come up and you see that it's giving you instructions so we need to tell it which frame to stop at if I look I have my indicator where I want it to stop and if I look at the bottom here right here you can see that it says 24 that's the frame that my timeline indicator is at so wherever your last frame is you're going to type in to these parenthesis so I'm just going to type 24 in here and press save if you haven't already saved it and make sure you are saving often ok so the next thing we're going to do add some of those interactive features so we're gonna create a button for this first chart bar this first bar on the chart so I'm selected on this bar I have it highlighted you can see my graph layer is selected I'm right-clicking and I'm converting it to a symbol and we want it to be a button from the drop-down so make sure you choose button and you might have a lot of these so remember to stay organized so BTN short for button and I'm going to call it chart one so I know it's the first one you'll name your is whatever makes sense for your image and press ok and also make get in the habit of giving everything an instance name and the instance name should not be the same as the button name and so a good thing you can just reverse it or I can just call it chart one and you probably want to know it's a button so I'll call it chart just the opposite of what I named the actual button so I know a lot of people had some problems with their code and it was because they weren't giving instance names so make sure you're doing that ok so then come back into the library and we're gonna we see that our button has been created our chart one button and we're gonna double click on it to get into this that we've worked with before and what we're gonna do is we're just going to change the overstate so that when someone hovers over it they're getting information so I'm right clicking and over I'm insert inserting a keyframe and you can change the color here if you want and then I'm also gonna add a little pop-up so I'm clicked on this oval tool I'm coming to my properties and I'm gonna take the stroke off of it so the little pencil is the stroke and I'm just going to hit this so there's no stroke and I'm gonna change the color to a bright green and then I know I have some space up here in my infographic for lettering so you can have it right over over the bar just really depends on your composition is and then you can click on the text tool and change the color of that and obviously change the fonts and everything and can just say trees provide whatever your information is that you have and that's gonna be the hover state of this so design it however however you want get in the habit of doing command ctrl s to save click seen up here to come back to your timeline and we're gonna do you're gonna do the same thing for each each button you want to create each place you want someone to hover so let's test that first so control test and we'll see that the action for it to stop has been created so it plays and it just stops there which we wanted so it doesn't keep on replaying the animation and now when we hover over this bar the little information pops up and you know you can test yours and you're gonna can make adjustments like I probably don't want to have it overlapping the arrow maybe you do you can make adjustments really based on yours and make yours look great so next thing we're gonna do is make a button for this item so my second bar on the chart so right click convert to symbol make sure it's a button BTN we call it chart to give it an instance name of chart - BTN and then come into the library and I'm gonna double click on here and now for this one I want the text to be inside the actual bar so I'm right-clicking on over insert keyframe I'm gonna change the color again and then I'm just gonna grab the text tool I'm going to come into my properties so I can adjust it now change the color maybe my font needs to be a little smaller since I'm writing in here so I'm just so the if you're doing this in a smaller button just make sure your text fits in but it's still readable to someone looking at it so you can make all kinds of adjustments I'm gonna come back into my selection tool and make sure it fits in and you can put as much or as little as you want in there totally based on your information that you have and then we're gonna save and let's test it out make sure it's working okay the animation works and it stops this hover works and great this hover works so you can do this however you want you can you know get really creative with this and then to save it same thing as before we're gonna come to file publish settings you don't want it to loop so uncheck that make sure it's saved to the right folder which would be your n drive folder and press publish remember if you press ok nothing happens it just saves these settings you have to actually publish it to save it and then make sure you test it from the end right M drive to see that it's working

Channel: Leigh Rooney

Views: 2,800

Keywords:

Id: 3vQQPC8E4d4

Length: 17min 3sec (1023 seconds)

Published: Sat Nov 03 2018