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.
Learn how to use Adobe Flash with all the free tutorials. Game Making, Animating, Cartoon Design, Web Design and much more...
Showing posts with label Tips and Tricks. Show all posts
Showing posts with label Tips and Tricks. Show all posts
Learning actionscript
Learning actionscript can be really difficult, it's just like learning another languange, a languange that allows you to communicate with Adobe Flash and tell it what to do, when to do it and how to do it. This is one of the most important skills to learn for anyone wanting to develop their skills in game making, website design and interactive pages.
Actionscript is extremely precise, 100% to be exact, so you will need to become really familar with the languange, and this is obviously achieved through constant use of actionscript, trying different things, solving code errors. Learning to solve code errors is definately a really effective way of developing your skills. It doesn't matter in the slightest if you have to Google the solution, your job is to remember the mistake, and REMEMBER THE SOLUTION!
Get to know the basics, before progressing to more advanced actionscript you should at least know some of the most basic lines of actionscript. For example, a very common line that you will use very regularly:
'gotoAndPlay(2)' - This tells Adobe Flash that you want it to go to the
second keyframe on the timeline, and play. Timeline control is definately something you need to understand, and luckily, it is really easy to pick up. This line of code doesn't really achieve much though. To make this more detailed, you could make it,
'on (release) {gotoAndPlay(2)}' - This actionscript would work perfect
with a play button.
That may only be one line of actionscript,and a very simple line, but it's a start. And in no time you should be able to memorise that and use it regularly without even thinking about it. Of course you will eventually need to use much more sophisticated actionscript, but once you have mastered the basics, this won't seem so daunting. And these tutorials will ease you in to the process.
Summary: Begin to learn actionscript and remember it, you should never copy and past, the idea is learn to write your own code, the more you type in the actionscript, the quicker and easier you will learn to write your own code!
Quote: 'When you come across a problem, find the solution, and remember the solution!'
Actionscript is extremely precise, 100% to be exact, so you will need to become really familar with the languange, and this is obviously achieved through constant use of actionscript, trying different things, solving code errors. Learning to solve code errors is definately a really effective way of developing your skills. It doesn't matter in the slightest if you have to Google the solution, your job is to remember the mistake, and REMEMBER THE SOLUTION!
Get to know the basics, before progressing to more advanced actionscript you should at least know some of the most basic lines of actionscript. For example, a very common line that you will use very regularly:
'gotoAndPlay(2)' - This tells Adobe Flash that you want it to go to the
second keyframe on the timeline, and play. Timeline control is definately something you need to understand, and luckily, it is really easy to pick up. This line of code doesn't really achieve much though. To make this more detailed, you could make it,
'on (release) {gotoAndPlay(2)}' - This actionscript would work perfect
with a play button.
That may only be one line of actionscript,and a very simple line, but it's a start. And in no time you should be able to memorise that and use it regularly without even thinking about it. Of course you will eventually need to use much more sophisticated actionscript, but once you have mastered the basics, this won't seem so daunting. And these tutorials will ease you in to the process.
Summary: Begin to learn actionscript and remember it, you should never copy and past, the idea is learn to write your own code, the more you type in the actionscript, the quicker and easier you will learn to write your own code!
Quote: 'When you come across a problem, find the solution, and remember the solution!'
Multiplying numbers
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
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
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
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 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.
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.
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.
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.
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.
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.
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.
Subscribe to:
Posts (Atom)