Activetuts+

Create a Facebook Graph API App in Flash: Setup and Design – Tuts+ Premium

Sebastian Bratu — Wed, 23 May 2012 16:30:03 +0000

In this new mini-series of Premium tutorials, you’ll learn how to use Flash to build a Facebook Graph API application that can create slideshows for your public pages. This first part covers getting set up with the Facebook AS3 SDK, loading API info into Flash with JSON, and designing the app with Flash Professional.

Premium Preview

Click to try the app on Facebook.

This application allows you to select a Facebook album or event list from one of your public pages (not your personal profile) and turn it into a slideshow for your page tab. When the users enter your page, they will see photos from your chosen album, with your photo title and description, or event name, date and invites (for the Event tab).

In future parts of this series, we’ll create the actual Flash slider that does just that; meanwhile we’ll create the generator for the embed code that will reside at the Facebook application URL.

You’ll need to be logged in to Facebook in order to see this demo: https://apps.facebook.com/activetuts_tabmaker/

Read the Full Tutorial

Premium members can access the full tutorial right away!

If you’re not yet a Premium member, you can still read the first few steps for free.

Tuts+ Premium Membership

We run a Premium membership system which periodically gives members access to extra tutorials, like this one, from across the whole Tuts+ network. If you’re a Premium member, you can log in and read the tutorial. If you’re not a member, you can of course join today!

Also, don’t forget to follow @envatoactive on twitter, circle us on Google+, like us on Facebook, and grab the Activetuts+ RSS Feed to stay up to date with the latest tutorials and articles.

Workshop: Google Calendar – Critique

Ashish Bogawat — Tue, 22 May 2012 15:00:02 +0000

In this week’s critique, Ashish Bogawat gives us a detailed rundown of Google Calendar – specifically, its web-based front end.

Introduction

When it comes to web based calendar apps, pretty much the only name worth mentioning is Google Calendar. A number of contenders have taken a swipe at this category of apps over the years, but they have all either died off or metamorphosed into broader roles like project management or event planning. Google Calendar, meanwhile, has held on to its roots as a dedicated calendar app and has prospered into a ubiquitous web app – with some help from Gmail and Android. Its direct integration with the popular smartphone operating system and email service means it will continue to hold its top position for a while to come.

But what I want to discuss today is purely the web-based front end of Google Calendar. If you have been using it for a while, you will no doubt have realized that the app hasn’t changed much over the years. In times when design trends and standards are changing at a breakneck pace and everyone is feeling the heat to stay ahead of the curve design-wise – including Basecamp and a whole bunch of industry leading web apps – Google Calendar has stagnated as far as its UI goes. Let’s take a look then at how (and whether) it manages to stay relevant.

Intrinsically Google

The Google Calendar interface is not unlike most other Google apps – minimal, flat, low on visual hierarchy and decidedly under-designed. This is a good thing in some cases, bad in others. On a positive note, the interface brings pretty much everything you expect to see in your calendar right on to the surface.

To the left is a mini month calendar, a list of your calendars, and a pretty visible button to add an event. A predominant portion of the rest of the space is taken up by the actual calendar with events neatly marked out on dates or time slots depending on the view you choose. Flipping between a day, week, month or agenda view is simple and straightforward.

Hitting the arrow next to the “Create” button brings up an input field to quickly add an event with natural language meta data. So typing in “Meeting with john@doe.com at Central Park next Monday 4 pm” actually adds an event for the meeting with John Doe as an invitee, Central Park as the venue and 4 pm the next Monday as the time and date.

This can be a huge time saver, if you do use the web interface to add events. A big chunk of users don’t. Thanks to its integration with all kinds of apps and platforms, there are numerous ways in which events can go into Google Calendar, so I usually use it only as a dashboard of what my days look like time-wise. There are some nice touches on that front as well. Click an empty part of an event box on the calendar and a popup will appear with some more details. Hit the event text instead and you are taken to the event page with everything you might want to know or edit about the event.

Built for the Savvy

Google Calendar’s all inclusive, flat interface also proves to be its biggest flaw, depending on what type of user you are. Although the app can feel extremely intuitive to regular, savvy users, it can actually feel extremely overwhelming for first timers. There is simply too much on the screen with little differentiation and visual hierarchy built in to segregate important elements from secondary ones. The virtual lack of icons also doesn’t help here.

The interface is also not always very self-explanatory. Here’s an example: when creating an event, there is an input field labeled “Where”. It is not immediately apparent what the ideal contents of this field should be. It was only when I once entered a US address in the field that I realized that Calendar will automatically add a link to the map of the venue when it recognizes the content. Till that point, I used to simply type “conference room” or “skype” in the field oblivious of it true potential.

Google’s new header doesn’t help matters much either. Sure, you might search for events in your calendar once in a while, but the huge emphasis on the search bar blocking off a big chunk of real estate is not going to make you use it every time. In my 8-10 years of using Calendar, I don’t for once remember searching for a task. I typically need to look at what’s coming up in the next few days and the work week view is always enough for that. For longer term goals, there is always the month view.

Then there are the minor UI niggles that abound in all Google web apps. The “Save” button when adding an event is at the top, which means I need to scroll all the way up after finishing entering my details in order to save the event. The sidebar in an events detail page is super confusing with little clarity on list of attendees, adding people, etc.

Wrapping Up

In the end, Google Calendar is a one-of-its-kind-surviving web app that gets the job done pretty well. Sure, you need some getting used to is and often an engineer’s degree to figure out everything the app can do for you, but it is usually simple enough for new users who are willing to give it some time to understand the basics. If you don’t like the flat UI, you might want to give Helvetical a try to try and spruce up the look a bit. As of now though, I wait for the day when Google will finally give some love to this semi-forgotten app of theirs and give it a much needed experience overhaul.

Your Turn

What do you think of Google Calendar? Leave your constructive criticism in the comments.

And if you’ve built a web app that you’d like the Activetuts+ community to do a critique on, submit it here. We’re looking forward to seeing what you’ve made.

The Math and ActionScript of Curves: Drawing Quadratic and Cubic Curves

Kah Shiu Chong — Mon, 21 May 2012 13:30:40 +0000

We see lines used in a lot of scenarios. Curves are also used, although perhaps not as frequently – but that doesn’t undermine their importance! In this tutorial we shall take a closer look at curves, particularly the quadratic and cubic curve, along with some of their commonly used mathematical features.

Final Result Preview

Let’s take a look at the final result we will be working towards. Drag the red dots and see the gradients change in position.

And here’s another demo, using cubic curves, without the gradients:

Step 1: Curves

Quadratic and cubic will be featured in each of these sections. So let’s first look at the equation of curves. These equations are written in polynomial form, starting with the term of highest degree. The first one is quadratic equation (highest degree is 2); the second is cubic equation (highest degree is 3).
\[f(x) = Ax^2 + Bx + C\ ... (eq\ 1)\] \[g(x) = Ax^3 + Bx^2 + Cx + D\ ... (eq\ 2)\]

Note that A, B, C and D are real numbers. So now that we are aquainted with it, let’s try to visualise it. Graphing curves will be our next attempt.

Step 2: Graphing Curves

First, let’s graph a quadratic curve. I’m sure all readers have graphed quadratic curve in high school math class, but just to refresh your memory, I present graphs below. They are placed side by side to ease comparison.

Left graph is using Cartesian coordinate space
Right graph is using Flash coordinate space

