Posts tagged ‘as3 tutorial’
Beginners Flash Tutorial – ActionScript Operators
For users who prefer to learn Flash visually we have a range of Adobe Flash CS3 video tutorials, this method of training greatly enhances learning and allows beginners to master even the most complex aspects of Adobe Flash with ease.
View the Beginners Flash CS3 Tutorial Video
Beginners Flash Tutorial – ActionScript Operators
Conditionals
In this Flash tutorial we’ll look at decision-making in Actionscript 3.0 using conditional statements. For example you might want a certain piece of code to execute under a certain circumstance and another piece of code to execute under different circumstances, ActionScript 3.0 like most programming languages uses conditionals to deal with these situations. To simplify ActionScript creates a test asking whether conditions are met, if the condition is met the test will evaluate to true and if the condition is not met alternative action is taken. In these examples we’ll be using some symbols known as comparison and logical operators. Below is a list of both types of operators you should familiarise yourself with before going any further.
Download the working files used in this tutorial »
Comparison Operators
== is equal to
< is less than
> is greater than
>= is greater than or equal to
<= is less than or equal to
!= is not equal to
Logical Operators
%% And
|| Or
! Not
If and Else Statements
For these examples we’re going to use some TextField and TextFormat properties to help explain the code a bit better, below these objects are briefly explained.
We create a new TextField object and call it theText. This creates an instance of the TextField class and gives us access to all the properties, methods and events of that class.
var theText:TextField = new TextField();
Next we create a TextFormat object called theFormat, again giving us access to all the properties, methods and events available to that class. The TextFormat class will allow us to change the colour properties.
var theFormat:TextFormat = new TextFormat();
Setting the colour format to red using the color property.
theFormat.color = 0xFF0000;
Populating the TextField with the word “hello” using the text property.
theText.text = "hello";
Combining the TextFormat properties with the TextField.
theText.setTextFormat(theFormat);
Adding the TextField to the stage using the addChild() method, making it visible when the file is published or previewed.
addChild(theText);
The if Statement
The first condition we’ll look at is the “if statement”, with if statements your essentially asking if something is true or not. To use the “if statement” we start out with the “if” keyword to declare that we are using an “if statement”. Inside the brackets is the condition and inside the curly braces is the code that’ll execute if the condition inside the curly braces is met. For our code below we’re asking if the text inside the theText TextField is equal to “hello”, it is so therefore the code inside the curly braces is executed and the text is traced out in the output window when the file is previewed.
Example;
if(theText.text == "hello")
{
trace("the text inside the text field says hello");
}
Adding an else statement
So what happens if you want some code to execute if the code returns a false value or doesn’t add up? For this we use the else statement, the else statement executes when all the other conditions aren’t met. In our code below we’re asking if the text inside the TextField is equal to “goodbye”, it isn’t therefore the else statement is executed and the trace statement is traced into the output window when the code is previewed.
Example;
if(theText.text == "goodbye")
{
trace("The text inside the text field says goodbye");
}
else
{
trace("The text inside the text field doesn't say goodbye");
}
else if Statement
What happens if you want to execute more than one if statement? Unfortunately we can only use one if statement and one additional else statement, but there is a way around this with the use of the else if statement. Think of the else if statement as just an alternate if statement. In our code below the “if statement” returns a false value so the code moves onto the else if statement, the else if statement condition is true so the trace statement inside the curly braces is executed.
Example;
if(theText.text == "Goodbye")
{
trace("the text inside the text field says goodbye");
}
else if(theText.text == "hello");
{
trace("The text inside the text field says hello");
}
Using switch Statements
As you may have noticed if statements can be rather bulky and can take a while to read through, this can be a particular pain when coming back to old code you haven’t seen in a while. An alternative method is to use the switch statement to shorten the code, let’s convert the code from the previous example into a switch statement. In the example below we start out with the switch keyword declaring that it’s a switch statement, inside the brackets is the object we want to evaluate, the case line represents the possible value and the trace statement executes if the test is successful. Finally the break line indicates the end of each case.
Example;
switch (theText.text){
case "goodbye" :
trace("The text inside the text field says hello");
break
case "hello" :
trace("The text inside the text field says hello");
break
}
Beginners OOP ActionScript Tutorial – part 3
For users who prefer to learn Flash visually we have a range of Adobe Flash CS3 video tutorials, this method of training greatly enhances learning and allows beginners to master even the most complex aspects of Adobe Flash with ease.
View the Beginners Flash CS3 Video Tutorial.
Instance Variables
Instance Variables are variables that are contained in each ‘instance’ of the Class; so every instance of the TextHandler Class will have it’s own TextFormat variable. Instance Variables should be initialised (given an initial value) in the constructor function, which is called whenever an Object of the Class is created. It is important, however, to refer to the instance variables outside the constructor, as in the above example, so that they are ‘visible’ to the entire Class.
Constructor Function
When you use the keyword ‘new’ to create an Object of a Class, what actually happens is that the ActionScript code within the constructor function for the Class is executed, returning an Object of the Class. The constructor function does not have to have the return type specified, as it is identified by having the same name as the Class itself.
To illustrate, imagine you wanted to create several of the TextHandler Objects, each with different formatting (i.e. different colour, font etc); you could alter the Class declaration so that the constructor function takes parameters indicating e.g. the colour, and these properties of the TextFormat object could be set within the constructor code. This way your main application code could create several different Objects of the TextHandler Class, each handling the textfields that you want to format in the same way (make the changes to your Class declaration and Flash document code):
//class code constructor
public function TextHandler(col:Number)
{
tf=new TextFormat();
tf.color=col;
}
//main code creating object
var myHandler:TextHandler = new TextHandler(0xFF0000);
To test this, place another dynamic textfield on your stage and name it other_txt, again with arbitrary text in it. Now add the following to your Flash document code:
var otherHandler:TextHandler = new TextHandler(0x0000FF); otherHandler.formatText(other_txt); //When you test the movie, other_txt should appear blue.
This trivial example may appear odd at first, but once you have gotten into the habit of thinking in terms of Objects, you’ll soon see how the techniques can save you a lot of stress. Experiment within your applications by creating Classes and Objects, with the following additional guidance:
- Functions can have as many parameters (of any datatypes) as you need, but can only have one return type; you must declare this when you devise the method (as in the stripChars function above where the return type is specified as String).
- The functions within a Class that are declared with the keyword ‘public’ are those that can be called on any Object of that type, wherever it has been created, as with the formatText method above.
- Additionally, Classes may feature private functions that are for use within the Class only; these are referred to as ‘helper’ functions and are used in much the same way as the stripChars function was in our original example. You will use such functions within your Classes where processing is repetitive or where the code contained within a function becomes overly long or complicated.
Class Overview
Look again at the (amended) version of your TextHandler Class declaration. In terms of the interface, the Class contains a constructor function (which takes one parameter of the type Number, representing the colour) and a single function for formatting text, which takes one parameter of the type textfield, and returns nothing.
Try adding more functions to the Class – e.g. add the stripChars function, using the keyword ‘public’ in front of it, then try calling it from your movie, passing it a String as in the original example.
In theory, the TextHandler Class could have been created by someone else and you could still use it as long as you know: what the Class is for, what the functions are called (and what their purpose is), what parameters they take, and what data they return, if any. If you think about it, this is all you know about the built-in Classes that you use regularly.
The ‘interface’ can also be made more explanatory through the use of documentation and comments, as is the case with the built-in Classes. You can see an example of this with the official Adobe documentation for the TextFormat Class in ActionScript 3.0 here: http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/text/TextFormat.html
- this gives you limited insight into the TextFormat Class declaration.
As with the stripChars helper function example above, if at any stage during your development process, you decide to change any of the implementation details within your Classes’ functions, you should be able to do so without upsetting any other code, as long as your interface remains the same. e.g. If you decided to change the for loop in the stripChars function to a while loop (for whatever reason) it wouldn’t affect the rest of the code, as long as it performs the same function.
Summary
The Object Oriented design method is a good way to achieve well-organised applications, but the success of the technique does depend strongly on Classes being defined in a clear manner. If you’re struggling at all to grasp the technical notions, have a try at using Classes anyway; as long as you stick to the principles outlined above, you should be able to define and create useful Objects.
It can be challenging to understand these notions when you’re starting out as a programmer and have built only relatively small applications. However, even where you are developing applications single-handed, Object Oriented design can make for efficient programs that are easily manageable.
If you’re interested in exploring Object Oriented development further, advanced areas to study include: Packages; Inheritance; Polymorphism; Interfaces; Abstract Classes.
Beginners ActionScript Object Oriented Programming part1
For users who prefer to learn Flash visually we have a range of Adobe Flash CS3 video tutorials, this method of training greatly enhances learning and allows beginners to master even the most complex aspects of Adobe Flash with ease.
View the Adobe Flash CS3 Tutorial.
Object Oriented Programming with ActionScript – part 1
As your Flash applications grow more complex, relying on substantial amounts of ActionScript code, efficiency will become more of an issue. Applications that use well-organised code are more reliable, and lend themselves better to future extension. One approach to developing such systems is Object Oriented design, which we will explore in this tutorial. Even if you’re new to the concept of Object Oriented design, you may find that you have already adopted some of the techniques on which it is based.
The Concept of OOP with ActionScript
You will likely already have used Objects in your ActionScript code whether you’re aware of it or not. For example, your code may have used the TextFormat class:
var tf:TextFormat = new TextFormat();
In this example, we create a new Object of the Class TextFormat. This means that the Object has the properties and behaviour that are defined in the TextFormat Class declaration. This Class is part of ActionScript itself, and you can therefore create and use TextFormat Objects just by inserting the single line above. With Object Oriented design, you will be designing your own Objects, by creating Class declarations for them in ActionScript, then importing them into your Flash for use there.
The concept of Object should be familiar to you if you have used Library items and Symbols in Flash. When you create a MovieClip, for example, and define what happens within it, the MovieClip symbol in your library is like a blueprint or prototype for that kind of Symbol. When you then use instances of the MovieClip Symbol within your Flash movie itself, each of these instances has the properties and behaviour that you defined when you created the MovieClip originally. This process is analogous to what you’ll do with your ActionScript Classes. The Class declaration is where you define the properties (in ActionScript) that any instances of the Class will have when you create them, as with the TextFormat object above.
Well-organised code
The reason for adopting any design methodology is to produce applications that are reliable, efficient and easy to perform future amendments or extensions upon. This is similarly the case with Object Oriented development. To begin, we will look at some of the simple efficiency measures that you can take during your regular programming routine, and demonstrate how these form the basis for the Object Oriented approach.
There are many techniques to achieving well-organised code when creating Flash applications. The simple act of including plenty of comments and whitespace in your code makes for a component that is easier to debug and extend. Similarly, organising your code into sensible chunks of related processing is helpful. When doing this, creating what are referred to as ‘helper’ functions (something that you may have already done), illustrates the basic principle behind Object Oriented design.
Let’s look at a simple example. When you are writing ActionScript code, you will often find that you are carrying out similar processes repetitively. When this is the case, you should consider creating functions to carry out those processes, effectively allowing you to cut down on the amount of code you need to achieve the same functionality. Imagine you have a Flash movie that contains several text Strings whose content varies, maybe the text is being imported from some external file which has unpredictable content. You have decided that you don’t want to display any content that isn’t alphanumeric, i.e. you only want letters and numbers. For this reason you will have to perform text processing on each of the Strings before you display them. Your code might look like this (feel free to paste this into a Flash document to try it out – don’t worry too much about the String processing code if it’s unfamiliar to you, the details are unimportant, but pay attention to the overall structure of the code):
//strings - nonsense var first_str:String="kdfHGKj kkv e$ deagf% /.;fghlkjsf'h'"; var second_str:String="bcn'l;gH;'(fghsf "; var third_str:String="bcnf..,\\gj[] *dFG"; //strip out non alphanueric from first var firstStripped_str:String=""; for(var i:Number=0; i="0" && ch<="9") || (ch>="a" && ch<="z")) firstStripped_str+=first_str.charAt(i); } trace(firstStripped_str); //strip out from second var secondStripped_str:String=""; for(var j:Number=0; j="0" && ch<="9") || (ch>="a" && ch<="z")) secondStripped_str+=second_str.charAt(j); } trace(secondStripped_str); //strip third var thirdStripped_str:String=""; for(var k:Number=0; k="0" && ch<="9") || (ch>="a" && ch<="z")) thirdStripped_str+=third_str.charAt(k); } trace(thirdStripped_str);
This can be easily improved by making a ‘parameterised’ function, meaning a function that will carry out the same processing but which takes the Strings as parameter, making it adapt to each different circumstance:
//strings - nonsense
var first_str:String="kdfHGKj kkv e$ deagf% /.;fghlkjsf'h'";
var second_str:String="bcn'l;gH;'(fghsf ";
var third_str:String="bcnf..,\\gj[] *dFG";
function stripChars(my_str:String):String
{
var stripped_str:String="";
for(var c:Number=0; c="0" && ch<="9") || (ch>="a" && ch<="z"))
stripped_str+=my_str.charAt(c);
}
return stripped_str;
}
trace(stripChars(first_str));
trace(stripChars(second_str));
trace(stripChars(third_str));
Notice how much more concise the code is – test the movie to check that both versions of the code have the same effect. What you have done is to give the function ‘responsibility’ for the text processing. One of the advantages to doing this is that, if you decide to change the process in any way, you only have to do it in one place (within the function) – this is a single ‘point of change’. Eventually, when you have gotten into the habit of thinking this way when writing your code, you will start to anticipate the practice, rather than carrying it out retrospectively, and will save yourself a lot of time and effort in doing so.
While the above technique does make the code more efficient, it is still ‘procedural’ rather than Object Oriented in structure. Procedural programs are basically a series of instructions being executed in turn. When the movie is run, the code listed on the main timeline is executed in a linear fashion, i.e. each line is processed one after the other until the machine is instructed otherwise. To adopt Object Oriented design, we need to extend the notion of creating ‘helper’ functions, and to develop ‘helper’ Objects to carry out the processing within a movie. In the same way that we allocated the text-processing responsibility to a function, we can assign responsibility for the individual parts of an application to Objects – we can ‘delegate’.
Flash Tutorial – Drawing Lines and Shapes with ActionScript
For users who prefer to learn Flash visually we have a range of Adobe Flash CS3 video tutorials, this method of training greatly enhances learning and allows beginners to master even the most complex aspects of Adobe Flash with ease.
View the Flash CS3 Tutorial Videos .
Flash Tutorial – Drawing Lines and Curves using Actionscript 3.0
We all know you can create shapes and lines in Flash using the many drawing tools, but did you know you can unleash the power of ActionScript to create shapes on the fly.
In this Flash tutorial we’ll be looking at how to draw lines and curves using Actionscript 3.0. In the examples below we’ll use methods from graphics class to draw out the lines and curves. The benefit of drawing in Actionscript rather than using tools from the Flash interface is that it makes for a much smaller file size. Below we’ll go through the code line by line and draw out the line and curve in shown in the example .swf file.
Drawing Lines
First thing we’ll look at is how to draw a simple line. We’ll first create a new Sprite object called “container”, this will hold all our graphical information for the line. A Sprite is just a Movie-Clip without a Timeline.
Open up Flash and launch the Actions Panel.
var container:Sprite = new Sprite();
To display the new Sprite object or add it to the stage we use the addChild() method. This makes it visible when you preview or publish the file.
addChild(container);
Next we want to draw the line itself, our first task is to choose the style of the line. To do this we use the lineStyle() method, the lineStyle() method has 3 parameters available to it thickness, colour and alpha scale. Thickness is measured in pixels, colour is in decimal format and finally alpha scale, which is an optional parameter measured in percent (1 = 100%, .5 = 50%). We assign this method to the graphics property and then assign that graphics property to the Sprite object, so that everything is added to the Sprite object.
container.graphics.lineStyle(3,0×333333);
Now that we have the style properties of the line it’s time to decide on our starting point. The starting point will indicate where we are drawing from, to declare the starting point we use the moveTo() method. This method requires 2 parameters, X and Y position. The X and Y values will indicate the starting position of where we want to draw from.
container.graphics.moveTo(20,20);
We have the starting points and are now ready to draw the line. The starting point needs an ending point or somewhere to draw to. Using the lineTo() method we declare the point we’re drawing to. The lineTo() method uses the same parameters as the moveTo() method, the only difference is with the lineTo() method we’re declaring where we are drawing to instead of where we are drawing from.
container.graphics.lineTo(450, 20);
It is possible to draw shapes by continuing to use the lineTo() method, as Actionscript executes in linear fashion we can also change the style of the line at any given point. Adding the code below to the code we’ve already written draws a small rectangle, we draw out the rectangle but change the style of the line by inserting a new lineStyle() method. This means the last two lines will be drawn in red.
container.graphics.lineTo(450,50);
container.graphics.lineStyle(3,0xff0000);
container.graphics.lineTo(20, 50);
container.graphics.lineTo(20,20);
Drawing Curves
Drawing curves is also pretty straight forward but instead of using the lineTo() method we use the curveTo() method. The curveTo() method also works with the moveTo() method to determine our starting point. The curveTo() method however requires 4 parameters, x and y positions of the curve and X and Y positions of the ending point. Using this code below will give us a nice red curve.
var curve:Sprite = new Sprite();
addChild(curve);
curve.graphics.lineStyle(3,0xff0000);
curve.graphics.moveTo(50,150);
curve.graphics.curveTo(225, 0, 450, 150);
For a more clear explanation look at the diagram below, you can see the moveTo() starting points indicated by the arrow. The curveTo() parameters are also highlighted in green, the first 2 parameters show the X and Y points of the curve. The final 2 parameters also highlighted in green show the X and Y points of where the ending point of the curve is.
In the next Flash Tutorial we will move on to creating Shapes with ActionScript
