Follow along, It'll be fun!!

Thursday, June 9, 2011

How to make a sunset animation in Flash



I'm very new at Flash myself, so this is just how I created it. I will explain as much as I can using screen shots of the various layers that I put together in Adobe Illustrator than Imported into Flash.

So here goes...

This first screen shot is of all the layers that I created in Illustrator to be used in my Flash scene.

Photobucket

First, I opened Illustrator and created a new file called sunset. I sized my document to the same width as the stage I set up in Flash 500px. The length is much bigger than my stage in Flash. The length is 1450px.

Below I will show each element individual and give a brief explanation

This part was created in Illustrator.
Layer 1 Atmosphere (bottom layer)
I selected the rectangle shape tool and created a rectangle the same size as the artboard w 500px by 1450 px. I added a linear gradient fill using the colors of a sunset, and played with the placement and opacity until I achieved a soft blended effect of colors.

Photobucket

Layer 2 sun. Still using the rectangle tool added a radial gradient fill with the outer edges transparent so you are left with just a circle of orange and yellow. This could also have been achieved using the eclipse tool.

Photobucket

layer 3 waves For this layer I made the grid visible so that I could place the first pen mark (I used the pen tool) and the top pen point on the opposite end of the wave at the exact same height. I then copied and pasted the wave several times, making a long continuous waves.

Photobucket

Layer 4 moon This was really easy, I used the eclipse tool created a sphere and filled with a white and pale yellow gradient and added an effect of outer glow.

Photobucket

Layer 5 sand using the pen tool make a rectangular shape with a wave top. Fill with a tan to white gradient lowering the opacity of the white which is at the wavy top(stroke white). Use a texture effect of grain.
Photobucket

Now that you have all of the elements in Illustrator, you will import each one into Flash. I imported each one separately by only checking one layer at a time to be imported so that each element imports in its own layer. Also, before importing, make sure to add a new layer in your flash document.

To begin in Flash, open new document set the stage at w 500px by h 400px

Layer 1- Atmosphere
Import Illustrator layer ATMOSPHERE

Photobucket

This series of screen shots shows at the top timeline with the atmosphere positioned with the bottom (blue sky on the stage) at frame 1(to keep the blue sky on the screen for a little over a second-one second being 24 frames) at about frame 35 add a key frame(press F5) this extends the length of the shot for about a second. Than on the timeline draw frames to about 650 (this will be the full lenght of your film about 30 seconds). Now go back to about frame 250, right click and create motion tween.

Layer 2 Sun

Timeline still frame 1-70, motion tween from frame 70-475
Photobucket

Layer 3 Dark water
Created in Flash using th e rectangular shape using a dark blue fill. The element stays fixed from frame 1-655 by press F5
Photobucket
Layer 4 Wave
Positioning left side of wave shape to left side of stage in frame 1 and moving all the way across the stage matching right edge of wave to right edge of stage at frame 655
Photobucket

Layer 5 Light Blue water
Created in Flash starting in frame 1 continuing all the way to the end in frame 655 no movement.

Photobucket

Layer 6 Moon
Starting in frame 1 motion tween to frame 525 and in position to end.
Photobucket

Layer 7 Sand

Starting in frame 1 still all the way to the end in frame 655

Photobucket


And that's the whole thing. Again, it is not a full detail of what I have done but it gives a good idea of how it was done.

I hope this explanation was helpful. by adding more elements and sound this could be a fun scene!

1 comment:

Keri said...

Wow.. that's brilliant. BTW, your art work is stunningly beautiful. You have an incredible talent. Congratulations... Keri

http://alwayscurtsywhenyousneeze.com