Dynamic Wallpaper: Part 1: Sunrise, Sunset

With the onset of new SE phones being able to support standby swfs, we see a growing number of standby swfs that are animated in such a way that they change according to the time of day. Wouldn't it be nice to see an evening landscape when it's dark out and a bright meadow during the afternoon? Let's see how this is done!

Above is an swf example of the 'animation' we are aiming for. Obviously, the background should only change as time progresses, but I just wanted to give you an idea of what the end product would be like in summation.

The trickiest part of this project is creating the effects that corresponding to sunrise and sunset; the actionscript is incredibly simple and you have probably seen it already. In this tutorial we are aiming for mountain scape, where the dynamic components are the sun, moon and sky colour.

Therefore, we first need to create 3 graphic symbols that correspond to the sun moon and sky. Since we will need to change the colour of these symbols using the Color properties, we will create these symbols with a white fill. When creating your graphics, try to center them onto the crosshair using the Align tool. That way, it will be easier to select the appropriate colour tween. The sky will just be a white rectangle, the sun a circle, and the moon a will be a yellow crescent. Because I felt the moon is generally a static colour, I decided to keep it one colour. The others may change colours, so I felt it would be easier to keep them white and apply a tint later:


Next, we create a new movieclip that will house the entire 24 hour animation. The easiest way to create this animation is to have the frame length set at 24 frames, but I feel that it would be pretty choppy, so in this tutorial, we are creating a 48 frame animation. The frame numbers will correspond to:

Frame 1 (Midnight)
Frame 20 (10:00 am)
Frame 30 (3 pm)
Frame 48 (11:59pm)

We will need 4 layers:

TOP
1) Foreground (we will use a mountain scape)
Motion Guide (todirect the motion tween of sun and moon)
2) Sun (will contain the sun animation)
3) Moon (will contain the moon animiation)
4) Background (this will contain the sky)
BOTTOM

Here is the overview of the movieclip timeline. You can refer to this later:


We will go through each layer individually.

Foreground:
This will be the top most layer and will be the graphic you would like to display in the forefront of the landscape. This can be anything to your liking such as trees, houses, buildings. For this example, we use a mountain range. Be sure not to cover up the whole stage, or else you will not be able to see the background sky change colours. Don't mind the other layers on the picture below:


Background:
The background will contain the sky graphic symbol undergoing a motion tween (colour change).
First off, we need to determine the appropriate colours of the sky at various times of day while keeping in mind that there are 48 frames to represent 24 hours in the day. Here is what I chose. This is a very plain and vague colour scheme which can be definitely improved upon.

Frame 1 (Midnight): #000000 (will look like #353535)
Frame 20 (10:00 am): #4CA3FA (will look like #71B6FB)
Frame 30 (3 pm): #4CA3FA (will look like #71B6FB)
Frame 48 (11:00pm): #000000 (will look like #353535)

*IMPORTANT: Remember that our original sky symbol was white! This means that the symbol will appear a few shades lighter when you add the tint. The tint colour will not be equivalent to what is shown in the symbol!


To apply these colour changes, first create keyframes on frames 1,20, 30 and 48, and apply a motion tween between them. Then select the keyframe and symbol, then select Color: Tint at the bottom properties menu. I chose Tint over Advanced because I can use the dropper tool to select the appropriate colour instead of guessing the RGB values.



Sun and Moon Layers:
These layers will use the same concepts as the sky colour change tweens except we add one more dimension: a motion tween guide. A motion tween guide lets the user designate a path for the symbol to travel while it is undergoing a motion tween. This is appropriate for the sun and moon animations because sunrise and sunsets have a curved path, not straight!


First create the two layers that house the Sun and Moon symbols. Next, right click the sun layer and select Add Motion Guide... This will create a new pseudo layer which will be the parent for the Sun. Next, move the Moon layer upwards so that it becomes under the Motion Guide as well. We put them in the same guide because for simplicity, they will rise and fall in the same path. (Look at the MovieClip Timeline picture)

After this is complete we have to start creating the path for the moon and sun to travel on. Selecting the Motion Guide layer, choose the line tool and roughly draw out a curve for which you want the sun/moon to follow. Now, remember that during the day, the moon doesn't need to be on stage, and during the night, the sun doesn't need to be on stage.

Recall our scheme:
Frame 1 (Midnight)
Frame 20 (10:00 am)
Frame 30 (3 pm)
Frame 48 (11:59pm)

