FlashLoaded 3dWall Working in Flex as a Flex Component

The FlashLoaded 3dWall pro is a pretty cool component using papervision 3d, that allows you to present images, videos or swfs (with the pro version) wall.

Flashloaded produced the component to work in flash, and when Flex questions are asked on the their support forum it appears they do not wish to support flex users.

I greatly dislike the 'hack" of loading a swf into flex and then finding your instance on the timeline and then trying to hack it together to work.  This is so similar to how we got flex 2 Actionscript 3 to work with Actionscript 2 code it makes me shudder.

What I wanted was to use the Flex Component kit for flash, to turn the 3d wall into a flex component that I could then use in flex like other components and do all my code in flex.

This took a lot of trial and error, but it does work.  Thanks to Lee Sylvester for some help and moral support (listening to me bitch) along the way.

Prequisites

Make sure you have the 3DWall or 3DWallPro MXP installed so it can be used in the flash ide
Make sure you have the flex component kit for flash CS3 (it works with flex3 and flash cs4)

Steps

Create your swc in flash

  1. Open Flash CS3 or Flash CS4
  2. Create a new flash file, save it as 3dwall.fla
  3. Make sure your components panel is visible (window | components)
  4. Drag an instance of the 3dWall from the components window to the stage so it appears in frame 1.  You'll see the 3d wall symbol and its assets appear in your library.
  5. Select the 3dWall symbol in your library and then from the command menu select : Convert Symbol to Flex component. (if you don't see this option you haven't installed the Flex component kit for flash)
    Flex will now add Flexcomponent base to your library and change the export setting of the 3dWallPro component.
  6. Right click on the 3dWallPro symbol in the library and change the export settings to :
    com.flashloaded.Wall3DPro.Wall3DPro (it probably was _3DWallPro)
  7. Your library should looks similar to this .
    Library
  8. Now right click on the 3dWallPro component in your library and  select 'Export SWC file' and place it somewhere you'll remember to put in your flex lib folder later.

Create you project in flex

  1. Create a new flex project
  2. Copy the 3dwall.swc you created in flash to your libs folder in flex
    If you then go to your project properties in flex and click on "flex build path" and then the Library path tab you should see something "like" this (ignore the pureMVCLibraries)

    Compiler-settings 
  3. Your project is now ready for the Wall components, I'm not going to go into the specifics of creating a wall's content, but there are a couple of things to note : If I just import the wall3dPro class and try and use it, I get some ambiguity compiler issues, if you declare the instance with a fully qualified class name it works fine like this :

    var wall : com.flashloaded.Wall3DPro.Wall3DPro = new                                       com.flashloaded.Wall3DPro.Wall3DPro();

  4. You  also need to wrap your wall instance inside a UI component so it can be added to any flex container.  Here "mainView" is a HBox.

    var wrapper : UIComponent = new UIComponent();
    wrapper.addChild( wall);
    mainView.addChild( wrapper );

Then you should initialize the wall as you usually would be setting its MediaPaths      

e.g.

     wall.setMediaPaths("/assets/img/portfolio/", "/assets/img/thumbs/portfolio/");

add your images/videos/swfs either using the object way shown in the user guide or setting your xml.

wall.xmlPathput some stuff here

then initialize your wall

wall.init();

I obviously can't post a working copy with the wall in a swc since that would be a violation of the wall license.

Cheers
Grant


       

Posted in: Content | Permalink

Grant Davies
Posted by Grant Davies