Posted by: bmorrise on: February 24, 2009
You can find the code for this tutorial here: Classes_2.zip
One of the most important parts of Object Oriented Programming is that of creating classes. In the last tutorial on classes I went over how to create a simple class that represented a ball.
In this tutorial will be talking inheritance using simple definitions for shapes.
Inheritance means that you create a base or abstract class that has characteristics that are common and then create child classes that have characteristics of the base class plus their own individual characteristics.
For example:
You could create an object called Car and give it the properties of having four wheels, an engine, a windshield and so on. Then you would create child classes that inherited from the Car class called Truck, Sedan, Compact and they would have their own properties.
For this code example I will use Shape as the base or abstract class and then extend it to make two child classes called Circle and Square. Here is the code as follows:
This will be a file called Shape.as and would be in the same folder as the Circle.as and Square.as
package com.display
{
public class Shape
{
public var color:String;
public function Shape(color:String)
{
this.color = color;
}
}
}
Our shape class is pretty simple and only has one property: color. All of our shapes that we create will at least have a color. Let’s look at this line of code:
this.color = color;
this.color denotes that it’s the variable associated with the class and not the one being past into the function.
Now we’ll look at our two child classes:
Once again, this would be in a separate file called Circle.as. It’s important that you name your files the same as the class name or it won’t work.
package com.display
{
public class Circle extends Shape
{
public var diameter:Number;
public function Circle(color:String, diameter:Number):void
{
this.diameter = diameter;
super(color);
}
}
}
This is block is in a file called Square.as that is in the same folder as Shape.as and Circle.as
package com.display
{
public class Square extends Shape
{
public var width:Number;
public var height:Number;
public function Square(color:String, width:Number, height:Number):void
{
this.width = width;
this.height = height;
super(color);
}
}
}
Each of these classes have their own properties and the extend the Shape class. Meaning that although the Circle class has a diameter, it also has a color because it’s a child class of the Shape class.
Let’s look at the following line:
super(color);
Each of these classes have this line and all it means is that it’s calling the constructor from the parent class and passing the color value into it.
That’s all for this tutorial. Please leave comments about questions you may have.
Posted by: bmorrise on: February 10, 2009
I’ve started a new website called flashminigames.net that will have a bunch of mini games that can be embedded on any website. I would be happy to share with anyone the source code for these games, just let me know which games you’d like to see. Currently the selection is pretty thin, but we’ll be adding more every week, so keep checking back.
Posted by: bmorrise on: February 7, 2009
Here is a very nice blog entry that I found for tracking your Flash with Google analytics:
http://analytics.blogspot.com/2008/11/want-to-track-adobe-flash-now-you-can.html
Posted by: bmorrise on: January 26, 2009
One useful thing to do while programming is have a timer that fires every so often to repeat a specific action such as a picture fade. You create and use a timer thus:
//Imports the appropriate library files
import flash.utils.Timer;
import flash.events.TimerEvent;
//Create a timer that will fire every 1000 milliseconds or every second
var timer:Timer = new Timer(1000);
//Add a listener that gets called every second when the timer fires
timer.addEventListener(TimerEvent.TIMER, handleTimer);
//Start the timer
timer.start();
//The handler that runs every second
function handleTimer(event:TimerEvent):void
{
//Do whatever you want to do
trace("timer");
}
Posted by: bmorrise on: September 29, 2008
Just for fun on Saturday I built a 2D lego builder in Flash. It’s not polished and has many bugs, but it was fun to make. You can check it out here: http://www.morrise.com/legos.html. If you would like the source for it I would be glad to share. Just drop a comment and I’ll tell you the link.
Posted by: bmorrise on: September 25, 2008
I one week I will be launching an new tutorial site based on Flash and Flex development. I’m purchasing a domain and will host it on a server so that I can embed the movies directly onto the site. If anyone has any input on what they would like to see for the new site, it would be appreciated. I plan on having a whole new set of video tutorials and a large set of sample code.
Posted by: bmorrise on: June 27, 2008
I’m in the process of building a bulletin board in Flash. It’s not your typical bulletin board. It looks like an actual visual board. I created two versions so far. One allows you to add text and pictures to the notes that you put on the board, but I didn’t like how I created it so I took that part out. The current version isn’t much, but it does have load and save functionality. So, here it is:
Posted by: bmorrise on: June 3, 2008
ActionScript 3 is an object oriented programming language. I’m going to explain what that means in a minute, but there is also a good definition at Wikipedia. So far there are two things that we’ve talked about that are used in objects. The first is variables and the second is functions.
Objects contain both of these things. To think of an object in programming I’m going to use a real world example:a ball. Here is a list of the properties of a ball:
Color
Diameter
Weight
Texture
And here are some of the things that a ball might do:
Bounce
Pop
Inflate
So, this ball is our object. Now let’s convert this over to code:
//Ball.as
package
{
public class Ball
{
public var color:String;
public var diameter:Number;
public var weight:Number;
public var texture:String;
public function Ball() {
}
public function bounce()
{
//Bounce code
}
public function pop()
{
//Pop code
}
public function inflate()
{
//Inflate code
}
}
}
Unfortunately, the source code here comes out unformated in WordPress, but imagine it will indentations an so forth. Okay, so now that we have created our Ball class, what do we do with it? From our class comes an object like so:
var myBall:Ball = new Ball();
myBall.color = "red";
myBall.diameter = 10;
myBall.inflate();
trace(myBall.color);
There are some examples of creating a new ball and setting some of its properties and calling some of its methods. A method is what we call the function that is part of the object.
Okay, let’s look at the code line by line:
First we have the package block which tells us where the class file is located. the Ball.as file should be in the same directory so we just use package. If we would have created another directory where the BallTutorial.fla file is located called classes then we would have used this:
package classes
You can even nest files further. We could have created the following directory structure:
\classes\other\something\Ball.as
In this case we would use:
package classes.other.something
The reason we do this is because we could have two classes with exactly the same name, but put them in different packages. Remember, the package has to reflect the file location or it won’t work.
Next we have the public class Ball block. This declares our class as being public. I’ll explain what this means in Part 2. The class is called Ball. It’s important to note that the file name need to be the same as the class name, which is why we called this file Ball.as.
The next few lines is where we define the properties of the class which are variables. The are defined in a similar fashion as we’ve defined variables before, but this time we use the public keyword.
Next we have the method definitions. The methods are just function declarations that we have done before, but we’ve also declared these as being public.
One thing to note is that we have a function called Ball. This is called the constructor. The constructor is a function that is automatically called when we instantiate the object. Instantiating the object is just the act of declaring a new Ball variable. You can see how this works by putting a trace statement in the constructor before you test the code. You’ll see that the trace statement is executed automatically without having to call the Ball function. The constructor is case sensitive, so make sure you get it right.
And that’s our class definition. As you can see in the second block we access the properties and methods with the dot operator: myBall.color or myBall.inflate() are examples.
In order to get to work you’ll want to create a new Flash file and call it BallTutorial.fla. Then you’ll want to paste the second block of code into the first action pane. Then create a new file called Ball.as and make sure you save it in the same directory as the BallTutorial.fla file. When that is done you should be able to run the BallTutorial.fla file and see the trace output.
The source code for this tutorial can be found here: BallTutorial.zip
Posted by: bmorrise on: June 2, 2008
Event listeners are an important part of Flash. What they allow you to do is to “listen” for an event that occurs on a specific object. For example, one event that often occurs in Flash is a button getting clicked. When a button is clicked the button object dispatches an event telling flash that is was clicked. Often times we want to respond to a click and function. Say we have a window that pops up and on the window there is a cancel button. We want the window to close when the cancel button is clicked. Here is the code:
cancelButton.addEventListener(MouseEvent.CLICK, handleClick);
function handleClick(event:MouseEvent):void
{
//Write the code here that closes the window
}
In this example I have added a button to the window and given it the instance name cancelButton. This allows me to listen to that button and respond to the events.
Posted by: bmorrise on: May 27, 2008
This week I am going to post some new tutorials. I’m going to create the follow-up post for the video player tutorial and a new drawing tutorial.
Recent Comments