Hello again blogosphere. I put together this quick little tutorial on how to create a realistic sunrise with Flash. It’s a neat little effect that’s not all that hard to do. This animation is 100% Flash. There is no imagery involved other than for color sampling.
Create Your Sun Movie
Step by step directions on creating your sun movie.
- The first thing your going to want to do is create 2 layers.
- The first or top layer is where you will put your sun. Use the oval tool to create the sun image.
- Copy that shape and paste it on the layer beneath the sun.
- Hit f8 to convert this layer into a movie called blur.
- Once your movie clip is created you will have access to the filter tab.
- I have my blur set to 55. This creates the haloed effect around the sun.
Create an Omniscient Glow
Once the blur is applied to the movie clip create a fading animation to give the sun an omniscient glow. This animation will run in a loop maintaining the subtle glowing effect.
Create a Gradient Background with Flash
If you’ve never made a gradient in Flash it’s a brilliantly easy thing to do and is what we’re going to use to create our dawn background. To create this gradient I actually sampled colors from “sunrise” pictures from Google Images.
Create Your Sun Rise Animation
- Sun animation: The first layer contains your sun movie. I created a slow rise animation with a classic tween and eased it out 100%. I also have my movie set to 36 frames per second for a cleaner looking animation.
- Night time animation: For this layer I sampled another color from Google images. Turn this layer into a graphic. The animation for this layer is simply fading it out to nothing.
- Gradient animation: This is the last layer that your early morning sky lives on. You do the exact opposite of this layer to the night time layer ↑. Fade it up from 0%.
Now You’re A Digital Deity
And below is the finished product. From beginning to end the whole process took me about 15 minutes. Pretty simple and I think you’d agree pretty elegant. Happy Flashing.
See the Pen YouTube Flash Sunrise with Video Background by Nate Balcom (@nbalcom) on CodePen.
Create a Realistic Sunrise with Flash CS6 Click To Tweet