I’ve been busy at work, perhaps the reason why it was so silent on this blog.
But I’m back! And one of my first act is to update the Google AS3 Library I’ve build a while ago.

I started the library to support Google’s Ajax search API.
Later on, when I found some new webservices, I added those too. At the end, the entire library was one messy organically grown library.
So I decided a while ago to clean that mess up.

Changes & new features

• I reordened the package structure, meaning I devided the API in ajaxapi (search, translation and, the newly added, feeds), apicore (where you can store your api key), suggest (using the Google Suggest webservice) and weather (using the weather services).
• I changed the name of the event GoogleSearchEvent to GoogleApiEvent, which is more relevant since the library is more than the Ajax search API.
• Dito for the class that unites all features called GoogleSearch, it’s now called GoogleApi
• As already mentioned, I also added the ability to use an api key.

I hope those changes make the library at least a bit more transparent and easier to get.

Updating

If you want to update the library your using, the easiest way is using FDT.

1. Delete the old library and add the new one instead.
2. Right-click your source folder, goto Source and click ‘Organize imports’.
3. This will change your imports and correct them accordingly, so they point to the correct classes.
4. Correct the eventname, GoogleSearchEvent becomes GoogleApiEvent. You can do that by using a find & replace, same for GoogleSearch to GoogleApi

Gimme, gimme , gimme

The classes are still on Google Code, where a new version of the library has been committed into the SVN.
The old classes have been moved to the branch folder. There is also a new update for GoogleEyes, containing the new libraries.

You can download those libraries here.
GoogleEyes demo app can be found here.

The project is hosted on Google Code (see).

Multi-Mania is going to be a two day free conference in KORTRIJK XPO, BELGIUM offering workshops and 4 tracks full of national and international speakers … kind of unique in Europe …especially because the conference doesn’t cost anything for the attendees. They want all the multimedia folks to learn something, be inspired and get connected !

Multi-Mania 09

The  first day of the event (May 18th) will be one day full of workshops where you will be able to learn a lot from the experts. The second day (May 19th) will be the full conference like you know ‘em from the last 9 years!
That means that they are expecting more then 30 spreakers from around the world who have something cool and interesting to say about DESIGN, DEVELOPMENT, MOBILE,  VIDEO/AUDIO and 3D DESIGN/DEVELOPMENT.

Of course the one and only awardshow in the evening will be there, where the best multimedia student projects will win cool prices and afterwards we can celebrate at the 2M09 PARTY !! If you, as a company, want to meet the upcoming talents, the awardshow is “tha place to be” !

Last year they had more then 1000 peoples attending the event and this year they even have space for even more attendees.
Registration for the event is FREE and will open at April 20, so mark that date in your agenda!

Speakers will be announced very soon so make sure to check the http://www.multi-mania.be website as much as you can in the upcoming days… weeks…

If you are interested in sponsoring the event or if you have something cool to talk about, do not hesitate to contact Koen De Weggheleire at info@newmovieclip.com.

I am looking forward to it and I hope you also do …. 2M09 WILL ROCK !!!

Adobe AIR supports multi-screen by offering the developer a Screen-class.
This class makes it possible to detect screens, get some info, and that’s it.
To open a window on a screen, you’ll have to do some calculations yourself.

To make positioning screens, moving screens, … easier , I quickly build a ScreenManager that takes care of your NativeWindow(s).
Make an instance of the nativewindow and send it throught the manager.
Like this:

var nw:NativeWindow=new NativeWindow(new NativeWindowInitOptions());
nw.width=250
nw.height=90
var mc:MovieClip=new MovieClip(); //movieclip with content
nw.stage.addChild(mc);
ScreenManager.openWindowCenteredOnScreen(nw,2);

The ScreenManager is a static class.
It allow the developer to control a NativeWindow through the following methods:
(incorrect signatures)

