Inputting and Outputting variables
April 17, 2007
Concepts covered: Inputting variables, outputting variables and manipulating variablesBeing able to manage variables in Flash is a very important skill for people wanting to get into actionscript. This tutorial goes through basic inputting and outputting of variables and manipulating them.
Load up Flash and create 2 static texts field spaced apart one that says Input your name and the other that says Your name is. Underneath the Input your name text create a blank input text field that has a border around it. You do this by selecting the show border around text option.
Stick the words namebox in the instance name box just under the type of text.
Under the Your name is text create a new dynamic text box. Make sure that the font colour is black so that you see it when you are outputting. Stick the word name under the variable heading; var.
Create a new button somewhere on the stage and add the following code to it.
on (release){
name=namebox.text;
}
This code says that once the button is released the name variable will be the same as namebox which is in a text field.
Text the movie to see if it works. If everything is done correctly you should be able to input your name into the input text box and once you press the button your name appears as the dynamic text.
You could output your name properly if you want to. The trace function in Flash outputs data to the screen. Adding the trace function to the code ends up like this:
on (release){
name=namebox.text;
trace(name);
}
Notice how name is set before it is outputted to the screen? If it wasn?’t the variable would be shown as undefined.
Using the same style of programming you can make a calculator of sorts.
Create a new Flash file and add the an Input numbers to be multiplied,1st number, 2nd number and The result is static textboxes in the appropriate positions. Underneath the 1st and 2nd number titles make an input text field one which has the instance of no1 and the other with no2. Under the result title make a dynamic text field with the variable result. Create a well placed button and insert the following code into it:
on (release){
result=no1.text*no2.text;
}
The code is similar to the previous code. It sets the variable result to be what the result of multiplying the 2 inputted variables as on the buttons release. You can add trace to this one if you would like.
These basic examples can lead the way for some larger programs. You can create calculators with various buttons that change the inputted text or a form asking you to fill in your details and then showing a results page with your inputted values.
If you have any difficulty with creating these programs then I advise that you download my samples and see where you went wrong.
Posted in Tutorials | Comments (0)
Following Cursor
Assumed knowledge: Basic Flash Navigation, Object creation and Basic Actionscript knowledge
Concepts Covered: Commanding a movieclip to follow the X and Y values of your cursor
This is probably my favourite little Flash program that I have made. Its so simple, anyone can do it.
Load up Flash and create a movieclip with something clearly visible inside it. All that?’s left now is to insert the code.
This is the code that you put into your movieclip.
onClipEvent(enterFrame){
this._x=_root._xmouse;
this._y=_root._ymouse;
}
Lets look at this code.
onClipEvent tells the program that once an event happens in the movieclip then?’. The condition in the brackets is that event. In this case once the current frame is entered. The { sets us up for the action which is about to occur when the frame is entered. This?’ is referring to the current movieclip which the code is in. ._x is referring to the x value. Equals sets the value to be the same as the other value. _ root._xmouse looks for the x value of the mouse. The ; closes off the action. The code on the next line is the same but for the y axis. The { closes off the code.
What this means as a whole is that once the frame is entered then the x and y values of the current movieclip are the same as that of the mouse.
You can do what I like to do and edit your movieclip so that it looks pretty. I made a little planet and a moon in my example which can be found here:
Posted in Tutorials | Comments (0)
Editing and Animating Text
Ever wanted to change the way that your text looks in Flash MX? Then make it animate and do cool effects? This tutorial goes through most of the common ways.
Editing Text
This is relatively simple and can be achieved through just playing around with the Text properties.
Firstly select the Text Tool
Then type any text that you want into the text field that you create. Try to keep the text field at the right length to avoid creating a new line. I chose to work with Raven.
Look down at the properties bar and make sure that the font is static text.
Okay now we have our text lets have a little play around with it. In the Text properties play around and choose a font that you like I chose Arial Rounded MT Bold. Chose the type of script, it is probably better to leave it as normal. Chose the A/V tool and space out the text.
My text now looks like that:
You can have a play around with the bold, italics and its aligning too if you want to but that doesn?’t provide much to do if you want to change the way your text looks. To change the text we would break it apart and craft it the way we want it to be.
Select your text and press Ctrl +b, which breaks the text into letters, you can move the letters around and make the text look strange if you want to.
But if you want to edit your text even more select all of the letters and press Cntrl + b again. Now they are all shapes that you can freely edit. So have a play around and change how your text looks. Use the arrow tool and change the edges of the text. Heres what I made:
You can use the text and edit it in anyways that you can with a normal object. I used the color mixer and added a radial effect to my text, so it looks like this.
The sides are white and had no alpha effects for those who are experienced. But if you use a different colored background then choose the matching color or set the white to 0 alpha. Setting it to 0 alpha and the background colour give off basically the same look. That is probably most of the text effects that you can do in Flash MX. Its all really up to you depending on what you want your text to look like.
Alpha Tweening
So you can make text look pretty cool in Flash MX, well how about animating the text? Making it do cool tricks. This can all be achieved using Flash MX?’s symbol properties and basic tweening.
Firstly type in some text and right click on the text and convert the text into a movieclip.
Okay now we have our movie clip. Right click 20 frames into the timeline and make a key frame.
Now in frame 20 select the movieclip and go to it?’s properties. On the color drop down menu select alpha and set the alpha to 0.
Right click in the timeline. Anywhere except for the 1st and 20th frames and create a motion tween. Press Ctrl+ Enter to export the movie or select Test movie from the Control tab.
Wow look we have a cool alpha tweening effect! You can make a new key frame at frame 40 and tween the Text back to normal alpha if you want to so that the movie looks complete. This is only one of many animation effects that you can do with text. Of course you could do the same thing but use colors by tinting the movie clip. But this tutorial has taught you the basic system for changing what text look likes through animation. Not only can you use text but you can use anything as long as you follow that system.
Tweening letters
So far we have learnt how to break apart text and how to animate text. This part of the tutorial combines some of the best bits of the rest of the tutorial to create something neat.
Start off and create some text and break it apart into shapes. Select each letter and convert them into movieclips. Create a few new layers and cut and paste each letter onto a separate layer. When you paste your movieclip right click and select paste in place.
Now we have all of our letters on separate letters. On each of the layers create a keyframe at the end at frame 30.
On frame 30 select each separate letter and move them offstage, do this for all of the letters. Then make every layer have a motion tween and test your movie. See how all of the letters separate. That?’s the effect! For more information on tweening keep on reading.
Easing
When you tween an object in Flash MX you can make it move faster or slower depending on what you set the ease to. Create a tween be it a motion tween or a shape tween and select the ease in the tween properties.
Change the ease to what you want it to be. The best way to discover tweening is to tween objects yourself and test. It?’s a nice effect when used well.
Now you know how to create cool looking text and are able to apply cool animations to them.
If you would like the Fla. Version of all of what is set in this tutorial then click below to download it. Each section is put into a scene, to play just a scene press Cntrl + Alt + Enter or click test Scene under Control. Raven?’s showpiece is a little movie that shows some effects that can be done with what has been done in the tutorial.
Posted in Tutorials | Comments (0)
« Previous Page — Next Page »
Post RSS
For your consideration, a blog about video games as written by myself:
