getW3Help.com - Flash, Flex and AIR

Creating Animation inside a Text in Flash

Posted on May 28, 2008 by Makubex, 0 comments

In this tutorial, you will learn how to create a animation inside a text. We are going to make use of Masking concept to apply animation inside a text.
Flash 8

Output:

Download Source File

Step 01: Create a new flash document.

Step 02: In Tools panel, select Text tool or press T to select it. Now a write a text on the board.

Step 03: Now select Selection Tool from the Tools Panel or press V to select it.

Step 04: Right click on the text, and select convert to symbol.

Step 05: Name the symbol as "name" and select type as Movie clip.

Step 06: Now Right click on the Layer 1 at top and select Mask.

After you have selected Mask, the image on the left of Layer 1 will change as,

Step 07: Now Right click on Layer 1 and select New Layer.
Click and drag the Layer 2 below the Layer 1. The icon on left of Layer 2 also gets changed.

Step 08: In Layer 2 you are going create the animation, this animation will be seen inside the text. To make it simple let us create a vertical line moving from left to right.
To learn how to create a simple animation like this please check out previous tutorial,

Create Simple Animation in Flash

Step 09: After you have done creating animation in Layer 2, extend the Layer 1 frames so that Layer 1 and Layer 2 has same number of frames. Click on the first frame of Layer 1 and press F5 to extend the frame.

Step 10: Now left click on the First frame of Layer 1, and copy the movie clip we have created before.

Step 11: Now right click on Layer 2 and select Insert layer.

Step 12: Click and drag the Layer 3 below the Layer 2.

Step 13: Now right click on the board, and select Past in Place.

Step 14: Press Ctrl + Enter to test the movie.

- End of Tutorial.

Try this tutorial and post your movie in the comments.

Labels: ActionScript 2, Flash, Flash Animation, Flash Basics, Masking, Tutorials

Continue Reading!

Create Dynamic FLV Player in Flash

Posted on May 27, 2008 by Makubex, 14 comments

In this tutorial, you will learn how to create dynamic FLV player in Flash. The FLV file URL will be passed to the player in the embed code with the help of FlahVars.
Flash 8

Output:

Download Source File

Step 01: Create a new flash document and save it as "flvplayer.fla"

Step 02: Click Window and select Components (or) press Ctrl + F7 to open the Components panel.

Step 03: In the Components panel, locate FLV Playback. Click and drag it to the board.

Step 04: Resize the FLV Playback component to your desired dimension.

Step 05: Left click the FLV Playback component, open properties panel (Ctrl + F3).
Give "flv" as the instance name to the component.

Step 06: Now click the frame at the top and open the action script panel, press F9 to open it.

Ste 07: Copy and Paste this action script code in that frame:



flv.contentPath = flvurl;

Step 08: Your FLV player is ready, Now we need to make use of FlashVars to pass the flv file URL. FlashVars are used in the PARAM tag in the embed code.

Step 09: Create a HTML page in the same location of the flvplayer.fla and save the HTML page as flvplayer.html

Copy and paste this code in that HTML page:



< embed src="flvplayer.swf" flashvars="flvurl=movie.flv" type="application/x-shockwave-flash" height="290" width="300">< /embed>

Step 10: In the above code, change the value of the flvurl variable to the the location where your FLV file is located.

- End of Tutorial.

Labels: ActionScript 2, Flash, Flash Intermediate, FlashVars, Tutorials

Continue Reading!

Cartoon Cloud Animation in Flash

Posted on May 24, 2008 by Makubex, 0 comments

In this tutorial, I will show you how to create a cartoon style cloud and animate it across the screen.We are going to make use of Blur filter in Flash 8.
Flash Version: 8

Output:

Download Source File

Step 1: Create a new flash document.

Step 2: Select the background color in light blue shades. Press Ctrl + F3 to open properties panel.

Step 3: Now lets get started to draw the cloud. We are going to draw the cloud using simple technique. I usually use this method. Draw three circles (without Stroke color) side by side, there by each cloud touches its partner.

Select Oval tool from tools panel (or) press O to select it.
Select stroke color as no color.

Step 4: Now select the selection tool from Tools panel (or) press V to select it.

Step 5: Right click on the cloud and select as Convert to Symbol.

Step 6: Name the cloud as "cloud_mov", select type as Movie clip.

Step 7: Left click on the cloud movie clip, open the properties panel (Ctrl + F3).
Click on filters tab. Click the + symbol to open avialable filters. Select Blur option.

Play with Blur X and Blur Y value, to get your desired effect. I have select 10 for both X and Y Blur values.

Step 8: Now your cloud is ready, you need animate it using Motion Tween technique.
To know how to apply Motion Tween, please refer to my last tutorial:

Create Simple Animation in Flash

- End of Tutorial.

Labels: Flash, Flash Animation, Flash Basics, Tutorials

Continue Reading!

3D Hammer using Illustrator

Posted on May 23, 2008 by Makubex, 4 comments

In this tutorial I will show you how to create a 3D hammer using Illustrator.
Let us get started!!

Output:

Download Source File

Step 1: Create a new document in Illustrator.

Step2: In the tools panel select Rounded Rectangle Tool.

Step 3: Now draw a rounded rectangle on the screen.

Step 4: Select Fill color as white and remove the Stroke color. You can remove the Stroke color by selecting Default Transparency on the Appearance Panel. Now change the Stroke weight to zero.

Step 5: Now left click the rounded rectangle. Click Effects on menu bar and select 3D and select Extrude & Bevel.

