Greetings all, still haven’t fixed the PC, and no plans in buying a new one. But, being forced to use a Macbook with no games installed(damn DotA) and a slow connection, I managed to find some time to get back into Flash and ActionScript.

I finally figured out how to setup external class libraries in FlexBuilder, which took longer than I would have hoped. Now I can use Papervision3D, Away3D and have a central library for all other API’s and classes.  It’s not as enjoyable as FlashDevelop, but, it’s better than nothing.

I also started playing with PV3D, which is just awesome. Very fun to play around with, and I can’t wait to make something I could use for my eternally work-in-progress site.

And finally, there’s a new tweening engine on the block. It’s called gTween and it’s made by Grant Skinner, so you know it’s great. Like TweenLite, it aims for speed and it’s also very lightweight. It’s still in beta, and not as powerful and feature-packed as TweenMax or other tweening engines. I haven’t tested it enough to choose it over TweenLite yet, but, I like it’s different approach to creating and managing (yep, you could manage, edit, reuse and even nest) tweens. Check it out here.

And, yeah, I would post my little “experiment” with Papervision, but I can’t seem to extract/find the swf file. I even tried using the .as file as a Document class to a Flash file, but I still can’t double-click and play the movie.

I am also having trouble with FlexBuilder, whenever I Run/Play button to test a project, it often doesn’t show anything until several retries or not at all, but using the .as file as a Doc class to a Flash file, it plays fine. Any help would be very much appreciated.

I recently got an invite from someone at the kirupa.com forums to some Aviary tools. I only have access to two tools at the moment (Phoenix and Peacock), and only tested Phoenix (Peacock was a bit too complicated to test).

All I’ve got to say is, wow. This toolset is quite impressive. It has some very nice basic features, a few filter effects, hotkeys (!), and it is very smooth (it’s slow at times, but that’s because of my limited CPU). The interface is very nice, although the icons and panels are a little too big and take a lot of real estate IMO.

Still, it’s a little buggy, and there a Feedback menu on the toolbar for easy, well, feedback. I’m going to play more with Phoenix and try to make something cool. I really want to test Hummingbird (the 3D editor), but I don’t know how to sign up for the beta or even if it’s available.

I have a few invites remaining, so if you want to try them, just post.

Here is another class I made for my site… It’s nothing fancy, and in fact it could easily be done without this class, but basically, this class creates a rectangular object and fills it with an image from an outside source, tiles it, and you could easily adjust the width and height of the object, and load a new pattern.
Usage:
[sourcecode language='js']
import com.mindfock.display.TiledBG; //import class
…
tiledBG = new TiledBG(”path/to/pattern.gif”, 800, 600);
addChild(tiledBG);

tiledBG.tileWidth = 500 // change width
tiledBG.tileHeight = 500 // change height

tiledBG.newPattern(”path/to/new/pattern.gif”); //changing pattern image
[/sourcecode]

Download here.

I’ve been working on my site for a few weeks now, and I have developed a class that will handle how I display assets on my site.

Basically, it “throws” in items into the stage, and you could shuffle them around or you could stack them up. I’ve made it very easy to use, and it’s still under development, but I think it’s ready to be used by others. This is my first class I’ve ever shared, and though it’s not much, I hope someone likes it or maybe even use it.

You can use any DisplayObject as the ‘items’ of the Shuffler.
There are explanations in the code, but here are some important points

• shuffle() - shuffles the items
• stack() - stacks the items
• setFocusOn(item:DisplayObject) - sets the item param as the focused item
• addItem(item:DisplayObject) - adds item param to the shuffler
• deleteItem(index:int) - deletes the item at index
• has max property for maximum number of boxes allowed. 0 for infinite.

Here is an example:

Sample usage in code:
[sourcecode language='js']
package{
import flash.display.DisplayObject;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.*;
import flash.text.TextField;
import com.mindfock.ui.Shuffler;

public class TestShuffler extends Sprite{
private var boxes:Array;
private var shuffler:Shuffler;
private var stacker:TextField;
private var shuffle:TextField;
private var adder:TextField;

public function TestShuffler(){
init();
}
public function init():void{
shuffler = new Shuffler(400, 300, 6);
createBoxes(6);
createButtons();
addChild(shuffler);
}
private function createBoxes(num:int):void{
boxes = new Array();
for (var i:int = 0; i < num; i++)
{
trace("created");
var box:Sprite = drawBox(50, 50) as Sprite;

boxes.push(box);

shuffler.addItem(box);
}
}
private function drawBox(w:Number, h:Number):DisplayObject{
var box:Sprite = new Sprite();
box.graphics.lineStyle(2, 0x000000);
box.graphics.beginFill(Math.random() * 16000000);
box.graphics.drawRect(0, 0, 100, 100);
box.graphics.endFill();

return box;
}
private function createButtons():void
{
// I've left out the drawing of the buttons
square.addEventListener(MouseEvent.CLICK, shuffleHandler);
square2.addEventListener(MouseEvent.CLICK, stackHandler);
square3.addEventListener(MouseEvent.CLICK, addHandler);
}
private function shuffleHandler(event:MouseEvent):void{
shuffler.shuffle();
}
private function stackHandler(event:MouseEvent):void{
shuffler.stack();
}
private function addHandler(event:MouseEvent):void{
var newBox:Sprite = drawBox(50, 50) as Sprite;
shuffler.addItem(newBox);
}
}
}
[/sourcecode]