The obvious difference is the inverted y-axis on Flash coordinate space. They look simple overall, right? Okay, now we’re ready to plot onto Flash coordinate space.

Step 3: Quadratic Coefficients

To position quadratic curves at the right spot, we need to understand their corresponding equations. The curve drawn is really dependant on the equation’s coefficients (for the case of quadratic, those are A, B and C).

I’ve included a Flash presentation below so you can easily tweak these coefficients and get immediate feedback.

To study the effects of individual coefficients on the overall curve, I suggest following the steps below to experiment with the Flash presentation above.

While setting A and B to 0, tweak the value of C to both positive and negative values. You’ll see the line’s height change.
Now tweak the value of B between positive and negative values. Observe what happens to gradient of line.
Now tweak the value of A between positive and negative values, and compare the results.
Then tweak B between being positive and negative again. Observe the curve’s always cutting through the origin.
Finally tweak C. Observe the whole curve shift along the y-axis.

Another interesting observation is that throughout the second and third steps of the above, the point of inflection (i.e. the turning point) stays at the same point on the y-axis.

Step 4: Alternative Equation One

You quickly see that positioning a curve is somewhat difficult. The equation used is impractical if we want to, say, locate the coordinates of the lowest point on a curve.

Solution? We’ll rewrite the equation into a desired form. Check out the following equation:

\[f(x) = P(x+Q)^2+R\]

It’s still a quadratic equation, but it’s taken another form. Now we can easily control the minimum and maximum points on the curve. In the previous Flash presentation, click on button “Approach 1″ on the top right and play with the new values.

Here’s a brief explanation of the coefficients’ roles:

Coefficient	Role
P	Control the curve’s steepness.
Q	Control displacement of curve’s turning point along x-axis.
R	Control displacement of curve’s turning point along y-axis.

Nonetheless, it’s still a difficult task to make the curve pass through a given set of points. We’d have to rigorously pre-calculate on paper before translating it to code.

Fortunately, there is a better solution. But before going through it, let’s have a look at the ActionScript implementation as of now.

Step 5: ActionScript Implementation

Here are the equations written as ActionScript functions (check Graphing.as in the source download).

private function quadratic1(x:Number, A:Number, B:Number, C:Number):Number {
    //y = A(x^2) + B(x) + C
    return A*x*x+ B*x + C
}

private function quadratic2(x:Number, P:Number, Q:Number, R:Number):Number {
    // y = P * (x + Q)^2 + R
    return P*(x+Q)*(x+Q) + R
}

And here’s an implementation of the drawing method using Graphics.drawPath(). Just a note that all curves in this article are drawn in similar fashion.

First the variables…

private var points:Vector.<Number> = new Vector.<Number>;
private	var drawCommand:Vector.<int> = new Vector.<int>;

Now the y-positions, calculated based on the x-positions and the given coefficients.

private function redraw(A:Number, B:Number, C:Number):void {
    for (var i:int = 0; i < 400; i++) {
        var x:Number = i - 200;
        points[i * 2] = x * 10 + stage.stageWidth >> 1;
        if (isApproach1) {
            points[i * 2 + 1] = quadratic1(x, A, B, C) + stage.stageHeight >> 1
        }
        else {
            points[i * 2 + 1] = quadratic2(x, A, B, C) + stage.stageHeight >> 1
        }

        if (i == 0) drawCommand[i] = 1;
        else drawCommand[i] = 2;
    }
    graphics.clear();
    graphics.lineStyle(1);
    graphics.drawPath(drawCommand, points);
}

(Confused about the >> operator? Take a look at this tutorial.)

Step 6: Alternative Equation Two

Suppose we’re given three points that the quadratic curve must cross through; how do we form the corresponding equation? More specifically, how can we determine the coefficient values of the equation? Linear algebra comes to the rescue. Let’s analyse this problem.

We know that quadratic equations always take form as written in eq. 1 in Step 1.

\[f(x) = Ax^2 + Bx + C\ ... (eq\ 1)\]

Since all three coordinates given are lying on the same curve, they must each satisfy this equation, with the same coefficients as the equation of the curve that we are looking for. Let’s write this down in equation form.

Given three coodinates:

\(S\ \left(S_x,\ S_y\right)\)
\(T\ \left(T_x,\ T_y\right)\)
\(U\ \left(U_x,\ U_y\right)\)

Substitute these values into (eq 1). Note that A, B, C are unknowns at the moment.

\[f(x) = Ax^2 + Bx + C\ ... (eq\ 1)\]

\(S_y = A\left(S_x\right)^2 + B\left(S_x\right) + C\ \)
\(T_y = A\left(T_x\right)^2 + B\left(T_x\right) + C\ \)
\(U_y = A\left(U_x\right)^2 + B\left(U_x\right) + C\ \)

Now, rewrite in matrix form. Take note that A, B, C are the unknowns we are solving for.

\( \begin{bmatrix}S_y \\T_y \\U_y\end{bmatrix} =
\begin{bmatrix}
\left(S_x\right)^2 & \left(S_x\right) & 1\\
\left(T_x\right)^2 & \left(T_x\right) & 1\\
\left(U_x\right)^2 & \left(U_x\right) & 1\end{bmatrix}
\begin{bmatrix}A \\B \\C\end{bmatrix} \\
\) \( \begin{bmatrix}
\left(S_x\right)^2 & \left(S_x\right) & 1\\
\left(T_x\right)^2 & \left(T_x\right) & 1\\
\left(U_x\right)^2 & \left(U_x\right) & 1\end{bmatrix}^{-1}
\begin{bmatrix}S_y \\T_y \\U_y\end{bmatrix} =
\begin{bmatrix}
\left(S_x\right)^2 & \left(S_x\right) & 1\\
\left(T_x\right)^2 & \left(T_x\right) & 1\\
\left(U_x\right)^2 & \left(U_x\right) & 1\end{bmatrix}^{-1}
\begin{bmatrix}
\left(S_x\right)^2 & \left(S_x\right) & 1\\
\left(T_x\right)^2 & \left(T_x\right) & 1\\
\left(U_x\right)^2 & \left(U_x\right) & 1\end{bmatrix}
\begin{bmatrix}A \\B \\C\end{bmatrix} \\
\) \( \begin{bmatrix}
\left(S_x\right)^2 & \left(S_x\right) & 1\\
\left(T_x\right)^2 & \left(T_x\right) & 1\\
\left(U_x\right)^2 & \left(U_x\right) & 1\end{bmatrix}^{-1}
\begin{bmatrix}S_y \\T_y \\U_y\end{bmatrix}
= I
\begin{bmatrix}A \\B \\C\end{bmatrix}
\\
K^{-1}J = L
\)

Of course we can use simultaneous equations instead, but I prefer using matrices because it’s simpler. (Editor’s note: as long as you understand matrices, that is!)

We’ll get the inverse of K and multiply by the J matrix to get L. After we have successfully solved for A, B, C, we’ll just substitute into the quadratic equation. Thus, we’ll have a quadratic curve that passes through all three points.

Step 7: Importing Coral

As mentioned in the previous step, we need to perform a 3×3 matrix inversion and multiplication. ActionScript’s flash.geom.matrix class won’t be able to help in this. Of course, we have a choice to utilise flash.geom.Matrix3D, class but I prefer the Coral library because I can pry into these custom classes and examine what’s happening under the hood. I personally find this very useful whenever at doubt on proper use of commands even after reading the API documentation.

