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:
ActionScript 3 Classes: Part 1
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
Event Listeners
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.
New this week
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.
Post your questions or code snippets
I seem to be getting a number of people landing on this site every day, but not a whole lot of interaction with anyone. I really want to help people learn and understand Flash CS3. If you have questions, comments, code you want to discuss, or tutorials you’d like to see, please let me know. I just want to help you get to where you want to be with Flash. Seriously, I can help you with anything in Flash.
I want to make tutorials that are helpful to people using flash, so please post a comment with your tutorial wishes and I will oblige.
3D Flash Carousel
I’ve built a 3D flash carousel that I wanted to share with you all. Here is the source code for it: 3D Carousel
Building a Flash Video Player: Part One
This is part 1 in a multiple part series about building a Flash video player. In this tutorial we start building the player control bar.
Click here to get the source code for this tutorial
Note: You can watch the videos in full screen by clicking the full screen button on the tutorial’s control bar.
Full Screen in ActionScript 3
I’ve gotten several hits from search engines with the keywords “Full Screen” and I don’t have anything on here that actually shows how to do full screen. It’s pretty easy. Here is the code:import flash.display.StageDisplayState;
function goFullScreen():void
{
if (stage.displayState == StageDisplayState.NORMAL) {
stage.displayState=StageDisplayState.FULL_SCREEN;
} else {
stage.displayState=StageDisplayState.NORMAL;
}
}
stage.addEventListener(MouseEvent.CLICK, _handleClick)
function _handleClick(event:MouseEvent):void
{
goFullScreen();
}
This code is pretty simple. What it does is make the Flash movie go full screen when you click anywhere on the stage. This could easily be tweaked so that it responds to a button click.
Keep in mind that this will only work when you view this in the browser. It’s doesn’t work when compiled inside of Flash CS3.
One thing you want to make sure of is that your embed code has the
<param name=”allowFullScreen” value=”true” /> tag in the param tags list as well as the allowFullScreen as an attribute in the embed tag. Here is an example:
<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0″ width=”550″ height=”400″ id=”Untitled-3″ align=”middle”>
<param name=”allowScriptAccess” value=”sameDomain” />
<param name=”allowFullScreen” value=”true” />
<param name=”movie” value=”Untitled-3.swf” /><param name=”quality” value=”high” /><param name=”bgcolor” value=”#ffffff” /> <embed src=”Untitled-3.swf” quality=”high” bgcolor=”#ffffff” width=”550″ height=”400″ name=”Untitled-3″ align=”middle” allowScriptAccess=”sameDomain” allowFullScreen=”true” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” />
</object>
Let’s Build a Flash Video Player
For those who are interested, the next few tutorials that I will create will be based on building a custom Flash video player from scratch. I will cover topics such as packages, classes, inheritance, and full screen, so stay tuned.
Buy Flash Components
I’ve discovered a site where you can purchase Flash components for cheap. Check it out here: Flash Components.
