Image Smoothing in Flex

One of the things that I had a problem with in the beginning of my Flex development was getting images to look nice when they were scaled to a smaller size. If you’ve ever used the Image component to display a bitmap image, you’ll know what I’m talking about. Images can get very jagged as they are scaled down. One approach that I have found that is very effective in getting better image quality with scaled bitmaps is Image Smoothing. Image smoothing can be achieve in a variety of ways, but the approach that I prefer is to extend the Image component to allow for smoothing. The code is pretty simple:

package components
{
    import flash.display.Bitmap;
    import mx.controls.Image;

    public class SmoothImage extends Image
    {
        override protected function updateDisplayList (unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList (unscaledWidth, unscaledHeight);

            // checks if the image is a bitmap
            if (content is Bitmap)
            {
                var bitmap:Bitmap = content as Bitmap;
                if (bitmap != null && bitmap.smoothing == false)
                {
                    bitmap.smoothing = true;
                }
            }
        }
    }
}

Name Change to Flash Platform Development

Originally, this blog was targeted at Flash CS3 developers, but with the arrival of the Flash Platform concept from Adobe, I want to change directions just a tad and blog about the platform as a whole and not just the Flash piece. For more information on the Flash Platform, go to http://www.adobe.com/flashplatform/.

A majority of the blog entries will be ActionScript 3 based, but they will deal with Flex Builder 3 and Flash Builder 4, which is due to be released in the early parts of next year.

Google Code Flex Project: Gallery Builder

I’ve started an open source project on Google Code.  It’s called Gallery Builder. I have several photographer friends who want a solution for organizing photos for clients and allowing them to select and purchase the photos they want. Gallery Builder is going to be a platform on which photographers can add clients, galleries, and images as well as create custom email messages for clients.

On top of that will be a shopping cart interface that will integrate with PayPal, which allows the photographer’s clients to login in using a password and view images for a specific photo shoot. The client can add images to a shopping cart and then purchase them through PayPal.

The front end is all Flex and the backend is PHP using AMFPHP for data communication between the client and the server. On the Flex side, we’re using the Adobe Cairngorm framework.

Since the project is hosted on Google Code anyone who wishes to be a part can. The project information is here http://code.google.com/p/gallerybuilder/. If you’re interested in being a part of the project, let me know and I can add you.

ActionScript 3 Classes: Part 2

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.

Embed Flash games on your site – flashminigames.net

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.

Tracking Flash with Google Analytics

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

Timers

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");

}

Lego Builder

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.

Visual Flex Bulletin Board

I’ve redone the Bulletin Board in Flex. It’s a lot more stable in this state and it’s XML based, so it runs much better. Check it out here:

http://bulletinboard.morrise.com

You can download the source code here:

http://bulletinboard.morrise.com/BulletinBoard.zip

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