So download and place the unzipped Coral files into your project source folder.

Step 8: ActionScript Implementation

Here’s a sample of the result. Try to reposition the red dots and see the quadratic curve redrawn to cross through all three points.

Step 9: Implementation Explained

You can find the full script in Draw_curve.as. The following ActionScript is just to enable mouse controls on the little dots.

public function Draw_Curve()
{
    //setting up controls
    c1 = new Circle(0xFF0000); addChild(c1); c1.x = stage.stageWidth * 0.2; c1.y = stage.stageHeight >> 1;
    c2 = new Circle(0xFF0000); addChild(c2); c2.x = stage.stageWidth * 0.5; c2.y = stage.stageHeight >> 1;
    c3 = new Circle(0xFF0000); addChild(c3); c3.x = stage.stageWidth * 0.8; c3.y = stage.stageHeight >> 1;

    c1.addEventListener(MouseEvent.MOUSE_DOWN, move);
    c1.addEventListener(MouseEvent.MOUSE_UP, move);
    c2.addEventListener(MouseEvent.MOUSE_DOWN, move);
    c2.addEventListener(MouseEvent.MOUSE_UP, move);
    c3.addEventListener(MouseEvent.MOUSE_DOWN, move);
    c3.addEventListener(MouseEvent.MOUSE_UP, move);
    redraw()
}

private function move(e:MouseEvent):void {
    if (e.type == "mouseDown") {
        e.target.startDrag()
        e.target.addEventListener(MouseEvent.MOUSE_MOVE, update);
    }
    else if (e.type == "mouseUp") {
        e.target.stopDrag();
        e.target.removeEventListener(MouseEvent.MOUSE_MOVE, update);
    }
}

private function update(e:MouseEvent):void {
    redraw();
}

The core lies in the redraw function. I’ve highlighted the matrix operations and the quadratic function for the redraw process.

private function redraw():void
{
    K = new Matrix3d(	c1.x * c1.x, 	c1.x, 	1, 	0,
                        c2.x * c2.x, 	c2.x, 	1, 	0,
                        c3.x * c3.x, 	c3.x, 	1, 	0,
                                  0,       0,	0, 	1);
    K.invert()
    L = new Matrix3d(	c1.y, 	0, 	0, 	0,
                        c2.y, 	0, 	0, 	0,
                        c3.y, 	0, 	0, 	0,
                           0, 	0, 	0, 	0);
    L.append(K);

    graphics.clear();
    var points:Vector.<Number> = new Vector.<Number>;
    var cmd:Vector.<int> = new Vector.<int>;
    for (var i:int = 0; i < 200; i++) {
        //current x
        var x:Number = i * 2;

        //f(x) = A (x^2) + B (x) + C
        var y:Number = L.n11* x* x + L.n21 * x + L.n31 ;

        points.push(x, y);
        if (i == 0) cmd.push(1);
        else cmd.push(2);
    }
    graphics.lineStyle(1);
    graphics.drawPath(cmd, points);
}

So you can see that the matrix K was initialised and inverted before being appended onto matrix J.

The append() function multiplies the current matrix, J, with the input matrix, K, placed to its left. Another noteworthy detail is that we don’t utilise all the rows and columns in K and J matrices. However since matrix inversion can only happen with a square matrix, we need to fill in the 4th row, 4th column element of K with 1. (There’s no need to do this for J because we don’t need its inversion in our calculation.) Thus, you can see all the other elements are 0 except for the first column.

Step 10: Graphing Cubic Curve

So that’s all for drawing quadratic curves. Let’s move on to cubic curves.

Again, we’ll have a little revision of graphing these curves. Check out the following image:

When you compare this curve to that of quadratic, you will notice that it is steeper, and that a portion of the curve is below the x-axis. One half is mirrored vertically, compared to a quadratic.

Step 11: Cubic Coefficients

I’ve included the following Flash presentation to let you experiment with the coefficients of a cubic equation. Try tweaking the value of A from positive to negative and observe the difference in the curve produced.

Step 12: ActionScript Implementation

Here’s the important section of the implementation of the graphing above:

private function redraw(A:Number, B:Number, C:Number, D:Number):void {
    for (var i:int = 0; i < 400; i++) {
        var x:Number = i - 200;
        points[i * 2] = x * 10 + stage.stageWidth >> 1;
        points[i * 2 + 1] = cubic1(x, A, B, C, D) + stage.stageHeight >> 1

        if (i == 0) drawCommand[i] = 1;
        else drawCommand[i] = 2;
    }
    graphics.clear();
    graphics.lineStyle(1);
    graphics.drawPath(drawCommand, points);
}

private function cubic1(x:Number, A:Number, B:Number, C:Number, D:Number):Number {
    //y = A(x^3) + B(x^2) + C(x) + D
    return A*x*x*x+ B*x*x + C*x +D
}

Again, it’s difficult to position the cubic curve according to a set of points it crosses through. Once again, we refer to linear algebra for an alternative.

Step 13: Alternative Method

We know from Step 6 that the coefficients of a quadratic equation can be calculated based on three given points, and the curve drawn from it will cross through those points. A similar approach can be performed with any four given points to obtain a cubic equation:

\(S\ \left(S_x,\ S_y\right)\)
\(T\ \left(T_x,\ T_y\right)\)
\(U\ \left(U_x,\ U_y\right)\)
\(V\ \left(V_x,\ V_y\right)\)

Substitute these coordinates into (eq 2). Note that A, B, C, D are unknowns.

\[g(x) = Ax^3 + Bx^2 + Cx + D\ ... (eq\ 2)\]

\(S_y = A\left(S_x\right)^3 + B\left(S_x\right)^2 + C\left(S_x\right) + D\)
\(T_y = A\left(T_x\right)^3 + B\left(T_x\right)^2 + C\left(T_x\right) + D\)
\(U_y = A\left(U_x\right)^3 + B\left(U_x\right)^2 + C\left(U_x\right) + D\)
\(V_y = A\left(V_x\right)^3 + B\left(V_x\right)^2 + C\left(V_x\right) + D\)

But now we’ll deal with a 4×4 matrix instead of 3×3 matrix:

\(
\begin{bmatrix}S_y \\T_y \\U_y \\V_y\end{bmatrix} =
\begin{bmatrix}
\left(S_x\right)^3 & \left(S_x\right)^2 & \left(S_x\right) & 1\\
\left(T_x\right)^3 & \left(T_x\right)^2 & \left(T_x\right) & 1\\
\left(U_x\right)^3 & \left(U_x\right)^2 & \left(U_x\right) & 1\\
\left(V_x\right)^3 & \left(V_x\right)^2 & \left(V_x\right) & 1\end{bmatrix}
\begin{bmatrix}A \\B \\C \\D\end{bmatrix} \\
P = QR \\
Q^{-1}P = Q^{-1}QR \\
Q^{-1}P = IR\\
Q^{-1}P = R
\)

Now we will utilise all elements in the 4×4 matrix for Q and the whole first column for P. Then Q is inversed and applied to P.

Step 14: ActionScript Implementation

Again, we set up the mouse controls to allow dragging of those points. When any of those points are being dragged, recalculation and redrawing of the curve constantly happen.

