I wasn’t present to the class where we were coding in Animate, so I gave myself a quick crash course for a bit of practice. I actually really enjoyed doing this, probably because it’s more procedural generation rather than drawing directly into Flash.
While I did read in other blogs that the students were shown how to make a tree, I just searched for scenic images and chose one that was a boardwalk looking out onto water.
It’s important to remember that everything works in layers when writing the code, so I generated the backgrounds first (the sky, water, and sand). Using the colour-picker built into Animate, I wrote them down for future reference, noting what else I would want to include in my picture (the sun, clouds, and boardwalk).
The first thing you definitely have to wrap your head around is the numbers: using coordinates to dictate where your items start (0,0 being the top left corner of your canvas) and how wide/high you want those items to be. I found the easiest way to remember the order of the four numbers was (in my mind) splitting the canvas into quadrants, placing the coordinates of where you want the topmost corner of your item to go, then how wide and how far down you want it to go.
When I set my sun in the sky, I realised that a circle doesn’t really have a topmost corner, so the top of your sphere will go higher than your starting coordinates. In the end, I liked the look of the sun by making this mistake, so it worked out but it’s still an important lesson to learn.
I then created the clouds out of smaller circles; the first one took some time to plan and get to look right, but after that it was a matter of copying/pasting the code and then changing the coordinates of each line.
In the end, I like the scene that I made. The most difficult part was planning out the boardwalk to add perspective to the scene (ie, making it look like it was going out into the water, rather than making it look like a ladder). I think it still needs a bit of work, so if I can figure out how to make trapezoids it would like look much better.
The gulls in the distance were the most fun to make. Essentially, a seagull is made of two small black circles, and then two circles overlapping those that are the same colour of the sky. Unfortunately, this “trick” wouldn’t really work if I wanted the gull on both the cloud and the sky (so on the edge of the cloud). There may be a way of creating a semi-circle or an arch that I don’t know about, so I’ll have to do a little bit of research.
Here is a snippet of my script, showing the beginning of putting down my backgrounds and setting up my three clouds.
I feel like there is a lot of possibility behind this exercise, using primitive shapes generated through ActionScript to create an entire background for a game. This is reminiscent of the other exercises we did in Chris’ class, where even the simplest of shapes can create more complex backgrounds or characters.