Archive for the ‘Actionscript’ Category

Joshua Davis @ FITC Toronto 2009


Friday, October 16th, 2009

Watch this talk Joshua Davis did at FITC this year! I will be posting more videos when I have some time!

Adobe’s BrowserLab


Friday, October 16th, 2009

BrowserLabOne of the hardest part of developing websites is getting them to look the same across all browsers. Flash has helped a little bit. But still, its nice to be sure that your site is going to look the same, no matter where its viewed (ahem, IE!).

Along comes BrowserLab, by Adobe. This web-based software allows you to emulate different browsers, and view any site in them! You can even do a side-by-side comparison. If you use Dreamweaver CS4, you can get an extension to test your files in the different browsers.

Their website says that this is an open free preview of their new service, so expect this to cost some money in the future. Good thing about that is, if they are charging for it, you can also expect a bunch of great features to be added!

The following browsers are supported:

  • Firefox 2.0 – Windows XP
  • Firefox 3.0 – Windows XP
  • Internet Explorer 6.0 – Windows XP
  • Internet Explorer 7.0 – Windows XP
  • Internet Explorer 8.0 – Windows XP
  • Safari 3.0 – OS X
  • Safari 4.0 – OS X
  • Firefox 2.0 – OS X
  • Firefox 3.0 – OS X

Adobe has really stepped it up with this one! An AIR app would be perfect! At least we can keep up via @adobebrowserlab.

BrowserLab Screenshot

Clean Coding Makes You Worth More Money


Wednesday, October 14th, 2009

Clean Code!If you’ve just started writing Actionscript 3 applications, you are probably not too familiar with most of the “best practices” for coding. Even if you’re like me, and have been developing for half your life, chances are you don’t always follow the rules. Some of us didn’t even know there were rules. Let me take that back, rules sound so constraining. Chances are, you don’t follow all of the known best practices for efficient, easy-to-digest code.

Some would argue that clean coding, and best practices won’t directly result in more money coming in for your projects. I disagree. While you can’t exactly charge a client an extra $10 an hour and say it’s because you use “best practices” and “clean code”, you can make yourself easier to work with, more efficient, and more likely to get return clients.

Let me break that last bit down for you, clean coding makes you:

  • Easier to work with
    Following common best practices will enable other developers to quickly figure out, debug, and augment your code. Even if you are not working in a team environment, you can quickly earn the reputation of a spaghetti programmer (sloppy, hard to follow code). This is not something you want to happen, it can affect your chances of getting that great job or project you need.
  • More efficient
    If you are spending less time trying to figure out how all that sloppy code works that you wrote weeks or even months ago, you are getting more done, in less time. This means you are being more efficient. Less time + more tasks = more money per hour!
  • More likely to get clients to come back
    This is especially true if your clients ever see your code. I know a few years ago, before I started paying close attention to how well I wrote my code, clients with even minimal Actionscript experience would mention that my code seemed sporadic!

Big picture, better coding techniques = more personal worth. Now let me go over some poor coding techniques , most of which I used to practice without knowing there was a better way.

1.) Variable declarations spread throughout the program

We’ve all seen this, variables declared randomly all over the code. Every time some new variable is needed, you just create it right then, and leave the declaration were it was written. You end up with rouge variables being created all over the place.

The proper way to do this, is to keep ALL of your variables declared up at the top of your actionscript file. I also suggest ordering your variables in some sort of organized fashion.  For example, some times I will sort my variables by type:

// Array's
private var myArray1:Array;
private var myArray2:Array;

// Sprite's
private var mySprite1:Sprite;
private var mySprite2:Sprite;

// Boolean's
private var myBoolean:Boolean;
public var myBoolean:Boolean;

2.) Poor Event management

Every time you make an even listener, don’t forget you created it! As soon as the event has triggered, remove it (unless you need to keep listening for it). For example, if you have a listener on a button that goes to a new section and removes the button, remove the listener as well!

myButton.addEventListener(MouseEvent.CLICK, buttonHandler);

private function buttonHandler(e:MouseEvent):void {
    myButton.removeEventListener(MouseEvent.CLICK, buttonHandler);
    launchSection(newSection);
}

If you don’t pay attention to your event listeners, they can easily get out of hand. It’s much better to think out each event listener as you create it, and remove it when you can.

Another sorta hack you can use is weak references in your event listeners. The 5th argument in addEventListener is useWeakReference, and if you pass true, it will allow the actionscript garbage collector to grab Objects you’ve removed form the display, even if you have an event listener still on it. Without weak references & removing all of your event listeners, you could end up with a memory leak.

3.) Not removing Objects from memory