public function Draw_Curve2()
{
    //setting up controls
    c1 = new Circle(0xFF0000); addChild(c1); c1.x = stage.stageWidth * 0.2; c1.y = stage.stageHeight >> 1;
    c2 = new Circle(0xFF0000); addChild(c2); c2.x = stage.stageWidth * 0.4; c2.y = stage.stageHeight >> 1;
    c3 = new Circle(0xFF0000); addChild(c3); c3.x = stage.stageWidth * 0.6; c3.y = stage.stageHeight >> 1;
    c4 = new Circle(0xFF0000); addChild(c4); c4.x = stage.stageWidth * 0.8; c4.y = stage.stageHeight >> 1;

    c1.addEventListener(MouseEvent.MOUSE_DOWN, move);
    c1.addEventListener(MouseEvent.MOUSE_UP, move);
    c2.addEventListener(MouseEvent.MOUSE_DOWN, move);
    c2.addEventListener(MouseEvent.MOUSE_UP, move);
    c3.addEventListener(MouseEvent.MOUSE_DOWN, move);
    c3.addEventListener(MouseEvent.MOUSE_UP, move);
    c4.addEventListener(MouseEvent.MOUSE_DOWN, move);
    c4.addEventListener(MouseEvent.MOUSE_UP, move);

    redraw();
}
private function move(e:MouseEvent):void {
    if (e.type == "mouseDown") {
        e.target.startDrag()
        e.target.addEventListener(MouseEvent.MOUSE_MOVE, update);
    }
    else if (e.type == "mouseUp") {
        e.target.stopDrag();
        e.target.removeEventListener(MouseEvent.MOUSE_MOVE, update);
    }
}

private function update(e:MouseEvent):void {
    redraw();
}

redraw is the crucial function where everything happened.

private function redraw():void
{
    var left:Matrix3d = new Matrix3d(c1.x * c1.x* c1.x, 	c1.x* c1.x, 	c1.x , 	1,
                                     c2.x * c2.x * c2.x, 	c2.x* c2.x, 	c2.x , 	1,
                                     c3.x * c3.x * c3.x, 	c3.x* c3.x, 	c3.x , 	1,
                                     c4.x * c4.x * c4.x, 	c4.x* c4.x, 	c4.x , 	1);
    left.invert()
    var right:Matrix3d = new Matrix3d(c1.y, 	0, 	0, 	0,
                                      c2.y, 	0, 	0, 	0,
                                      c3.y, 	0, 	0, 	0,
                                      c4.y, 	0, 	0, 	0);
    right.append(left);

    //f(x) = A(x^3) + B (x^2) +C (x) + D
    graphics.clear();
    var points:Vector.<Number> = new Vector.<Number>;
    var cmd:Vector.<int> = new Vector.<int>;
    for (var i:int = 0; i < 200; i++) {
        var x:Number = i * 2;
        var y:Number = right.n11 * x * x * x+
                       right.n21 * x * x+
                       right.n31 * x +
                       right.n41;

        points.push(x, y);
        if (i == 0) cmd.push(1);
        else cmd.push(2);
    }
    graphics.lineStyle(1);
    graphics.drawPath(cmd, points);
}

Finally, let’s look at the product. Click and move the red dots to see cubic curve drawn to pass through all those points.

Step 15: Polynomials of Higher Degree

We just gone through drawing polynomials of degree 2 and 3 (quadratic and cubic). From our experience, we can predict that calculation for polynomial of degree 4 (quintic) will require five points, which will require 5×5 matrix, and so on for polynomials of even higher degrees.

Unfortunately, Coral and flash.geom.Matrix3D only allow for 4×4 matrices, so you’ll have write your own class if the need does come. It’s seldom required in games, though.

Step 16: Dividing Regions

Let’s try to apply our knowledge to divide regions on our stage. This requires some revision of equation inequalities. Check out the image below.

This image above shows a curve dividing the regions into two:

Blue region on top, where for each point y is greater than the equation of the curve.
Red region at bottom, where for each point y is less than the equation of the curve.

It’s not hard to grasp this concept. In fact, you have already experimented on this in Step 11 as you tweaked the coefficients of the cubic formula. Imagine, in the coordinate system, that there is an infinite number of curves, all differentiated by just a slight change in D:

Step 17: ActionScript Implementation

So here’s the sample of output for quadratic curve. You can try to move the red dot around and see the regions coloured.

Here’s the important ActionScript snippet. Check out the full script in Region_Curve.as

private function redraw():void {
    var left:Matrix3d = new Matrix3d(c1.x * c1.x, 	c1.x, 	1, 	0,
                                     c2.x * c2.x, 	c2.x, 	1, 	0,
                                     c3.x * c3.x, 	c3.x, 	1, 	0,
                                     0, 			0, 		0, 	1);
    left.invert()
    var right:Matrix3d = new Matrix3d(c1.y, 	0, 	0, 	0,
                                      c2.y, 	0, 	0, 	0,
                                      c3.y, 	0, 	0, 	0,
                                      0, 	0, 	0, 	0);
    right.append(left);

    //D = A (x^2)+ B (x) +C
    for each (var item: Circle in background) {
        var D:Number = right.n11* item.x * item.x + right.n21 * item.x + right.n31 ;
        //trace(background[i].y);
        if (item.y > D) item.color = 0;
        else item.color = 0xAAAAAA;
    }
}

Here’s the sample with regard to cubic curve.

And the implementation that comes with it. Again, full script’s in Region_Curve2.as

//D = A + B (x) +C (x^2)
for each (var item: Circle in background) {
    var D:Number = right.n11 * item.x * item.x * item.x;+
                                right.n21 * item.x * item.x +
                                right.n31 * item.x +
                                right.n41
    //trace(background[i].y);
    if (item.y > D) item.color = 0;
    else item.color = 0xAAAAAA;
}

Step 18: Variations

How about some tweaks to change the color across different curves? Again, mouse click on the red dots and see the gradient changes across the screen.

Step 19: ActionScript Implementation

Here’s the important ActionScript snippet extracted from Region_Curve3.as. First of all we’ll want to find out the maximum and minimum offset from the original curve.

var max:Number = 0;
var min:Number = 0;
var Ds:Vector.<Number> = new Vector.<Number>;

//D = A(x^2) + B (x) +C
for each (var item: Circle in background) {
    var D:Number = right.n11 * item.x * item.x + right.n21 * item.x + right.n31;
    var offset:Number = item.y - D;
    Ds.push(offset);

    if (item.y > D && offset > max) max = offset;
    else if (item.y < D && offset < min) min = offset;
}

Once done, we’ll apply it to colouring the individual dots.

//color variations based on the offset
var color:Number
for (var i:int = 0; i < background.length; i++) {
    if (Ds[i] > 0) {
        color = Ds[i] / max * 255							//calculating color to slot in
        background[i].color = color<<16 | color<<8 | color;	//define a grayscale
    }
    else if (Ds[i] < 0)	{
        color = Ds[i] / min * 255;
        background[i].color = color<<16;	//define a gradient of red
    }
}

Conclusion

So that all for the drawing of curves. Next up, finding roots of a quadratic and cubic curve. Thanks for reading. Do share if you see some real life applications that takes advantage of this tutorial.

Weekend Lecture: Understanding Games, a Flash Game About Game Design

Michael James Williams — Sun, 20 May 2012 16:30:04 +0000

Interested in game design? This weekend, we feature a set of four interactive lectures: games that are about game design, by Pixelate.

Play the Games

