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 swf s(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 .
   
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)
   
   
   
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.xmlPath= put 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

       

Comments

[Amy B]

You don't have to publish the movie to get a swc--if you right click on the symbol you want to make int a swc, you will see the option to do that.

[Grant Davies]

Thanks Amy, good catch, I've corrected the document.

[mnieves]

follow the intire tutorial and get blank flex app nothing shows. any help! also thanks for the tutorial.

[Grant Davies]

if you can post your flex app somewhere with "view source" I can take a quick look :)

[mnieves]

thanks, the link will be online for one day.
http://ria.web44.net/test/flashloaded.html

[Grant Davies]

You didn't call init on your wall and you need to setup some wall defaults, you probably don't need all of these but this is what I used when testing.

wall.numRows=1;
wall.wallCurvature=0;
wall.elementLimit=100;
wall.XMLNoCache=false;
wall.smoothElements="auto";
wall.allowKeyboardControl=true;
wall.cameraActionOnScrollWheel="no action";
wall.scrollWheelZoomSensitivity=3;
wall.useHandCursor=true;
wall.showWarningMessages=true;

// camera

wall.cameraRotationFactor=3;
wall.cameraReactionTime=7;
wall.cameraStartPosition=50;
wall.cameraTiltStart=0;
wall.cameraDistance = 200;
wall.cameraZoom= 1;

// DOF

wall.depthOfFieldEnabled=false;
wall.depthOfFieldFineness=15;
wall.depthOfFieldMaxBlur=1;
wall.depthOfFieldBrightnessVariation=70;

// scroll
wall.scrollbar=false;

// stage scrolling

wall.stageScrollVerticalEnabled = true;
wall.stageScrollVerticalUpperLimit = 500;
wall.stageScrollVerticalLowerLimit = -200;
wall.stageScrollSensitivity = 3;
wall.autoScroll = false;


// opening animation


wall.animateClose = false;
wall.thumbnailFlyInEasing = "easeOutQuad";
wall.thumbnailFlyInStartScale = 0;
wall.thumbnailFlyInDistance = 400;
wall.thumbnailFlyInTimingDistribution=2;
wall.thumbnailFlyInTime = 2;
wall.thumbnailFlyInFrom = "behind wall";
wall.thumbnailFlyInRotationX =0;
wall.thumbnailFlyInRotationY=100;
wall.thumbnailFlyInRotationZ=0;

// closing animation

wall.animateClose = true;
wall.thumbnailFlyOutEasing = "easeOutQuad";
wall.thumbnailFlyOutStartScale = 0;
wall.thumbnailFlyOutDistance = 800;
wall.thumbnailFlyOutTimingDistribution=2;
wall.thumbnailFlyOutTime = 2;
wall.thumbnailFlyOutFrom = "behind camera";
wall.thumbnailFlyOutRotationX =0;
wall.thumbnailFlyOutRotationY=100;
wall.thumbnailFlyOutRotationZ=0;


// thumbnails

wall.thumbnailSpacingHorizontal = 15;
wall.thumbnailSpacingVertical = 15;
wall.thumbnailMaxWidth = 120;
wall.thumbnailMaxHeight = 80;
wall.thumbnailsDoubleSided = false;
wall.thumbnailSegmentsHorizontal =1;
wall.thumbnailSegmentsVertical =1;
wall.videoControls = false;

wall.visible = true;
wall.init();

[mnieves]

thanks! but still not showing there something missing in my test. could you send the mxml file to my email to compare with my project?
melvinnievessoto@live.com

[Grant Davies]

I don;t actuall have an mxml file, here is the code that is called on creation complete of my class

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

var wrapper :UIComponent = new UIComponent();
var hbox : HBox = new HBox();
hbox.width = 900;
hbox.height = 400;
//wall.wallWidth=900;
wall.width = 900;
wall.height=400;
hbox.setStyle("backgroundColor", "#FF0000");

wrapper.addChild(hbox);
wrapper.addChild(wall);

this.addChild(wrapper);


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

var obj:Object = new Object();
obj.type = "image/jpeg";
obj.src ="aso-calendar-200x150.jpg";
obj.width="200";
obj.height="150";

var obj2:Object = new Object();
obj2.type = "image/jpeg";
obj2.src ="aso-graphic-calendar-200x150.jpg";
obj2.width="200";
obj2.height="150";

