Archive for March, 2008

Converting a RGB color and Alpha to ARGB in ActionScript 3

So I was using the color picker component that comes with the Flash IDE. When the user selects a color, the color picker fire a ColorPickerEvent.CHANGE event and from that event you can access the new color that was chosen. The format of this color is a uint; when working with colors I am more used to the hexadecimal format.  From the event you can also access to the hexadecimal value, but as a String which is not that useful if you want to do operation on the color.

The color you get from the color picker component is in the RGB format, so no transparency. If you want to add an alpha channel to that color (converting it to ARGB), let’s say to use the setPixel32 method of the BitmapData class  and produce Bitmap with transparency, you’re going to have to modify the uint you can do so using this simple function (AS3):

1
2
3
4
5
6
7
private function returnARGB(rgb:uint, newAlpha:uint):uint{
  //newAlpha has to be in the 0 to 255 range
  var argb:uint = 0;
  argb += (newAlpha<<24);
  argb += (rgb);
  return argb;
}

What this function does is that it bit shift the value of the Alpha you input and adds it to the original RGB color making it ARGB. You see, RGB format uses 8 bits for each color for each pixel (so 24 bits for each pixel), when you add transparency, the alpha channel takes up another 8 bits for each pixels (making it 32 bits for each pixel thus the 32 in setPixel32). That also explains why newAlpha has to be from 0 to 255, because 255 is the highest number you can store in 8 bits. The Blue color takes the bits from 1 to 8, the Green color takes the bits from 9 to 16, Red from 17 to 24 and finally Alpha from 25 to 32. This is why we bit shift alpha from 24 bits (newAlpha<<24);

I don’t use the color picker component often, but there seem to be missing the end of the sentence here.

, , , , , , ,

8 Comments


My FITC Toronto 2008 Schedule

I am very excited about this because this will be the first time I will be participating in such an event. In a month from now, I will be in a train, destination: FITC Toronto. As I said I have never been in a conference of this size and I look forward to it. I have also never been in Toronto even if it is somewhat close from Montreal. Here is how I will be spending my time there:

Saturday April 19

  • Papervision3D workshop

Sunday April 20

  •  Rich Media for Rebels
  • Challenging Imagination
  •  ActionScript 4?? or Flash’s Turn at Turn-based Games
  • The Circle

Monday April 21

  •  The Pixel Whisperer
  •  Project Management from the Developers Perspective
  •  AIR Conditioning
  • Building AIR Applications with Adobe Flash CS3 Professional
  • How Buck Goes About MakingCommercials and Stuff or GMUNKICKDOWN 08

Tuesday April 22

  • Flash Now and in the Future
  • What Clients Won’t Buy or Aspects of Practical Pornography
  • How to Create Ads That Will Actually Run (I wish I could go My Favorite Things by Grant Skinner)
  • Flash 2D & 3D Effects
  • Fairground-Art

I have to go to all ad related presentations because that was kinda my selling point for me to get my company to send me there, so I might have to miss the presentation by Grant Skinner, but if that’s the only price I have to pay to get there, I’ll pay it with a smile on my face. Can’t wait to be there.

,

No Comments


ExternalInterface Problems in ActionScript 2

Where I work we use a lot of Javascript because the guys doing it are quite gifted and also because I am the only member of the flash department (well designers do flash, but when it gets complicated I handle it), so it is often the case where Flash has to call a Javascript function. With all of my readings I had come to the conclusion that ExternalInterface.call was the best way to access Javascript functions. I guess I was wrong…

Well first of all ExternalInterface works very badly with Opera (at least the ActionScript 2 version, haven’t tested the ActionScript 3 version). Searching a bit I found people saying the it worked sometimes, it worked when it wasn’t inside a mouse related event, etc. Well this isn’t very reliable.

Also I ran in some trouble where when the Javascript was called in the html it worked fine in all browsers, when I used ExternalInterface it worked fine in Internet Explorer, didn’t do a thing in Opera and just crashed Firefox. Well that’s nice cross-browser behavior…

To solve my problem, I just had to do it the good old way; getURL(“javascript:myFunction()”). For the same Javascript function (the one that crashed FireFox), it worked in all browser. I hope this all works better in AS3.

, ,

3 Comments


Difficulties with Papervision3d when embed width and height in html are 100%

Well it’s not really difficulties; more something you have to keep in mind when, in your HTML, you set the width and the height of the flash portion to 100%. In my case I did this so that my swf would take all the browser space.

So I was doing some minor papervision3d programming and everything was going fine until I embedded my swf in HTML. Since the embedded flash size (width and height) wasn’t the same as the exported flash size I had some glitches on the papervision3d side. The Viewport3D was the part that moved when I resized the browser. In order to fix this I had to assign it a new x and y at creation that was dependent on the stage width and height. This is how you do it:

1
2
3
4
viewport = new Viewport3D(stage.stageWidth, stage.stageHeight, true, true);
viewport.x = -((stage.stageWidth - 800) / 2);
viewport.y = -((stage.stageHeight - 600) / 2);
addChild(viewport);

800 being the original width of my stage and 600 the original height. So by modifying the x and y of the Viewport3D at creation when I loaded the site or reloaded it it was always at the right place. At least that is what I thought until I tested it in Internet Explorer. I guess Internet Explorer doesn’t handle resizing of the browser in the same way as Firefox or Opera, because if you loaded the site, then resized the browser and then refresh the page it would not work properly in IE, the Viewport3D would be offseted. Actually in any browser, resizing the browser would offset the viewport making alignment not fit anymore. This is more obvious when you have some parts of your site in papervision3d and some parts under it not in 3D. To fix this I had to add a listener for the RESIZE event on the stage:

