How to Make a Multifaceted Flash Menu with Dynamic Contents, Tip and Information (with screenshots)

This will be the most interactive and remarkable lesson on flash menu, that you have ever learnt.

We are going to make a flash menu that will show tips, dynamic interface and user friendly.

Click here to view what we are going to make.


Setting Up Your Document

Create a new flash document and give it the following properties.

Width-500px

Height-200px

Background colour- #0066CC

Fps-12

Then click ok.

Now insert three more extra layers on top of the layer 1. and rename them from top to button as follows “actions” “text” “tips” “buttons”.

Click on the buttons layer.

Double click on the rectangle tool (R)
and a popup window will appear showing corner radius – type in 10 and click ok.

On the property bar set the stroke strokeless and the fill colour -#00CCFF.

Draw a simple rectangle on the stage but don’t worry about the size we will change it.

After you have drawn you rectangle select it and give it the following properties.

Width-102.3

Height-15.2

x—51.1

y- -7.5.

Double click on your rectangle and press F8 to convert it to a symbol.

Set the registration point center, choose the Button option and click ok.

Now you have finish making your button.

Double click on your newly created button and you will see this on the timeline panel.

(Note: don’t worry about the over, yours is not going to be the same as shown in the screenshot).

Click on the over frame and press F6 to insert a new keyframe on that layer.

Now use the zoom tool to zoom into your button on the over frame. Click on your rectangle and convert it to a movie clip, give it any name and click ok.

Select your movie clip and on the property bar > colour > choose Alpha and type in 30% inside the alpha textbox.

Now it will look similar to this..

(Be sure you are saving your work to avoid interruption)

After you have finish setting the movie clip’s alpha still on the over layer. Double click on the rectangle tool and set the corner radius to 0. click ok to return to your stage.

Take the rectangle tool and draw a simple rectangle like this

After you have finish drawing you rectangle click on the Selection Tool (V) and drag the nodes of your rectangle to turn into something like this.

Finally this

Now double click on your rectangle that you have transform into a sliced triangle and convert it to a movie clip symbol.

Click and drag it to this position.

Remember that we are still on the over frame. This all this we are doing is what is going to take place when someone takes the mouse over the menu.

Double click on your sliced rectangle that we transformed. Then inside your sliced rectangle movie clip, click on Frame 3 and press F6 to insert a keyframe in frame in frame 3.

Now select your sliced rectangle and on the property bar change the colour to red. #FF0000

Now click on Scene 1 to return to the main Scene.

Click on your menu and make to more duplicates like shown in the Screen Shot above. Button change their instances names beginning from the first

“home_btn” “tutorials_btn” and “support_btn”

Make sure you change the other two “Tutorials” and “Support”

Now click on the text layer and take the text tool (A) then on the property bar select Static text then click on the stage and type “Home” take the selection tool and click once on your text and give it the following properties.

Then drag it and place it in this position.

Click on the “Home” text and duplicate two more but changing the “home” to “tutorials” and then “support”. Finally this is what we should have.

Good we are now going to proceed to making the tips holder.

Making the Tips

Click on the tips layer and draw a small rectangle with the following properties.

Width- 189.6

Height- 17.6

x- -94.0

y-54.4

Background colour- #FFFF00 (or you can use the colour mixer to mix your colour) Make it strokeless.

7

Double click on your rectangle and Press F8 to convert it to a movie clip symbol and name it Mover. Then click ok.

Now double click on your movie clip (this takes you inside the tips movie clip) rename the current layer to “MYTIPS” then select your movie clip again and convert it to a movie clip. Double click on it, then right click on frame 50 and Choose Insert Keyframe. Click on frame 50 and on the property bar choose motion.

Then go back to your movie clip, click it and on the property bar colour choose > colour, select alpha then type in 30% on the alpha textbox.

Right click any where on frame 2 to Frame 49 and Choose Create Motion Tween.

Click on frame 50 of you tips and press F9 to bring up the actions panel. Type in

Stop();

This is how your frame will look like.

Click on the mover to go back to the MyTIPS layer. Insert three more layers after the first frame of the mover Movie Clip.

See this image

Now return to the first frame and delete what you have on the stage.

Click on the second layer and on the property bar type in the frame label
”home”. Click on the 3rd frame and on the property bar type in “tutorials” on the frame label. Finally click on the 4th frame and type in “support” on the frame labels.

