This tutorial is exactly the same as the adding numbers tutorial.
Only replace the ‘+’ symbol with a ‘*‘symbol. (shift-8)
And the actionscript code on the ‘=’ symbol button would be:
on (release) {
_root.answer = Number(value1)*Number(value2);
}
Instead of
on (release) {
_root.answer = Number(value1)+Number(value2);
}
Take the adding numbers tutorial here
Learn how to use Adobe Flash with all the free tutorials. Game Making, Animating, Cartoon Design, Web Design and much more...
Dividing numbers
This tutorial is exactly the same as the adding numbers tutorial.
Only replace the ‘+’ symbol with a ‘/‘symbol.
And the actionscript code on the ‘=’ symbol button would be:
on (release) {
_root.answer = Number(value1)/Number(value2);
}
Instead of
on (release) {
_root.answer = Number(value1)+Number(value2);
}
Take the adding numbers tutorial here
Only replace the ‘+’ symbol with a ‘/‘symbol.
And the actionscript code on the ‘=’ symbol button would be:
on (release) {
_root.answer = Number(value1)/Number(value2);
}
Instead of
on (release) {
_root.answer = Number(value1)+Number(value2);
}
Take the adding numbers tutorial here
Adding numbers
A really easy task, however, a very common mistake is often made.
When defining the numbers in actionscript, you MUST define them as numbers; otherwise they’ll be recognised as strings.
If they are recognised as strings, 2+2 would come out as 22.
So let’s start this tutorial, and do it the CORRECT way.
Start by selecting the ‘text tool’, in the property box, set it to, ‘Input text’, and draw out a text box. Now right click on the text box you just inserted, and select ‘copy’, right click somewhere else on the stage and select ‘paste’.
Now position the two text boxes next to each other, leave enough room for ‘+’ symbol to go in between them.
Layout so far:
‘+’
Now give the input textbox on the left an instance name of ‘value1’, and the one on the right an instance of ‘value2’. (Do not include the quotes)
Now underneath the two textboxes and ‘+’ symbol, put a ‘=’ symbol in, position it underneath the ‘+’ symbol.
Now using the ‘text tool’ again, insert a textbox underneath the ‘=’ symbol. (This is where the answer will be displayed). Select the text box, and in its property box, set it to ‘dynamic text’, and give it an instance name of ‘answer’, without the quotes.
Layout:
‘+’
‘=’
Right click on the ‘+’ symbol, and select ‘convert to symbol’, select the ‘button’ radio button, and then click OK.
Right click on the ‘=’ button, and select ‘actions’, and insert the following code:
on (release) {
_root.answer = Number(value1)+Number(value2);
}
This tells flash that when the button is released, value1 (the left textbox) and value2 (the right textbox) are to be added together, and the answer is to be displayed in the answer textbox.
Now right click on frame 1, select ‘actions’, and insert the following code:
var value1:Number = 0;
var value2:Number = 0;
var answer:Number = 0;
This sets all the textboxes to 0
And that’s all you need to do.
When defining the numbers in actionscript, you MUST define them as numbers; otherwise they’ll be recognised as strings.
If they are recognised as strings, 2+2 would come out as 22.
So let’s start this tutorial, and do it the CORRECT way.
Start by selecting the ‘text tool’, in the property box, set it to, ‘Input text’, and draw out a text box. Now right click on the text box you just inserted, and select ‘copy’, right click somewhere else on the stage and select ‘paste’.
Now position the two text boxes next to each other, leave enough room for ‘+’ symbol to go in between them.
Layout so far:
‘+’
Now give the input textbox on the left an instance name of ‘value1’, and the one on the right an instance of ‘value2’. (Do not include the quotes)
Now underneath the two textboxes and ‘+’ symbol, put a ‘=’ symbol in, position it underneath the ‘+’ symbol.
Now using the ‘text tool’ again, insert a textbox underneath the ‘=’ symbol. (This is where the answer will be displayed). Select the text box, and in its property box, set it to ‘dynamic text’, and give it an instance name of ‘answer’, without the quotes.
Layout:
‘+’
‘=’
Right click on the ‘+’ symbol, and select ‘convert to symbol’, select the ‘button’ radio button, and then click OK.
Right click on the ‘=’ button, and select ‘actions’, and insert the following code:
on (release) {
_root.answer = Number(value1)+Number(value2);
}
This tells flash that when the button is released, value1 (the left textbox) and value2 (the right textbox) are to be added together, and the answer is to be displayed in the answer textbox.
Now right click on frame 1, select ‘actions’, and insert the following code:
var value1:Number = 0;
var value2:Number = 0;
var answer:Number = 0;
This sets all the textboxes to 0
And that’s all you need to do.
Designing and creating an RPG game
RPG/Role Playing games are among the most popular games. As and RPG game puts the user in control of the game more than most other games types. Allowing the user to make choices, take certain paths and hope it’s the right one and so on.
Before you start designing your game, it is really important that you do a plan first.
Grab a scrap of paper and start jotting down the ‘Game Plan.’
This can include, the list of characters that will appear in your game, including there role in the game, and even a biography of the character, including there personality, are they bad or good, what do they do in the RPG game.
Now try develop a bit of a story line, how will the game begin, what type of problems will arise, what will fix the problems?
Deciding how the user will interact with the game, for example:
Will the user be required to walk through the game and face the challenges, or will they only need the mouse to decide the characters fate, both would be better.
Write it out like a book, you do not need to include all the details, just enough for you to understand what’s going on. Once you’ve mapped out the plan, have a pretty accurate idea of what events will happen in the game, solution, character etc, have a little think about some additional features that you could add to your game.
Such as:
Inventory - to hold all the items the player can collect
Health bar – so the player can die
Timer or time limit – make the game more difficult with a time limit
Score – things the player can collect through out the game to earn points.
Once you have this all written down, know what you want to happen in the game, have the events plotted out, you can start creating your game, and you’ll be shocked about how much easier it is to set your game out, and get it going.
Start by designing your characters, design a menu, and so on.
The information you need, can be found on this website.
Resources:
How to make an inventory
How to make a score
Timer/time limit
Health bar
Before you start designing your game, it is really important that you do a plan first.
Grab a scrap of paper and start jotting down the ‘Game Plan.’
This can include, the list of characters that will appear in your game, including there role in the game, and even a biography of the character, including there personality, are they bad or good, what do they do in the RPG game.
Now try develop a bit of a story line, how will the game begin, what type of problems will arise, what will fix the problems?
Deciding how the user will interact with the game, for example:
Will the user be required to walk through the game and face the challenges, or will they only need the mouse to decide the characters fate, both would be better.
Write it out like a book, you do not need to include all the details, just enough for you to understand what’s going on. Once you’ve mapped out the plan, have a pretty accurate idea of what events will happen in the game, solution, character etc, have a little think about some additional features that you could add to your game.
Such as:
Inventory - to hold all the items the player can collect
Health bar – so the player can die
Timer or time limit – make the game more difficult with a time limit
Score – things the player can collect through out the game to earn points.
Once you have this all written down, know what you want to happen in the game, have the events plotted out, you can start creating your game, and you’ll be shocked about how much easier it is to set your game out, and get it going.
Start by designing your characters, design a menu, and so on.
The information you need, can be found on this website.
Resources:
How to make an inventory
How to make a score
Timer/time limit
Health bar
How to make a dropdown menu
There are many ways to make a dropdown menu using flash, some easier than others, however, the graphic of the dropdown menu can sometimes be a bit glitchy and just don't do what you want it to.
Here is a way, of making a dropdown menu, that works great, and is very functional.
We will be using the ‘_visible’ code for this dropdown menu, and it works great when making a dropdown menu in flash.
Begin by inserting an additional layer. Double click on layer 1, and rename it, ‘dropDown’. Double click on the other layer, and name it content.
On the dropDown layer, using the rectangle tool, draw out a rectangle, with a width of about ‘110’, and a height of about ‘45’. This rectangle will be used to bring down the dropdown menu. Using the ‘text tool’, draw out a text box in the rectangle, insert the text ‘tools’, and in text boxes property panel, make sure the text is set to ‘static’.
Select the whole rectangle, and right click on it, select ‘copy’, and then right click somewhere on the stage, and select ‘paste’.
ALTERNATIVE/TIP: Place the rectangle in the position that you want it to be, and select the whole thing. Now press ‘Ctrl-c, now press, Ctrl-shift-v’. This will copy the rectangle, and paste it in the exact same position. Using the down arrow key, you can move it just underneath the other rectangle, and then it’s all in place.
Copy and paste the rectangle twice, so that you are left with 3 rectangles on the stage.
On one of the rectangles, double click on the text box, and change the text to ‘FAQ’, and on the other rectangle change the text to ‘Contact’.
Now select one of the rectangles (make sure the text is selected too, hold shift to select multiple things), right click, and select ‘convert to symbol’. Select the ‘button’ radio button, and then click OK. Convert the other two rectangles in to buttons using the same method, (select whole rectangle, right click, convert to symbol, button, OK)
Now position the button that says ‘tools’ on it, in the top left hand corner of the stage, The other two buttons have to go directly underneath, (the final positioning is exactly how you want the dropdown menu to appear, the rest will be done through actionscript).
Select the button with ‘FAQ’ written on it, and change in its property’s panel, give it an instance name of ‘faq_btn’ without the quotes!!!
Now for the ‘Contact’ button, change its instance name to ‘contact_btn’, again, without the quotes!!!
Right click on frame 1 of the ‘dropDown’ layer, and select actions. Insert the following code:
stop();
contact_btn._visible = false;
faq_btn._visible = false;
This tells flash that when the flash movie starts, we want it to be stopped on frame 1, and the contact button, is not to be visible, as well as the faq button.
Now right click on the button that says ‘tools’ on it, and select actions. Insert the following code:
on (release) {
if (_root.faq_btn._visible == false, _root.contact_btn._visible == false) {
_root.faq_btn._visible = true;
_root.contact_btn._visible = true;
} else if (_root.faq_btn._visible == true, _root.contact_btn._visible == true) {
_root.faq_btn._visible = false;
_root.contact_btn._visible = false;
}
}
This tells flash that when the button is release, if the faq button, and the contact button, are not visible, make them visible, and if they are already visible, to make them not visible.
Now right click on the faq button, select actions, and insert the following code:
on (release) {
gotoAndStop(2);
}
This tells flash that when the faq button is release, go to and stop at frame 2.
Right click on the contact button, and insert the following code:
on (release) {
gotoAndStop(3);
}
This tells flash that when the button is release, to go to and stop at frame 3.
That is it for the actions now. Now insert keyframes at frames 2 and 3 on the ‘dropDown’ layer.
All we need to do now is fill in the content layer. Insert keyframes on frames 2 and 3 on this layer as well. (the content layer).
On frame 2, using the ‘text tool’ simply insert the text, FAQ, at the top of the stage, and then just make up a couple of random questions and answers.
Now on frame 3, using the ‘text tool’ again, insert the text, CONTACT, and then perhaps just a fake email, phone number etc.
Now if you hit ‘Ctrl-Enter’, you’ll be able to click the tools button, and the other two options will appear underneath, click the either of the buttons’ and you’ll be taken to the specified frame, simply click on the tool button again, to hide the menu.
And that’s how you make a fully functional dropdown menu.
Flash Decompiler
Flash Decompiler is a program used to edit flash video's and games. It can convert .swf files back to their original .fla file type, meaning you can open it up in flash and edit things etc.
This is great to learn how things are done in flash, and give an answer to "I wonder how that was done?'
Download a free 15 day trial :
Flash Decompiler Gold 2.3.1.1156
This is great to learn how things are done in flash, and give an answer to "I wonder how that was done?'
Download a free 15 day trial :
Flash Decompiler Gold 2.3.1.1156
How to make a password
In this tutorial we are going to make an input text field where the user needs to enter a password in order to play the flash file.
This is really easy to do.
Begin by selecting the ‘text tool’, and in the property box at the bottom, make sure it is set to ‘dynamic text’, and the text alignment is set to ‘Align Center’.
Now at the top of the stage, draw out a large text field that will fit the text, ‘invalid password’ in it. In the property’s box of this text field, underneath where it says, dynamic text, there will be an empty box, in this box, insert the following, ‘wrongPassword’. Without the quotes!!!
This text box will be used to let the user know if they have entered an invalid password.
Using the ‘text tool’ again, set it to ‘input text’, in the property’s box, and insert a text field on the stage. (This is where the user will enter a password). In the property box, underneath where it says, ‘input text’, write ‘my_passWord’, without the quotes!!!
And next to where it says Var: write, ‘passWord’, without the quotes.
Now we will need to insert a button, for the user to click after they have entered a password. Somewhere on the stage, using the ‘oval tool’, draw out an oval, where you want the submit button to be.
Now select the whole oval, right click on it, and then go down to ‘convert to symbol’, and make it a button.
Now right click on the button, and select ‘actions’, insert the following code:
on (release) {
if (_root.passWord == "cjay" == true) {
gotoAndStop(2);
} else {
_root.wrongPassword.text = "Invalid Passord";
gotoAndStop(1);
}
}
In the first line of code:
‘(_root.passWord == “cjay” == true) {
Change ‘cjay’ to whatever you want the password to be.
When the button is released, it checks to make sure that the password entered is cjay, and if it is it will go to the next frame.
Else
The text box we made before called wrongPassword, will display, the text ‘Invalid Password’ and it will stay at frame 1.
Now right click on frame 1 in layer 1, select ‘action’, and insert the following code:
stop();
my_passWord.password = true;
This code tells flash that to stop on this frame, and that the text entered is to be displayed with asterisks, as this hides the password.
Now right click on frame 2 of layer 1, select ‘insert keyframe’, and delete everything off this keyframe.
On this new keyframe, using the ‘text tool’ set it to ‘static text’, enter some text like, ‘the password you entered was accepted’.
And that’s it for this tutorial.
How to make a health bar
Making a health bar with with flash 8 can be useful for many different types of flash games, and it doesn’t just have to be a health bar. It can be a petrol gauge in a racing flash game, a time left bar, a skill bar; pretty much anything that represents stats. Flash 8 works very well with numbers and stats, so it's good to learn as it is very commonly used when making flash games.
For this example, we’ll just use it as a health bar.
Begin by drawing out a rectangle on the stage, they’re you go, that’s it for the drawing part already. Select the whole rectangle, and in its property box at the bottom of the screen, you see W: meaning width, and H: meaning height, set the width to 120, and the height to 20. This is not necessary, but an average size health bar is around this in flash games.
Right click on the rectangle, go down to ‘convert to symbol’, and make it a ‘movie clip’. However, to the right, there is a registration grid, it is set to the middle by default, change it over to the left of the grid by clicking on the desired area on the grid, and then click OK.
Now right click on the rectangle movieclip, and select ‘actions’ from the menu, insert the following actionscript:
onClipEvent (enterFrame) {
this._xscale -= 1;
}
onClipEvent (enterFrame) {
if (this._xscale == 0) {
_root.gotoAndStop(2);
}
}
This code means that the xscale of the rectangle will go down by 1 every time flash 8 enters the frame.
If flash 8 enters the frame and the xscale is 0, flash will go to frame 2.
Right click on frame 1, and go down to ‘actions’, insert the following actionscript:
stop();
Now right click on frame 2, and select ‘insert keyframe’, this is the frame, where we will let the user know, that, they’re dead.
Delete the health bar from this frame, as there won’t be any by the time they reach frame 2 in the game, and insert the following text on the stage, ‘You died!!!’.
You could animate this text, add some graphics, or something like that.
And that's how you make a health bar using flash 8.
As I said, this learning how to use statistics and numbers using flash 8, is very useful for when it comes to making flash games.
Play free online flash games
Games provided by miniclip.com
Action
3 FOOT NINJA
ON THE RUN
MONSTER TRUCKS
COMMANDO
KICKBOXING
TRIALS 2
CAB DRIVER
DESERT AMBUSH
FROST BITE
FROST BITE 2
POLICE PURSUIT
TRIBE
Shoot 'Em Up
RAILROAD RAMPAGE
OBAMA ALIEN DEFENSE
CLASH N SLASH
AIR BARONS
BOW MASTER
GUN RUN
TANKED UP
CASTLE CONQUEST
SNIPER
MOST WANTED
KING OF THE HILL
PAINTBALL
Sports
WINTER GAMES
MOUNTAIN BIKE
BASE JUMPING
JET SKI
SURF'S UP
GO KARTS
THE ASHES
MINI SOCCER
AIR SHOW
FIELD GOAL
SUPER TRUCKS
TIGER GOLF
Racing
FAST CAR FRENZY
MAX SPEED
RICH RACER
DOWN HILL CHILL
ICE RACER
POWER BOAT
FORMULA G1
SNOWBOARD MADNESS
CARAVAN RACERS
MINICLIP RALLY
WOOD RUNNER
HOT RODS
RURAL RACER
Action
3 FOOT NINJA
ON THE RUN
MONSTER TRUCKS
COMMANDO
KICKBOXING
TRIALS 2
CAB DRIVER
DESERT AMBUSH
FROST BITE
FROST BITE 2
POLICE PURSUIT
TRIBE
Shoot 'Em Up
RAILROAD RAMPAGE
OBAMA ALIEN DEFENSE
CLASH N SLASH
AIR BARONS
BOW MASTER
GUN RUN
TANKED UP
CASTLE CONQUEST
SNIPER
MOST WANTED
KING OF THE HILL
PAINTBALL
Sports
WINTER GAMES
MOUNTAIN BIKE
BASE JUMPING
JET SKI
SURF'S UP
GO KARTS
THE ASHES
MINI SOCCER
AIR SHOW
FIELD GOAL
SUPER TRUCKS
TIGER GOLF
Racing
FAST CAR FRENZY
MAX SPEED
RICH RACER
DOWN HILL CHILL
ICE RACER
POWER BOAT
FORMULA G1
SNOWBOARD MADNESS
CARAVAN RACERS
MINICLIP RALLY
WOOD RUNNER
HOT RODS
RURAL RACER
How to make an animated button
If you aren’t familiar with making buttons, you can take a tutorial here
Begin by drawing out the shape you want to be a button, right click on it and select, ‘convert to symbol’.
Now double click on the button to enter its timeline.
Once in the button’s timeline, select the entire button, and right click on it and then go down to ‘convert to symbol’ again. This time, make sure the ‘movie clip’ radio button is checked, and then click OK.
This not change the whole button in to a movie clip, if you go back to the main timeline, flash will recognise the whole thing, as being a button still.
Now double click on the graphic you just converted in to a movie clip, to enter its timeline.
Here is where you can animate the button, notice how the timeline and frames are normal.
Animate it any way you want.
I made a button that has text on it that says ‘Click’. I inserted a keyframe at frame 10, and changed the text to ‘Here’, and inserted another keyframe at frame 20, so ‘Here’ appears for the same time as ‘Click’.
Now I have a button that say’s click, and shortly after it changes to here. This loops so my button displays it over and over.
Animate it anyway you want, that was just an idea for you, change the picture completely if you want.
Other tutorials you might like:
This tutorial has information in it to show you how to link buttons.
How to make glowing text
Glowing text is a great effect, and it can be a great way to catch the users attention, which is why in this example I'll show you how to link the text to a website.
Begin by using the text tool and inserting the text that you want to add a glowing effect to.
I'm using the text 'Learn Flash 8 Pofessional'
Once you have done this, right click on the text, and choose 'convert to symbol'. Check the 'button' radio button, and click on OK.
Right click on this button, and go down to, 'actions'.
Now insert the following code:
on (release) {
getURL(http://www.learnflash8pro.blogspot.com/);
}
Now when the user clicks on the text it will take them to them to my website.
Simply replace the URL in the brackets with the URL you want, include http://www/.
Select the button, and open up it's propert pannel by clicking on the little Up arrow which it in the center of the screen, and at the bottom.
There will be three tabs here,
Properties, Filters and Parameters.
We need to use some Filters, so click on the Filters tab.
There will be a plus symbol, which is used to add filters, click on this and select 'Glow'.
(While you are using the filters, experiment by adding more filter and messing around with the settings,
THAT IS HOW YOU LEARN NEW THINGS, AND BECOME A BETTER USER OF FLASH PROFESSIONAL 8
Once you select glow, you can adjust the settings (to the left) to change the way it looks, larger glow, strength of glow etc.
And that's it, now you can add this to your game or movie, animate the text by making it move around the screen to catch the users attention even more.
How to make a movie clip drag able
Add the following code to a movie clip to make it drag able:
onClipEvent (mouseDown) {
startDrag(this);
}
onClipEvent (mouseUp) {
stopDrag();
}
Subscribe to:
Posts (Atom)