In our last video, we upgraded our boat by learning all about the Gradient Tool.

In this video, I'd like to show you how to create a quick little lightening effect in Photoshop, import it into Animate using Creative Cloud Libraries, and then bring it all together by introducing you to Color Effects.

So let's get started.

I'm going to start to in Animate.

And if we're going to make lightning for a movie, we'll want to find out the correct size to make it.

So let's go find out what stage size our movie is.

We'll go under Modify, Document... or Command J.

And I can see that my Stage size is 640 x 480.

So I just want to make sure that the lightning that I create is at least the size of your stage no matter what size you have.

I press OK.

I'll jump into Photoshop and open a brand-new file.

Go to File, New...

And you can follow along at home with just a few easy steps.

And I'm going to make my Stage size 700 x 500 in height.

And I press OK.

Remember, just make your file at least a little bit bigger than your stage size.

And I'm going to go ahead and set the default colors here by clicking right here or pressing the letter D to set our default colors to black and white.

I'm going to grab then the Gradient Tool here or press G and now we have a black to white gradient.

You can click over here just to double check.

It says black to white.

You can see it, black to white gradient.

We'll press OK.

And I'm going to drag the gradient from the left side to the right side of the stage.

I'll then go under the Filter menu, Filter, Render, Difference Clouds.

And then I'm going to go under Image, Adjustments, Invert or press Command I.

And then I go under Image, Adjustments, Levels... or press Command L.

And in the Levels panel, I'm going to take my little gray set point here and drag it almost all the way to the right.

Not quite though, you want to come back a little bit, so you see the lightning and some clouds.

Something like that looks pretty good.

And if you don't like the way it looks, you can repeat the same steps over and over and every single time just like lightning, it'll become different and organic.

I'll press OK.

I could also now press Command U or Image, Adjustments, Hue/Saturation...

We can click on this little Colorize button and we can add maybe a blue hue to kind of match our sky a little bit.

Something like that and we'll press OK.

Our lightning is finished.

Next, we want to get this thing into Animate.

And I could go under the File menu and Export and Save for Web (Legacy)... and then save it to a certain file and then go into Animate and import it and navigate to my file and open up and buh...

But who wants to do all that?

is a better and faster way using the Creative Cloud Library.

So we can go under Window in Photoshop and open up our Libraries panel which opens up the Creative Cloud Library.

You see I already have a folder for Animate CC.

But if you don't, you can easily create new libraries by clicking on this little Contextual menu and selecting Create New Library...

Now to put things in the Library, is pretty easy.

I can either drag the layer that I want right up into the Library, and boom, it's now synced to my Creative Cloud Libraries.

Or I can grab the Move Tool and drag it from the stage and drag it straight in to my Library.

Either way, I now have a couple of pieces of lightning to use in my movie.

Just as simple, if I have too many, and I want to get rid of something, I can click on this and press the Trashcan to delete.

The beauty is now I can jump into Animate and in Animate, I can go to Window and open up my CC Libraries.

And boom, everything I have in my Library is now accessible in every single Adobe Creative Cloud application.

It's wonderful.

So I'm going to go ahead and grab my lightning and I'll just simply drag it out to the stage.

When I do that this Import dialog box comes up.

It wants to know if I want to import this as a flattened bitmap, which I do, or if I click on this little checkbox, I can put it inside of a symbol.

So let's go ahead and do that and then press OK.

All right, great.

And now we have the lightning sitting on our stage inside of a movie clip symbol.

And we have a new layer called Background sitting on the stage.

It's called Background because the layer in Photoshop was called background when I dragged it into the Creative Cloud Library.

So let's fix that.

I'll double click.

I'll call this lightning.

And I'll drag it underneath the boat and top of the sky.

But when I do that this layer gets guided.

It gets indented and it's not part of the guide.

That's not what I want.

So I can right click the layer and select Properties and change it from Guided to a Normal layer and press OK.

And now it's no longer indented and it just a normal layer.

Another way I could have done that is by dragging it below the sky and then simply dragging the sky below the lightning keeping the layer normal.

Next, when we click on the lightning here and we'll open up our Align panel or press Command K and make sure this little checkbox is clicked Align to stage and then we'll click over here to align it horizontally and vertically to the stage.

Next, we can go into our Library and see that when we imported this asset from the Creative Cloud Library, it also created a folder called Background.psd Asset and then here's the bitmap called Background.

And there's our new symbol called Background, which again, I can change to Lightning just so we know what's what.

And now we're ready to create this lightning effect.

So first, I'm going to drag this keyframe here, this first one.

I'm going to drag the lightning, so it doesn't start until about 45 frames or two seconds.

So I have a blank keyframe in frame one.

And as I go down the Timeline, at about frame 45ish, boom, the lightning strikes.

So now I'd like to add the flash.

So the lightning strikes and then it's followed by a white flash.

At about three frames down, I'm going to right click and Insert Keyframe.

I'll click on the instance on the stage, which then updates my properties, and lets me see the Color Effects.

And I'm going to click over here and change this Tint to white at 100%.

You see the tint effect.

I can add a color and add a certain percentage.

