sakri rosenstrom blog

VAIO P-Series showcase goes live!

January 8th, 2009

Nascom was asked to produce a showcase site for the release of Sony VAIOs new P-Series notebook. Due to the forces that be, production could only start halfway through December, meaning my Holidays were spent frantically coding. It’s a minor miracle that we squeezed this baby out on schedule:

As far as actionscript goes, there isn’t really anything revolutionary going on. The biggest challenge infact was to incorporate lots of timeline animation into an application, effectively and fast. I went for an Actionscript project using PureMVC, as I could reuse a lot of the localization and loading logic from the Vaio10 site. I then designed a “template flash” for the various subloaded “stories”, which communicate with the main application via Events. This was quite tricky, as the template needed to be flexible for the copious amounts of animation done by the designers (really nice stuff btw). These “stories” only contain animations, leaving the handing of text and navigation buttons to the main app. Getting all this to synchronize, along with managing loading/unloading etc. was not as straight forward as it might look, but in the end it all worked out

The other challenge was the navigation. It’s possible to navigate through the entire site by just clicking the left and right “scroll arrows”, and naturally through the regular navigation. This kind of “dual access” to the state of the navigation model is famous for causing headaches. Couple that with a third navigation mechanism in the form of the “home page map” hotspots, and, well, I’m beginning to sound like a broken record

This is phase one of the release, look out for more updates in future releases.

To everybody involved, great job!

check it out!

Posted in AS3, Flash, PureMVC | 1 Comment »

FlexCamp Belgium Summary, Slides And Source Code

December 12th, 2008

We had a pretty good turnout yesterday, it was great to see (and meet) a lot of new faces! I naturally started the event by going to the wrong SISA building, but fortunately the ‘real’ one was just a few minutes away.

Here are some of the highlights:

James Ward went over some of the new tags, namespace changes and general updates in Gumbo. Amongst other things, he covered the new 3d implementation, pixelbender integration, FXG, skins and new text features.

Chet Haase talked about his recent work in the frameworks animation capabilities. The Tween class is now replaced by a lower level ‘Animator’ (or was it Animation?) Class, and the implementation was like music to my ears! He also went on the explain the higher level implementations of Effects… very cool…

Peter Elst delivered an interesting overview of the SQLite Features in Air1.5 in his typically coherent and well organized manner, always a pleasure

Mr. Spring ActionScript : Christophe Herreman discussed a bit of Inversion Of Control Theory, then went on to showcase his current project, how Spring ActionScript was is implemented in it and what the benefits are. I have to admit that although each time I read about the topic I understand a little bit more, yet, parts of it still flew way over my head. It’s a fascinating framework, and I have a great deal of respect for Christophe! He posted a very comprehensive summary of his presentation this morning on his blog.

Finally, my own presentation. Again, I’m not sure what Koen was thinking when he put me on as the last speaker… Talking about Invalidation Routines at 21:45 in the evening was, well, challenging Having said that, the presentation went smoothly, generated some laughs and I received positive feedback at the end, including the “If only you could have told me this one year ago”

Here be the slides:

Invalidation Routines Pounded Into Your Cranium

View SlideShare presentation or Upload your own. (tags: adobe flex)

…and probably more interesting, you can download the Flex project with all the source code here

Thanks again, and see you all at the next user group event!

Posted in Flash, flex | No Comments »

Talking invalidation at FlexCamp08 Belgium

December 8th, 2008

Koen was kind enough to invite me to speak the FlexCamp at Sisa Antwerp. Given just 10 days headsup, I decided to go with my “Invalidation Routines Pounded into your cranium once and for all!” which I gave at the 360Flex earlier this year in Milan. If you are building Flex Components, and are not 100% clear on the uses and implementation of measure(), commitProperties() and updateDisplayList() are, then this is a must see. The original presentation was 90 minutes, this time it’s compressed to just 30, but I’ll still try to fit time to “dig a bit deeper” to keep it interesting for even the Flex Masters out there. I still see people getting this wrong, so I figure it’s a useful presentation. Apparently the event is pretty much sold out, so if you’re not one of the lucky ones, you can try the scalpers outside the door or by bribing Koen

Also, a wonderful case of “ask and thou shall receive”, Christophe Herreman blogged about the release of the Spring ActionScript last week, I asked if he might demo it at the FlexCamp, and within a few hours he was on the speaker list! I’m really looking forwards to that one!

See you there!

Posted in Flash, flex | 2 Comments »

My entry to Bit-101s 25 Lines competition

November 19th, 2008

I participated in the original one back at the were-here forums, and couldn't resist giving it a shot this time around as well If you don't know, this is what I'm talking about.

In the spirit of my upcoming FITC Talk, I naturally went for a text effect! Click the image to see it in action :

I started with a good 50 lines of code... I'm just getting my head around the tricks involved with using Graphics.drawTriangles(). Took a bit of effort to a) get it to work, b) get it down to 25 lines. Basically the code:

Creates a textfield
Grabs a bitmapData of it, this is the "material"
Creates a cylinder with a loop (vertices, triangles and uv data)
In an enterframe it:

Rotates a matrix in y and z
Transforms that rotation to the "mesh" and it to the perspective projection
Draws the triangles using the material as a bitmap fill