I decided the sun should rise at around 7/8ish am; this corresponds to around Frame 16. So, select the sun layer: Frame 16 and place the sun on the stage such that the crosshair is centered on one part of the curve you drew in the motion guide. Now, create a keyframe at frame 25; this corresponds to around 12 noon, so now, move the sun so that the cross hair is at the top of the curve. Now, create a keyframe at frame 35, and move the sun so that its the right most side of the curve.


Now, you can select each keyframe (16, 25, 35) and change the colour properties of the sun: it is more orange during sunrise and sunset and more yellow during high noon. Fiddle around with the tint tool to get the best colour. You can see what I did in the above diagram.



Now, we can repeat the same steps for the moon layer. But remember that because the moon rises at night, the motion tween will begin at the ENDS of the timeline. Make sure that the moon is placed in the exact same place at Frame 1 and 48, so it can be continuous.

The Main Timeline:


Now, place your created movie clip in the main timeline on frame 1. Select your movieclip, and give it the variable name: background. Create a keyframe at frame 6.

Right click Frame 1, add the following actionscript:

//this will get the current time and convert it to a number between 1 and 48.
/:theHour=FSCommand2("GetTimeHours") * 2;
/:theMinutes=FSCommand2("GetTimeMinutes");
/:hourFraction = Math.round((/:theMinutes/60) * 2);
tellTarget("background"){
gotoAndStop(/:theHour+/:hourFraction+1);
}

Right click Frame 6, add the following actionscript:

gotoAndPlay(1);

There you have it! Now compile and test it out! The movie will check the time every 6 frames and update the movieclip to reflect this. So in a sense, it seems continuous on the viewer's perspective. You can test this easily by previewing on computer, and changing your system's clock, and see the flash file update the background automatically!

EXTRA TIP: If you want the animation to seem more realistic, you can use motion tween easing for the movement of the sun and moon, so that it slows the most when it reaches the peak of the curve.

Preloaders, the hardest of the simplest tasks in Flash. Simply put, preloaders are custom-built indicators that inform the viewer that content is being loaded into the Flash player. As easy as they sound implement, creating one that works effectively and correctly can often be a quite frustrating task. This tutorial should help explain the ins and outs of preloaders and help you be better equipped to deal with them on your own.
Basic Kinds of Preloaders

There are generally two kinds of preloaders:

1. Preloaders that load the main, current Flash movie and
2. Preloaders that load additional, external content within an already loaded main movie

When loading the main movie, you are using a preloader that exists within the same movie that you are attempting to load. Because of this, these kinds of preloaders should be (in terms of file size) as small as possible since the preloader itself has to load prior to the rest of the movie before it can even start to function.

When loading external content, such as other Flash movies (swf files) or images, preloader size isn't as important. This is because the preloader for that external content does not exist within the content. Instead, it exists within the current Flash movie which should already be completely loaded, preloader and all.

The complexity of a preloader can range anywhere from a simple, static waiting message to a dynamically updated animation that reflects the status of the content loaded. The difficulty of implementing a preloader obviously increases with complexity. Preloader progress bars are the most common form of preloaders which show a progression bar that displays how much content has been loaded visually.

More info >>

There is 6 simple steps to create people face object, here is it.

Step 1, Make the oval


Draw a circle. The circle is the foundation of the head for any veiwpoint. It doesn't need to be a perfect circle like this. A basic ovoid shape will do nicely.

Step 2 Make the chin



Add the chin. The chin will come down from the center point of the outside edge of the circle to about half that length below the bottom edge of the circle. The Jawline should come back towards the center of the bottom edge of the circle as shown here.

Step 3 Make Facial Divisions


Split the face shape in half vertically and horizontally. These axis lines are the ear line (vertical) and the eyeline (horizontal).

Step 4 Make More Divisions



Divide the space between the eyeline and the chin in half. This is the "Bottom of the Ear and Nose" line. Divide the space below the noseline into 3rds. the upper 3rd is the Mouth line.

Notice the ear sits in the verticle axis toward the back of the head and rest between the nose line and the brow line.

Step 5 Make the eye


Divide the space between the front of the head and the vertical earline axis. This is where we place the eye on the eyeline. The outside corner of the eye should hit this new division line and the inside corner should be just inside of the outer edge of the mouth.

Step 6 Make Hair Line


The Hairline is located by drawing a 45 degree angle from the intersection of the horizontal eye line and the vertical ear line.

source

Using keyframe animation, it is too easy to create dull, robotic animation. Linear paths make for lifeless animation. This tutorial will demonstrate a few ways to apply some of the Principles of Animation, into your Flash projects.

Anticipation and Follow Through
Naturally, before an object with awareness moves forward, it anticipates the motion, by moving backwards slightly, first. After finishing the forward action, it doesn't completely come to a stop all of the sudden- it pulls back a little bit. This should be especially apparent if the action doesn't ease out.