Although use these sparingly because a lot of these Color Effects don't really work with a Canvas file.

But we can get away with using white and the alpha transparency.

So now we have white.

And we'll have the white sit there for also two frames.

And then the third frame again, I'll add another keyframe.

This time, instead of right clicking, I could just use this new Insert Keyframe icon and click and boom, I have a keyframe.

I'll click on the keyframe.

And instead of clicking on the instance on the stage, I can also just now go to the Object property here in the new Properties panel.

And here I'll change the Tint back to None, that way we see our lightning again.

So we have lightning, the white flash, and then lightning again.

But I want this lightning to look a little bit more organic.

And I don't want to create a new lightning and import a new bitmap.

But why don't we take the one we have and maybe we can transform it.

We can right click it on the stage, go to Transform, and maybe Flip Horizontally.

And now the lightning looks different.

And then maybe the very next frame, I'll add another keyframe, so making the timing a little bit different.

I'll insert a keyframe, and this one again, I'll go into the Object panel, and I'll change the Tint back to white.

So now we have two frames of the lightning, two frames of the white flash, and then one frame of lightning and one frame of the white flash.

And right here, I'll right click and Insert Blank Keyframe.

So let's see what we have.

I'll click on the Play button and we can watch it playback.

Not bad looks like lightning.

Great.

So why don't we add one more flash.

Maybe this flash will be a little while.

It'll flash twice and then it'll pause, and then maybe about right about here, enter a keyframe.

And for this, we can select the keyframes we already have.

We can grab the two frames here, the lightning all the way to this white.

All these four frames are selected, and I click on the Option key.

I hold it down and I click and drag this lightning, so it hits again at about frame 75.

But again, I want it to look different.

So I'm going to click on the lightning, I'm going to right click on the stage and select Transform.

And this time, I'm going to Flip Vertically.

So now it looks or appears as if we have three different pieces of lightning.

We have this first one, the second one hits there, it's different, and there's now the third.

So let's play it back.

Nice.

What we can even do is have this lightning hold for one more frame so it's really organic.

This lightning holds for two frames, then lightning hits again here for just for one frame.

And maybe this one will be for three frames.

So if I put my cursor at the top of the Timeline here, I can press F5 on the keyboard to insert one frame.

So now the lighting will sit there for three frames and then have a white flash.

Let's see what it looks like.

Perfect.

Lightning is all different times.

Sometimes it freezes in the sky and sometimes it's a quick flash.

So now we have some organic looking lightning.

We have one more thing to do.

Why don't we make it so that the sky gets darker before the lightning hits?

So to do that, we'll click on the sky background here.

And if I click on the stage, we see that it's still a bitmap.

So let's convert it to a symbol.

With it selected on the stage, I'll go to Modify, Convert to Symbol... and I'll call this Sky, and if I press OK, it'll tell me that the sky name is already taken.

So I'm just going to add a dash for now.

One is called the Sky as a bitmap and one is the Sky, the symbol.

I'll press OK.

Great.

So now that our sky is a symbol, we can use these Color Effects.

So maybe at about one second before the lightning strikes, we can click over here and add a keyframe.

Again, using the new keyframe button, Insert Keyframe.

One click and boom, we got a keyframe.

And then we'll go down the Timeline and maybe at about this point here, I'll add another keyframe.

And I'll right click in between to Create Classic Tween.

And then what I really want to do is change the Tint.

I would like to change the Tint and make this to a dark gray tint and maybe lower the opacity.

The only problem is it's not going to work with Canvas file.

So I have a workaround.

Why don't we set it to Alpha?

So we'll lower the opacity of the sky, which actually in this case is lightening the sky, not what I want.

But if I turn off the visibility of the sky, you'll see that we have a white background.

So why don't we go ahead and change the background and make it darker.

We go to Modify, Document...

And I'll change the stage color to a dark gray.

And I press OK.

And now if I turn the visibility back on of the sky, we see that as the alpha transparency goes down, it fades, and we see the dark gray background.

I'm going to make that a little bit darker.

Looks good.

So now we have the sky, it fades the dark.

Looks like the clouds are coming in, the lightning strikes.

And then we'll repeat on the way back.

So the lightning strikes.

And then right about here, we'll make the sun come right back out.

So with the sky layer selected, I'll add a keyframe.

I'll go down the Timeline here, I'll add another keyframe.

I'll right click in between to add a classic tween.

And I'll change the second keyframe under the Object panel from Alpha to None.

So now it goes from a sunny day to a gloomy day, lightning hits twice.

So let's test the movie and see what we have.

So Houston, we have a problem.

If you noticed, we didn't see any of the white flashes.

And that's because of the problem with the Color Effects with HTML5 Canvas when you export.

So a little workaround we can do is we go into the Library and duplicate the lightning.

Lightning copy I can call that and if I swap out this symbol in the Properties panel, I can swap symbol with the lightning copy and again I can click over here and swap the symbol with the Lightning copy with the Lightning copy there.

And then one more time, click over here on the stage, swap the symbol to the Lightning copy.

And now I press Command, Return.

So that's it.

Using two different instances solved our problem.

In the next video we'll add sound.

See you next time.