Download source

Just save it in your classpath, under com/mindfock/ui

You need TweenLite for the tweening animations… If you don’t know what it is, you should look into tweening engines. They will save you a lot of hard work.

Now that I’ve got the main bulk of my site done, I hope I can finish it before classes start.

Adobe® Flash® Player 10, code-named “Astro,” introduces new expressive features and visual performance improvements that allow interactive designers and developers to build the richest and most immersive Web experiences. These new capabilities also empower the community to extend Flash Player and to take creativity and interactivity to a new level.

Wow, this is great news. The features list is very impressive. I am especially excited GPU acceleration support. That means greatly improved performance since on previous versions, everything was handled by the CPU alone.

• 3D Effects - Easily transform and animate any display object through 3D space while retaining full interactivity. Fast, lightweight, and native 3D effects make motion that was previously reserved for expert users available to everyone. Complex effects are simple with APIs that extend what you already know.
• Custom Filters and Effects - Create your own portable filters, blend modes, and fills using Adobe® Pixel Bender™, the same technology used for many After Effects CS3 filters. Shaders in Flash Player are about 1KB and can be scripted and animated at runtime.
• Advanced Text Layout - A new, highly flexible text layout engine, co-existing with TextField, enables innovation in creating new text controls by providing low-level access to text offering right-to-left and vertical text layout, plus support for typographic elements like ligatures.
• Enhanced Drawing API - Runtime drawing is easier and more powerful with re-styleable properties, 3D APIs, and a new way of drawing sophisticated shapes without having to code them line by line.
• Visual Performance Improvements – Applications and videos will run smoother and faster with expanded use of hardware acceleration. By moving several visual processing tasks to the video card, the CPU is free to do more.

And this of course means that Flash CS4/10 will soon follow. And that’s what I will be waiting for like a child on Christmas Eve.

http://labs.adobe.com/technologies/flashplayer10/

Demos. The Flash demo is not much, but the videos at the bottom of the page are well worth a watch. You need to download and install the beta player, and I have no idea how stable it is.

I was just getting the hang of creating liquid layouts in AS2.0 a few months ago, and boy, is it quite a concept to grasp. Now I have to relearn everything I learned using AS3.0.Thankfully, once I understand the concept, all I have to do now is do it with unfamiliar syntax.

In this little tutorial, I’ll show AS2 and AS3 code showing the same end result. This is just very basic, just showing the differences between the two (which isn’t much), and to show how to get started with creating liquid layouts.

By the way, liquid layouts are layouts that change dynamically according the stage’s size. Not unlike liquid in a container, which takes the container’s size and shape, thus the name.

The movie shows 4 boxes I drew on four sides of the stage, changing position according to the stage’s size. Obviously, you could also adjust other properties of the MovieClip, like scale, alpha, rotation, etc.

First, the AS2.0 code:
[sourcecode language='jscript']Stage.scaleMode = “noScale”;
Stage.align = “TL”;

setStage();

var stageListener:Object = new Object();

Stage.addListener(stageListener);
stageListener.onResize = function() {
setStage();
};

function setStage() {
var WIDTH:Number = Stage.width;
var HEIGHT:Number = Stage.height;

box1._x = WIDTH-box1._width;
box1._y = HEIGHT/2-(box1._height/2);
box2._x = WIDTH/2 - (box2._width/2);
box2._y = 0;
box3._x = 0;
box3._y = box1._y;
box4._x = box2._x;
box4._y = HEIGHT - box4._height;
}[/sourcecode]

AS3.0:

[sourcecode language='jscript']
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

setStage();

stage.addEventListener(Event.RESIZE, stageResize);

function setStage():void{
var WIDTH:Number = stage.stageWidth;
var HEIGHT:Number = stage.stageHeight;
box1.x = WIDTH - box1.width;
box1.y = HEIGHT/2 - (box1.height/2);
box2.x = WIDTH / 2 - (box2.width/2);
box2.y = 0;
box3.x = 0;
box3.y = box1.y;
box4.x = box2.x;
box4.y = HEIGHT - (box4.height);
}

function stageResize(e:Event):void{
setStage();
}
[/sourcecode]
So, there isn’t really much difference between the two. AS3 is easier to understand because of its better event handling methods.

A little explanation for the 2 codes above, since they are quite similar. The first 2 lines are very important. Basically, they are telling the player to not do anything to objects on the stage when the stage is resized, because we want to control everything that happens when the stage is resized by code. Without those lines, the movie won’t work as expected.

The setStage() function is pretty self explanatory, it is where we do all the positioning of the movieclips. I like to put all of the code that does the positioning, resizing, etc. work in a function (preferably rolled into one), so I could call it at least once anytime I want. This is useful when initializing the movie, where all the movieclips might not be in their right place. And it is easier to put into the listener function too. You could also do it in the listener function, but I don’t recommend it.

We then call the setStage() function at least once, to position our movieclips where they should be, because when I created them in Flash, they are pretty much all over the place. If we don’t call that function, then they’ll only fall into place when we start resizing the stage.

And now to the part where the two codes are most different. Adding listeners to the stage. In AS3, it is quite straightforward. We add a listener, in this case stageResize() and listen to RESIZE events, to the stage object, which does nothing but call setStage(). You could also add other functions in there if you want to do something else when the stage resizes. In AS2, we have to create a listener object, tell that object to listen for the resizing event and execute the setStage() function. Again, you could add other functions in there.

So, there you have it. A basic Flash liquid layout. I hope this helps anyone who is having a hard time understanding this concept (I know I did). Now, this tutorial only showed changing the position of movieclips, by assigning values to them. But you could also change their position and/or size by percentages. Like 30% of the stage (I know this tutorial shows applying 50% of the stage), so you could adjust the visual elements of your movie to fit any size of resolution properly, at a limit of course.

NOTE: Notice the capital ‘S’ in Stage in the AS2 code and the small ’s’ in the AS3 code. Don’t mess those up!

Here are the source files of this tutorial.

AS2 source (Flash 8 )

AS3 source (Flash CS3)

I am in the process of converting from AS2 to AS3 right now, so I am going to try my best to post everything I learn in this blog. It might help others out there who are still also in the process of converting. To those who aren’t, you should.

This time it is about loading external images/swf’s.

In AS3, there are several types of DisplayObjects you could use to display on the stage (thus the name), along with MovieClips, Sprites(simple movieclips), Bitmaps(for bitmap data) and Loaders.
The Loader object is obviously what we would use to load these external visual data.

Basically, the Loader is just like a MovieClip, since they have a common superclass (well actually MovieClip is derived from Sprite, which is a sibling of Loader). It’s a like a MovieClip that could load objects. So, if you are coming from AS2, it would make things easier to think of it as just a MovieClip.

So, to load an image named “image.jpg”, first you need to create the Loader object. In the first frame of your timeline:

[sourcecode language='js']var loader:Loader = new Loader();[/sourcecode]

Now you need the url of the image to load it. The Loader object has a load() method that takes a URLRequest parameter. It’s just a class that handles url’s very well. Heh, I don’t really know much about it, you could read more of it in documentation.

[sourcecode language='js']var imageUrl:URLRequest = new URLRequest(”image.jpg”);[/sourcecode]

Now that we have our Loader object and our URLRequest, we could now load our image. It’s just simply calling the load() method of Loader and passing our URLRequest as argument.

[sourcecode language='js']loader.load(imageUrl);
addChild(loader);[/sourcecode]

After loading and adding it to the stage, you could do anything with it as you please.

[sourcecode language='js']loader.x = 50;
loader.alpha = .5;[/sourcecode]

Of course, you would want to have preloading for this kind of stuff. And yes, the Loader object generates similar events to the MovieClipLoader object we so loved in AS2. But all this happens very differently in AS3. All the information about the object being loaded is being held by a LoaderInfo object inside the Loader object.

So here is the code that traces the amount of kilobytes loaded adds the Loader object to the stage if loading is completed.

[sourcecode language='js']loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loading);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);

function loading(e:Event):void{
trace(loader.contentLoaderInfo.bytesLoaded);
}

function loadComplete(e:Event):void{
trace(”loaded”);
addChild(loader);
}[/sourcecode]

Hope this post helps others who are still starting to move to AS3. A lot has changed between the two, but AS3 is definitely the better one.