At the end, I got the line count down to the point where I could even add some glow and z rotation oh: The screenshot looks a bit "pixely", and it is, because the font is not embedded.

The 25lines website proclaims : "You probably don't want to share your code prematurely, but that's up to you", well.... Last time I was probably 60th out of 61 entries so I doubt this is gonna kill my chances I'll never match up to the math gurus out there, but hey, mine has a joke in it!

The code:


PLAIN TEXT
Actionscript:




// 3 free lines! Alter the parameters of the following lines or remove them.


// Do not substitute other code for the three lines in this section


[SWF(width=800, height=380, backgroundColor=0x000044, frameRate=31)]


stage.align = StageAlign.TOP_LEFT;


stage.scaleMode = StageScaleMode.NO_SCALE;


// 25 lines begins here!


 


var tf:TextField=new TextField();


tf.defaultTextFormat=new TextFormat("Helvetica",120,0xFFFFFF,true);//Hopefully all machines have Helvetica...


tf.text="Circular Logic Works Because ";


tf.autoSize=TextFieldAutoSize.LEFT;


tf.filters=[new GlowFilter(0x2222BB,.7,12,12,4,3)]


var material:BitmapData=new BitmapData(tf.width+10,tf.height+10,false,0x000044);


material.draw(tf,null,null,null,null,true);


var vertices:Vector.<Number>=new Vector.<Number>(),t_vertices:Vector.<Number>=new Vector.<Number>(),points:Vector.<Number>=new Vector.<Number>(),triangles:Vector.<int>=new Vector.<int>(),uv:Vector.<Number>=new Vector.<Number>(),angle:Number=0,radius:Number=material.width/Math.PI/2,slices:uint=20,x_rot:Number=0,x_rot_speed:Number=1,y_rot:Number=-150,z_rot:Number=0,z_rot_dir:Number=-.1;


for(var i:int=0;i<=slices;i++){


    vertices.push(radius*Math.cos(angle*(Math.PI/180)),0,radius*Math.sin(angle*(Math.PI/180)),radius*Math.cos(angle*(Math.PI/180)),material.height,radius*Math.sin(angle*(Math.PI/180)));


    uv.push(1-angle/360,0,0,1-angle/360,1,0);


    angle+=(360/slices);


    if(i>1)triangles.push(i*2-4, i*2-2, i*2-3,i*2-3, i*2-2, i*2-1);


}


triangles.push(i*2-4, i*2-2, i*2-3,i*2-3, i*2-2, i*2-1);


addEventListener("enterFrame",function handleEnterFrame(e:Event=null) {


    var transform_matrix:Matrix3D=new Matrix3D();


    transform_matrix.prependTranslation(stage.stageWidth/2,stage.stageHeight/2-material.height/2,0);//maybe better to use a container?


    transform_matrix.prependRotation(y_rot--, Vector3D.Y_AXIS);


    transform_matrix.prependRotation((z_rot+=z_rot_dir), Vector3D.Z_AXIS);


    if(z_rot>20 || z_rot<-20)z_rot_dir*=-1;


    transform_matrix.transformVectors(vertices, t_vertices);


    Utils3D.projectVectors(new Matrix3D(), t_vertices, points, uv);


    graphics.clear();


    graphics.beginBitmapFill(material);


    graphics.drawTriangles(points, triangles, uv, TriangleCulling.POSITIVE);


});


// 25 lines ends here!

The source in an easier "cut and paste" format : circular_logic.txt

Again, the html page with the compiled swf in it : 25Lines.html

anyway, fingers crossed! Looking forwards to seeing the other entries

Posted in AS3, experiment, Flash | 4 Comments »

Star Wars intro text effect with fp10 in 14 lines of code

November 12th, 2008

I finally installed flash CS4, and the first thing I had to do was recreate "the intro". This is practically guaranteed to make you cry 25 years from now! I once again I proclaim my absolute joy of having the 3d features in as3

If you see nada, it's not because I'm lying about this superhuman feat of engineering but because you don't gots teh flash player 10. It's interesting to see the flicker once you let the sucker scroll for a while... I guess some mask or so might sort that out...


PLAIN TEXT
Actionscript:




var rotated_holder:Sprite=new Sprite();


rotated_holder.y=360;


rotated_holder.rotationX=-70;


var text_field:TextField=new TextField();


text_field.width=480;


text_field.multiline=true;


text_field.wordWrap=true;


text_field.autoSize=TextFieldAutoSize.LEFT;


var text_format:TextFormat=new TextFormat("Arial",42,0xE3EF7D,true,null,null,null,null,TextFormatAlign.JUSTIFY);


text_field.text="It is a period of civil war. Rebel [REST OF TEXT HERE]....";


text_field.setTextFormat(text_format);


rotated_holder.addChild(text_field);


addChild(rotated_holder);


addEventListener(Event.ENTER_FRAME,function(e:Event):void{text_field.y-=1;});

nifty no? About 6 lines into this though, I realized it could be even quicker done just by plain old motion tweening (which I incidentally also find cool, you know, that that's possible).

Posted in AS3, experiment, Flash | 9 Comments »