Every time you create a reference to an Object, you are taking that much memory from the computer. If you don’t remove each of the Objects you create, you can end up with another memory leak, especially if you are dynamically creating Objects.

It’s easy to think that removing an Object from the display removes it from the memory. This is far from the truth. You have to remove the Object from the display, remove all references to the Object, including event listeners, AND null out the Object.

// Create your Object
var myObject:Object = new Object();
myObject.addEventListener(CustomEvent.Event, eventHandler);
addChild(myObject);

// Later
myObject.removeEventListener(CustomEvent.Event, eventHandler);
removeChild(myObject);
myObject = null;

4.) Not Using Object Oriented Programming

The perfect way to organize your code is by using OOP. I have written an introduction to Object Oriented Programming that should get you started writing OOP.

4.) Not Keeping Your Code Clean

What is clean code? I would say its when you can read the code like a book, without the need for comments. The methods are all laid out in a somewhat linear fashion. They lead into one another, and are grouped together based on their relationships to each other.

This brings me to the next one:

4.) Using Bad Naming Conventions

Always name your variables & methods with clear intentions. Anyone should be able to understand what something does just by reading its name.  Don’t use funny names, try to make the names as informative as possible.

If your function hides all of your nav items, you could call it hideNavItems(). If your Array holds a reference to a collection of Sprites, you can name it spriteHolder.

More Resources

As you can see, there are plenty of ways you can make your code easier to understand & update. This will be beneficial not only to you, but to anyone who ever has to update or adjust your code in the future.

The biggest thing to take from this, is that by witting clean code, you increase your worth as a developer. Don’t take my word from it, give it a shot. Spend some time learning ways you can write cleaner code…

For now, you can start with some links to books & articles on the subject:

If you have any clean coding techniques, share them with us in the comments!

http://www.amazon.com/ActionScript-3-0-Design-Patterns-Programming/dp/0596528469/ref=sr_1_1?ie=UTF8&s=books&qid=1255579216&sr=1-1

Photoshop.com Mobile released for iPhone


Wednesday, October 14th, 2009

Photoshop.comAdobe is on top of it! They’ve released a mobile version of Photoshop for the iPhone, now you can edit your photos on your phone! Don’t know how useful this will really be, but I bet it turns out to be pretty cool. I mean, how cool is it to edit your photos via multi-touch?!

Some of the features include:

  • Crop, rotate, change color with just a touch.
  • Give an extra glow with Soft Focus.
  • Get artsy with Sketch.
  • Apply one-touch effects like Warm Vintage and Vignette.

Their website says you can:

Open a free Photoshop.com account to upload, store, and share all of your iPhone photos. Enjoy 1,000s of photos in your pocket by accessing your entire Photoshop.com photo library right from your iPhone. Right in the moment.

Watch Adobe MAX Sessions Online


Tuesday, October 13th, 2009

Adobe MAXIf you didn’t get to go to Adobe MAX (Don’t worry, I didn’t either), you can still see most of the sessions online. Some cool ones to check out are Flex for mobile, Flash Builder 4 Advanced Tips & Tricks, Effects in Flex 4, Building Applications for iPhone with Flash and Tackling Memroy And Performance in Flash, Flex & Adobe Air.  It’s filled with great content, so don’t stop there.

Material Memory Leak Issue In Papervision3D


Thursday, October 8th, 2009

PapervisionSince I started working with Microsoft back a few months now, I have been focusing nearly 100% on Papervision3D-related projects. We are basically building new ways to advertise on Microsoft sites, moving beyond the normal banner or 300×250 ad (more on this as the products are released). We were running into problems with processor usage & memory leaks when you would use a Bitmap Material, then try to remove it (via removing the object using it).

After a while, you could easily start putting the processor usage up near 100%, especially if you are using dynamic object creation/removal, and are not making sure you totally clear out the material & all references.

We searched through the docs & internet for days trying to figure it out, eventually found this, which helped us along our way. In his post, Idoru mentions we need to update the destroy() method, but the PV team seems to have fixed that since his post was made.

To really clear the Material, you need to

// Set material interactive & animated to false
my_material.animated = false;
my_material.interactive = false;

// Remove all EventListeners
my3DObject.removeEventListener(InteractiveScene3DEvent.OBJECT_CLICK, clickHandler);
my3DObject.removeEventListener(InteractiveScene3DEvent.OBJECT_OVER, overHandler);
my3DObject.removeEventListener(InteractiveScene3DEvent.OBJECT_OUT, outHandler);

// Remove Child from Display
my3DGroup.removeChild(my3DObject);

// Run the destroy function on the material
my_material.destroy()

