Labels

Wednesday, February 9, 2011

Flash Tweening

A neat little beginner animation using tweening and colours. This is a colour tween tutorial, which allows you to tween between colours in a shape, giving a nice looking effect.

So, to start, open a new Flash document. Set the stage to 400 x 300 width and height respectively. set the frame rate to 25 frames per second. Leave the background white.

Now select the rectangle tool and draw a rectangle or sqare on your stage. Once you've done that, double click your shape with the selection tool, right click, and select Convert to Symbol. Make sure movie clip is selected, under behaviour. Name it whatever you want, then press ok. At this point your stage should look similar to this:





Double click the symbol so you go into the timeline for the movie clip. You need to convert this to a symbol, so you will have a symbol within a symbol. Make sure it's a movie clip again, and use the same method as before.

Press Ctrl + E to return to Scene 1. You can also just click Scene 1 at the top left part of the screen. Now, double click the rectangle one last time.

Insert a keyframe at frame 20, by right clicking the frame and selecting Insert Keyframe. This can also be done by pressing F6. On this keyframe, click on your rectangle with the selection tool, just once.

If your properties window is open, which it should be, you will notice the Color drop down box will appear. Within this box, there is the option, Tint. Make sure the slider is on 100%, which is the default. Then click on the small square next to the percentage, and choose whichever colour you wish the rectangle to turn into.






Finally, insert a motion tween by right clicking frame 10 and selecting Create Motion Tween. You can now test your movie by clicking Ctrl + Enter. It will be a fairly basic animation, but you can add more colours and keyframes, but remember to add the motion tween.

Monday, February 7, 2011

Flash Button navigation url

1. Draw a circle and convert it into button symbol ( right click circle-->convert symbol)
2. Give an instance name for the button from properties panel.
3. Double click on button object, you reach the new work area of button object
4. Look at the Timeline below, you see four options Up-Over-Down-Hit.
5. Up is already slected, press F6 in Over (copying the previous frame) and change the object colour from tools.
6. Repeat the above step for Down-Hit if required.
7. Click on Scene1 on top left corner to come back to original workspace.
8. Add a new layer above layer1, name it actions.
9. Press F9 on actions layer to take to the coding area.
10.

mcbutton.addEventListener(MouseEvent.CLICK, mouseoverHandler);
function mouseoverHandler(evnt:MouseEvent):void
{
   
 var targetURL:URLRequest=new URLRequest("http://www.google.com/");
    navigateToURL(targetURL);
}

11. copy the above code to the coding area. Change mcbutton to your button instance name. mouseoverHandler is the name of the function name, which can be changed according to user interest.
Each function is unique, so remeber to provide unique names for all functions used in a program. Also replace the google URL to the one you require.
12. Now check the flash using Ctrl+E.
Mouse UP

Muse OVER   

Photo Masking Effects

Simple Photo Masking

  1. Import (Ctrl + R) any color photo to be masked and its black & white version onto the stage.
  2. Now add a new Layer and move the Color picture into it. Make sure both pictures are perfectly on top of each other.
  3. Add a new Layer above the color picture layer and name it as 'Image Mask'.
  4. Draw any vector, say a rectangle with a height more than the picture height and width say 100. Convert the vector to a graphic symbol (select and press F8).
  5. Right-click the Layer named 'Image Mask' and select Mask from the pop-up menu. This command will make the current 'Image Mask' layer to mask the layer below it (containing the color photo), resulting in the color photo being shown only the area specified by the mask layer.

Save your work and test the Movie (Ctrl + Enter). The movie will look similar to our example above. That's it you have learnt simple photo masking.

Motion Photo Masking

  1. Advanced effects can be created by using Motion Tweened animation as a mask on an object in Flash.
  2. In the above example Create Motion Tween for the rectangle graphic and make the mask slide up and down, the timeline is shown below.

Save your work and test the Movie (Ctrl + Enter). That's it, your cool photo masking advanced effect is ready

Change Image Color in Flash

Learn how to change the color, hue or tint of a bitmap image in Flash

Open a new Flash document and import an image to the stage by clicking on File > Import > Import to Stage.
Choose the Bitmap Image and convert it to a symbol by clicking on Modify > Convert to Symbol..
Now choose the symbol on the stage and click on the Filters tab (next to the Properties tab) and using the plus (+) symbol choose Adjust Color. Here you can drag the Hue pointer to the left and right to get different colors. Notice you still retain the shades of colors (See below). If you want more exact colors or solid colors, you can change the values of Brightness, Contrast and Saturation.



You can tween these images to get a cool image color change animation effect