• ScreenManager.centerWindowOnScreen()
• ScreenManager.getActualScreenBounds()
• ScreenManager.getScreenColorDepth()
• ScreenManager.getVisibleScreenBounds()
• ScreenManager.moveWindow()
• ScreenManager.openWindowCenteredOnScreen()
• ScreenManager.openWindowOnScreen()
• ScreenManager.stretchWindowToAllScreens()
• ScreenManager.stretchWindowOnScreen()
• ScreenManager.openWindowFullScreenOn()
• ScreenManager.setWindowFullScreenOn()
• ScreenManager.moveWindowToCorner()
• ScreenManager.openWindowInCorner()

and the following properties:

• ScreenManager.mainScreenIndex
• ScreenManager.numScreens
• ScreenManager.maximumAvailableResolution

The ScreenManager can be downloaded here .

In any desktop programming language like C#, Java or even VB, a developer has the ability of performing certain tasks in seperate threads, building a multi-threading application.
A thread is a part of a process that functions independently and seperatly and can only interact through system-provided inter-process communication mechanisms.
This increases the performance of the application and saves the CPU from any high-duty work.
In Actionscript however, there is no custom threading, no threads at all, meaning Actionscript is single-threaded.
That also means unfortunatly, when doing some heavy computation, the UI  of your application cannot be updated while you’re doing that heavy computation, so your application appears stuck or effects don’t run smoothly.

When I was developing the FLVRecorder classes, I encountered this problem, cursing Satan. Converting the saved bitmaps was so intense that the application froze.
A Thread class like in Java, could come in real handy on moments like that, but there is none.
When I was doing some r&d on how to split up code, simulating threads, I found a PseudoThread class by Alex Harui that could simulate a thread in the application on the Adobe Blogs (link: here).

This pseudo-threading works well, it does enhance perfomance a bit, and the most important, the application only slowed down & did not freeze when saving.
But there is a problem with this class, it only works with Flex, because it is using a Flex specific class, called SystemManager (from the mx.managers package).

Using threads in Flash

We are going to convert this PseudoThread class so we can use it in a Flash application and to use this class in Flash, we need to replace the SystemManager class with something else without losing the performance enhancements.

After trying some combinations, I came up with this very good solution.

Here is how I did it…

The class that I found on the Adobe Blogs, uses a UIComponent added to the systemManager to run the code on in a enterframe. I replaced this UIComponent by a Sprite, and the systemManager by the stage.

First, I  changed the constructor of the PT class by replacing the systemManager variable with an instance of the stage.
Then I added a global variable sm, from type Sprite and initialized this variable in the constructor and added it to the stage instance that is passed on in the constructors parameters.
I did some changing on the event listeners, by setting the weakreference parameter on true (adding ‘,false, 0, true’ after defining eventhandling function), allowing the FP to destroy the event listeners easier.

How it looks like

