Image Slideshow for HTML5 in Adobe Animate

Hey there, in this video were going to create an image slideshow. So were going to take some of the stuff we've learnt in terms of classic tweens and turn it into, instead of things sliding in like we did with our alien text and the text came in from right from the alien and the alien came in from the left. Now, were going to do something, it’s the same process but I guess a different visual. What we’re going to have is some images fade in, pause for a while and then fade off. And get them to loop around so, like an image slideshow.

So lets create an html file, canvas. Were going to change the size here, so we've got a predefined ad size that we need to work to and its 350 by 250, common size. And the stage I'm going to make black, just because when its fading out I want there to be black rather than white. I'm going to save it, I'm going to call this one image slideshow. Great, and I'm going to bring in an image, so I'm going to go file, and import and up until now we've been importing to stage and that’s normally common, but this case were going to bring in a bunch of images, were going to go import to library because then we want to drag them out individually when we want to use them. So were going to go import to library, in your exercise files they’ll be a folder called image slideshow and ill bring in these three, you can bring them in all at once by shift clicking them all, and hopefully in your library there you should have three little images.

So, first one were going to start with is well start with the 80’s, so in the timeline, were going to drag it on, weirdly it doesn’t line up when you just drag it on, but once its here you can click hold and drag it and then it would snap to the edges there. I've made sure on Photoshop that these are the exact same size, its best not to do any resizing in adobe animate, if you bring in an image that is say, this here I know is 350 pixels wide. If you bring in one that’s say 1000 pixels wide and you scale it down using the free transform tool, what will happen is it will be published at the right size but it will actually load the 1000 pixels and then scale it down for you. So you want to bring it in at actual size.

The first thing we do for any animation is to turn it into a symbol, so I've got it selected here. I'm going to name my layer just for it all to be very easy, so this is going to be 80’s. And with it selected I'm going to go to my modify, convert to symbol and you'll notice here that I'm on a mac, and it says hit f8 and it'll convert to symbol because that’s a great shortcut but what you'll find is if I hit f8 its going to start playing itunes, so if you do want to use this shortcut, you’ve got to go through and disable a few of the default mac ones which is a bit of a pain or you can create your own shortcuts under adobe animate and there's one in here called keyboard shortcuts and create your own. I totally do this but for this course I'm keeping it to what’s built into the software, so that you can follow along.

So were going to make sure it is a movie clip, we don’t use graphic and were going to do button later on. And we always name it how, that’s right mc at the beginning, underscore and were going to call this one 80’s click okay. So that’s the first part, the second part is we need a beginning and ending key frame. So this is going to be the beginning and this is where it’s going to be completely faded out. And maybe at frame 20, it’s going to visualize or become opaque so we can see it. So I'm going to put a key frame in here, at the moment there's nothing really changed, it’s got the first key frame, he's sitting there doing nothing. And there's nothing between and nothing going on at this 20th key frame either. So what id like to do is which key frame do I want to be visible and this gets everybody when I'm teaching them is that they're not making this one transparent so it starts full and then fades out, you want to do it the other way around, so you want to get all the way at the beginning and this is where I want it to be completely transparent, so I'm going to click it here, go to properties and what you'll find is I want to use this thing called alpha, we used it earlier on when we were doing symbols and instances with our little space alien that we drew. So I'm going to click alpha, if you cant see alpha, this happens quite a bit as well, its because you’ve clicked on your key frame. Can you see you get options over here, that are relative to the key frame and there's not much we can do here. So if you are, you're here, I can see it I cant see alpha, its because you’ve got your key frame clicked and not your symbol here. So I've got this symbol clicked and I've got colour affect and I'm going to use alpha and I'm going to drag it down to zero, so what’s going to happen is its going to start at zero and over here, its should still be 100.

Now, nothings animating at the moment, the last thing we need to do is add a classic tween. So I'm going to right click anywhere between these two, click create classic tween and hopefully now I'm going to put it right at the beginning, hit return on my key board and it fades in, nice.

Now we’re not going to play around with easing for these kind of alpha changes, these fade ins, why? Because I find it very hard to see any difference between easing, its really obvious when you're physically moving something and when you're fading something in I find its near impossible to see whether its easing in or easing out. So I never worry about that.

So what id like you to do now is to pause for a little while and then fade out again. So it fades in, I’d like to pause for a while. How long? Its totally up to you, you can adjust it later, but I'm going to keep it short, why am I going to keep it short, just because I want to keep it useable on my timeline here because you guys are going to be following along, if you make it too long, you can scroll along, can you see? But it’s going to be a little bit difficult for you guys to keep up watching the video. So I'm going to make it nice and short so its going to pause for about a second. So about 30 frames, so just over a second. And I'm going to right click here, I'm going to insert my key frame. And remember that’s all you need to do to pause it. And frame 20 it’s sitting there at 100% alpha. And this here is a duplicate, so the same key frame, see the little dots and its just not doing anything. So I'm going to hut return, its going to pause, wait and then its going to stop.

The next thing I want to get it to do is to fade out, so I've got my first key frame here where its 100% alpha. Now I want it to fade out down to zero. Now typically when you are doing things like slide ins, fade outs, you want, just as a rough guess to help you along is that if it takes 20 frames to fade in, 20 frames to fade out feels really long, its really strange, you’ve got this kind of anticipation, you're prepared to wait for the 20 frames for it to fade in because you're getting used to it and its exciting and its all new but if you do the exact same timing for fade out it feels really long, so I find about half of what it is so I'm going to do 10 frames to fade out, it just feels a lot quicker and a lot nicer. So I'm going to right click 60, insert a key frame. So at frame 50 he's 100% alpha, at 60 he's 100% alpha. So one of these needs to change and this one needs to change. And this one needs to stay the same and it’s this last one I want it to be completely transparent. So click on it, and over here, grab my alpha and make sure it’s down to zero and then the last bit we do is add our classic tween. Can you see here, blue means there's a tween between these two, classic tween and blue means there's a classic tween between these two as well. Why is there nothing between these two? Because it doesn’t do anything, you could add a classic tween and it does absolutely nothing. It doesn’t add anything to the file size, it just kind of sits there. So if you want to make them all blue, knock your socks off. But just know that you don’t need to tween a pause. So return, fades in, waits, fades out.