Bub and Bob, two little 8-bit guys, will talk you through the basic concepts of video games. The games themselves are more like interactive tutorials, with smaller games interspersed throughout to help make certain points, and great chiptunes throughout.

Episode 1

Click to play.

The first episode deals with rules, interactivity, representation, and simulation in games.

Episode 2

Click to play.

The second episode is about motivating the player to stay in the game, and making sure they have fun.

Episode 3

Click to play.

The third episode looks at one of my favourite topics: learning in video games.

Episode 4

Click to play.

Finally, the fourth episode is about identification.

Workshop Coding Challenge: Fix This Breakout Game

Michael James Williams — Thu, 17 May 2012 19:00:42 +0000

It can be tricky to sit down and practise new coding techniques, so here’s a fun exercise to encourage you to play with collision detection and reaction, as covered by Kah Shiu.

Update: I’ve added an HTML5 version to go alongside the existing Flash version – enjoy!

The Challenge

This breakout game is broken!

Flash version:

To play the HTML5 version (using canvas and JavaScript), click here.

Oh sure, some of the basics are there; the paddle can be controlled by the left and right arrow keys, the ball moves, and all the objects are drawn to the stage correctly. But there’s barely any collision detection or reaction: the paddle can move off the sides of the screen, the ball doesn’t bounce off it, and the bricks might as well not be there at all.

All the code is available in this ZIP file. (The Flash version is in FlashDevelop format, but it’ll be easy to use it in Flash Pro, FDT, Flash Builder, or whatever your IDE of choice is.)

Once you’ve familiarised yourself with it, use what Kah Shiu has taught in his Collision Detection and Reaction Session to fix the problems with the game.

You can make this as simple or as complicated as you like, depending on how comfortable you are with the concepts. For instance, you could add triangular bricks, or have multiple balls bouncing around at once.

Of course, you’re not restricted to my code or graphics; feel free to change anything you like!

If you come up with something neat, please send it in using this form or link to it in a comment below. I look forward to checking out what you come up with.

Enable the Latest AIR SDK in Flash Professional CS5.5+

Daniel Albu — Wed, 16 May 2012 21:00:50 +0000

New versions of the Adobe AIR SDK are often released between Flash Professional release cycles, using this tutorial, you’ll be able to always use the latest Adobe AIR version in your IDE. This will allow you to enable Stage3D development within Flash Professional for both AIR and SWF projects.

Flash Professional CS5.5 Guide

(Flash Pro CS6 users, please skip to the next section.)

Step 1: Download the Latest SDK

Download the AIR 3.2 SDK from the following link: http://www.adobe.com/products/air/sdk/
Extract the downloaded file into a separate folder on your desktop

Step 2: Backup Your Current SDK Folder

Go to the Adobe Flash CS5.5 installation folder (should be “C:\Program Files\Adobe\Adobe Flash CS5.5″ on 32 bit Windows, “C:\Program Files (x86)\Adobe\Adobe Flash CS5.5″ on 64 bit Windows, and “Applications/Adobe Flash CS5.5″ on OS X).
Rename the AIR2.6 folder to AIR2.6_OLD.
Create a new folder and name it AIR2.6.

Step 3: Create the New SDK Folder

Copy the contents of the AIR 3.2 SDK folder (that you’ve created on your desktop) to the AIR2.6 folder.
Browse to the AIR2.6/frameworks/libs/air/ folder in the Adobe Flash CS5.5 folder and copy the airglobal.swc file.
Paste the SWC file into Adobe Flash CS5.5/Common/Configuration/ActionScript 3.0/AIR2.6/, overwriting the existing airglobal.swc file.

Step 4: Final Configuration Settings

Go to Adobe Flash CS5.5/Common/Configuration/Players/ and open the following files using a text editor (you may need administrative privileges to edit these files in the application folder in Windows):

AdobeAIR2_6.xml
AiriPhone.xml
Android.xml

Change the version attribute of the player element from 11 to 15 in each file. Don’t forget to save them after you’re done editing.

Flash Professional CS6 Guide

After years of not providing users with a more user-friendly way of upgrading the Adobe AIR SDK in Flash, Adobe finally added one to Flash Professional CS6.

(Please note: since AIR 3.2 is already installed in Flash Professional CS6, we’ll be using the AIR 3.3 Beta SDK in this section.)

Step 1: Download the Latest Adobe AIR SDK

