Showing posts with label Other. Show all posts
Showing posts with label Other. Show all posts

How to display an output message

Displaying an output message in flash is really useful when needing to display instructions to the user about the flash movie/game, or even credits and acknowledgements. It is extremely easy to do too.
Right click on frame 1, select actions and insert the following actionscript:

trace (“Use the arrow keys to navigate your way around”)

Once the flash movie starts an external message will be displayed to the user saying 'Use the arrow keys to navigate your way around'.

Welcome to Adobe Flash

Thank you very much for visiting uncover flash, and welcome.
Here you can find lots of free tutorials teaching you about all the different aspects of Adobe Flash. From Web Design, Game Making, Animation, Actionscript 2.0, Interactive Forms and Flash Software.
Feel free providing other users with your comments and advice, and let us know whether you like the tutorials or not with the famous 'like' button.

Checkbox in flash

Adobe Flash has an inbuilt function that allows you to insert a checkbox in flash easily and quickly.
From the main menu options select window>components. A window will appear with a few different catergories to choose from, you will need the user interface catergory, from the user interface catergories double click on checkbox. This will insert an instance of a checkbox on the stage.
Select the checkbox and open up it's properties panel, there are three tabs, properties, filters and parameters, select the parameters tab. A table will now appear in the parameters panel, locate label, in empty box next to label, insert the text yes, also check that the text on the table that reads selected, is set to false. There should now be a checkbox on the stage with the word yes on the right hand side of it. Select the yes checkbox, just above the properties tab, there is an actions tab, click it and insert the following actionscript:

onClipEvent (enterFrame) {
if (this.selected) {
_root.gotoAndStop(2);
}
}

This tells flash that when it enters the frame, it needs to wait until the checkbox is selected, before going to frame 2.

Checkboxes are really useful for things like collecting date and reviews, quizes, serveys, web forms etc.

Combo box in flash

Flash has an inbuilt function that allows you to insert combo box in flash easy and quick. From the top menu options select window>components.
A window will appear with a few different categories to choose from, click on the plus symbol next to user interface and double click on the combo box option. This will insert an instance of a combo box on the stage.
You will now need to set the parameters of the combo box.
Select the combo box, in it's properties panel, there are three tabs to choose from, properties, filters and parameters, select the parameters tab.
A table will now appear allowing you to change the parameters, double click in the empty box next to label. (The labels are the options that will appear in the combo box). Using the + symbol, insert the required labels.
Once you have inserted all the labels, test the flash movie.
Click on the combo box and all the labels you just created will appear in it.

Creating a game menu

Although this menu is designed for a shooting game, using the skills that you learn from this tutorial will help you when creating and making any menu for any flash game or flash movie.

Double click on layer 1, and rename it actions.
Insert another 4 layers, renaming them: ‘title’, ‘purchases’, ‘player name’ and ‘start button’.
More layers will need to be inserted shortly, for the shooting menu’s animation, which will be your creation (see animation tutorials if unsure). If this is the first menu you have ever made, perhaps try adding some animation once your comfortable with the concept of creating a menu. so far you should have the following layers

-Actions (For all the actions)
-Title (Contains the title of the game)
-Purchases (A layer which controls the purchasing funtions)
-Player name (Allows the player to enter their name)
-Start button (Allows the player to begin the game)

In this shooting game menu, the player will be required to enter their name, purchase bullets, and press the start button to begin.

You will need to think of a title for the game, which will be ‘Shoot to Kill’ for this tutorial. Using the text tool, insert a textbox somewhere on the stage, making sure it is on the title layer, and insert the title of the game in the textbox. Being a main heading the text should be made visible with colour, and made a moderate size. For this tutorial the headings original position is off the stage, and once the game has started it slides in from the side of the stage to the middle of the stage.
Let's make your title do this also. On frame 1 of the title layer move the text off the left hand side of stage, making sure none of the text is visible on the stage. Right click on frame 15 on the title layer and insert a keyframe. On frame 15 move the title text to where you want it to slide to. Once this is done, right click anywhere between the 1st and 15th frame and create motion tween. Test the movie to see the result.

Now that there is an animation at the start of the game, you don't want to
see all the other menu options until this animation is over.
So you will need to insert a keyframe on frame 15 of all the other layers, as this is where the animation ends.

Before going any further define the variables of the game. On the 15th frame of the actions layer, insert the following actionscript:

stop();
var ammo = 0;
var money = 100;

This tells Adobe Flash to set the players money to 100, and the players ammo to 0. Obviously the player will require some money to purchase ammo. But only a little bit, as this is only the beginning of the game.