1
2
3
4
5
6
7
stage.addEventListener(Event.RESIZE, stageResizer);
 
private function stageResizer(e:Event):void{
viewport.x = -((stage.stageWidth - 800) / 2);
viewport.y = -((stage.stageHeight - 600) / 2);
 
}

Every time the browser would be resized this code would align the viewport in the middle of the stage.

This was a minor problem I encountered while using papervision3d; it wasn’t really hard to solve, but I guess it will be easier for you to find the answer than for me (since it’s all here).

, ,

5 Comments


Mixing timeline and AS3; where are my global variables

Well using only ActionScript to do a website at my company is kind of a break in the workflow.  Before I came, only designers were doing the Flash websites so it was mostly timeline with ActionScript all over the place (meaning not so much ActionScript, but well spread over timeline, buttons and MovieClips). It’s not what I believe the best way to work.

So we get this microsite to do; I can show it to you because it is online right now. It’s Ski-Doo Spring Promotion. For this microsite we had a really tight deadline; 3 days to do design and production of the whole microsite. So I had to work very closely with the designer, which was good because he is really creative at doing animations. The trouble is that he does them timeline and I am used to doing only ActionScript websites… So I had to learn to mix both ways.

Every thing was going fine until I had to use global variables. I forgot to mention that we decided to do this project in ActionScript 3, in which there are no global variables anymore. My need for global variables was for data that was passed from the html to the flash, the country from which the user came and his language. So at first I was using the root.loaderInfo.parameters.country (as an example) as a global variable. I could, from any timeline anywhere in any movieclip, reference the parameters  had passed to the flash.

The trouble arose when I had to add an external preloader to the microsite. All of a sudden all my call to root.loaderInfo.parameters did not work anymore. I had to find another solution to my problem which I found in the GlobalVarContainer class from greenethumb. It is a really easy class to use and it did exactly what I wanted. You should go check it out.

I know using global variables is not a not a best practice; it’s not modular and you can’t safely reuse your code everywhere. But in this case, it really helped me mix the timeline animation workflow with the coding workflow.

, , , , ,

1 Comment


What Steve Jobs really means about the iPhone and Flash

It’s been a hot topic these days and I thought I would add my two bits to it all.

I didn’t think I would write about this but then something struck me. It’s funny the angle this story took because when you step back a bit you knida see something else. The first thing you have to look at is the fact that the iPhone displays a website in its original version (not flash website) not the mobile one. I think that is a really nice feature that the iPhone has. I think that it is because of that fact that the whole story about Flash not being on the iPhone started. Steve Jobs doesn’t want is iPhone to deliver disminished web content, we get that. That rules out FlashLite from being used; also it wouldn’t fit well with HTML content being rendered normally and rich content being rendered with FlashLite instead of Flash. No developper would want to have yet another platform to develop for. Now here is the point I find funny; Steve Jobs says that “the version of Flash formatted to personal computers is too slow on the iPhone” but what that really mean is that the iPhone is not powerfull enough to output Flash content fast enough. From the angle that the media puts it, Flash is not good enough but Flash as nothing to do with it, what it should trully say is that the iPhone is not powerfull enough to render Flash at a decent pace. But I think I would have made the same thing if I was in his shoes, put the finger at somebody else, no one in is rigthfull mind would say is product is not strong enough…

Well that was it, it all came from the fact that the iPhone stands in the middle point, too strong for mobile content but not enough for full web content. I don’t know if will come soon, but I sure hope so

, , , ,

1 Comment


ActionScript 3 TweenLite Basic Tutorial

If you have been following this blog for some time now you have witnessed my evolution in the use of tweening engines. I was first using the Tween classes from Adobe and made a tutorial about them. After that I found Tweener, which I liked a lot for it ease of use and its speed improvement so I modified my tutorial to explain Tweener. My new evolution in the field of tweening engine is TweenLite mostly because it is faster and lighter than Tweener. Since I did a tutorial on how to use the two previous tweening engines; it is only normal that I do one also for TweenLite.

Well the first thing you have to do is download the classes of TweenLite. After that you need to import the class in order to use it; here is the import statement:

1
2
import gs.TweenLite;
import fl.motion.easing.*;

TweenLite as the name states is really light; it weights only 2k which is better than Tweener(10k). As you can see in the previous code I also imported the Adobe easing function. If you want to use easing, you will have to do that also which will had an additional 1k to the package.

TweenLite syntax is really similar to Tweener which is good since that was an advantage of using Tweener. Here is a simple tween using TweenLite:

1
TweenLite.to (rectangle, 3, {x:300, ease:Linear.easeIn});

The difference from Tweener’s syntax is that the second parameter in TweenLite is duration(how much time in seconds will the tween last) in this case 3 seconds. So this line of code will make the displayObject rectangle move from its currents position to a new position where its x value will be 300 in 3 seconds.

The same way you did it with Tweener, you can also tween multiple properties with TweenLite, here is an example:

1
TweenLite.to(rectangle, 1, {x:300, alpha:1, scaleX:1.5, scaleY:1.5, delay:2});

So this the rectangle will go to the x position 300, its alpha will raise to 100%, it will grow to 1.5 its original scale, all that in one second after a 2 second delay.

As you can see TweenLite offers all the advantages that Tweener offers with 2 more being light weight and being faster. I hope this tutorial will help you.

,

10 Comments