Create and animate a background from day to night with Adobe Animate | Samantha Chan | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Create and animate a background from day to night with Adobe Animate

teacher avatar Samantha Chan, Creative softwares

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

8 Lessons (26m)
    • 1. Introduction

    • 2. Create the buildings

    • 3. Create the trees

    • 4. Coloring trees

    • 5. Create the bench

    • 6. Filling in colors

    • 7. From day to night

    • 8. Conclusion

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

In this class you will learn how to draw a background and animate it using the shape tools in Adobe Animate. It is a class for beginners, so if you are wondering how to create a simple background that looks like a city mixed with a park and animate it afterwards you have come to the right class.

What you will learn:

  • What drawing tools to use for creating different objects
  • How to create separate spaces for the background
  • How to add shadow 
  • How to animate the change of colors for a day to night animation

Enjoy the class :)


Meet Your Teacher

Teacher Profile Image

Samantha Chan

Creative softwares


Hello,  welcome to my profile! My name is Samantha Chan, my passions are Graphic Design, Photo manipulation and Animation. 



See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: Hi, everyone. Welcome to this class. In this class I'll be showing you how to draw a simple backgrounds in adobe animate and then how to animated from the tonight. So I'll be showing you how to use the ship to incorrectly. And also be explaining how to use the greed and transform to while you are you seeing the great and color in adobe any meat. So if this all sounds good to you, you are what, come to enroll in my class. I'll see you soon. 2. Create the buildings: so I want to show you how to create a background in and will be animate. First of all, you can use the pencil too, if you want to create rectangular forms which are buildings. If that is the case, I will recommend a street mode here. And then I will make it in three parts. Because here you see that in the background there's always three parts. So in that case, I'm going to create three parts here. So right now you see that this is one part here at the top. This is another part. And this is another part at the bottom that will make things easier this way. Because when you are creating trees as well and adobe enemies, you want them to be like in the middle here or in the back, you don't want them to be in the front. So here, for example, I can then create this building. So let's say I creates some here. I draw as much as possible. You see that this is actually really wobbly at the moment, but you can fix them after works. Okay, so right now I can use the selection tool and then I can fix them very easily by just dragging them out like so And then this one s spell, just to make sure that they are connected in the lines and then everything will be OK. So here, I'm just going to make this frustrate us possible and this one s smell. And then here and then this one s well, like so. And then here we make this street a smile. Wherever there is this angle, you can then move it and it will make it a sharp corner. So you can change that. Like here. I can handle it. This mom, And then we move the lines here and then this one, That's what. So here I can. Then most there's more to the top s. Well, since the right side is more direct to the top like so you can then move it like this. And here as well. You can move this one like so and this one like this, like this and then usually thes part and this one as well and this month as well. Okay, so I know we direct this to the bottom and I'm going to like this to the right as well, and this one as well, like so And then here we track this more to the bottom, or you can even delete it. And this one, you can then make this and it's a big coffee. Or you can make this a very sharp etch increase. It's not sharp enough. You can always press on old smell here, and then it will make it a sharp corner for you. And here are just practice to the bottom and this one to top together with this. So this is Stan, how it will look like, and then this will go to the bottle. Like so. Okay, so right now that we have this fixed, we can then create rectangles insight for the windows. So here I can then select the option to have no Scheller inside off the rectangle because in that case, I can then decide afterwards what color I want when those to be. So here you will see that when I have it excepto object moat, it's will get glued to the line at the site. So in case you don't want that, you turn off the snap to object mold and you create a windows here like so so that it won't have to be attached to the lice. Okay, so right now I create one here, and this one here and this on here, a small and I create a door over here and this one. Then I create two windows here and another one here. So here we create the door, use the selection two and then Curtis to the top. So you need to wait for the kerf option to appear. And then you concurred with the top. Like so? And then here you can also create, like a round window, for it's like so And here you can create more off these rectangular windows like this, and like so they don't need to be the same size. And then here you can create some other types, a swell so that it will look at it more innovative. Okay, so right now we have thes I'm going to go further in the next video with the ones in the middle 3. Create the trees: I'm then going to create trees here for the trees. It's better to use the police or two. And you got the option. You change the polygon to tree, and you will basically have a triangle. So here you see, it's quite easy to create triangle, and then you can create those basic three forms in the middle here. So here I'm creating another warm like so And then another one again, like so. So here you can make this smaller, like so, and my new press on. Also, you can then move this more to the inside like this and here as well. You can make this move mortar inside like so. And then here you can any this part here and you can create the woods for the tree case. So, like, this one is actually really Why? So let me change this here and here, this one myself. And here we moved this more to the insight and then this one as well, so that it looks more tiny here and here. This one. Okay, so I know we have this. We can then just copy it, go copy and then paste in place. And then you can drag him to the right side. And you can also use the free transform tool to make it bigger, like so. And you can also direct the pivots to the bottom so that when you make it bigger, you see that it will only move to the top and not so much to the bottom, so the same here. I want to move it to the bottom here. And when I drag it out, you see that it will only affect the top more instead off the bottom. So here we can then create this, and we can keep doing that. So I paste it in center. And then I can also move thesis ponds making under the bit higher. Like so. So right now. This is then how you can create it. And then you can use the over to here and you can create more times off trees. Esme, also like here, you can create the small circle and then the speak. Sir. Collect this. You used the section two and then you delete them. Okay, so right now we can then also copy this. We can create them in the middle here, asthma, and we can basically make it smaller, since we want it to be smaller here and here. A small. Okay, so right now, what you can do is insert the colors that make sure that they are close, because otherwise you cannot insert the colors there. So here I'm going toe insert a line. 4. Coloring trees: so I know I'm going to draw the insights off the trees. First, we want the top to be green and the bottom to be brown. So instead of music solid color, I want to use radio greedy in because it looks better with the reader ingredients. So I'm going to select the color dark green here and then the color light green here. So let's select a light on one in here and say that the doctor was okay. So right now, when we are drawing, I can see here that there is an option to draw insight. So here, for example, it say's paints normal. But you can paint selection ping behind paint inside off pain pills. So when you paint inside, But after you start, there will be the dropping over there. So, for example, if I make my brush bigger by pressing on the close bracket, you can then make this larger and you see here that whenever I paint inside, it will then only paint inside off the tree. Okay, But here you see that it has selected the stroke so we don't want this. Let's go here on. We select this for the real ingredients. Okay, so right now we draw inside, and then it will only affect the insect. Okay, so I know that we have trees. Don't. I'm going toe also creates the color ground off this. So here I'm just all insect, the dark brown here. And then they liked her brown here like so. And then I'm going to start dropping the inside again. So here, I'm going draw. Okay, So I'm going to paint selection and I'm going toe only paint the bottom here. So here I can amping this part, and I select this one and paints this part here at the bottom. Okay, so I know I am done. So I'm done drawing all the trees here. So what I can also do here It's like all the trees. And here I am then going to create a movie clips symbol, all the them. So here I'm just going to call them trees, then click. Ok, so right now what happens is that when I am at filters, I can then at a shadow to them. So here, I'm just going to make the shadow very light. So here, I'm just going to make it high here I'm going to change it to more blurry. So right now it has bloodier shadows, and here I can then click on inner shadow so that it will go inside off it instead off having it on site off the trees so I can create another drop shadow and basically this one I can then create. It's on 22 pixels. 5. Create the bench: Okay, so right now in the front, I want to create a bench here. So I select the color brown like so, And then we can create a bunch. So basically, you can then copy this one a copy, peace in place. And then they get to the bottom, like this copy place in place, and then you get to the bottom and then copy and peace and place again, and then dragged to the bottom like so. And then this one, we can reckon more to the top and then based in place again. Create one more here. And then we can create, like, this court here where it holds the bench. Like so. Okay, so right now they're Spanish. Looks like it is going forward. And then we can have like this. They are gonna line here and this one smell next. So and then here, small plex. Oh, okay. Recumbent creates like a triangle over there on trying over here. Like so. Okay, so I know it to look like this is a bench, so I only need to fill in the colors. So this wrong, like this Mark. So and then all of these ones here Okay, so right now, here. I'm just going to fill in this scholar who So this one a smell we feel get in like, this color. And I'm here and here. I'm also going to close this year. That's snapped toe object to you. And here this one's OK, so I'll be showing this in the film. And it's like, So Okay, so right now we can also feel this part in. So So maybe we should make this the direct channel instead. So this is done a bench. 6. Filling in colors: So here I am going to use the lights create here. You know, I don't want any corner, so let's see, I said this phone, like so in this on the smell, Okay. And then insight. I want the officers or the buildings to be like up. So I'm going to go here and sacked a really ingredients and make it yellow and then yellow at the other side as well. But I like the color. So here, I'm then going to fare in, like so. Okay, so right now, instead of freedoms from time on the frequent until so that I can make this part smaller so that it will look like they're slight in between. Right now, we have all these colors and we can do the same here at the top s parcel that see here I select this part here. So that's sort of this area here. And my mother Five comfort symbol news. Our buildings. So since it's converted toe a movie clip symbol, I can then add a filter to it right now by clicking the drop shadow, I can then select the inner shadow here and changed the angle off it as well and here I'll just make sure that they are more fluid shadows on here. The strength I only fit at 100 and then also make it high here so that it will look like the shadow inside. It's not really solid. So you know, we have stairs, and then we have the bench Esmael, which you can also convert to a movie clips symbol and me at shallow, too. It's like so and make it high like this. Okay, so this only spreads her old site. Okay, so this is down. How you can create backgrounds. And then here, this one, I can copy it. Goto arrange and then sent it back. And this one, I sent it back a small because this one cannot be in the front off the tree. So here I go. And copy this one as well. Priest in please. And we go and create more off them like so ends. I'm going to use the arrange again. Andi sent back like this, but here this one should be sent to back a swell. So this one goes in front of it. Okay, so right now we have these trees here, and then I could do the same here. So I pull and copy this one place in place on. Basically, we just directly monitored big more to the right side, like so. And we go to arrange center back. Okay, So copy this again, pacing place, and we go here and right click on it go toe orange and sends back again. Hey, So now we have different officers and trees and a bench here in the front. So whatever you want, you can keep creating more and more. Then you will see them, that you can create a background out off that. And here you see that there is this area here that shows have grassy areas. So here I'm going to use the correct Anatole and select the color green here and create a green area over here like so And then the other one should then be green. So this part here shows me grain like so if I clipped the corner solve states, you will not see the rest. So let's copy it and paste in place. Yeah, we should hide more off there. So that's go to arrange and center back. And here this phone goto arrange and sent to back as now and all the wrong smell so sense of back Maxwell this'll warning Go orange sends it back like so And then this one we go to arrange and send it back again. Okay, so right now you see that the boots are almost hidden. So this is then how you can create a background for your capital as a beginning. And here you can also change it inside off the symbol. In case you think that this one should be more flats like So you see here it will then also changed all the symbols since we copied and pasted. So they just then how you can create in basic background in adobe any meats. 7. From day to night: So here we have our layers here with the background in under the enemy. And you see here that I have it at yellow in the beginning and in the last key from 1/2 it in dark blue. So I wanted Toby calm, dark blue in the end. But I only need to do is at a ship treat because she between is the best for when you want to create a color animation. And then here Asmal you see, since this becomes darker, it needs to become darker in the color as well, and the same goes for the grass. So this one is for the grass and we have to add in shape between here as well because in the last key frame, we already have the color selected. He only have to select the BRAC tango. And then you change the color by selecting any feel color here. So I know what happens is that when I play yet you will see that it will go from they two nights. So the for it goes, you see, the darker it will become at the night time. He will see that here in the buildings I can also selectees and change them at the night time. Since I have made it for seconds, I can also answer a key Fring in the four seconds here I can. Then hold on shift and Sarah, call these color inside, and in case you cannot subtract it well, you can always omit in here. And you select this one and new on select lease by clicking on it again. So I select everything here, and then I can go here and change it to a read, agreed and color and make this colored orange. So here, this one should be dark orange and the rest light orange, like so. Or I can make this out of the big yellow, which is better. So here we have our four seconds here and the rest here. I don't want it. So this once we can remove the frames here and here. I just at the ship dream, and it will then change. But you see that it will then have a problem there because it is not only my window that is on that layer. So to create a shape doing you need tohave the layer separate from the other layers. So that it will work there. So here I can then select them. Hold on shift and I will selective. And then I can sum it out here to make sure I select everything. Okay, so I know three goats addicts caught them and then we go to layer number two based in place , and here in the end, I can then change the color off them. So I changed it to read ingredients. And then here I asked a ship between So here I play it and you will see that it will then change color at the ends. Like so. If you want the middle part to be on another side, you can also go here and she's agreed and transform toe these middle color here can then go more to the middle instead of more to the right or to the left. Okay, so right now, I can also make sure that they are here in the same area, because otherwise there will be moving. So I know when I play them insured than become darker in the ends. Like so. Okay, so I know this is school, but when I go out, you will see that nothing will happen because it this on a movie clips symbol. It won't show that my movie clip symbol is moving when I go to control play. But if you go to control test, you will see that it does show that the building is going to be changing color in the light . So just because it's not playing in the meantime line doesn't mean that is moving. It's just inside off the symbol it is moving, so you have to click insight, and then you will see on the timeline how it will move from the beginning until the end. 8. Conclusion: Congrats on making it until the end off the class. You can go to the tap projects and resource is just below off your video to download the file so that you can practice with the foul smell. I hope to see you in another class.