Download the latest SDK from the following link: http://www.adobe.com/products/air/sdk/
Please note: at the time of publishing the latest version was Adobe AIR 3.2 so we’re using the Adobe AIR 3.3 Beta SDK (http://labs.adobe.com/downloads/air3-3.html); after its official release this link won’t work.
Extract the downloaded file into a separate folder (e.g. C:\AdobeAIR)

Step 2: Link the New SDK Folder to the Flash IDE

Go to the help menu and choose the ‘Manage AIR SDK’ option

You’ll notice a list of your currently installed Adobe SDK folders, the default one in CS6 is Adobe AIR 3.2

Click the + button to add a new folder.

Choose the new Adobe AIR SDK folder you created (in our example it was C:\AdobeAIR).

You’ll notice that now we have the new SDK listed as well in our list.

Step 3: Publish

Now, in your Publish Settings you’ll notice you have new options in additional to the old ones

Conclusion

That’s it! From now on, content you target for AIR using your Flash Professional IDE will be exported using the latest Adobe AIR SDK. Thanks for reading!

Quick Tip: Versioning Your Files With Dropbox (via Webdesigntuts+)

Michael James Williams — Tue, 15 May 2012 16:00:19 +0000

Ian Yates of Webdesigntuts+ has posted a great Quick Tip explaining how you can use Dropbox or Google Drive as a simple, automated version control system. It’s worth checking out for web app and game developers too, so check it out below.

Introduction

Having a version history of your graphics documents may save you from that awful moment when you realize you’ve scrubbed over a crucial stage of the design process. Thanks to Dropbox, you may already be storing versions of your work without even having noticed…

Dropbox is like a time machine. It keeps snapshots of every change in your Dropbox folder over the last 30 days.

Version History in the Cloud

You can download the video here.

Remember, both Dropbox and Google Drive will keep snapshots of your files for just 30 days, unless you upgrade your account. You can read more of what Google has to say on the matter at support.google.com, or head on over to Dropbox Help to read up on their “Pack-Rat” pro feature (which gives you indefinite history storage).

Useful Resources

Sign up for Dropbox if you haven’t already!
Sign up for Google Drive
Pixelapse – “Visual version control done right”.
Layervault – “Unlimited storage, simple version control, team collaboration, and much more”.
Microsoft SkyDrive
SugarSync – “..keeps the previous five versions of all your documents.”
iDriveSync – “Protect yourself from ‘digital accidents’ with versioning and unlimited file retention”

And don’t forget, you can view all the latest articles from across the Tuts+ network at the Tuts+ Hub!

Workshop: Nuclear Outrun – Critique

Porter — Mon, 14 May 2012 16:30:01 +0000

This week, Matt Porter critiques another recently released game: Nuclear Outrun, developed by Nerdook Productions.

Play the Game

Click to play Nuclear Outrun on Kongregate

Overview

With 2012 moving along, it’s no surprise that we’re starting to see more and more “end of the world”-themed games. Nuclear Outrun is one such game, and while it’s not perfect, it’s quite enjoyable. It combines physics, zombies, distance, and upgrades, in a simple, yet enjoyable blend. With only one goal – get to the goal before the nuke hits – players really can’t get too confused by what’s going on.

Gameplay

As I mentioned above, your goal is simple: reach the goal before the nuke hits and turns you into a smear on the streets. You simply press forward (drive to the right), and shoot what gets in your way. You have 20 trucks (attempts), and with each attempt, you earn experience points which unlock new weapons and reward you with skill points. These skill points can be spent on upgrades, such as cranking up the power and ammunition of your weapons, making your vehicle more beastly, and so on.

Nuclear Outrun definitely repeats some of the mistakes common to the distance game formula, but it also succeeds where many others have failed. While you start off weak and slowly grow strong, you’re not entirely crippled by your starting state. Many distance games start you off so weak, that you hardly play the game for the first ten minutes or so, but instead repeat the same simple run over and over, slowly gaining stat points. There is a certain degree of skill in Nuclear Outrun, and you can do well right off, which many other distance games sadly fail to allow. In fact, you can actually complete your goal without getting every upgrade, something most distance games don’t allow. Doing so makes the game feel extremely linear, gives the player little satisfaction upon completion, and offers zero replay-value. I do wish skill was even more of a factor in Nuclear Outrun, but the leveling up aspect is simply part of the genre; at least it’s a step in the right direction.

While the game does use a physics engine, the controls do feel a bit off to me. For whatever reason, I found it far too common that the vehicle was tipped on its back. Even with the ability to adjust individual wheel sizes (such as a large wheel in back, small wheel in front), it was just too easy to end up with your front wheel raised to the sky. This leads to a decrease in the sense of speed (read: fun), and forces players to spend more time balancing their vehicle, rather than focusing on the more enjoyable aspects of the gameplay, such as shooting enemies.

What Nuclear Outrun does best is give the player complete freedom to choose how they want to play. You choose what weapon you want to use, how your vehicle handles (via wheel sizes), and what upgrades to put your skill points into. When you’re actually in the game, it’s up to you whether you want to fly forward full speed, or play it safe at a normal speed and take out all the obstacles.

While we’re on a positive note, it’s also worth mentioning that Nuclear Outrun does a fantastic job of rewarding the player. Even after you complete the game, you get three new weapons, all of which are unique and fun. You’re also rewarded with “Overtime” mode, which allows you to continue playing while competing for high scores. Nearly all web games, huge hits included, fail to reward players after the game is “completed”. It’s extremely important that you give players something extra to reward them, as it increases replay value, and lets the player know you care. Simply saying “Congratulations!” on your final screen is insulting, and doesn’t help you stand out.

Graphics

The graphics in Nuclear Outrun are pretty average. They have a simple yet effective style, but I personally find the whole package a bit unpolished, and lacking in detail. There’s a lot of weapons and effects, so it’s understandable that each one isn’t in extreme detail, but there’s definitely room for improvement. The animation is simple, but like the graphics, it’s quite effective. Nothing really stands out as poor; it’s just nothing pretty.

The menus and UI in my opinion are a bit too messy. There’s a lot of stray or unorganized text, which leads to confusion as to what information is where. The pre-game menu could be greatly improved by moving the level and high score elsewhere, and perhaps making it a bit smaller. All of the text is also just thrown on screen, and isn’t placed with any artistic value. All in all, there’s just too much text, with little thought into how it’s displayed, and it looks messy.

Audio

The audio in Nuclear Outrun is quite awesome. The main game doesn’t have any music, but has a simple, but awesome ambient track. It definitely adds an apocalyptic feel to the game, and I think it fits better than music could have. The loop on the ambient track isn’t perfect, which could be fixed with some minor tweaking, but it’s not too noticeable during gameplay with all the sound effects going on in parallel.

As far as the sound effects go, they’re just as good. Dying is almost enjoyable, due to the sound of the nuke going off and the awesome scream that follows. All of the sounds appear to be unique to the game, which is always a plus. The sounds for zombies such as dying, upgrading, etc, are all very well done, and really couldn’t be any better.

Some of the interface buttons are inconsistent with playing a sound, and it would be a lot more professional if they all did. It’s a minor fault to not have a simple sound play when pressing a button, but it really does take away from the full experience of a polished game.

Conclusion

All and all, Nuclear Outrun is a very well done physics, zombie, distance, and upgrade game. All of the above themes and genres are extremely popular with sponsors, so it’s safe to assume that Nerdook didn’t have a problem selling the game. While there’s definitely room for improvement, I can’t name any games that take the above genres and put them together any better, so kudos to Nerdook for that.

Your Turn

What do you think of Nuclear Outrun? Leave your constructive criticism in the comments.

And if you’ve got a browser game that you’d like the Activetuts+ community to do a critique on, submit it here. We’re looking forward to seeing what you’ve made.

Understanding Variables, Arrays, Loops, and Null: The Post-it Note Analogy

Michael James Williams — Fri, 11 May 2012 16:30:45 +0000

What does var actually do, and why doesn’t setting myObject = null actually remove the object? These questions tie in to a fundamental concept in coding, relevant whether your language of choice is AS3, JavaScript, or C#, and can be understood using a few common items from the stationery cupboard.

What’s a Variable?

Let’s start with the basics. Suppose you want to store the age of your friend Bill:

var ageOfBill:Number = 24;

(I’m going to use AS3 for these example, but the basic concepts are the same in JavaScript and C#.

In JavaScript, the syntax is almost the same, but we don’t specify that age is a number:

var ageOfBill = 24;

In C# we don’t use the var keyword, but we do specify the type of the variable:

short ageOfBill = 24;

Not different enough to be confusing, I hope.)

So what’s happening here? Think of it this way:

var (or short, in C#) means, “get a fresh Post-it note”.
ageOfBill means, “write ageOfBill across the top, in pen”.
= 24 means, “write 24 on the note, in pencil”.

What if later we realise that Bill’s actually younger than we thought?

var ageOfBill = 24;
//...later...
ageOfBill = 20;

This just means we find our ageOfBill note, erase 24, and write 20 on it instead.

We could write var again:

var ageOfBill:Number = 24;
//...later...
var ageOfBill:Number = 20;

…but this is not good code, because var says, “get a fresh Post-it note”. If you do this, the compiler will usually figure out what you mean – i.e. that you want to change what’s written on the existing ageOfBill Post-it note rather than actually getting a fresh one – but it will probably complain.

Warning: #3596: Duplicate variable definition.

It depends on the language and on your coding environment.

So can we ask the compiler to get a fresh Post-it note and write a label on it in pen, without writing anything on it in pencil? Perhaps we could do this for Bill’s friend Marty, whose age we don’t know:

var ageOfMarty:Number;

Actually (in AS3, at least) this will get a fresh Post-it note, write ageOfMarty across the top, in pen… and then write a default initial value of 0 on there in pencil:

So, in other words, we can’t have a Post-it note like this without it taking some value.

Okay – what about if we want to store the age of Bill’s best friend Ted, who we know is the same age?

var ageOfTed:Number = ageOfBill;

What happens here is, the computer looks at the ageOfBill Post-it, then copies the number written on it in pencil to a fresh Post-it, on which it writes ageOfTed across the top in pen.

This is just a copy, though; if we then change the value of ageOfBill it won’t affect ageOfTed:

ageOfBill = 21;

So! That’s all pretty straightforward, and maybe even intuitive. Now let’s talk about the first common pain point: arrays.

What’s an Array?

Think of an array as a ring binder.

(I was going to say a rolodex…

…but I realised that I had never even seen one in real life.)

Each sheet inside the binder is like one of those Post-it notes, except without the pen-written label across the top. Instead, we refer to each sheet by the name of the binder and the page number of the sheet.

Let’s suppose we’ve got an array of all our friends, in no particular order. Who’s on the first page (page #0)?

trace(friends[0]);

(trace() just writes the line to the debug output; in JavaScript, you might use console.log() and in C# you might use Console.WriteLine() for the same purpose.)

It’s Bill!

So, now, what does the following line do?

var firstFriend:String = friends[0];

It gets a fresh Post-it note (because of the var keyword), writes firstFriend across the top in pen, then copies whatever’s written on the first page of the binder onto that note in pencil.

(Remember, String just means a piece of text.)

We can overwrite what’s written on any page of the binder, just like with the Post-it notes:

friends[0] = "Kyle";

…and of course this doesn’t affect the firstFriend Post-it.

The binder is an apt analogy, because – just like with an array – you take take pages out, add new ones, and rearrange them. But remember, individual pages act just like the Post-it notes, except they don’t have their own pen labels, just page numbers.

Still pretty straightforward, I hope. So here’s an interesting question: what happens when you do the following?

var listOfNames:Array = friends;

Uh…

You Can’t Write That on a Post-it

I’ve cheated a bit here, because I talked a bunch about arrays without ever explaining how we create one in the first place. So let’s tackle that now.

Suppose you type:

var friends:Array = ["Bill", "Marty", "Ted"];

…What happens?

Well, as usual, var friends means we get a fresh Post-it note and write friends across the top, in pen:

But what do we write on it in pencil?

It’s a trick question: we don’t write anything.

See, Array means, “get a new ring binder”. And ["Bill", "Marty", "Ted"] means “put three pages in the binder, with these names on it”:

You can’t see the “Marty” and “Ted” pages, but they’re totally there.

And then? It’s simple! We stick the friends Post-it note to the cover of the binder:

Now, when we write:

trace(friends[0]);

…we know that we have to find the Post-it labelled friends, then look at whatever’s written on the first page (page #0) of the binder that it’s stuck to.

There are actually very few types of variable where a value gets written onto a Post-it note in pencil. In AS3, the only such types (called “primitives”) are:

Number
String
int
uint
Boolean

For everything else – Object, MovieClip, XML, and so on – we stick the Post-it note onto the item itself.

(The details are a little different in JavaScript and C#, but overall the same idea applies.)

So let’s get back to our earlier question. When we type:

var listOfNames:Array = friends;

…what happens?

Again, we know that var listOfNames means “get a fresh Post-it note and write listOfNames across the top in pen”. And now we know that Array means we’ll be sticking the Post-it note to something (a binder), rather than writing something on the Post-it in pencil.

Previously, when we’ve done something similar, we’ve copied the contents of one Post-it note onto another. So here, should we get a fresh new binder and copy all of the pages from the friends binder into it?

Actually, no! All we do is stick this new listOfNames Post-it note onto the same binder as the friends Post-it note.

Now, friends and listOfNames each refer to the exact same array. So if we write:

listOfNames[0] = "Emmett";

…then friends[0] will also be Emmett, because listOfNames[0] and friends[0] refer to the exact same page in the exact same binder! And because that page only contains a String (which is a “primitive” type, remember), then we’ve just erased whatever was written on that page previously and written Emmett there instead.

So What Does `null` Mean?

Seen like this, null is quite easy to understand. This statement:

friends = null;

…just means, “remove the friends Post-it note from whatever it’s currently stuck to”.

The friends Post-it still exists, it’s just not stuck to anything. So if you type:

trace(friends[0]);

friends[0] = "Henry";

…then you’ll get an error, because you’re trying to reference the first page of the binder that the friends Post-it is stuck to – but it’s not stuck to anything!

So, to be clear, setting friends = null doesn’t affect the binder at all. You can still access it just fine via listOfNames. And you can even type:

friends = listOfNames;

…to go right back to the old situation:

Garbage Collection

Like I said, setting friends = null doesn’t affect the binder directly, but it can have an indirect effect.

See, if there are no Post-it notes stuck to the binder at all, then there’s no way for anyone to access the binder ever again. It’ll just lie around, totally inaccessible. But having all these binders (and other objects) lying around, totally abandoned, is a real waste of space – they’re cluttering up the computer memory.

That’s where the garbage collector comes in. This is a tool that periodically checks for any “lost” objects, and throws them in the trash – and once they’re gone, they’re gone for good; if an array is garbage collected then all of its pages are, too.

For most practical purposes, this doesn’t affect you at all; objects only get garbage collected if they’re lost and unable to be found by your code. If you have a lot of these lying around, then you might notice a slight lag every now and then, when the garbage collector does its job (it takes a little time to actively collect the garbage). The benefit is that this clears up more room (memory) for your app.

(If you want to know more about this topic, read Daniel Sidhion’s posts on garbage collection and object pooling.)

Arrays of Objects

Okay, there’s one more big concept to grasp – and it’s the most complex one yet.

Consider this snippet:

var firstFriendDetails:Array = ["Bill", 20];
var secondFriendDetails:Array = ["Marty", 16];
var thirdFriendDetails:Array = ["Ted", 20];
var allFriends:Array = [firstFriendDetails, secondFriendDetails, thirdFriendDetails];

How the heck does that work?

Let’s start with what we know. The first three lines are easy; for each one we:

Get a fresh binder.
Insert a page with the friend’s name written on it in pencil.
For nsert another page with the friend’s age written on it in pencil.
Get a fresh Post-it and write the appropriate label across the top in pen.
Stick the Post-it to the binder.

As for this line:

var allFriends:Array = [firstFriendDetails, secondFriendDetails, thirdFriendDetails];

…we’re going to need some string and some tape.

We can think of that one line as being equivalent to this snippet:

var allFriends:Array = [];
allFriends[0] = firstFriendDetails;
allFriends[1] = secondFriendDetails;
allFriends[2] = thirdFriendDetails;

The first line is easy: get a fresh binder and a fresh Post-it note, write allFriends on the Post-it note, and stick it to the binder.

As for the second line:

allFriends[0] = firstFriendDetails;

Remember that I said that each page in a binder is like a Post-it note, except without anything written in pen. If the first page was a Post-it, then we’d simply stick it to the front of the firstFriendDetails binder, right?

…but it can’t be both on the front of that binder and inside the other binder. So, instead, we use string:

Same for the other two:

So when we want to know what allFriends[2] refers to, we just open the allFriends binder to that page and follow the string – which, of course, leads to the thirdFriendDetails binder.

Similarly, for allFriends[1][0], we first figure out which binder allFriends[1] refers to, and then we look at the first page of that binder… so allFriends[1][0] is Marty!

Loops

Now put all that information together, and bear it in mind when reading this snippet:

var friends:Array = ["Bill", "Marty", "Ted", "Emmett", "Henry"];
var currentIndex:int = 0;
var currentFriend:String;

while (currentIndex < 5) {
    currentFriend = friends[currentIndex];
    trace(currentFriend);
}
var lastFriend:String = currentFriend;
trace(lastFriend);

What if we modify the value of currentFriend inside the loop?

var friends:Array = ["Bill", "Marty", "Ted", "Emmett", "Henry"];
var currentIndex:int = 0;
var currentFriend:String;

while (currentIndex < 5) {
    currentFriend = friends[currentIndex];
    currentFriend = "Herbert";
    trace(currentFriend);
}
trace(friends[0]);

What if the array contains non-primitive objects (MovieClips, images, arrays, 3D objects, whatever)?

var friends:Array = [firstFriend, secondFriend, thirdFriend, fourthFriend, fifthFriend];
var currentIndex:int = 0;
var currentFriend:MovieClip;   //or ":Image" or ":Object" or ":Array" or whatever

while (currentIndex < 5) {
    currentFriend = friends[currentIndex];
    currentFriend = sixthFriend;
}

//What is the value of friends[0] now?

Finally, what if the array contains other arrays, which themselves contain primitives?

var firstFriendDetails:Array = ["Bill", 20];
var secondFriendDetails:Array = ["Marty", 16];
var thirdFriendDetails:Array = ["Ted", 20];
var fourthFriendDetails:Array = ["Emmett", 50];
var fifthFriendDetails:Array = ["Henry", 36];
var friends:Array = [firstFriendDetails, secondFriendDetails, thirdFriendDetails, fourthFriendDetails, fifthFriendDetails];

var currentIndex:int = 0;
var currentFriend:Array;

while (currentIndex < 5) {
    currentFriend = friends[currentIndex];
    currentFriend[0] = "John";
    currentFriend = ["Herbert", 29];
}

What do you think the value of friends[3][0] will be after that?

Other Bits and Pieces

Here are a few other important notes you should know:

Objects

In AS3 and JavaScript, Objects are like Arrays except each page is referred to by a label rather than by its page number. So you can type:

var detailsOfBill:Object = {};  //"{}" means "create an Object"
detailsOfBill.title = "Esquire";
detailsOfBill.bandName = "Wyld Stallyns";
detailsOfBill.allNames = ["Bill", "S.", "Preston"];

…and this is kind of like getting a fresh binder, sticking a detailsOfBill Post-it on the front, and filling it with three pages. The first page has the label title written across the top in pen and the word Esquire written on it in pencil; the second page has the label bandName in pen and Wyld Stallyns in pencil. The third page has the label allNames but has nothing written on it in pencil; instead, a string attaches it to another, regular binder, whose pages are not labelled: the first page says Bill, the second says S., and the third says Preston, all in pencil.

(To make things even more confusing, arrays are technically a special form of Object. And if you think that’s bad, functions can be seen as a type of Object, too! But that’s a topic for a future article…)

More on Garbage Collection

I said that objects are garbage collected if they don’t have any Post-it notes stuck to them, but this is an oversimplification. If one page of a binder points to an object via string (i.e. if myArray[0] = myObject or similar), then that object won’t be garbage collected. Same goes for if a page of a binder points to another binder (array), or if the page of an object binder points to another object binder… and so on. It even applies if the only way to access the object is through a Post-it stuck to a binder which has one page that’s tied to another binder, as many layers deep as you want to go.

Basically, the garbage collector only collects an item if it can’t be reached through any other variable.

This explains why objects that are on the screen usually can’t be object collected. In AS3, if a MovieClip or other type of DisplayObject is in the display list, then it’s automatically added to what is essentially a hidden array of display objects (which you can access via getChildAt()). Similar structures exist in JavaScript and C#. So if a graphic is on the screen, and you remove all references to it from variables, arrays, and objects, it still won’t be garbage collected until you remove it from the display list.

Any Questions?

I hope this helps to clear things up. It’s certainly a confusing concept when you first come across it: some variables actually contain a value, while others just contain a reference to an object. Don’t worry if you’re not 100% sure exactly what’s going on; it’ll make a lot more sense after a bit of practice (and a few mistakes!).

However, if you have any specific questions about it, just stick a comment below and I’ll do my best to answer.

Thanks for reading!

Which Tuts+ Site Should We Launch Next?

David Appleyard — Thu, 10 May 2012 05:00:02 +0000

We’re planning our next few Tuts+ sites, and would love your opinion and advice on which topics you think we should cover next! We’d be really grateful if you could take a minute to answer our quick poll and share your thoughts…

Have Your Say

We’ve been considering lots of different ideas for our next Tuts+ sites over the past few weeks, and wanted to also ask the opinion of our awesome community!

A selection of different concepts are included in the poll to the right, along with the option for you to submit your own ideas as well.

The important thing to note is that these are just ideas. Some of these are close to making our final cut, and others aren’t… We’d love to hear what you think, to help guide our decision.

Thanks for taking the time to offer your suggestion — I can’t wait to see what you have to say!

Win a 6-Month Tuts+ Premium Membership

Our poll will be running for the next couple of weeks, and we’ll be choosing one respondent at random to receive a six-month Tuts+ Premium membership!

To be entered into the giveaway, just leave a comment on this post to go into a bit more detail about your site suggestion. We’ll choose one comment at random to win the Tuts+ Premium membership when the poll ends.

Best of luck!

Activetuts+

Create a Facebook Graph API App in Flash: Setup and Design – Tuts+ Premium

Premium Preview

Read the Full Tutorial

Tuts+ Premium Membership

Workshop: Google Calendar – Critique

Introduction

Intrinsically Google

Built for the Savvy

Wrapping Up

Your Turn

The Math and ActionScript of Curves: Drawing Quadratic and Cubic Curves

Final Result Preview

Step 1: Curves

Step 2: Graphing Curves

Step 3: Quadratic Coefficients

Step 4: Alternative Equation One

Step 5: ActionScript Implementation

Step 6: Alternative Equation Two

Step 7: Importing Coral

Step 8: ActionScript Implementation

Step 9: Implementation Explained

Step 10: Graphing Cubic Curve

Step 11: Cubic Coefficients

Step 12: ActionScript Implementation

Step 13: Alternative Method

Step 14: ActionScript Implementation

Step 15: Polynomials of Higher Degree

Step 16: Dividing Regions

Step 17: ActionScript Implementation

Step 18: Variations

Step 19: ActionScript Implementation

Conclusion

Weekend Lecture: Understanding Games, a Flash Game About Game Design

Play the Games

Episode 1

Episode 2

Episode 3

Episode 4

Workshop Coding Challenge: Fix This Breakout Game

The Challenge

Enable the Latest AIR SDK in Flash Professional CS5.5+

Flash Professional CS5.5 Guide

Step 1: Download the Latest SDK

Step 2: Backup Your Current SDK Folder

Step 3: Create the New SDK Folder

Step 4: Final Configuration Settings

Flash Professional CS6 Guide

Step 1: Download the Latest Adobe AIR SDK

Step 2: Link the New SDK Folder to the Flash IDE

Step 3: Publish

Conclusion

Quick Tip: Versioning Your Files With Dropbox (via Webdesigntuts+)

Introduction

Version History in the Cloud

Useful Resources

Workshop: Nuclear Outrun – Critique

Play the Game

Overview

Gameplay

Graphics

Audio

Conclusion

Your Turn

Understanding Variables, Arrays, Loops, and Null: The Post-it Note Analogy

What’s a Variable?

What’s an Array?

You Can’t Write That on a Post-it

So What Does null Mean?

Garbage Collection

Arrays of Objects

Loops

Other Bits and Pieces

Objects

More on Garbage Collection

Any Questions?

Which Tuts+ Site Should We Launch Next?

Have Your Say

Win a 6-Month Tuts+ Premium Membership

So What Does `null` Mean?