// Null out all of the things involved
movie = null; (if using a MovieMaterial i.e. my_material.movie)
my3DObject = null;
my3DGroup = null;
my_material = null;

This should work the same with all of the Materials too.

Flash OFFICIALLY On The iPhone!


Wednesday, October 7th, 2009

That’s right! Adobe announced a short while back at MAX that Flash Professional CS5 will be able to output real iPhone App’s that can go into the iPhone App Store! Here’s a brief snip from adobe, make sure you check out the video, which shows a few Apps already in the App Store!

Flash Professional CS5 will enable you to build applications for iPhone and iPod touch using ActionScript 3. These applications can be delivered to iPhone and iPod touch users through the Apple App Store.

A public beta of Flash Professional CS5 with prerelease support for building applications for iPhone is planned for later this year.

If you are looking to start developing App’s for the iPhone, check into this article from Adobe. There is also a very comprehensive FAQ on developing AS3 for the iPhone and a developers forum. I would also sign up to find out when the beta becomes available.

This is going to be a very interesting development for the iPhone! Expect DestroyYourComputer to release plenty of App’s in the near future!

Introduction To Object Oriented Programming


Sunday, October 4th, 2009

FlashOne of the most important things to understand when building large-scale, expandable Flash projects is Object Oriented Programming, or OOP for short. According to Wikipedia:

Object-Oriented Programming (OOP) is a programming paradigm that uses “objects” – data structures consisting of datafields and methods together with their interactions – to design applications and computer programs.

Basically, its a style of programming, that makes things much easier! I’m sure you’ve seen projects that had hundreds, if not thousands of lines of actionscript written to make all the magic happen. If the original programmer didn’t use an “OOP style” of programming, you would probably have to spend a good few hours just trying to figure out what the program does, let alone change anything and not cause more bugs in the process! This type of programming is sometimes refereed to as “Spaghetti Code” because you have to follow long twisty noodle-like paths to get around.

A more effective way to program is to take the Object Oriented approach. You organize every different piece of the program into different Classes.

An Object is a collection of attributes & behaviors encapsulated into a one small entity. The attributes are all of the variables. For example, if we were creating a BabyBoy() Object, some attributes we may have are eyeColor, height, weight, age, etc. These variables hold all of the data that is contained within the BabyBoy() Object. Some behaviors we might find are eat(food:FoodObject), sleep(duration:Number), dance(bpm:Number).

If the behaviors (methods) I just showed you don’t make any sense, you should read up on Actionscript Functions.

So now that you know what an Object is, you need to understand how Instances work. When you have an object class, you don’t actually reference the class, you create an instance of it. For example:


var myObjectInstance:Object = new Object();
// Then we adjust the attributes (variables) & run
// the behaviors (methods) on that instance.

myObjectInstance.myVariable = "New Variable Value";
myObjectInstance.myMethod();

Classes are blueprints of an Object. They organize all of the variables & methods that each Object can use. A basic BabyBoy() Class would look like this:


package com {
 // import the class we are going to extend
 // (More on this soon)
 import flash.display.Sprite;

 // import the custom classes we use
 import com.food.FoodObject;

 public class BabyBoy extends Sprite {

 private var eyeColor:uint = 0xFF0000;
 private var heightInInches:Number = 13;
 private var weightInPounds:Number = 12;
 private var ageInDays:Number = 4;

 public function BabyBoy() {
 // Constructor functionality
 }

 public function eat(_food:FoodObject):void {
 // Eat functionality
 }

 public function sleep(_duration:Number):void {
 // Sleep functionality
 }

 public function dance(_bpm:Number):void {
 // Dance functionality
 }

 }

}

As you can see, everything that you want an instance of the BabyBoy class to be able to do, has to be built into the Class. Let’s go through the class one section at a time.