package be.boulevart.threading {
	import flash.display.Sprite;
	import flash.display.Stage;
	import flash.events.Event;
	import flash.events.EventDispatcher;
	import flash.events.KeyboardEvent;
	import flash.events.MouseEvent;
	import flash.utils.getTimer;
 
	public class PseudoThread extends EventDispatcher {
		// number of milliseconds we think it takes to render the screen
		public var RENDER_DEDUCTION : int = 20;
		private var fn : Function;
		private var obj : Object;
		private var thread : Sprite;
		private var start : Number;
		private var due : Number;
		private var sm : Sprite
		private var mouseEvent : Boolean;
		private var keyEvent : Boolean;
 
		public function PseudoThread(yourStage : Stage,threadFunction : Function,threadObject : Object = null) {
			fn = threadFunction;
 
			sm = new Sprite()
			yourStage.addChild(sm)
 
			if(obj == null) {
				obj = threadObject;
			}else {
				obj = new Object()
			}
 
			// add high priority listener for ENTER_FRAME
			sm.stage.addEventListener(Event.ENTER_FRAME , enterFrameHandler , false , 200 , true);
			sm.stage.addEventListener(MouseEvent.MOUSE_MOVE , mouseMoveHandler , false , 0 , true);
			sm.stage.addEventListener(KeyboardEvent.KEY_DOWN , keyDownHandler , false , 0 , true);
 
			thread = new Sprite();
			sm.addChild(thread);
			thread.addEventListener(Event.RENDER , renderHandler);
		}
 
		private function enterFrameHandler(event : Event) : void {
			start = getTimer();
			var fr : Number = Math.floor(1000 / thread.stage.frameRate);
			due = start + fr;
 
			thread.stage.invalidate();
			thread.graphics.clear();
			thread.graphics.moveTo(0 , 0);
			thread.graphics.lineTo(0 , 0);
		}
 
		private function renderHandler(event : Event) : void {
			if (mouseEvent || keyEvent)
			 due -= RENDER_DEDUCTION;
 
			while (getTimer() < due) {
				if(obj == null) {
					if (!fn()) {
						if (!thread.parent)
						return;
 
						sm.stage.removeEventListener(Event.ENTER_FRAME , enterFrameHandler);
						sm.stage.removeEventListener(MouseEvent.MOUSE_MOVE , mouseMoveHandler);
						sm.stage.removeEventListener(KeyboardEvent.KEY_DOWN , keyDownHandler);
						sm.removeChild(thread);
						thread.removeEventListener(Event.RENDER , renderHandler);
 
						thread = null
						thread = new Sprite()
 
						dispatchEvent(new Event("threadComplete"));
					}
				}else {
					if (!fn(obj)) {
						if (!thread.parent)
						return;
 
						sm.stage.removeEventListener(Event.ENTER_FRAME , enterFrameHandler);
						sm.stage.removeEventListener(MouseEvent.MOUSE_MOVE , mouseMoveHandler);
						sm.stage.removeEventListener(KeyboardEvent.KEY_DOWN , keyDownHandler);
						sm.removeChild(thread);
 
						thread = null
						thread = new Sprite()
 
						thread.removeEventListener(Event.RENDER , renderHandler);
						dispatchEvent(new Event("threadComplete"));
					}
				}
			}
 
			mouseEvent = false;
			keyEvent = false;
		}
 
		private function mouseMoveHandler(event : Event) : void {
			mouseEvent = true;
		}
 
		private function keyDownHandler(event : Event) : void {
			keyEvent = true;
		}
	}
}

This class works in Flash (FP9) & Flex.

Conclusion

Pseudo threading is a bit painfull, it’s not the real deal and it’s slow, but it’s the best we have right now.
This can make the difference between a slow app or a smoothly running one.
One day, if Adobe is feeling like it, threading will be build in, since more and more RIA builders long for it and since the competition is getting tougher (Sliverlight has build in threading for example).

Download

Download the PseudoThread class.

Then I found BulkLoader…
It was all I needed, but then the client wanted the image added to the stage at the moment it was downloaded, this is not build in the BulkLoaders classes, so I extended those.

Here is how I did it.

Getting started

We are going to extend the BulkLoader classes so it throws an event when a single download has finished.
To do this, get the latest version of BulkLoader at Google Code.

Unpack the zipped file, and open up the BulkLoader.as and BulkProgressEvent.as in the br.com.stimuli.loading package.

BulkLoader.as

Let’s start with adding an event constant name with the global variables:

public static const ITEMLOADED : String = "item_loaded";

You may insert it under the line (178):

public static const COMPLETE : String = "complete";

Next scroll down to the function _onItemComplete (line 801).
At the bottom of that function you should see the following if-statement:

 if(allDone) {
    _onAllLoaded();
}

replace it with:

var eItemL : BulkProgressEvent = new BulkProgressEvent(ITEMLOADED,item);
eItemL.setInfo(bytesLoaded, bytesTotal, bytesTotalCurrent, _itemsLoaded, itemsTotal, weightPercent);
dispatchEvent(eItemL);
 
if (allDone) {
      _onAllLoaded();
 }

What did we do here?
We’re creating an instance of a BulkProgressEvent and add relevant information to it.
Next we’re going to dispatch it everytime this function is called.
As you can see, we’ve given the constructor another new parameter, the loaded item, we wil have to extend the BulkProgressEvent.

BulkProgressEvent.as

Start with adding a constant, a new name for a new kind of Event, an ITEMLOADED event, you can do that under line 52:

public static const ITEMLOADED : String = "item_loaded";