We are done with the necessary procedure its time to name our tips.

Naming the Tips

Still on the Mover Movie Clip, Click on Frame 2 of the Mover Movie Clip and take the text and make a static text with like this

Welcome to Otodeluxe World

That was for the Frame Label – Home

Click on the 3rd Frame and take the static text and type in

You can find in stock exotic flash tutorials

That was for the Frame Label – Tutorials

Finally click on the 4th Frame and take the static text and type in

That was for the Frame Label – Support.

Go back to frame one of the mover movie clip and press F9 to bring up the actions panel of Frame 1 of the mover movie clips.

Type in

stop();

Congratulations we are done with the Tips what is remaining now is coding.

Go back to the Main stage, that’s scene 1 and click on the actions layer then press F9 to bring up the actions panel.

Finally type in these piece of codes inside the actions panel.

//Actions

import mx.transitions.Tween;

import mx.transitions.easing.*;

var cities:Array = ["home", "tutorials", "support"]

function mover (targetX, targetY){

currentX = tips_mc._x;

currentY = tips_mc._y;

var xTween:Tween = new Tween(tips_mc, "_x", Strong.easeOut, currentX, targetX, .5, true);

var yTween:Tween = new Tween(tips_mc, "_y", Back.easeOut, currentY, targetY, 1.5, true);

}

for (var i = 0; i

var my_btn = this[cities[i]+"_btn"];

my_btn.myCity = cities[i];

my_btn.onRollOver = function() {

mover( this._x, this._y);

tips_mc.gotoAndStop(this.myCity);

}

}

Now press Ctrl Enter to test your movie.

Note: You can add gotoAndStop functions or other navigation to your menus.

Thank you for following this tutorial. If in any case you might have encountered any error please feel free to post your comments and questions. Thank you!!!

You can download the Full Fla File here.

Read More!

How to Make A Movie Clip Move in A Specific Path

Step 1-INTRODUCTION
This can help greatly with ease animating. Without wasting no time lets assume you have your movie on your stage. If you don’t know how to convert an object into a movie clip. After you might have finish drawing your character select it and press f8. then select the movie clip radio button and press OK.

Step 2
Right click on layer 1 and select Add Motion Guide. This adds a layer where you will draw your invisible guide layer.

Click on the guide layer and draw the line you want your movie clip to move.

Step 3
Click on frame 10 of the guideline layer and press f6.

Step 4
Repeat the same step for layer 1. but for layer one, after press f6 to insert a keyframe click on frame 10 again and on the property inspector bar select motion. Then drag your movie clip and drop at the end of the path your want it to move.

Then click on frame 10 of layer one and on the property inspector bar.

Tick the following
-Orient to path
-Sync
-Snap

Step 5
Now return to frame 1 of layer one and drag the movie clip to the starting point of the motion guide.

Step 6
Click anywhere from frame 2 to frame 9 and select. Create Motion Tween.

Test Your Movie.

Read More!

How to add Mask To A Movie Clip Using Action Script

Setup your document>Create a new flash document.

Give your page a blue background colour.
Add three two layer to the current layer. and rename it as follows:
-Actions
-Mask
-Background

Click on the background layer and import any image unto the stage and make sure you center it to the stage. Click it and cover it to a movie clip with the name “background_mc” and registration point center. Click ok.

Click on the background_mc and give the instance name background_mc.

Lock the background layer. Then click on the Mask layer and draw something that will be the mask of the background. For example draw a wide rectangle with the following properties

Width-353.9
Height-385.9

Click on your rectangle or whatsoever and convert it to a movie clip. Give the name rectangle_mc. Registration point center click ok.

Give your rectangle the instance name of “rectangle_mc”.
Now click on the actions layer and press F9 to open the actions panel.

Type in these

background_mc.setMask(rectangle_mc);
rectangle_mc.onPress = function() {
startDrag(this);
}
rectangle_mc.onRelease = function() {
stopDrag();}


Note: If you only want to mask without drag and drop use this code:
background_mc.setMask(rectangle_mc);


Now test your movie.

Read More!

How to make a kind of Matrix Effect in Flash

This tutorial will show you how to make a kind of matrix films effects. with the use of action script.

Step 1

Setup your documents as follows

Page background-Black

Width-300

Height-289

Insert to layers namely “actions” and “matrix effects”

Step 3

Click on the matrix effects layer. Take the text tool and make a static text like this

o

t

o

d

e

