Create a Realistic Sunrise with Flash CS6

In this post

How to quickly and easily create a realistic sun rise with Flash CS6. Create a sunrise animation with Flash in 15 minutes.


Tags:,

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

sun-movie

Step by step directions on creating your sun movie.

  1. The first thing your going to want to do is create 2 layers.
  2. The first or top layer is where you will put your sun. Use the oval tool to create the sun image.
  3. Copy that shape and paste it on the layer beneath the sun.
  4. Hit f8 to convert this layer into a movie called blur.
  5. Once your movie clip is created you will have access to the filter tab.
  6. I have my blur set to 55. This creates the haloed effect around the sun.

Create an Omniscient Glow

innintial-sun

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.

sun-blur

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.

make-gradient

Create Your Sun Rise Animation

fullsunrise
Now that you have all the pieces you can play God and make the sun rise. To do this I first created 3 layers.

  1. 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.
  2. 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.
  3. 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.

Comments

comments

Create a Realistic Sunrise with Flash CS6 Click To Tweet
Tags:,

div>