var obj3:Object = new Object();
obj3.type = "image/jpeg";
obj3.src ="aso-home-200x150.jpg";
obj3.width="200";
obj3.height="150";

var obj4:Object = new Object();
obj4.type = "image/jpeg";
obj4.src ="aso-sitecore-200x150.jpg";
obj4.width="200";
obj4.height="150";





var objArray : Array = new Array();

objArray.push(obj);
objArray.push(obj2);
objArray.push(obj3);
objArray.push(obj4);
wall.addElements( objArray, "array");

// general

wall.numRows=2;
wall.wallCurvature=0;
wall.elementLimit=100;
wall.XMLNoCache=false;
wall.smoothElements="auto";
wall.allowKeyboardControl=true;
wall.cameraActionOnScrollWheel="no action";
wall.scrollWheelZoomSensitivity=3;
wall.useHandCursor=true;
wall.showWarningMessages=true;


// camera

wall.cameraRotationFactor=1;
wall.cameraReactionTime=7;
wall.cameraStartPosition=0;
wall.cameraTiltStart=200;
wall.cameraDistance = 600;
wall.cameraZoom= 4;

// DOF

wall.depthOfFieldEnabled=true;
wall.depthOfFieldFineness=15;
wall.depthOfFieldMaxBlur=1;
wall.depthOfFieldBrightnessVariation=70;

// scroll
wall.scrollbar=false;

// stage scrolling

wall.stageScrollVerticalEnabled = true;
wall.stageScrollVerticalUpperLimit = 500;
wall.stageScrollVerticalLowerLimit = -200;
wall.stageScrollSensitivity = 3;
wall.autoScroll = false;


// opening animation


wall.animateClose = false;
wall.thumbnailFlyInEasing = "easeOutQuad";
wall.thumbnailFlyInStartScale = 0;
wall.thumbnailFlyInDistance = 800;
wall.thumbnailFlyInTimingDistribution=2;
wall.thumbnailFlyInTime = 2;
wall.thumbnailFlyInFrom = "behind camera";
wall.thumbnailFlyInRotationX =0;
wall.thumbnailFlyInRotationY=100;
wall.thumbnailFlyInRotationZ=0;

// closing animation

wall.animateClose = true;
wall.thumbnailFlyOutEasing = "easeOutQuad";
wall.thumbnailFlyOutStartScale = 0;
wall.thumbnailFlyOutDistance = 800;
wall.thumbnailFlyOutTimingDistribution=2;
wall.thumbnailFlyOutTime = 2;
wall.thumbnailFlyOutFrom = "behind camera";
wall.thumbnailFlyOutRotationX =0;
wall.thumbnailFlyOutRotationY=100;
wall.thumbnailFlyOutRotationZ=0;


// thumbnails

wall.thumbnailSpacingHorizontal = 15;
wall.thumbnailSpacingVertical = 15;
wall.thumbnailMaxWidth = 120;
wall.thumbnailMaxHeight = 80;
wall.thumbnailsDoubleSided = false;
wall.thumbnailSegmentsHorizontal =2;
wall.thumbnailSegmentsVertical =2;
wall.videoControls = false;

wall.visible = true;
wall.init();

[mnieves]

thanks! i still doing something wrong. ill play around to make it work thanks for your`e help and keep the good work!

here is my code if you can give me one last push. ill apressiate youre help.
http://ria.web44.net/test/3dWall.mxml

[versgui]

Hello,
First, thank you for this great tutorial.
But I have a problem: when I try to view the wall, nothing appears. Yet, I have access to various properties and methods.
In Flash, I put flash.display.MovieClip in base class, Flash will not accept anything else. I don't know if it can be the cause... An idea ?

Here an example : http://versgui.fr/PSM/Flex/wall3D.html

[Grant Davies]

I immediately get a null pointer exception in your example

[versgui]

Oops, I corrected the error.
But now I have an other error : "ArgumentError: Error # 2015: Invalid BitmapData ."...
And I have absolutely no idea where it can come: I tested without an image, with an XML or directly with the images path... Without success.

[David Kramer]

Is there some syntax or property I'm not seeing that controls the wall width? I set wall.width = [anything] and it never changes.

[Grant Davies]

Did you set the parent to be large enough too, I could NOT just set the parent container to 100% I had to make the parent the size of the child otherwise my widths where ignored on the wall.

[John]

I've tried this with the direction above. It woudl be very helpful if a working project file is made available.