Raise you hand to eye level and hold it still. Now deeply relax the bones in your hands, and then casually move it about one foot to the side. Watch closely the anticipation and follow through motions which naturally occur.

To create a gross cartoony effect, every sweeping motion without obvious easing should have a contrasting action at it's beginning and end.

If you play Ball #1 you can see that it is on a linear path. It just goes straight to the end point, at the same speed all the way there.

Although the motions are subtle, Ball #2 pulls back momentarily, before easing ahead. At the end, it bounces a bit. This creates a more natural, and interesting animation.


To apply these effects in Flash, first animate the main path you want an object to follow, and enable Motion Tweening.


Next, add new keyframes (F6) a few frames after the begginning frame, and a few frames before the last frame.

On the second keyframe (frame 3), move the object behind it's original position. On the third keyframe (frame 18), position the object farther than the end destination.

source

Look at you! You just finished your first wonderful and beautiful Flash animation. You put all your love, blood, and guts into it, and it shows. The stylish design is top notch, the dialogue between the characters is witty, and your amateur voice actors (bribed into service with promises of back rubs and marzipan) sound surprisingly well studied.

You're poised to submit this award-tempting piece to Animation Express, however, when you notice that something looks wrong. The star of the animation, the "Walking Across the Living Room" guy, is supposed to look hilarious. And he does ... but for all the wrong reasons. You spent so much time working through the little details — the big stomach flapping around, the little hand scratching that huge butt. But it still doesn't feel quite right, somehow. He doesn't really walk. Rather, he slides, hops, and jerks all over the carpet. Drat! Curses! And so on! Well, the important thing to remember is: Don't panic.

Making a character's walk look realistic is a long-lost, and long-cherished, secret of animation. There's no magic button to push, sadly, but the steps can be broken down into easily digestible bites that are easy to understand and recreate. And that's just what this tutorial is going to show you how to do.

In the pages that follow, I will show you how to build a simple walk cycle using an example character that I've kept fairly basic — with no detail or extreme style to distract you, applying the principles you learn here to your own designs later will be effortless. Once you've mastered this basic walk, then you can give your character some added personality with exaggerated positions, or different speeds, or crazy walks.

I've provided in-depth instructions as well as screen shots to illustrate the progression of steps. For those of you who wish to follow along — and I recommend that you do — you can start by downloading the FLA source file. (NOTE: To download the file on a PC, right-click and choose "Save As ..." and on a Macintosh, hold down the mouse button and choose to save the file on a local drive.)

Now let's get moving.

This tutorial will teach you how to create a simple Ripple effect in Flash MX 2004. The .fla file also included at the end of the tutorial.
Please note:
1. You need to have Flash Player 7.0 installed to view the Flash animation.
2. Flash MX 2004 or higher must be installed in your system to download the .fla file.
STEPS TO FOLLOW

Create a Graphic Symbol.

* Import an image to your work area upon which you would like to create ripple effect.
* Press F8, to convert this image to a symbol.
* Name this Symbol "girl_gr" and choose graphic behavior. Press OK.
* Name this Layer "bg".
* Select girl_gr and choose Alpha 99% from color list box in your property window.

Create a Movie clip.

* Press Ctrl+F8, to create Ripple movie clip.
* Name this symbol "ripple_mc" and choose Movie clip behavior. Press OK.
* Drag girl_gr to your working area from Library (ctrl+L).
* Select girl_gr and choose Alpha 0% from color list box in your property window.
* Insert Keyframe (F6) into the 5th frame.
* Remaining on the 5th frame, Select girl_gr and choose Alpha 99% from color list box in your property window.
* Now select 1st frame, choose Motion Tween from Tween list box in your property window.
* Insert Keyframe into 15th frame and later to 20th frame.
* Remaining on the 20th frame, Select girl_gr and choose Alpha 0% from color list box in your property window.
* Select 15th frame, choose Motion Tween from Tween list box in your property window.
* Insert a new layer above this layer, call it "Layer 2".
* Select frame 1 of Layer 2 and draw a borderless square or rectangle depending on the type of ripple effect you want.
In the above demonstration, I have used rectangle with 15 pix as its height.
* Place this vector wherever you want the ripple to begin. Make sure that the vector belongs only to layer 2.
* Insert Keyframe into the 20th frame of Layer 2.
* Place the vector wherever you want the ripple to end or ebb.
In the above demonstration, I have placed it right at the bottom and reduced the height to 5 pix.
* Select 1st frame, choose Shape Tween from Tween list box in your property window.
* Right click on Layer 2 and select Mask.
* Save (ctrl+S). Make it a habit to save your work after each step you do.