Step 6: Select Preview option.
Now change values in the text box,
Rotate on X-axis: 58
Rotate on Y-axis: -76
Rotate on Z-axis: 43

Set Extrude Depth as 346 pt
In Bevel select Complex 2
Select Height as 12 pt

Step 7: Now the rounded rectangle will appear like this,

Step 8: Similarly draw two circles, one circle slightly bigger than the other.
Select the bigger give it dark shade color and remove the stroke color.
Left click on the bigger circle, select Effects -> 3D -> Extrude & Bevel.

Set X-axis rotation: -171
Set Y-axis rotation: -68
Set Z-axis rotation: 1

Extrude Depth: 58 pt
Bevel: None

Step 9: Now select the smaller circle, give it a light color shade and remove the Stroke color.
Left click on the smaller circle, select Effects -> 3D -> Extrude & Bevel.

Set X-axis rotation: -171
Set Y-axis rotation: -68
Set Z-axis rotation: 1

Extrude Depth: 462 pt
Bevel: None

Now the two circles will look like this,

Step 10: Finally align all the pieces to make 3D hammer.

Labels: Illustrator, Illustrator 3D, Tutorials

Continue Reading!

Create Simple Animation in Flash

Posted on by Makubex, 1 comments

In this tutorial we will discuss about, How to create a simple animation in flash. We will make use of motion tween technique to create the animation. We will try to move a circle from left to right.

Output:

Download Source File

Step 1: Create a new Flash document.

Step 2: Now select the Oval tool from the tools panel (or) press O to select it.

Step 3: We don't want the border of the circle, so click on the stroke color option on the tools panel and select no color option.

Step 4: Select the Fill color for the circle, In here I have selected blue..

Step 5: Draw a circle of minimum size on the left side of the flash board.

Step 6: Now select the selection tool from the tools panel (or) press V to select it.

Step 7: Right click on the circle, and select convert to symbol option.

Step 8: Give any name to the circle, In this case I have given "circle_mov".
Select Movie clip in Type option.

Step 9: Now get ready to animate the circle.
Rihgt click on the circle movie clip and select copy.

Step 10: On the time frames at the top, right click on the 30th frame and select convert to blank key frame.

Step 11: Now Right click on the flash board and select paste in place option.

Step 12: Now click and drag the circle, move it to the end of the right side.

Step 13: Click the first frame on the time line frames.

Step 14: Keep pressing Shift key and click the 30th frame. So that all the 30 frames get selected.

Step 15: Finally Right click on the selected frames and select Create Motion Tween.

Step 16: Thats it your done!!! Now press Ctrl + Enter to run the output.

Labels: Flash, Flash Animation, Flash Basics, Tutorials

Continue Reading!

Creating Simple Button in Flash

Posted on May 22, 2008 by Makubex, 15 comments

In this tutorial we will discuss about, How to create a simple button in flash. This tutorial covers about rollover effects and opens a web page when the user clicks on the button.

Output:

Download Source file

Step 1: Create a new Flash document. (File -> New -> Flash Document)

Step 2: Let us change the dimension of the flash document.

Go to Windows -> Properties -> Properties (or) Press Ctrl + F3
Click on the size button to change the dimension.

Let us change width to 100px and height to 100px.

Step 3: Now the board is ready, lets get started to design a simple flash button.

Select the Oval tool, which is available on the Tools panel on the left side (or) simple press O to select the oval tool.

Select any color for the circle you want, Stroke color is for the outline of the circle and Fill color is for the color inside the circle. After you have selected the colors for the circle.

Draw a circle on the board.

Step 4: Now select the Selection Tool which is available in Tools panel (or) press V to select it.

Now right click on the circle drawn on the board, select convert to symbol option.

Step 5: Give a name to the button, In this case I have given "button" as the name.
Select Button in the Type option.

Now we have created a button, now he have to add rollover effect to the button.
You can check quickly by pressing Ctrl + Enter, the output screen loads up. Rollover the mouse on the circle you can see the click able hand.

Let us add Rollover effect to the button.

Step 6: Now go to the flash board. Double click on the button we have created.
Now you are inside the button. On the frames at the top you can see UP, Over, Down, Hit frames.

Step 7: In the UP frame we already have the circle button. Press Ctrl + A and press Ctrl + C to copy the circle

Step 8: Over frame shows up when the user rolls mouse over the button.
Now right click on the Over frame and select Convert to Blank Keyframes.
Right click on the flash board and select Paste in place option, to paste the circle.
Click the Fill part of the circle and change the color.

Step 9: Down frame shows up when the user presses the mouse the button.
Now again right click on the flash board and select paste in place option, to paste the circle. Do not concentrate too much on this frame, user can not visually see this frame because mouse click happens in a eye blink.

Step 10: Hit frame refers to which part of your button can be clicked.
Again right click on the flash board and select paste in place option, to paste the circle.

At top of the Time line, click Scene 1 to move to out of the button.

You are almost done making a simple button. Now press Ctrl + F to test the button.

Now we have to add actionscript code to the button, so that when the user clicks on the button we can go that particular web page.

Step 11: Now left click on the flash button, press F9 to open the actionscript window.

Copy the code below and paste it on the actionscript window.



on (release) {
getURL('http://www.getw3help.com', '_blank');
}

Change the value of the URL, to your desired URL. _blank is used to open the URL in a new window or you can use _self to open the URL in the same window.

Labels: ActionScript 2, Flash, Flash Basics, Flash Buttons, Tutorials

Continue Reading!