l

i

x

e

Select it and Give it the following properties

Width-17.4

Height-238.3

X-132.8

y-28.4

Colour-#99FF00

Click it and convert it to a movie clip with the name “matrix” and registration point center. Click ok

Step 2

Click on your newly created movie clip and give the instance name “matrix”. Click on your movie clip again and press f9 to open the action script windows.

Now type in these in the action script windows.

//the movie width and movie height is the size of your documents

onClipEvent (load) {

movieWidth = 300;

movieHeight = 281;

//the *100 is the speed you can customize it

i = 1+Math.random()*100;

k = -Math.PI+Math.random()*Math.PI;

this._xscale = this._yscale=50+Math.random()*100;

this._alpha = 75+Math.random()*100;

this._x = -10+Math.random()*movieWidth;

this._y = -10+Math.random()*movieHeight;

}

onClipEvent (enterFrame) {

rad += (k/180)*Math.PI;

this._x -= Math.cos(rad);

this._y += i;

if (this._y>=movieHeight) {

this._y = -5;

}

if ((this._x>=movieWidth) (this._x<=0)) {

this._x = -10+Math.random()*movieWidth;

this._y = -5;

}

}

Step 3

Click on the actions layer and type in these

for (k=0; k<100;>

duplicateMovieClip(this.matrix, "matrix"+k, k);

}

Wonderful that brings us to the end of this tutorial.

Now press Ctrl Enter and Test your work.

You can also add lines and more interactivity to your matrix animation

Below is our final result.

Read More!

How to Make a Complete Rain Effect in Flash

By Otobong Ini Archibong

This flash tutorial will show you how to make a complete real rain effect in flash.

First of all you have to setup your documents has follows:

Document Width-550

Document Heigth-400

Insert three more layers and rename the layers starting from the first “actions”, “rain” “background”.

Step 1

Click on the background layer and import a rain background. Like the one we have in windows xp sample pictures. You can import them by going to File>Import>Import to Stage. Or by just pressing Ctrl+R.

Then browse and locate the picture in the sample pictures name (Blue Hills).

Step 2

Import it to the stage and give it the following properties.

Width-550

Height-400

x-0

y-0

Lock that layer

Step3

Click on the rain layer and take the Pencil Tool (Y) and draw a slide line of something of this nature.

/

Click it and give it the following properties.

Line hairline-0.5

COlour-white

Width-9.2

Height-20.1

X-20.1

y-8.1

Step4

Click on your line and convert it to a movie clip and give it the name (rain) with registration point center. Click ok

Make sure your movie clip is still selected goto the movie clip property and give the instance name “rain” Still on the property bar select the colour drop down menu and choose alpha type in the alpha box 50%.

Step5

Click on the movie clip and press F9 to open the movie’s action script window. Now type in these

//movieWidth and Movieheight are the width and height of your document

onClipEvent (load) {

movieWidth = 550;

movieHeight = 400;

//the 80 here represents the speed you can increase it if you like

i = 1+Math.random()*80;

k = -Math.PI+Math.random()*Math.PI;

this._xscale = this._yscale=50+Math.random()*100;

this._alpha = 75+Math.random()*100;

this._x = -10+Math.random()*movieWidth;

this._y = -10+Math.random()*movieHeight;

}

onClipEvent (enterFrame) {

rad += (k/180)*Math.PI;

this._x -= Math.cos(rad);

this._y += i;

if (this._y>=movieHeight) {

this._y = -5;

}

if ((this._x>=movieWidth) (this._x<=0)) {

this._x = -10+Math.random()*movieWidth;

this._y = -5;

}

}

if you test your movie now you will see it moving but it doesn’t cover the page.

Step 6-Final Step-Duplicating the rain effect with actionscript

Click on the actions layer and type in these

//the 100 here is the number you want it to duplicate you can increase or decrease it if you like.

for (k=0; k<100;>

duplicateMovieClip(this.rain, "rain"+k, k);

}

Now test your work.

Here in the final output.

http://otodeluxe.fileave.com/deluxe%20rain%20effects.swf" quality="high" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="middle" height="400" width="400">

Read More!

How to Make a Simple Chat Robot that Give the right response to your questions.

This tutorial is very useful in terms of creating interactivity in flash games, websites and even your flash applications.

In this tutorial you will learn how to create a chat robot that will give you the right response to your questions.

Step 1
First create a new flash document and give it the following properties.

