Archive for the ‘AS3’ Category

« Previous Entries
Next Entries »

VAIO P-Series showcase goes live!

Thursday, 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:

sony p-series homepage screenshot

sony p-series story screenshot

sony p-series story detail screenshot

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 :D

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 »

My entry to Bit-101s 25 Lines competition

Wednesday, 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 :o 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 :D I'll never match up to the math gurus out there, but hey, mine has a joke in it!

The code:

PLAIN TEXT
Actionscript:
  1. // 3 free lines! Alter the parameters of the following lines or remove them.
  2. // Do not substitute other code for the three lines in this section
  3. [SWF(width=800, height=380, backgroundColor=0x000044, frameRate=31)]
  4. stage.align = StageAlign.TOP_LEFT;
  5. stage.scaleMode = StageScaleMode.NO_SCALE;
  6. // 25 lines begins here!
  7.  
  8. var tf:TextField=new TextField();
  9. tf.defaultTextFormat=new TextFormat("Helvetica",120,0xFFFFFF,true);//Hopefully all machines have Helvetica...
  10. tf.text="Circular Logic Works Because ";
  11. tf.autoSize=TextFieldAutoSize.LEFT;
  12. tf.filters=[new GlowFilter(0x2222BB,.7,12,12,4,3)]
  13. var material:BitmapData=new BitmapData(tf.width+10,tf.height+10,false,0x000044);
  14. material.draw(tf,null,null,null,null,true);
  15. 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;
  16. for(var i:int=0;i<=slices;i++){
  17.     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)));
  18.     uv.push(1-angle/360,0,0,1-angle/360,1,0);
  19.     angle+=(360/slices);
  20.     if(i>1)triangles.push(i*2-4, i*2-2, i*2-3,i*2-3, i*2-2, i*2-1);
  21. }
  22. triangles.push(i*2-4, i*2-2, i*2-3,i*2-3, i*2-2, i*2-1);
  23. addEventListener("enterFrame",function handleEnterFrame(e:Event=null) {
  24.     var transform_matrix:Matrix3D=new Matrix3D();
  25.     transform_matrix.prependTranslation(stage.stageWidth/2,stage.stageHeight/2-material.height/2,0);//maybe better to use a container?
  26.     transform_matrix.prependRotation(y_rot--, Vector3D.Y_AXIS);
  27.     transform_matrix.prependRotation((z_rot+=z_rot_dir), Vector3D.Z_AXIS);
  28.     if(z_rot>20 || z_rot<-20)z_rot_dir*=-1;
  29.     transform_matrix.transformVectors(vertices, t_vertices);
  30.     Utils3D.projectVectors(new Matrix3D(), t_vertices, points, uv);
  31.     graphics.clear();
  32.     graphics.beginBitmapFill(material);
  33.     graphics.drawTriangles(points, triangles, uv, TriangleCulling.POSITIVE);
  34. });
  35. // 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

Wednesday, 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 :D


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:
  1. var rotated_holder:Sprite=new Sprite();
  2. rotated_holder.y=360;
  3. rotated_holder.rotationX=-70;
  4. var text_field:TextField=new TextField();
  5. text_field.width=480;
  6. text_field.multiline=true;
  7. text_field.wordWrap=true;
  8. text_field.autoSize=TextFieldAutoSize.LEFT;
  9. var text_format:TextFormat=new TextFormat("Arial",42,0xE3EF7D,true,null,null,null,null,TextFormatAlign.JUSTIFY);
  10. text_field.text="It is a period of civil war. Rebel [REST OF TEXT HERE]....";
  11. text_field.setTextFormat(text_format);
  12. rotated_holder.addChild(text_field);
  13. addChild(rotated_holder);
  14. 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 :D (which I incidentally also find cool, you know, that that's possible).

Posted in AS3, experiment, Flash | 9 Comments »

Conditionally remove multiple XML nodes in a loop?

Wednesday, September 17th, 2008

XML.removeNode was removed for AS3s E4x, and now one simply uses delete (more).

Let's say I've got the following xml:

PLAIN TEXT
XML:
  1. <items>
  2.     <item>a</item>
  3.     <item>b</item>
  4.     <item>c</item>
  5.     <item>d</item>
  6.     <item>b</item>
  7.     <item>f</item>
  8. </items>

I'd like to delete all child nodes which do not have their node value set to "b". (there's two of them in that snippet).

Using a "for loop" and deleting items like : delete my_xml.item[i] fails, because the "array index" of nodes change as items are deleted (see code below).

No problem, just create a reference of the node, and delete it later:

var delete_later:XML=my_xml.item[i];

...but no, teh FAIL has come to visit you again! "delete_later" is not a reference to the node, it's just a placeholder for the value of that node. For the stubborn, trying to delete "delete_later" results in an error : "Attempt to delete the fixed property delete_later. Only dynamically defined properties can be deleted."

So what to do, what to do?

Simple, just loop through the array backwards! :o oh:

Here's my test code:

PLAIN TEXT
Actionscript:
  1. var list:XML=   <items>
  2.                     <item>a</item>
  3.                     <item>b</item>
  4.                     <item>c</item>
  5.                     <item>d</item>
  6.                     <item>b</item>
  7.                     <item>f</item>
  8.                 </items>;
  9.                
  10. var test1:XML=list.copy();
  11. for(var i:int=0;i<test1.item.length();i++){
  12.     if(test1.item[i]!="b")delete test1.item[i]; 
  13. }
  14. trace(test1);
  15. /*
  16. traces:
  17. <items>
  18.   <item>b</item>
  19.   <item>d</item>
  20.   <item>b</item>
  21. </items>
  23. //NOT SO GOOD AL... NOT SO GOOD...
  25. */
  26.  
  27.  
  28. var test2:XML=list.copy();
  29. for(i=test2.item.length()-1;i>-1;i--){
  30.     if(test2.item[i]!="b")delete test2.item[i]; 
  31. }
  32. trace(test2);
  33. /*
  34. traces:
  35. <items>
  36.   <item>b</item>
  37.   <item>b</item>
  38. </items>
  40. //WHOOOMP THERE IT IS!
  41. */

Posted in AS3 | No Comments »

Vaio10 site is live!

Tuesday, July 15th, 2008

:bubbly: Woot! :bubbly:


Actually, it's been live since last week, but it was deployed with a couple of glaringly obvious bugs, so I waited a bit with the announcement ;)


http://club.vaio.sony.co.uk/clubvaio/gb/en/vaio10/

screenshot of vaio10 website



I'm really happy with how this project turned out. Enough time and budget to keep the code clean, Even enough to spend on the design details :) I actually had dinner with the wife and kids a few times during the week :eek: . The only regret I have is not going for fullscreen, performance is fine (on my machine anyways ;) ). Maybe we'll do an update when papervision3d rolls out with a flashplayer 10 release. :D


For the full story, read my entry from the nascom blog :

http://blog.nascom.be/59/vaios-10th-birthday-with-a-papervision-site

:buttrock: . :buttrock: . :buttrock:

Posted in AS3, Flash, papervision3d | No Comments »

« Previous Entries
Next Entries »