Creating 'Shell Animations' for SkinStudio Part 2
Creating AVI animations in Flash tutorial Part 2
Wednesday, May 2, 2007 by Life is a Game | Discussion: WindowBlinds Tutorials
This is a follow-up tutorial from my Creating 'Shell Animations' for SkinStudio Part 1 tutorial. In Part 1 I showed how to create a simple animation in Flash using motion tween effect. If you have missed out the Part 1 then I suggest you to read it first WWW Link before proceeding with Part 2.
At the end of Part 1 we ended up with an animation that looked like this:
In Part 2 we will continue from where we finished in Part 1. So if you don’t have the source file from Part 1 you can get it WWW Link here. Now we are ready to start. Flash offers some additional effects from just motion tween that we used in Part 1. You can animate brightness, tint, alpha and transform.
--------------------------------------
TRANSFORM
First we will go through the transform animation. Remember the ‘Free Transform Tool’ that we used in Part 1. The same tool will be used for animating. Let’s say that we would like the ‘AB’ object to become bigger in the middle of the animation, rotate a bit and transform. In order to apply an effect in a place that you want you will need to create a keyframe.
So first click on the frame 17 in layer ‘animation’ and press ‘F6’ key to insert a keyframe (1) and then select the ‘Free Transform Tool’. Now you can rotate, resize and transform the object.
If you position the mouse cursor on the any of the small squares (2) the cursor will change to two-way arrow and that means you can resize the object by left-clicking and dragging.
When you position it over the edges (3) it will change into two opposing arrows and that means it will skew the object.
Finally if you position it a bit outside of the corners (4) it will turn into a round arrow and in this case you can rotate the object.
Try them all out a bit until you get the desired transformation. Once finished press CTRL+Enter to see the result.
Free transform tool is a quick way to transform your objects. But if you need to precise when transforming your objects you can use the ‘Transform Window’. If it’s not open you can bring it up by pressing the CTR+T and enter the modifications you want to make.
--------------------------------------
BRIGHTNESS, TINT, ALPHA
Now that we have transformed the object we can also apply some animation to its color and transparency. Click on the keyframe that you created earlier (1) in this tutorial in ‘animation’ layer and then with the ‘Selection Tool’ that we used in Part 1 as well click on the object (2) that you transformed and in ‘Properties’ window (3) some options will appear.
In this tutorial we will focus on options in ‘Color’ section. When you click on the drop-down menu you should get the following options. None, Brightness, Tint, Alpha and Advanced. They are pretty self-explanatory.
To change the brightness choose (1) Brightness and set the percentage you wish to use.
In Tint (2) you set both colour and the percentage you wish to apply.
In Alpha (3) again only the percentage of the transparency you wish to achieve.
Finally the advanced option click on the ‘Settings’ (4) button that appears and you will get a new Advanced Effect window (5) where you can set combinations of all Tint and Alpha effects.
Press CTRL+ENTER to preview the animation and if happy with it export it to AVI as described in Part 1. WWW Link
This covers the basics of animating in Flash. You can get the final Flash source file WWW Link here.
Note that you can apply the effects that we used in this tutorial on any keyframe that you create. So for example you could make the object in the first keyframe red in middle green and transformed in the final keyframe transparent to 0% so that it will gradually disappear imitating the delete action.
There is one more part Timeline effects like explode and blur which I will cover in Part 3 of my tutorial.
At the end of Part 1 we ended up with an animation that looked like this:
In Part 2 we will continue from where we finished in Part 1. So if you don’t have the source file from Part 1 you can get it WWW Link here. Now we are ready to start. Flash offers some additional effects from just motion tween that we used in Part 1. You can animate brightness, tint, alpha and transform.
--------------------------------------
TRANSFORM
First we will go through the transform animation. Remember the ‘Free Transform Tool’ that we used in Part 1. The same tool will be used for animating. Let’s say that we would like the ‘AB’ object to become bigger in the middle of the animation, rotate a bit and transform. In order to apply an effect in a place that you want you will need to create a keyframe.
So first click on the frame 17 in layer ‘animation’ and press ‘F6’ key to insert a keyframe (1) and then select the ‘Free Transform Tool’. Now you can rotate, resize and transform the object.
If you position the mouse cursor on the any of the small squares (2) the cursor will change to two-way arrow and that means you can resize the object by left-clicking and dragging.
When you position it over the edges (3) it will change into two opposing arrows and that means it will skew the object.
Finally if you position it a bit outside of the corners (4) it will turn into a round arrow and in this case you can rotate the object.
Try them all out a bit until you get the desired transformation. Once finished press CTRL+Enter to see the result.
Free transform tool is a quick way to transform your objects. But if you need to precise when transforming your objects you can use the ‘Transform Window’. If it’s not open you can bring it up by pressing the CTR+T and enter the modifications you want to make.
--------------------------------------
BRIGHTNESS, TINT, ALPHA
Now that we have transformed the object we can also apply some animation to its color and transparency. Click on the keyframe that you created earlier (1) in this tutorial in ‘animation’ layer and then with the ‘Selection Tool’ that we used in Part 1 as well click on the object (2) that you transformed and in ‘Properties’ window (3) some options will appear.
In this tutorial we will focus on options in ‘Color’ section. When you click on the drop-down menu you should get the following options. None, Brightness, Tint, Alpha and Advanced. They are pretty self-explanatory.
To change the brightness choose (1) Brightness and set the percentage you wish to use.
In Tint (2) you set both colour and the percentage you wish to apply.
In Alpha (3) again only the percentage of the transparency you wish to achieve.
Finally the advanced option click on the ‘Settings’ (4) button that appears and you will get a new Advanced Effect window (5) where you can set combinations of all Tint and Alpha effects.
Press CTRL+ENTER to preview the animation and if happy with it export it to AVI as described in Part 1. WWW Link
This covers the basics of animating in Flash. You can get the final Flash source file WWW Link here.
Note that you can apply the effects that we used in this tutorial on any keyframe that you create. So for example you could make the object in the first keyframe red in middle green and transformed in the final keyframe transparent to 0% so that it will gradually disappear imitating the delete action.
There is one more part Timeline effects like explode and blur which I will cover in Part 3 of my tutorial.
Please login to comment and/or vote for this skin.
Welcome Guest! Please take the time to register with us.
There are many great features available to you once you register, including:
- Richer content, access to many features that are disabled for guests like commenting on the forums and downloading skins.
- Access to a great community, with a massive database of many, many areas of interest.
- Access to contests & subscription offers like exclusive emails.
- It's simple, and FREE!
Reply #1 Wednesday, May 2, 2007 2:52 AM