Now for the player name layer:
Using the text tool, insert a textbox somewhere on the stage on the 15th frame. In the textbox properties, set it to input text, this allows the player to enter text in to the textbox. Select the textbox, and give it a var of ‘playerName’ without the quotation marks. Also, next to ‘Var:’ on the left side, there are three buttons, the one closest to ‘Var:’ puts a border around the text box, click on it, and make sure that there is a border around the text box. (If this isn' done, the user won’t be able to see where to enter their name).
Now next to this playerName input textbox, on the left hand side, insert a static textbox. In the textbox write ‘enter name:’
The shooting menu now has a place for the user to enter their name!

For the purchase layer:
You will now need to provide the player with some stats showing them how much ammo they have purchased.
Using the text tool insert a static textbox on the stage, and write in the textbox, ‘ammo:’ Now next to this, on the right hand side of this textbox, insert a dynamic textbox, give it a var of ammo. The shooting menu now has somewhere to display how much ammo the player has purchased.

Now you will need to design a button that allows the user to purchase the bullets.
Using the text tool, draw out a static textbox, and type in ‘Purchase Bullets’. You could also draw a little bullet to put next to the text just to make it more creative and interesting. Select the purchase bullets text, right click on it, and convert it in to a button.
Right click on the purchase bullets button, and give it the following actions:
on (release) {
if (_root.money>24) {
_root.ammo += 5;
_root.money -= 25;
} else {
_root.ammo += 0;
}
}

This tells Adobe Flash that when the button is released, if the money is larger than 24, the users ammo will go up by 5, however, if it’s below 24, the ammo won’t go up at all.
Meaning the cost of 5 bullets is, 25.
The user can now insert their name, and purchase bullets for the game menu.

You will also need to insert some money functions on this layer:
Using the text tool, insert some static text somewhere on the stage, and make the text '$', on the right hand side of this, insert a dynamic text box, with the var of money. And that's it for that!

Last but not least, the start button:
Simply draw the graphic that you want to be you start button, right click on it, and convert it in to a button.
Now give the start button the following actions by right clicking on it and selecting actions:

on (release) {
gotoAndStop("Scene 2", 1);
}

This tells flash that when the button is released, go to scene 2.

Scene 2, is where the start of the main game begins. To insert ‘Scene 2’, click on ‘insert’, from the top menu, and select scene.

On scene 2, insert three dynamic textboxes, and three static text boxes.

Give these var names to the dynamic text boxes:
One textbox needs to have a ‘var’ of: ammo
Another needs a var of: playerName
And the last needs a var of: money.

Now obviously for the static text boxes, they describe what the dynamic text boxes are for. So next to the ammo text box on the left hand side, insert the text ‘ammo’.
For the money text box, it needs a money symbol next to it ‘$’.
Being a shooting game, you may want to make a crosshair cursor. Take this tutorial to see how to make a crosshair cursor.

To go back to scene 1, click on ‘view’, from the top menu, hover the mouse over ‘go to’, and select scene 1.

This is a basic way of creating a menu, but it is fully funtional, and the skills learnt from this tutorial, can definately be used for other tasks. NOT JUST FOR A SHOOTING GAME!

Useful flash shortcuts

Learning the Adobe Flash shortcuts isn't necessarily essential, but certainly can come in handy!

Selection tool – shortcut key = v
Oval tool – shortcut key = o
Rectangle tool – shortcut key = r
Brush tool – shortcut key = b
Paint bucket tool – shortcut key = k
Convert to keyframe – shortcut key = F6
Convert to blank keyframe – shortcut key = F7
Clear keyframe – shortcut key = shift+F6
Test movie – shortcut key = Ctrl+Enter
Debug movie – shortcut key = Crtl+Shift+Enter
Test Scene – shortcut key = Ctrl+Alt+Enter
Actions – shortcut key = F9
Transform – shortcut key = Ctrl+T

Have this list somewhere nearby your computer, in no time you'll be able to use them off the top of your head.

Setting x and y co-ordinates

Defining a movieclip's position using only actionscript is essential. And can be used for so many different tasks, game making, website design, logo placement, title placement etc.

Draw out a shape or picture on the stage, make it moderate size and place it anywhere on the stage. Select the whole of the shape/picture you have drawn, right click on it, and convert it in to a movieclip.
In the properties box, give it an instance name of ‘myimage’, without the quotation marks.

Now right click on frame 1, on the first and only layer, and select ‘actions’.
Insert the following actionscript:

myimage.onEnterFrame = function() {
this._x = 253;
this._y = 178;
this._width = 55;
this._height = 55;
};

This tells Adobe Flash that when it enters the frame, the images x (horizontal) co-ordinates is to be set to 253, and its y (vertical)
co-ordinates is to be set to 178.
It also tells flash that the width and height of the image is to be set to 55. If you apply this to a simple shape like a square it should turn out perfect, but changing the width and height of something like a stick figure, will most like distort it. Unless you adjust the height and width settings until you have the desired effect. Obviously for a stick figure you would want the height to be greater than the width otherwise he will be one funny looking stick figure.

The current x and y co-ordinates will place the image in the center of the stage (providing the stage size is set to default). Now test the flash movie and the image will have those exact co-ordinates, height and width properties that were set in the actionscript.

How could something like this be applied to a game? Shooting or car game, when the player dies they are reset back to the set co-ordinates, RPG, when the player reaches a certain point in the game they are taken to new part of the game. The possiblities are endless. Play with the ideas and test them out. There is no exact line of actionscript that will make something happen, there are a number of different ways of writing completely different lines of actionscript, but still having the same effect.

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 movie clip drag able




Add the following code to a movie clip to make it drag able:


onClipEvent (mouseDown) {

startDrag(this);
}
onClipEvent (mouseUp) {
stopDrag();
}

Common audio problem

One of the most frequent questions I have been recieving How do you import audio and preview it simply by moving the playhead. This is very simple, first of all, import the audio that you want to the library. Rename layer 1 audio. Drag the audio file from the library to the stage on the first keyframe. insert another key frame where the audio ends, if the audio has ended the wave line will just be a straight line. Once you have established the audio ending point, click on the first keyframe of the audio layer, and in the properties inspector, you will see an option that says sync, click on the drop down menu and set it to stream. Click on the last keyframe and change the sync option to stop, this is so the audio will stop playing when it reached the specified keyframe.
Now move the playhead along the timeline and the audio will play at wherever the playhead is.

Action Script 2 - Important Note

Throughout these tutorials we have been applying most of the AS2 to the symbols and frames. This was to get you used to the Actionscript and become familiar with it, but from now on, we will be applying the AS2 to mainly the frames.
WHY? Simply because it is much easier, and when editing the fla. file, all the action script is kept neatly on the one layer.

Improve your flash skills

Tips on Improving your skill
Drawing- Spend 15 minutes everyday on drawing some basic pictures. When you are getting good at drawing basic pictures, try something a little harder. Look through a magazine for some cartoon pictures. Have a look at the way these pictures have been drawn, try draw them using flash; don’t worry if the end result looks stupid, that’s the whole point of this exercise, to improve. Everyday try and draw this picture again, this will help you greatly.

Judging Colour- This is an important skill. Say for example you are looking through pictures of cars or something like that. You might see a yellow one that you like. Take a close look at the colour, figure out what shade of yellow it is, because chances are, it isn’t just the standard yellow you find in the colour panel. In the colour panel go into custom colours(when you for example click on the oval tool, open up the fill colour, up the top of the box next to the box with the red line through it, there is a circle filled with different colours. Here you can get the exact colour you need.
Each colour has a number, when you click on the fill colour tool, hold the cursor over a colour, in the box located at the top of the colour panel, there will be a list of numbers. For example, black is #000000. So remember to have a look through custom colours often, as the ones that display when you click on stroke colour or fill colour, are only basic colours.

Judging Scale- This is really easy(for most of us). Let’s say you want to draw a picture of a person holding a five dollar note; you don’t want the five dollar note to be as big as the person’s whole arm. This would be a pretty obvious mistake, but you would be surprised how many people make this mistake.
Solution: grab a five dollar note, and have a look haw big it is compared to your hand or arm. Although this was a simple example, this mistake can sometimes be easy to make, that being said, it is also easy to avoid.

Drawing a Person- One of the most common things seen in a flash movie is a person, so it doesn’t hurt to know how to draw one.
Have a look in the mirror, take in the details, have dark are your eyes, how large are they, what do your ears look like from the front and the side, what does you nose look like, take notes like these.
A common mistake when someone draws a person is the eye position. When you had a look in the mirror I bet you didn’t notice this, but you eyes are actually in the very centre of our face. It looks like they area bit above centre.
Practice drawing out each thing individually, have a look at your nose, now try drawing it out, and so on.
Don’t worry to much about the detail, this is not that important, a cartoon drawing does not need to made complicated, it needs to be kept fun. Take “South Park” for example, for those of you who know what this is, look how simple the characters are, but yet, we can still identify their characteristics easily, so just remember don’t be too fussy with the detail.


Experiment With Colour- As I just said, don’t worry about the detail too much.
This may sound like I am contradicting what I just said before in the advice about colour, but when designing you own simple designs, make the colours fun. Say for example when you draw a person don’t worry too much about getting the colour perfect, you may even want to make the person blue, be creative, a key thing in flash, creativity.

Important things to remember

Important Things to Remember
As I have mentioned before in these tutorials, there are so many things that you can do with flash, and it would be near impossible to sum it all up. So just take the time to explore some of the things in flash. If you don’t know what some of the things are, have a look at them and find out what they are and do.
Flash also has a great help menu.
Remember to put each different object on a separate layer, so they don’t interfere with each other, always name the layers so you know where everything is.
Make sure your things are to scale, obviously this is just common sense, but many people get tricked with this. Eg. Let’s say there was a dog and a person, we don’t want the dog to be three times the size of the person do we?
If you are having trouble with doing something in flash, don’t give up, as the answer is probably very simple, you may be just doing one little thing wrong.

How to use alpha

Alpha
This tutorial is only very short, but it is still important to know about alpha.
We will only be using on layer, you don’t even have to give it a name.
Start by drawing any shape you want to. Convert it to a graphic, name it whatever, something relating to the shape you have drawn. Now select the shape, in the properties inspector, where it says colour, change it from none, to alpha. Now another little window next to this will come up. Change that from 100% down to about 70%. Now look at the object. Alpha basically controls the transparency of the shape. This is particularly good when creating windows, water etc.
Although this was a very short tutorial, it is all information we need to know, it may be a good idea to jot down some of these points.


TIPS FOR MAKING A FLASH MOVIE
When making a flash movie it is a good idea to do a rough plan on some paper or something as I mentioned previously throughout this guide.
Figure out who are your characters going to be, what type of personality are they going to have.
How many layers will be needed when making your flash movie?
What clothes will your characters be wearing, what are there names?
Don’t worry about the name of your flash movie yet, that can be done at the end of the flash movie.
When you have jotted down your movie and you know where you are taking it, that’s when you start.
This will help you so much if you have a rough plan of what you are planning to do in your flash movie. Just like when you write narratives, you should do a plan first.
By doing this plan it is a better way to get ideas, spend a bit more time working out who your characters are and what type of personality they have.

DID YOU KNOW? South Park along with many other cartoons are made using flash 8 Professional.


Let’s begin the next tutorial.

Testing and publishing



Testing and Publishing the Movie/Game
When you test a movie it is the what the final result will look like when it has been published, to test what the movie will look like, you can either press ctrl enter, or select the menu item control, and go to test movie.
Okay, when you have finished a project, you can publish it. To do this go to the menu item file, and select publish settings. Now check the box next to Flash, unless you also want a HTML type file deselect any other options. Now this will publish it and turn it into a .swf file, which can be played through flash player, which is free. Flash player is a small file and be downloaded by somewhere like Google etc.
Now in the box next to Flash, type in the name of the file, than select where you want the .swf file to be saved. Now finally click on the option Publish. The file will be saved to wherever you chose only it will be a .swf file, if you have flash player you can just double click on it a view the file. Important Note: if you are planning on editing the flash movie/game, ensure to save a .fla file as well, which is just simply done by the normal save, as .swf files cannot be edited.


Okay, we are now going to advance a little bit in the tutorials, don’t worry, I will still be explaining these tutorials in depth. This next tutorial is how to create a walking character.
However, before we start these next few tutorials, I will explain what these tutorials are going to teach you.
We will be starting to learn a little bit of Actionscript 2.0. Creating animations that could be put in to a movie file.
In this first tutorial on creating a dude that will walk, we will be creating a button, when this button is clicked on by the person watching the movie, the movie will start playing.
If you are still a little unsure about the previous tutorials I recommend that you go over them.

Start Learning Flash

START LEARNING FLASH


Basic Tutorial on Motion Tweening(tut.1)
Start by double click on the box that says layer 1 in it. This will enable you to rename it; rename it “circle”, without the quotations. Naming the layers is very important as it helps you know where everything is and keeps the workspace neat and tidy.
Now select the oval tool and draw out an oval on the stage, it can be any colour you like.
Now select the whole oval with the selection tool than right click on the oval, select the option “Convert to Symbol”. Now check the graphic box and name it oval. Now press Ok. You have just created your first graphic. It will appear in the library, if you cannot see your library, click on the menu option WINDOW, than make select library.
Now we are going to inert a new keyframe, not layer, keyframe. To do this, in the same layer go to about the 10th frame (the white boxes next to the layer) and right click on the 10th frame, now select the option insert keyframe. Now a little black circle will appear on the frame you just inserted the keyframe on.
Now, making sure you have the last keyframe selected (the one you just inserted) move the oval somewhere else in the white area.
If you click on frame 1 the oval will still be in the original position, only on the last keyframe will it be in the position you just moved it to.
Right click somewhere in the middle of the last keyframe and the first keyframe, select the option Create Motion Tween. Now an arrow stretched out along all these frames will appear.
Hit the enter button, the oval should move to the position you moved it to, not jump to the position, slide to the position. If it doesn’t don’t worry just go back and re-read this. It is all about learning by your mistakes. If it did slide, congratulations, you have completed the first tutorial, it is time to move on to the next. I recommend that you repeat this tutorial just for good practice, also, you might want to try a different shape.