Background colour-#CC0033
Height-250
Width-400

Rename the current layer to interface.

Save your work as mychatbot.fla
Step 2
Double click on the rectangle tool (R) and type in the corner radius 10 and click ok. Disable the stroke colour and draw a wide rectangle don’t worry about the size we will change it later.

Step 3
Click only once on your rectangle and give it the following properties.

Width-388.3
Height-61.8
x-7.5
y-2.0
Fill Colour-#000000

Step 4
Take the text tool and from make a static text with the following label “Otodeluxe Chat Bot © 2010” you can change it to whatever you like.

Make it to center on the rectangle we just drew on Step 3.

Step 5
Draw another rectangle just below the first rectangle you drew and give it the following properties.

Background colour-#FFFF00
Stroke Colour-Black.

Width-384.9
Height-178.8

x-8.4
y-63.8
.
Step 6
Click once again on the text tool (A) and type a static text just below the rectangle your drew in step 3 with the label “Type your question below”

Colour-#000000
Width-193.9
Height-26.4
x-92.0
y-67.3

Step 7
Take the text tool again but this time choose input text from the property bar. Draw a wide text area. Click on it and give it the following properties.

Instance Name=input_txt
Colour-Black

And select the show border around text. And give the variable “alert”

Step 8
Now we will create a button. If you don’t know how to create your own button then this part will help you.

Click on the rectangle tool and make a small rectangle and give the properties has follows.

Width-132.1
Height-33.5
x-136.3
y-142.3

Fill colour-#999999
Stroke colour-black.

Now double click on the drawing you’ve just draw and from Modify>Convert to Symbol. Then on the dialog box that appears choose button then set the registration point center and press ok. If you’ve notice in the property inspector bar the shape have turn to button. Now give the instance name. askbot_btn.

Step 9
Double click on your button and you will see these three stages on your timeline
UP OVER DOWN HIT
Click on the up stage.
And take the text tool and make a static text box with the label “Ask”. Click on the OVER Stage and press F6. Then click your rectangle and change the fill colour to #FFFF00.

Now go back to your main stage (Scene 1)

Step 10
Click on the Rectangle tool (R) and make a small strokeless rectangle with the following properties.

Width-82.9
Height-20.6
x-30.4
y-202.2
Flil Colour#CC3333

The take the text tool and make a static text on top of the rectangle you’ve just drawn with the label “Bot Says:” be sure you place it on top of the rectangle you just drew earlier.

Step 11
Make a wide dynamic text and give it the following properties.
Width-273.0
Height-26.4
x-117.2
y-201.9
Fill Colour-Black

The give it the instance name of “answer_txt” without the quote.

Step 11 – Fill Step Coding
Make a new layer and rename it to bot actions layer and copy in these piece of code.

alert="please use lowercase only"