Insert Ripple Movie Clip onto Scene 1

1. Now go back to Scene 1.
2. Insert a new layer above bg layer and call it ripple1.
3. Insert new Keyframe (F6) into the 10th frame of ripple1 layer.
4. With 10th frame of ripple1 layer selected, Drag ripple_mc movie clip onto the working area. Place it appropriate to girl_gr. Make sure that this movie clip is placed exactly where you had placed your square or rectangular vector in ripple_mc Movie clip.
5. Insert frame (F5) into the 30th frame of ripple1 layer. This is just to make sure that the ripple _mc runs only for 20 frame.
6. Insert another new layer above ripple1 layer and call it ripple2
7. Insert Keyframe into the 20th frame of ripple2 layer.
8. With 20th frame of ripple2 layer selected, Drag ripple_mc movie clip onto the working area. Place it appropriate to girl_gr just the way you did in step 4.
9. Insert frame (F5) into the 40th frame of ripple1 layer. This is just to make sure that the ripple _mc runs only for 20 frame.
10. Insert frame (F5) into the 40th frame of bg layer.

Here you go!! Your movie is ready. Press Ctrl+Enter to view your movie. Wasn't it simple. download fla

Source

Watch the flash basic tutorial here..

Wanna control volume with slide bar in flash for make mp3 player ? or any purpose? check this video may help you..

Wanna Make a preloader for your flash movie ? or create one for your website. just in minute, here the steps..

How to make animation with Macromedia Flash 8 ? how to create the good one ? this is the video. watch this, a video tutorial with Flash Professional 8

Macromedia Flash Mapping

Draw a circle (or whatever shape you want), select it and hit F8 to convert
it to a movieclip, name this 'ball'.

Actionscript Breakdown

A break down of how the random motion script will work

1. Generate a random value for the position
   
2. Move the object gradually towards the random position value
   
3. Once it reaches the position generate another random value, repeat the
   process

Note: All the actionscript used in the tutorial will be added on frame one of
the movie clips timeline and not the main timeline (for simplicity's sake
)

1. Generating the Random Position

First we need to generate a Random Position, we can generate a position
pretty easily by using

newpos = function () {
ranx = Math.random ()*250)
rany = Math.random ()*250)
}

this.onEnterFrame = function() {
    newpos ()    
    this._x = ranx;
    this._y = rany;
}

In the function newpos () Math.Random () generates a random decimal number
between 0 and 1, it is then multiplied by 250 which is the width of the movie.
So in effect ranx and rany the random positions will be set to value

The this.onEnterFrame part calls the function newpos()
continuously and sets the position of the movieclip to a random value

2. Gradually moving towards the random position

acceleration = 10
newpos = function () {
 ranx = Math.round((Math.random ()*250));
 rany = Math.round ((Math.random ()*250));
}
newpos();
this.onEnterFrame = function() {
 this._x += ((ranx-this._x)/ acceleration);
 this._y += ((rany-this._y)/ acceleration);
};

newpos() has been moved outside the onEnterFrame event because we
want to move the movieclips gradually not every time the movieclip enters a
frame.

this._y += ((rany-this._y)/ acceleration);

is a shorthand way of
saying

this._y = ((rany-this._y)/ acceleration) + this._y;

The code keeps adding a portion of the difference between the current movie
clip position and the randomly generated position, on enterframe.

This way the the _x and _y values of the movieclip are gradually increased to
match the the values of the randomly generated position.

3. Repeating the process

The process needs keep repeating so we add the following code.

acceleration = 10
newpos = function () {
 ranx = Math.round((Math.random ()*250));
 rany = Math.round ((Math.random ()*250));
}
newpos();
this.onEnterFrame = function() {
 this._x += ((ranx-this._x)/acceleration);
 this._y += ((rany-this._y)/acceleration);
 if (Math.round(this._x) == ranx || Math.round(this._y) == rany) {
  newpos();
 }
};

This way once the _x value of the movieclip equals the random position. The
newpos() function is called again to generate a new set of random x and y values
and the whole process repeats itself over and over again.

Download
Source

Source http://www.tutorio.com

Animation is a way of bringing your pictures to life. All film and video is created through a series of pictures spread over time. A camera takes up to 25 pictures to create one second of movement. That means that for some types of animation you would have to create and film 25 drawings for one second
of movement. Don't despair or give up yet! You can create animation without it being so complicated or time consuming.
The first animation and filmmaking exercises in these notes don't even need a camera - there are other ways of creating the illusion of movement.