Li : Dev Actionscript Development Blog

19May/0910

VectorSwf tutorial

[UPDATE] VectorSwf.as is now deprecated. The replacement is Swf.as, which provides a much simpler workflow. See upcoming post!

This tutorial attempts to explain the features described in the previous post, so you can use them, and hopefully apply them for something more useful than this demo!

Setting up the project.
--------------------------------------------------------------------------------
1 - Create a new Actionscript project in Flex. Delete the default class created by Flex and paste these 2 classes into the project src folder. Set Main.as as the Default Application.
2 - Link your project to the latest Away3D trunk. You can either do this by setting up a separate library project and linking the AS project via properties/ActionScript Build Path/Library path or simply pasting a copy of the away3d lib in the src folder of your AS project.
3 - In the project properties/ActionsScript Compiler, add "-use-network=false" in the Additional Compiler arguments field to avoid security sandbox problems.
4 - In the src folder of your project create a new flash file named Assets.fla and allow it to publish at the same level Assets.swf.

Prepare your assets in Flash:
--------------------------------------------------------------------------------
5 - Create a new clip and, in it, draw some vector graphics. Make sure not to use strokes because they are not supported yet. Sorry! In my case I downloaded an .eps from www.freevectors.net and copy pasted the content into the clip.
6 - We now need to run a JSFL command from Flash in order to inject its vector data into a variable in the clip's timeline. For this download the jsflaway lib and place it in your flash commands folder. In my case it is "Users/yourUserName/Library/ApplicationSupport/Adobe/FlashCS3/en/Configuration/Commands/"... then while in the clip's edit mode (in its stage) in Flash, go to Commands, run Command and go to the jsflaway lib you just copied to your HD and select VectorDataInjector.jsfl in the components package of the lib. You will see that this should create a new layer in your clip called "vectorData".
7 - Drag an instance of your clip to the main stage of your Assets.fla and publish it.
8 - Repeat steps 5 to 7 to add more elements. As long as an element is on the stage, and the clip contains the vectorData layer, Away3D should be able to port it to 3D.

Away3D code.
--------------------------------------------------------------------------------
9 - You can tweak some settings in the src:
var vectors:ObjectContainer3D = VectorSwf.load("Assets.swf", {scaling:1, zOffset:100});
_scene.addChild(vectors);
Scaling speaks for itself, and zOffset is the z spacing applied between each clip in the main stage of the Assets fla.

SOURCE: http://www.lidev.com.ar/demos/textfieldsmerge/vectorswf/v5/tutorial_vectorSwf.zip

I hope you can find useful applications for this feature. You can use it to show vector interfaces in 3D, text, and practically anything made out of vectors. Steps 5 to 8 should be greatly simplifyed soon thanks to feedback I already recieved from you guys. I'll let you know when I have some updates. Enjoy!

Filed under: 3D, Tutorials Leave a comment
Comments (10) Trackbacks (0)
  1. mateus
    May 21st, 2009 - 23:58

    First, GREAT WORK dude, I’ve been wating to a popular 3d vector system since I decide to learn maya and 3d stuff.

    I’m trying to convert a piece of an logo to vector, using jsflaway lib, sometimes works, but sometimes I got this error:

    The following JavaScript error(s) occurred:

    At line 33 of file “ShapeDistributeToLayers.jsfl”:
    The function distributeToLayers() is currently unavailable.

    I just put an vector illustrator file from Adobe Illustrador in some random layer, run that command and I get this error.

    I’m using flash CS4 by the way.

    Hope that helps

    []’s

  2. Li
    May 22nd, 2009 - 04:34

    Mateus, I designed these JSFL scripts for Flash CS3 since is the version I use, so I would try using that version in the first place. Then, I would try running the script on a clip that contains no empty layers and in the worst cases break everything apart even though the script is supposed to do that. Respecting those principles I managed to extract the vector data info of pretty complex shapes. You can also send me the clip that is making it difficult for you so I can verify the error. And you can also wait a few days until I release the version of this that does not rely on JSFL but pure Flash.
    Cheers, and thanks!!

  3. mateus
    May 22nd, 2009 - 09:36

    Forget it, it works! Works fine on CS4, but you have to create a Movieclip first, then run your command, take a look on my home page. If you try to run on a movieclip that has 2 layers and the first layer is empty, it crashes. I don’t get it why. My CS4 just freezes. Maybe causes a infinite loop or something like that.

  4. Li
    May 22nd, 2009 - 09:42

    Glad it worked out! Didn’t expect it to work on CS4 :D
    Yes, I would say avoid running the script an a clip with an empty layer.

  5. mateus
    May 22nd, 2009 - 14:49

    One more thing. If you look at that word laboratorio with zoom, you can notice some gaps on the internal white vectors, inside and outsite the letters. I just copy from illustrator than paste on CS4, using that option when you paste from illustrator:

    I can figure out if was when I paste or jfsl push vectors while converting. Later I’ll test this again. For now this is the gap and the option that I use when pasting:

    http://www.laboratorio72.com/experimentos/swfvector/gaps.gif

  6. mateus
    May 22nd, 2009 - 14:50

    bad, bad english, anyway, do you got it?

  7. Li
    May 22nd, 2009 - 16:01

    Yep, I noticed that too…
    Could you send me that asset in an fla so I can check it out? Send it to my email: palebluedot@gmail.com

  8. Li
    May 22nd, 2009 - 16:56

    Ok, I found your problem. If you break apart the asset with the titles before running the jsfl script, everything should be ok.

    To understand why this happens you need to understand a bit about how the jsfl script works, and a bit about away3d rendering procedures also. To extract the vector data, the jsfl script first duplicates the clip in question, then splits the content into layers and then executes a recursive break apart until no grouped elements are left, reads the vector data and finally dumps the duplicate. In your case, this process resulted in a white box with NO letters punched into it as holes. When this is rendered in 3d, the white box encounters sorting problems with the text characters. By breaking the box apart before running the jsfl script, the box is interpreted with holes in it, and hence no overlapping occurs in Away3D’s rendering. I hope this sort of tediousness is eradicated once the new vector data extraction method is ready.

  9. ben
    May 30th, 2009 - 14:30

    YAHHHOOOOOOO !!!
    thanks !

  10. Max
    July 8th, 2009 - 21:18

    Importantly, for the example if you are using the flash IDE which doesn’t understund the flex-like directives, you need to make sure the background colour is not the same as the text colour or you will just see a black screen.

    The example has black text, and the flex directive I said to comment out:
    [SWF(backgroundColor='#FFFFFF', frameRate='60')]
    sets the background colour to white, so in the flash IDE set the background colour to white.

    I thought it worthwhile mentioning this as it happened to me initially that I had a black screen and seemingly no text..


Leave a comment


No trackbacks yet.

« Morgan Stanley Matrix Away3D and Vectors »

Meta

Categories

Archives

Links