Archive for April, 2010

My article about FITC day one on Applied Arts

Hey, this is just to tell you that I will be doing recap of the Flash In The Can conference on Applied Arts. Here is my recap for day number one, there is going to be one for day 2 and 3 also; I’ll keep a general recap for my blog. Also, wish me luck for tomorrow for I am in nomination for Best Canadian Developer Website for this blog and I really want to win (well it would be awesome). Good night!

, ,

1 Comment


Why Flash is not disappearing

All the debate about Apple vs Adobe really got me thinking lately. Last night , I woke up at 4 in the morning with the idea for this post. It suddenly hit me. Most of the latest trends on the web happened because it was allowed by Flash. If you think about 3D, Augmented Reality and ChatRoulette; all of those could not have happened if Flash didn’t exist and are currently not possible to implement using HTML5.

3D

3D really picked up when Papervision3D ported there library from ActionScript 2 to ActionScript 3. ActionScript 3 made it faster so you could actually do some interesting 3D without automatically killing the user’s CPU. Right after that we saw a wave of Flash website all using 3D in them. I’m not saying that was good; plenty of sites used the 3D for no reason at all except for the fact that it was cool. Now that the hype on 3D as dimmed down, we see better uses of the library. My point is that Flash opened up new possibilities. There are now a few more libraries for 3D (Away3D, Sandy3D, Five3D, etc) and I don’t think those would be possible with the current state of javascript. Right now everybody speaks about HTML5 and the Canvas but, boy, JavaScript is so not on par with ActionScript 3. jQuery makes it better but still. Here is a good example of a site that uses 3D.

3D models in Flash

Augmented Reality

AR was all the buzz last year and 3D is what really made it possible in the browser. AR is a concept that has been around since the 90s but it never picked up until it came to Flash because it made it accessible. For AR you mostly need 3D and a camera. The webcam is easily accessible in Flash and since Flash is so ubiquitous. Now video is possible with HTML5 but webcam won’t happen; maybe HTML6. So as AR evolve we will see tons of new applications coming our way.

GE augmented reality

ChatRoulette

Now ChatRoulette is really interesting. I don’t know if it is going to last or if it is going to disappear or change, but it definitely showed an interesting facet of the internet ( not talking about the impressing number of male exhibitionists out there). ChatRoulette could use the webcam and a media streaming server, but that is not what is happening here. Already all that is not possible in HTML5. What ChatRoulette is using is the new P2P service Stratus by Adobe integrated FlashPlayer 10. That is a new feature in the Flash player that most people are not aware of. What it does is that it connects users directly to send the video without going through the server ( in this case the ChatRoulette server) so it save a lot of money in bandwidth. Is this a cool feature? fuck yeah. Is this close to being included in HTML5? Not in years.

Chatroulette interface

The general conception is tying Flash to video, but that is not all that Flash does right. 3D, AR, and P2P are just some examples I took to illustrate the fact that Flash is pushing the web forward; I can easily think of many more: microphone access, Pixel Bender, ActionScript 3 (so much more fun to work with than JavaScript), AIR, etc. And that is just what is available right now in Flash Player 10. I can’t wait to see what will be available in the future.

, , , , , , , , , , ,

4 Comments


Create your own ColorPicker using a Bitmap

A while ago I did an application that required a colorpicker, I didn’t know much at the time so I chose to use the ColorPicker component that came with Flash CS3. That component is ok but it kinda is limited. After a little while I wanted more than what it was providing me.  I wanted to imitate a bit the colorpicker that you can find in Photoshop. It turns out that it is pretty easy to do so. All you need is a picture of a color gamut and you are all set.

ColorPicker component in Flash CS3

What we are going to do in short is transform this image of a color spectrum (bitmap) into a Sprite and when the mouse is over that Sprite, get the color that is right under the mouse. For the image of the color spectrum i’ll use a picture I found on wikipedia and just resize it a bit. All you need is a picture with enough color on it, you could also use a picture of your dog if you wanted but the goal is more a picture with some organisation in the color.

Here is the picture I used:

Color Spectrum for a ColorPicker

Now all you need to do is add a little bit of code to it and you have the basis of a color picker. The method that will do most of the work for us is a method from BitmapData called getPixel. You basically tell that method which pixel in the Bitmap, by providing it’s x and y coordinates, and getPixel will return you the color of that pixel. Now, this method returns the color as a unsigned integer that is not so legible, so we will have to convert that to an hexadecimal base so that we can relate to it.

But to be able to use this method (getPixel) we will need a BitmapData of the spectrum. In Flash, you can turn most MoviClip into BitmapData by using the method draw. I’ll do it in the following code snippet.

Here we go:

//Add the mouse funcitonality to the color picker
myColorPicker.addEventListener(MouseEvent.ROLL_OVER, onRollOver, false, 0, true);
myColorPicker.addEventListener(MouseEvent.ROLL_OUT, onRollOut, false, 0, true);
 
var myBitmapData:BitmapData = new BitmapData(myColorPicker.width, myColorPicker.height);
myBitmapData.draw(myColorPicker);
 
function onRollOver(event:MouseEvent):void{
	myColorPicker.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove, false, 0, true);
}
function onRollOut(event:MouseEvent):void{
	myColorPicker.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
}
 