So now were going to go through and I'm going to get you started on the next timeline and I want you if you're following along the tutorial to then carry on and do it yourself and I want you to do the other two layers. So were going to get started, so I'm going to add a new layer, I'm going to call this one, what was one of the other ones, there was a phone and now this is a big bit is where I want to get started. I could start all the way back at one but then they're going to be competing, they're both going to be fading in at the same time and the one that’s going to win is whoevers on top, so the phones going to be on top of the 80’s picture and they're going to fade out. So what I want to do is I want to start it later on and I want to start it pretty much when this one finishes. Now what people tend to do by mistake is they’ll click on this because that looks important remember, that little square, ill move the key frame over, see this little square here, that looks like it should do something. It looks like an empty key frame lets totally ignore that square. They're everywhere, and they do nothing, I hate them.

So what we need to do is we need to say I would like to key frame there because this is where I want it to start. And what people tend to do is they do this, they go to the library, they grab phone, they drag it in and what happens is it looks like its appeared at 60, but actually what’s happened is can you see, its appeared at 1 where it needs a key frame, it needs a home and its found it all the way back here because every layer gets given a default one and one. And its all the way back here so its actually the whole way along. So what were going to do is were going to go to edit and undo a couple of times, undo, undo, so what I need to do is I need to give him a home, so I'm going to right click here and I'm going to say insert key frame and you can see there's my little empty key frame that’s appeared, and now I'm going to drag in the phone, I'm going to position it, why is he not quite the right size, that’s annoying. What ill do is ill update the exercise files to make sure he fits in there because that’s going to annoy me no end. But you can see along here, this key frame is now empty and this key frame has our image in it. If I drag this play head back, you can see there he is there and he just appears in that last key frame. So now what were going to do is try and repeat this part. And this is where I’d like you to maybe pause the video and see if you can go off and do this next one. The big things to remember is that it needs to be turned into a symbol and then you need to go and have a beginning and ending key frame. Make sure one of the alpha’s down at zero, the first one and then add a classic tween and see if you can do the pause and then the fade out so I'm going to go do it now so if you decided not to pause, and you feel like you're confident and can do it anyway, you can skip along. What I'm going to do is just go through it now.

So I've got him, ill work a bit faster this time and I wont narrate everything. So I'm going to call this one mc phone, and it’s going to be 20 frames. Insert key frame, I'm going to go to the first key frame, click on it, go to properties, click alpha, its going to default to zero, I'm going to add a classic tween and that’s going to work. There we go, and then I'm going to get it to pause for 80, 30 key frames, so that was finished now I'm going to put another key frame to do the fade, you can see once you get a bit of rhythm going it can be quite fast. So, preview, hit enter, he fades in, and then fades out. Great. Alright, actually its not me, its not resized, I just didn’t line it up proper, so that’s my fault, I thought the image size wasn’t perfect, but its not, you can kind of see its starting to fade out and I can see the stage underneath it. So this becomes a bit of a problem because say if I'm here and I want to move it down, its still got that little gap in there. Lets say I did do this right and I've moved it down, what you’ve done is you’ve only moved it down for this key frame. What you'll find is this key frame is still up so now you’ve created an animation that not only fades in but it also moves down from there and actually starts moving up. So if you want to adjust this, instead of dragging it down there. I'm going to go undo, you can do one of two things, you can go to every key frame and drag it down and make sure it snaps down to the right place. But you have to do it to all of them. So that’s one way, or, you can go into the symbol, so I'm going to go to here, dive inside, I'm inside mc phone and because I'm inside now and I can drag it down, what’s going to happen is when I come back to scene one, all of them will be adjusted. So there's two ways, or you can undo the whole thing, delete the layer and start again if you're finding things move around. I'm still going to have to adjust this guy.

So I'm going to do the last one, this one here is called I cant remember, hipsters. Remember key frame to get started and lets just say in this case you want there to be an overlap so when this fades out, there's a bit of a cross modulation I'm going to have a key frame here. Insert, key frame, so it starts fading in before this one finishes and I'm going to drag in hipsters, I might lock these layers just to make sure I don’t wreck anything. Drag these guys in, are these the right size? They are, lovely. Okay, convert them to a symbol, this is where shortcuts become useful. And this ones going to be called hipsters, insert key frame and now I'm just going to lump it in a little quicker rather than, there's no reason I cant stick all the key frames in first, and then go through and say I want the alpha of this one, zero, alpha of this one, you can see I'm just blocking in the work when it needs to be done. Doing them in more of a production line. And you'll get faster as you get better at it, you can see I've done a couple of things wrong. One is that this does fade across. So I hit enter, there's a bit of a cross fade but I didn’t match the timing for this one, its meant to be 20 frames, so what I'm going to do is show you how to slide them along.

So I want this one to stay there but I want this one to move along, plus these ones to move along, so I'm going to click this one, its really weird selection remember earlier on we did it, if I click it once, hold shift, grab all of these guys and then drag it along, there you go. Now I've got my 20 frames plus my break for 30 and my little 10 frame fade out.

Alright, lets hit save and lets do a preview in a browser, and that’s previewing up there on my other screen, nice. And you'll notice that adobe animate loops and there's those lines that are bugging me. Alright, that’s the end of this video, I'm going to go off and fix that little image for you.