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...

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).

Trying out fp10 3d features partII : Z sorting, truly simple shader, nested perspective

Wednesday, October 22nd, 2008

Continuing on with the basics, heres a few more tests. Just to clarify from last time, all of this is achieved using only the x,y,z, rotationX, rotationY and rotationZ properties of plain old Sprites. This is what I find so awesome about the new flashplayer10 as3 features.

Sure, the performance and rendering capabilites are no match for what developers have at their hands in games consoles etc. (this is nothing new or surprising). What I'm really digging is that anyone with a basic understanding of display object programming in as3 can jump into doing fairly cool 3d. Just grab your bag of flash tricks and take them to another dimension (har har ;) ). Seriously, everything works more or less exactly as I wanted / expected, and is a real pleasure to code. Reminds me of of the enthusiasm when I was learning to program with flash5 and 6. :thumbsup:

Anyway. Moving on, z-Sorting :.

screenshot of cube with simple z sorting

There is this ROCKING little method:

[Sprite].transform.getRelativeMatrix3D(parent).position.z;

Here's what it does:

  • In the case of the cube. I created a parent Sprite, called "cube".
  • In it, I created 6 nested Sprites with a square graphic. I moved, and rotated these into positions which constitute a cube.
  • Rotating the parent "cube" (with rotationX,Y and Z) results in what you see in "3) CubeTest".
  • To sort these sides, all I need to do is run the afore mentioned function, which returns the current z position of the nested clips.
  • With this knowledge, it just takes a simple loop to sort the display list. See an example here.

Simple shading:


screenshot of cube with simple z sorting and simple shading

Using that same Z value which I used to sort out the sides of the square, I just added a dark layer on top of each "side button". On every render, I set its trasparency equal to a proportionate value of Z and the maximum and minimum z (possible for the sides of the rotated cube). It's not phong or gouraud shading, but it'll fool the novice :) Again, a real "flash" feeling.

Same thing but with a bitmap material (read simple sprite).


screenshot of cube with simple z sorting, simple shading using bitmap materials

Nested Perspective:

No rocket science here either, just curious how changing the z of a nested clip would act out...


screenshot of nested perspective menu test

With a little more work, I think something like the Vaio10 menu could be achieved. Same goes for the cube menu above and the Pioneer Kuro Project menu.

As a matter of fact, I can think of several popular papervision menus which can be reproduced using very basic flashplayer 10 AS3 features. I'm guessing this is more than welcome news to the more "designer flashers" as opposed to the "programmer flashers" (who also get their share of new FP10 features, which I'll be exploring in upcoming posts). All good :)

As promised, here are the sources. This is a Flex project, in order to work with it (at the time of writing), just follow these simple steps:

  1. Download a nightly build of the Flex3 sdk (or gumbo) dating later than May. (more details)
  2. Copy the sdk into your flexbuilder sdks folder and create a Flexbuilder project, adjusting the preferences so that the compiler targets flashplayer10 and the new sdk. It's dead easy, see details here.

Again, here is the link to the test app

I would love to hear/see of anyone that decides to use this "test set up". Enjoy!

Working on 3d text generator with papervision3d

Tuesday, October 14th, 2008

It's no secret I have a bit of a fetish for playing with text and making text effects in flash. Back in May I decided to create dynamic 3d TriangleMeshes from BitmapData captures of text in textfields. Like the majority of my experiments, I never finished it.

I'm now posting this for three reasons:

  • Aral Balkans Grab the low hanging fruit Presentation which I saw last month in Ghent. I didn't agree with everything he said, but what stuck with me was : "Talk about stuff you're working on". The idea is, if you wait forever for your "perfect finalized grand hobby project" release, it'll never happen. You need peers to egg you on. So, I've been doing this on and off for a while and this post is an experiment to see if I'll actually get a finished product out someday
  • I saw a post about 3d text with Away3d a few weeks back.
  • Just the other day, Mark Barcinski posted this on the Papervision3d mailing list which is pretty much exactly the process I had come up with. Doh. Somebody always does it before you... I'm just waiting for some Zupko or Ralph to see this and say : "oh, I typed that with my toes back when the beta of player8 came out..." ;)


Click here to try out the current state of my 3d text test tool

screen shot of 3d text testing tool

I won't post any code for now as it's in an embarrassing state... just getting shit to work eh. The current state of the algorithm only handles Pixel fonts with no diagonals or curves... The flow is:

  1. Take a BitmapData snapshot of a textfield with one character.
  2. Create "monochrome" bitmaps of the character, and any "holes" or shapes within it (That would be the black bitmaps at the bottom right of the screenshot above).
  3. "Scan" these monochrome images for a list of all the "shape edge" pixels.
  4. Optimize the "shape edge" points into lines, diagonals and curves. These are the "outlines" at the top left of the screenshot.
  5. "Triangulate" those points (this is not quite perfect yet, just punch in "B" into the input field for a fix of teh fail). This will generate the bluish patchwork letter to the right of the outlines.
  6. Use the triangles and the outline points to generate faces and vertices, UVMap them, pass a material and render.
  7. Feel intimidated by the bugs :D

Next steps are obviously to create some code that's actually usable. Get the diagonals and curves to work. Try this out with some shaders, the 3d render is crap now. Get full words out. Animate the individual letters. I'll need some help with optimizing some of the "mathier" parts, but that's what the mailing list and friends like David are for ;)

Damn you Aral... I'm never gonna get this done :D

Verlet integration polygons with collision

Thursday, October 9th, 2008

I REALLY didn't think it was gonna be this easy... no complex maths, just a bunch of looping and hitTest, hitTestPoint kind of code :)

Click for teh Collidin Verlet integratin kick butt multicolored polygons explorer demo

screenshot of colliding polygons application

While coding, I was sure I would roast my cpu, maybe run up to 20-30 polygons, but my trusty laptop can churn out 70 shapes at a time before the framerate starts to slowdown. I find it mesmerizing to watch... Cool with 70 shapes, but also very cool to watch a fewer number and actually appreciate the "realism" of the collisions (not perfect, but not bad). It's late, the code is dirty, time to shut down and watch heroes :D

...but if you want the dirty source code, 'tis yours

More to come... am really enjoying this... :thumbsup:

Playing with Verlet Integration

Thursday, October 9th, 2008

Keith Peters presentation at FOTB was on the last day, at 9 am. Not necessarily the best time for "Advanced AS Animation" :D I was wide awake though, as soon as he started talking about Verlet Integration. The presentation slides are up on his blog. Keith also provided this gamasutra link for more info.

I was compelled try it out. It's like magic, such simple math, yet, the result looks like the work of a physics genius! Here's my first test : The Verlet Polygon Explorer

verlet polygons explorer screen shot1

It's a Flex project, I added some widgets to make "playing around" easier. You can change the number of shapes, change the force of gravity, the "rigidity", even add some wind and bounce the little bastards...


verlet polygons explorer screen shot1

verlet polygons explorer screen shot1

This really is a powerful approach in terms of performance. I only started to drop below 30 frames per second after 70 shapes... Naturally, "rigidity" adds a lot of overhead (number of times each "update" is calculated per frame).

Click the link above or images for the demo, source files can be downloaded here.

I've got a bunch of ideas for stupid experiments, but also for some real applications... This is a great tool to add to any flash developers bag of tricks! Thanks Bit-101!