askbot _btn.onRelease = function() {
if (input_txt.text == "how are you") {
answer_txt.text = "Am fine and you";


} else if (input_txt.text == "bye") {
answer_txt.text = "bye bye";

} else if (input_txt.text == "what do you do") {
answer_txt.text = "am a computer geek, hahah";


} else if (input_txt.text == "you are funny") {
answer_txt.text = "is that so";

} else if (input_txt.text == "say what") {
answer_txt.text = "call me +2347064538704";

} else if (input_txt.text == "am cool") {
answer_txt.text = "that's good";

} else if (input_txt.text == "are you male or female") {
answer_txt.text = "am male";

} else if (input_txt.text == "how old are you") {
answer_txt.text = "am 15";

} else if (input_txt.text == "are you a robot") {
answer_txt.text = "no am a human being?";


} else if (input_txt.text == "what is your fathers name") {
answer_txt.text = "why are you asking?";

} else if (input_txt.text == "what is your mothers name") {
answer_txt.text = "why are you asking?";

} else if (input_txt.text == "are you schooling") {
answer_txt.text = "yes, what about you?";

} else if (input_txt.text == "kmt") {
answer_txt.text = "meaning";

} else if (input_txt.text == "am fine") {
answer_txt.text = "that's good";

} else if (input_txt.text == "hmm") {
answer_txt.text = "80% of the world spell hmm with two mm";

} else if (input_txt.text == "lol") {
answer_txt.text = "its not a laughing matter";

} else if (input_txt.text == "how are you") {
answer_txt.text = "Am fine and you";

} else if (input_txt.text == "hello") {
answer_txt.text = "hi";

} else if (input_txt.text == "am hungry") {
answer_txt.text = "can't you cook";

} else if (input_txt.text == "merry christmas") {
answer_txt.text = "same to you my dear";

} else if (input_txt.text == "merry easter") {
answer_txt.text = "send to you my dear";

} else if (input_txt.text == "how far") {
answer_txt.text = "am 1 million miles ahead of you";

} else if (input_txt.text == "why") {
answer_txt.text = "Y has a long leg";

} else if (input_txt.text == "say what") {
answer_txt.text = "Don't understand you";

} else if (input_txt.text == "hi") {
answer_txt.text = "Hello";

} else if (input_txt.text == "thanks") {
answer_txt.text = "Same thing here";

} else if (input_txt.text == "thanks") {
answer_txt.text = "Same thing here";

} else if (input_txt.text == "am bored") {
answer_txt.text = "sorry";

} else if (input_txt.text == "i need money") {
answer_txt.text = "there's no food for a lazy man";

} else if (input_txt.text == "i need money") {
answer_txt.text = "there's no food for a lazy man";

} else if (input_txt.text == "I love you") {
answer_txt.text = "Me too";

} else if (input_txt.text == "hey") {
answer_txt.text = "whaz up buddy";

} else if (input_txt.text == "how dare you") {
answer_txt.text = "who is your dare";

} else if (input_txt.text == "how you dey") {
answer_txt.text = "no shakin";

} else if (input_txt.text == "where are you") {
answer_txt.text = "right here";

} else if (input_txt.text == "fuck you") {
answer_txt.text = "fuck you too";

} else if (input_txt.text == "are you serious") {
answer_txt.text = "yes, i am";

} else if (input_txt.text == "say what") {
answer_txt.text = "nothing";

} else if (input_txt.text == "god is good") {
answer_txt.text = "all the time";

} else if (input_txt.text == "don't make me laugh") {
answer_txt.text = "hahahaha";

} else if (input_txt.text == "who are you") {
answer_txt.text = "you mean you don't know me";

} else if (input_txt.text == "is it true") {
answer_txt.text = "yes";

} else {
answer_txt.text = "don’t understand what you are saying";
}
}


Hope you followed the tutorial.
}else if{ (input_txt.text==”any question”){ answer_txt.text=”answerhere”;
the “any question” is where your type you’re the question that the user will ask and then the “answer_txt.text=”answer here”. Answer here is were your answer will display for the user. You can keep repeating those lines and replacing it with question and your answers.

Then the last else here }else{ answer_txt.text=”don’t understand what you are saying”;
}
}

is where you will add the code that when the user types in anything contrary to what your answer was it will display the message. In my own you can see i’ve used “don’t understand what you are saying”


Here is the final result of our chatbot.

Read More!

How to Navigate Between Frames

By Otobong

The purpose of this tutorial is to throw more light on the issue of making navigation between scenes and frames.

Our spotlight will be only on how to navigate between frames and scenes.

1. NAVIGATING BETWEEN FRAMES

Create a fresh blank flash document.

Take the text tool (A) a make a static text on the stage.

After typing this take the rectangle tool (R) and draw a wide black rectangle like shown below.

Then take the text tool again but this time make the colour white -#FFFFFF.

The type “take me to frame 2” on top of the rectangle you just drew.

Select you rectangle and the text.

Then hit F8 or from modify choose convert to symbol to convert it to a symbol.

This will appear.

Choose button as the type and registration point center.

Then click ok.

Now you have made a button.

What is left for us now is to add action script to our button to make it work. Click once on your button and press f9 to open the action script panel.

Then type in this.

Now close the action script panel by pressing f9 again.

Then insert a new blank frame on frame 2.

Right click on frame 2 and select insert blank keyframe.

Take the text tool and make another static text in frame 2.

“This is frame 2”.

Now if you test your work it will be playing simultaneously instead of stopping at frame one.

So let’s add a “stop” action to frame 1 so that it will stop at frame 1 until the button is press before it moves to frame 2.

Right click on frame 1 and choose actions.

Type in this.

Now let’s add another button in frame 2 so that when you click on it, it will take you back to frame 1.

Click on frame 2 and repeat the same step you did when creating a button symbol on frame 1.

But change the text to this

And the action script to this.

Test your movie.

That’s all for the frame navigation let’s move on, to scene navigation.

Read More!