First off, at the top, we declare where the actual class is located: package com { is actually saying “this package lives inside of a folder called com”. So next to your FLA & Actionscript file, there would be a folder named com. This is where you organize and hold all of your Class files. You want to keep it as organized as possible.

Next we import all of the Classes we are going to use in this particular Class. We then declare the Class, extending the Sprite Object:

public class BabyBoy extends Sprite {

The name BabyBoy must match exactly the file name (minus the .as) and the first function (constructor) name.

After the class name, you declare the variables you are going to be using. If you use private before the var, the variable is only accessible from within this class. You will not be able to access it from another place. However, if you needed to access it from outside of this Object, you could change the private to be public. Now you can access the variable from anywhere, just target the class instance then the variable:

myClassInstance.myVariable = "new variable value";

trace(myClassInstance.myVariable);
// displays "new variable value"

Next up is the constructor function. The name of the constructor must match the file name (minus the .as) and the Class name. This method executes when an instance of the class is created. You want to use this function to call other functions that set up the object, or do any procedures you need to make the Objects functionality work.

Finally we have the rest of the public & private methods/functions. These are the brains of the Object. You call on these to make the Object work.

Let’s take a sec and do a visual re-cap:

Object Oriented Programming

Let’s say for a particular project, you would be needing classes for BabyBoy, BabyGirl, YoungBoy, YoungGirl, OldMan and OldWoman. You would probably want to have a folder (package) inside of the com folder called “people”. Inside of people, you would put all of your classes.

If you needed to add another class or two for Dog() & Cat() Objects, you would create another folder inside of com called “animals”. This keeps all of your classes organized into thought-out structures. It’s easier to locate the class you need when your package structure is well designed.

In the BabyBoy() Class example, we are extending the Sprite() Object. This is called Inheritance. Just as when you inherit money from a rich relative, when you extend an Object, you inherit all of its variables & methods. Sometimes you can start out with a fresh class, and have no need to inherit the characteristics of another Object. However, sometimes it would save you tons of time to extend a Sprite() Object instead of going from scratch. You get dispatchEvent() for sending out Events, addChild() for placing DisplayObject’s into the Object, and so forth.

When starting to write a new class, you should think about what your class is going to need to do, and see if there is already a class written that has some or all of that functionality built in. If you find one, go ahead and extend it for your new creation, and add the custom parts that were not inherited.

Encapsulation is an important part of OOP, which pretty much means hiding the details of how an Object does what it does. You expose an Interface to use the Object, which is made up of the public methods in the Class.

A good way to imagine Encapsulation is to think of a computer. You don’t need to know exactly what is going on after you hit the power button, you just need to know that pushing that button turns the computer on. You also don’t need to know how the keyboard sends the letters to your screen, you just need to know it does.

So you build a good collection of public methods that cover all of the stuff you’re going to have to use to actually use the Object, and the rest of the functionality is broken up into small private methods that do individual tasks.

That covers the basics of Object Oriented Programming. If you still can’t wrap your head around the ideas, don’t worry, sometimes it takes a few times to sink all in. If you have a specific question, just leave a comment, and I will try to answer everything & revise the article to explain it a bit more clearly.

I would also suggest taking a look at some of these resources:

Flash Builder & CS4 Keyboard Shortcut Cheat Sheets


Sunday, October 4th, 2009

Cheaters!No, I didn’t create another cheat sheet for Flash shortcuts, however, some people still haven’t seen these, so I figured I’d post them up!

These PC & Mac versions of the shortcut lists made by Subdivision. Really worth checking out if you are not already a shortcut shaman.

Also, if you are using Flex Gumbo, aka Flash Builder, you should print up this shortcut sheet (made by eromdesign.com)!

Knowing all of the keyboard shortcuts will speed up your development time. The less you have to use the mouse, the less distracted from the actual programming you will be. Since I started contracting for Microsoft, I’ve had access to the MS Library, a huge collection of development-focused books & tools. Over the last few months, I have really taking in as much as I can & grabbing all of the non-language specific programming books, and they all say that knowing the keyboard shortcuts is one of the more important parts of rapid development.

I will be writing up an article on being a quick & efficient AS3 programmer soon, as well as guides to having clean, re-usable code. Look for those soon!

com.dyc.photo.Slideshow


Friday, October 2nd, 2009

FlashIt doesn’t get any easier than this. Need to make a quick slideshow? This is all you need (Plus the Tweener class, which needs to be installed in the same directory as your source FLA).

Download it here!

Here is another easy to copy example on how to use this bad boy:

import com.dyc.photo.Slideshow;

// Pick some photos to go through
var tempPhotoURL1:String = "http://tinyurl.com/ydy48zj"
var tempPhotoURL2:String = "http://tinyurl.com/y8w5p9g"

var photosListArray:Array = [tempPhotoURL1, tempPhotoURL2];

var my_slideshow:Slideshow = new Slideshow(4, 4,  photosListArray, "easeOutExpo");
addChild(my_slideshow);

/*
Other functions you can call on this:

my_slideshow.pause();
my_slideshow.resume();
*/

It’s pretty straight forward, you just import the class, create a new Slideshow object, and pass your setup variables to the newly created object.

The following arguments are accepted:

  • photo_display_time:int
  • fade_time:int
  • photoURLs:Array
  • easing:String

You can addChild() this to a masked off MovieClip or Sprite, to make it fit in with your particular design. For the easing:String parameter, you can pass any of Robert Penner’s Easing Types.

Let me know if you have any trouble with it, shouldn’t be too many places this can break down ;D