function onMouseMove(event:MouseEvent):void{
	var myColor:uint = myBitmapData.getPixel(myColorPicker.mouseX, myColorPicker.mouseY);
	trace (myColor.toString(16)); //The toString(16) convert the uint into a legible hexadecimal representation ike in Photoshop
}
Now you have it, this is just the basis, but with that you can build a full fledged color picker.

, ,

5 Comments


My FITC 2010 Schedule

Yeah a lot of good news lately. I started to work for B-Reel as of today, but because of that I was unsure I could go to FITC. Today, the nominations for the FITC Awards have been revealed and I am nominated in the category Best Canadian Developer Website!!! So I asked my new boss if it could be arranged that I go to the festival and he said yes, now I got two reasons to be super happy.

Anyway like I did for the last two years I am going to write down what I wanna go see:

Sunday April 25

  • Set your Code on Fire
  • The Importance of Whiskey While Working (and other work flow tips, too!)
  • From Solo to CEO – Managing Growth – Panel
  • Adobe Keynote
  • North Kingdom: An Inside View (saw that one already)

Monday April 26

  • Analog Designer in a Digital World
  • Creativity and Chaos
  • UnitZeroOne: Skunkworks (here I am divided but Ralph is so good)
  • Whats New with Flash Professional
  • Terraforming Narrative
  • The Grammar of Interaction Design

Tuesday April 27

  • Flex Data Binding Pitfalls 10 Common Misuse Mistakes ( I wanna see Elad Elrom)
  • The Cool Shit Hour
  • Quick as a Flash ( Grant Skinner FTW)
  • Sixteen Colours ( I wanna see Peter speak too)
  • Eyes Can Hear, 5 ways (missed his session last year)
  • It Has To Be This

Well, I’m not saying I’ll stick to this, but this is what I’ll consider when I look again.

, ,

No Comments


Event bubbling in the ActionScript world

I have been putting off writing this post but now that I am in between jobs I thought it was the good time. Well, I have been putting this off because it seemed like a good topic at the time, but eventually the concept of event bubbling became easy to me and than I felt no point in writing about it, but I guess it is not the same for every one. So here is my take on the subject.

Event bubbling in general

Event bubbling is not a concept that is particular to ActionScript but it is handled in special way by it. Event bubbling inscribe itself in an event model where events are dispatched and listened for. The bubbling part refers to event going up like bubbles in water (that’s my interpretation of the name). It doesn’t really make an sense also outside of the object oriented programming realm because of the need of encapsulation. It also implies some sort of composition because an object(Class (i’ll refer to #1 later)) needs to have another object(#2) created inside of it in order for it(#1) to listen to events dispatched by the second object(#2). Thus creating a hierarchy and enabling the possibility of event bubbling.

So in the preceding example I had 2 levels of hierarchy and every thing was fine, no need for event bubbling when object(#1) can easily listen to objects(#2) events. Now if I had 3 levels of hierarchy, object(#3) is inside of object(#2) which is inside of object(#1) we could use event bubbling to save some coding. Object(#1) can listen to object(#2) and object(#2) can listen to object(#3) but without adding code or making object(#3) public inside object(#2), object(#1) cannot receive the events from object(#3). Oh my, I hope this doesn’t sound too complicated with all those number signs. Ok so here we get to the concept, if we enabled the bubbling of events when dispatched in object(#3), the events would the go up (bubble) the hierarchy and make there way to object(#1) through object(#2) as if object(#2) had dispatched them. Keep on reading it gets easier (I hope).

Event bubbling in ActionScript

Now in the ActionScript world, event bubbling works in a particular way; it is tied to the Display List (The “Display List” is the hierarchy of graphical objects in your movie to be displayed on screen at runtime) . Meaning you cannot have event bubbling, using the event system of ActionScript, if your dispatcher is not added to the Display List (you didn’t do addChild to a children of the Stage to add your object). You can dispatch events just fine, but they won’t bubble even if you set bubbling to true.

What is cool with the Diplay List is that you can really picture the hierarchy using the mathematical structure of the tree (well if you flip it upside down it looks like a tree). Here is an visual example.

Ok, not my best drawing, but I don’t have Photoshop right now; I used Aviary for the first time and I can say it is quite nice to try, not Photoshop but I think you have to get used to it in order to see its full potential.

Now in that picture, if DisplayObject6 was to dispatch an event with bubbling to true here is who could listen to it.

  • DisplayObjectContainer5 could listen to it; it is the direct parent of DisplayObject6, no need for event bubbling here
  • DisplayObjectContainer3 could listen to it by adding a listener on DisplayObjectContainer5
  • DisplayObjectContainer1 could listen to it by adding a listener on DisplayObjectContainer3
  • The Stage (or Main class) could listen to it by adding a listener on DisplayObject1

Every body in the chain up from that object could listen to it (all at the same time if you wanted, doing each their different action upon receiving the event). If at some point you would like to stop the bubbling of the event you can always do so by using the stopPropagation method in the event class in your event handler method.

So as you see event bubbling is not a really hard concept and can save you from writing some boring repetitive code. (event handler methods). Anyway I might revisit this post later on to fix some things because I don’t think I was clear enough. Maybe I’ll had some code.

, , , , ,

3 Comments