Next, create an new public variable (or an private one and make it a property by adding a getter & a setter), named lastLoadedItem (under line 70 for example):

public var lastLoadedItem:LoadingItem;

Now we are going to change the BulkProgressEvents constructor by adding a new parameter. Insert llItem:LoadingItem=null after the name parameter so the constructor looks like this:

public function BulkProgressEvent( name : String,llItem:LoadingItem=null, bubbles:Boolean=true, cancelable:Boolean=false ){

We gave it the default value null so we don’t have to change other code from the rest of the project.

Don’t forget to import LoadingItem

import br.com.stimuli.loading.loadingtypes.LoadingItem;

In the constructor, under the line

this.name = name;

add

this.lastLoadedItem = llItem;

Change in the clone function the line:

var b : BulkProgressEvent = new BulkProgressEvent(name, bubbles, cancelable)

to:

var b : BulkProgressEvent = new BulkProgressEvent(name, lastLoadedItem, bubbles, cancelable)

And you’re done!
Now you can add an new eventlistener to you BulkLoader instance and capture every new loaded item.

Usage

Just add another listener to the BulkLoader instance to listen for the ITEMLOADED event.
You can retrieve your last loaded item in the function you assigned to that ITEMLOADED event by calling that public variable/property lastLoadedItem.

var loader: BulkLoader = new BulkLoader("galleryLoader")
loader.addEventListener(BulkLoader.COMPLETE,bloaderComplete)
loader.addEventListener(BulkLoader. ITEMLOADED, itemComplete)
 
private function itemComplete(e:BulkProgressEvent):void{
	trace("lastLoadedItem:" + e.lastLoadedItem)
}

Download

Here is a download, adjusted version of BulkLoader r239: download.

What is BulkLoader?

BulkLoader is a minimal library written in Actionscript 3 (AS3) that aims to make loading and managing complex loading requirements easier and faster. BulkLoader takes a more dynamic, less architecture heavy aproach. Few imports and making heavy use of AS3′s dynamic capabilities, BulkLoader has a one-liner feel that doesn’t get in your way.

BulkLoader tries to hide the complexity of loading different data types in AS3 and provides a unified interface for loading, accessing and events notification for different types of content.

This library is licensed under an open source MIT license. Features:

• Connection pooling.
• Unified interface for different loading types.
• Unified progress notification.
• Events for individual items and as groups.
• Priority
• Stop and resuming individually as well as in bulk.
• Cache management.
• Statistics about loading (latency, speed, average speed).
• Various kinds on progress indication: ratio (items loaded / items to load), bytes , and weighted percentage.
• Configurable number of retries.
• Configurable logging.
• Various assest types (XML, NetStreams, Swfs, Images, Sound, Text Files)

Design goals:

• Minimal imports.
• Few method to learn.
• Consistent interface, regardless of content type.

BulkLoader tries to gracefully handle progress notification in these use cases:

• Few connections to open: bytes total can be used instantly.
• Many connections opened: progress by ratio
• Many connections opened for data of widely varying sizes: progress by weight.

I wish you all a very happy and prosperous new year, 2009, with a minimum on bugs and a maximum on coding fun.
Wish you a good health, a lot of fun, touching, moving moments! That your wishes all come true this year!
Hoping to see some cool new projects the coming year, with a lot of awesome experiments!
Let’s all make it happen, together!

Happy new year!

A while ago, I have build an API library in AS3 that interfaces with Google’s own AJAX API. To show you how performant this API is, I included a demo-app at the bottom of this blog.

The library is a simple collection of the API’s features, there is a class per feature, like Google Web search, Images Search, etc. Each library throws it’s own event with an Array of matching datatypes, for example GoogleWebItem, so it’s easy to keep track on wich data is recieved and what this data contains.

This api contains:

• Google Web Search
• Google Images Search
• Google Book Search
• Google Video Search (Google Video & YouTube)
• Google Blog Search
• Google Local Search
• Google Patent Search
• Google News Search
• Google Translation
• Google Weather
• Google Suggest (new)

This API is Flash & Flex compatible.

Little example code

var googleWebSearch:GoogleWebSearch=new GoogleWebSearch()
 
googleWebSearch.search(txtInput.text,0,lang)
googleWebSearch.addEventListener(GoogleSearchEvent.WEB_SEARCH_RESULT,onWebResults) 
 
private function onWebResults(e:GoogleSearchEvent):void{
   for each (var result:GoogleWebItem in e.data as Array){
      trace(result.title, result.url)
   }
}

The library

You can download the library here (updated).
The demo app can be found here.

Right-click in the app to see source-code.

FLVRecorder for Adobe AIR

About

When I was researching earlier this year whether or not I could capture a webcam feed and save it to the Flash Video Format, I stumbled on a guys blog called Zero Point Nine. He made a class that could save frames (BitmapData objects) passed to it as an FLV.

This was nice, but not very performant, as the parsing of the BitmapData to ByteArrays took way too long and was extremely CPU intensive and your app froze up, I decided to adjust the class and make it usable within an Adobe AIR app without losing a single frame, or freezing the app. For this, I started out with a new class, only copied the algorithms for writing an FLV and started building my own api.
The main target of developing this FLV-recorder was performance on the CPU and RAM side.

FLVRecorder

The purpose of this revolutionary new class is to record a stream of BitmapData to a FLV-file, because writing directly, and especially the converting-BitmapData-to-ByteArrays-with-byteshifting-part, made everything run shaky. I solved that issue by saving the BitmapData to a temporary file on the system. This to protect your RAM from overloading, and when done recording, the class converts that temporary file to an FLV-file.

For developing comforts, I build in a few events as well, when recording starts and stops, and an event while saving, with an indication of your progress.

The class offers the user to record via inputting BitmapData, Bitmaps and even your custom components, Flex component, like your VideoDisplay and also Flash components, like the FLVPlayBack or your custom Sprites and MovieClips.

The class does not yet support adding sound to the flv-file, this is the next step of development, to enable sound recording and add sound to the flv-file.

AirCam

As a proof-of-concept, I built a small application that enables you to record your webcam and saved it on your desktop as an flv-file.

Screenshot of AirCam

Download the AirCam installer here.
To view the source used in this project, right-click somewhere, and choose view source.

The FLVRecorder and all related classes are open source, they are not fully tested and may contain bugs.
I’m happy to share it with the community, use them, play with them and certainly enhance them!
These classes are NOT FOR COMMERCIAL USE and property of BoulevArt nv.

Download the source.

API

The class offers the developer an API to easy implement this in your app.
You should respect a certain flow:

1. Make an instance of the class, it’s a singleton class, so just ask for the instance:
var recorder:FLVRecorder=FLVRecorder.getInstance()

2. Define the target FLV-file’s properties, the file instance to your flv-file, width & height, framerate and the systemManager instance, that’s a Flash internal declared variable and the optional duration in seconds:
file=File.desktopDirectory.resolvePath(“recording.flv”);
recorder.setTarget(file,640,480,fps,systemManager, durationInSeconds)

the duration is optional, it will be automaticly filled in when left blank.

3. Insert some bitmaps, bitmapdatas or a screenshot of a component into the flv-file:
recorder.captureComponent(vidDisplay) //DisplayObject, takes a screenshot from that component
recorder.saveFrame(bmpdata) //Bitmapdata, does nothing with it
recorder. saveSmoothedBitmapFrame(bmp) //Bitmap, smooths before saving
recorder. saveSmoothedFrame(bmpdata) //Bitmapdata, smooths bitmapdata before saving

4. To stop recording, simply command the class to stop, it will start to convert your saved data to the flv-file
recorder.stopRecording()

It will throw 3 events, when saving starts, when savings stops and one while saving to pass on the savings progress
FLVRecorderEvent.FLV_START_CREATION
FLVRecorderEvent.FLV_CREATED
FLVRecorderEvent.PROGRESS //event contains progress property, is a value between 0-1 to indicate progress

5. All done, that’s how simple things can be in life.

6. Test it, use it and give me feedback of your experiences!

How–to-use code example

private var tmr:Timer
private var recorder:FLVRecorder
private var file:File

private function startRecording():void{

if(recorder==null){
recorder=FLVRecorder.getInstance()
}
file=File.desktopDirectory.resolvePath(“recording.flv”);
recorder.setTarget(file,640,480,fps,systemManager)

if(tmr==null){
tmr=new Timer(1000/fps)
}
tmr.addEventListener(TimerEvent.TIMER,record)
tmr.start()
}

private function record(e:TimerEvent):void{
recorder.captureComponent(vidDisplay) //DisplayObject
//recorder.saveFrame(bmpdata) //Bitmapdata
//recorder. saveSmoothedBitmapFrame(bmp) //Bitmap
//recorder. saveSmoothedFrame(bmpdata) //Bitmapdata
}

private function stopRecording():void{
tmr.stop()

//when saving is done
recorder.addEventListener(FLVRecorderEvent.FLV_CREATED,fileMade)

//when saving starts
recorder.addEventListener(FLVRecorderEvent.FLV_START_CREATION,startCreatingFLV)

recorder.stopRecording()
}

private function startCreatingFLV(e:FLVRecorderEvent):void{
recorder.addEventListener(FLVRecorderEvent.PROGRESS,onFLVCreationProgress)
}

private function onFLVCreationProgress(e:FLVRecorderEvent):void{
//e.progress: percent complete (0 to 1)
//pbSaving: ProgressBar component in Flex
pbSaving.setProgress(e.progress,1)
}

Downloads

Contact!

Share your opinion with us, leave a comment!
Also tell me if you’re using the class, what you wanted to see different, share your enhancements!
Don’t forget to show me what apps you made with these classes!

You can always reach me:
just leave a comment!

*UPDATE 1*

Thanks for your feedbacks, I’ve updated the classes to help out a few of you.
What is new:

An enableCompression property: will compress the captured image with the JPGEncoder
Warning! Using this property will slow you application down.

Codecs:
Pick a codec. You can find the available codecs in the FlvRecorderCodecs class.

Pausing & Resuming recordings:
You can pause & resume recordings.
If you stop feeding the class frames, and not call the stopRecording() function, and after a while, feeding it some frames again, it will add those frames to the current movie.

Download update here.

*UPDATE 2*

Because I am using a Pseudo-Threading  class that is using a specific Flex class, and a lot of you are Flash-only developers, I have released a library for Flash (AS3) on Google Code.
Here is a link.

Flash CS3 introduced AS3 and with this new version of ActionScript came a lot of extras. One of these extras is remoting, something that already existed since Flash MX.
If you wanted to use remoting, you had to download an installer from the Macromedia download site, that contained the classes and components required to use this. They did this till Flash 8… 
But then there was AS3, and Adobe decided not to release the AS2 remoting components for this new version of Flash, Flash CS3, because they were build in for use with AS3. 

But I found them!

You can download them here.

Extract the files in a directory of your choice, for example d:\cs3remoting\ .
In Flash CS3, goto Edit > Preferences (or Flash > Preferences for Mac),
choose the category ‘ActionScript’,
click on the button ‘ActionScript 2.0 Settings…’,
click on the crosshair button and choose the directory were you extracted your components (f.e. ‘d:\cs3remoting\’).

 Now your ready to use the remoting components in AS2.

 A small code example: 

import mx.remoting.*;
import mx.rpc.*
 
login_btn.onRelease = function() {
var gatewayUrl:String = "http://joristimmerman.be/remotingengine/gateway.php";
 
//gateway, logger,servicename
service = new Service(gatewayUrl, null, "ClassroomLoginService");
var login:Object = new Object();
login.userName = username_txt.text;
login.password = pwd_txt.text;
 
var pc:PendingCall = service.verifyLoginExists(login);
 
//target,successfunc,failfunc
pc.responder = new RelayResponder(_root, "handleLogin", null);
 
function handleLogin(re:ResultEvent) {
     var rs:RecordSet = RecordSet(re.result);
     for (var j:Number = 0; j < rs.length; j++) {
         trace(rs.getItemAt(j).username);
     }
}

 Whish you good luck!