I've got a client who really likes this look:

http://www.grimshaw-architects.com/grimshaw/base.php

And I'm wondering if anybody has any words of wisdom on creating a system like this. I've never really tackled creating a pseudo 3D interaction in flash before, and was just looking for any advice anybody might have.

The thing I'm most worried about I guess is diving a few layers deep, but not being able to get the stuff on top out of the way.

Thanks

I'm not sure which would be least painful for you - either making the 3D stuff up yourself from scratch, or using PaperVision3D (or some other 3D engine) to do it. Cos learning Papervision's not exactly a walk in the park either - but I'd guess it's easier than figuring out all the maths behind that sort of motion. Do you like maths? Cos you'll be doing plenty of it on this one whichever way you go.

As to not being able to get stuff out of the way - that's just down to how you lay out the areas I think. Look at the example you posted - all the lower lever bits are placed so that when you zoom to them the stuff on top moves out the way naturally. If you can't do that, then just turn off its visibility when you deem it to be behind the camera.

surely it's just parallex, which is fairly simple.

For instance here is a quick test

import flash.display.; import flash.events.; import flash.geom.*;

var midX: int = (550/2); var midY: int = (400/2);

// onstage movies ( shove squares on stage convert to movieclips and name them before using to lazy to code draw ) var l1_mc: MovieClip = infront_mc; var l2_mc: MovieClip = behind_mc;

var factor1: int = 5; var factor2: int = 3;

var inits: Object = { l1: new Point( l1_mc.x, l1_mc.y ), l2: new Point( l2_mc.x, l2_mc.y ) }; function update( e: Event) { var offSetX: int = (midX - mouseX); var offSetY: int = (midY - mouseY); l1_mc.x = inits.l1.x + offSetX/factor1; l1_mc.y = inits.l1.y + offSetY/factor1; l2_mc.x = inits.l2.x + offSetX/factor2; l2_mc.y = inits.l2.y + offSetY/factor2;

}

(root as MovieClip).addEventListener( Event.FRAME_CONSTRUCTED, update );

The zoom just scale root the offset code might be tricky.

As for papervision look through the demos something like papercloud should be adaptible with tweener.

Wow, yeah Papervision looks awesome, but also probably total overkill for what I need to do. I don't really need to create an actual 3D environment to that extent. Very cool to know about though - add that to my list of things to play with some rainy day

JLM - thanks for the example code. I think I just needed to see something before I could commit to just diving in from scratch. That makes some sense.

awesome JLM. There's still a load of work to do to reproduce the zooming effect they've got for when you nav into the lower areas. I figured having a solid 3D engine would make that hurdle easier to overcome, but I look forward to your next code snippet that makes it look easy :-)

What's that FRAME_CONSTRUCTED though? I had to change it to ENTER_FRAME to make it work for me - some Flex thing is it?

Ok not sure it's simple.. but here's a start

import flash.display.; import flash.events.; import flash.geom.*;

var midX: int = (550/2); var midY: int = (400/2);

// onstage movies ( shove squares on stage ) var l1_mc: MovieClip = infront_mc; var l2_mc: MovieClip = behind_mc;

var factor1: int = 5; var factor2: int = 3; var scale1: Number = 4; var currentScale: Number = 1; var inits: Object = { l1: new Point( l1_mc.x, l1_mc.y ), l2: new Point( l2_mc.x, l2_mc.y ) }; function update( e: Event):void { // currentScale here creates a small offset. var offSetX: int = (midX - mouseX)/currentScale; var offSetY: int = (midY - mouseY)/currentScale; l1_mc.x = inits.l1.x + offSetX/factor1; l1_mc.y = inits.l1.y + offSetY/factor1; l2_mc.x = inits.l2.x + offSetX/factor2; l2_mc.y = inits.l2.y + offSetY/factor2;

} function scaleUp( e: Event ):void { currentScale = scale1; var offSetX: Number= - mouseX; var offSetY: Number = - mouseY;

(root as MovieClip).scaleX *=scale1;
(root as MovieClip).scaleY *= scale1;
(root as MovieClip).x = offSetX*(scale1-1);
(root as MovieClip).y = offSetY*(scale1-1);
l2_mc.removeEventListener( MouseEvent.MOUSE_DOWN, scaleUp );
l2_mc.addEventListener( MouseEvent.MOUSE_DOWN, scaleDn );

} function scaleDn( e: Event ):void { currentScale = 1; var mX: int = midX + mouseX;
var mY: int = midY + mouseY;

(root as MovieClip).scaleX = 1;
(root as MovieClip).x = 0;


(root as MovieClip).scaleY = 1;
(root as MovieClip).y = 0;
l2_mc.addEventListener( MouseEvent.MOUSE_DOWN, scaleDn );
l2_mc.addEventListener( MouseEvent.MOUSE_DOWN, scaleUp );

} (root as MovieClip).addEventListener( Event.FRAME_CONSTRUCTED, update ); l2_mc.addEventListener( MouseEvent.MOUSE_DOWN, scaleUp );

er FRAME_CONSTRUCTED is new in CS4 not sure it is ideal though.

Lower areas?

by 'lower areas' I meant lower as in, lower down in the site heirarchy rather than lower down the y axis. The parts that are further away from the camera initially, in other words.

using several nestings of movieclip might make it simplier, so a scale is applied to a nesting.

Originally posted by: JLM using several nestings of movieclip might make it simplier, so a scale is applied to a nesting.

yeah sure, I'd do that too - but you still have to do the maths to work out how all the layers move and resize to make it look 3D. My thinking was that by using PV3D you'd skip all that, but of course, PV3D has its own learning curve. Six of one and half a dozen of the other, but I think I'd still use PV for this, just to have an excuse to practice it

I would use haxe sandy but that's just to have an excuse to practice it, but when I was playing with slices I rem how heavy pv or similar is compared with custom code, so its interesting what can be faked.

true enough, and I've probably wildly overestimated how hard it would be to achieve that effect without a code library. I did something similar a few years back in AS1 that draws parallax star fields.

Just need to bugger about with it a bit to make the layer's depths with respect to the camera dynamic:

// Make background createEmptyMovieClip("bg", 1); bg.beginFill(0x001133, 100); bg.moveTo(0,0); bg.lineTo(550, 0); bg.lineTo(550, 400); bg.lineTo(0, 400); bg.endFill();

numLayers = 7; starR = 12;

arrCols = [0xB8FCEE, 0xCEFFDC, 0xE0FEB6, 0xECCEFF, 0xFFA4A4, 0xFFA004, 0x7A75F4, 0xF7FC87]; for(j=1;j<numLayers;j++){ // Create a layer to hold a bunch of stars, all at the same distance from the camera. createEmptyMovieClip("stars"+j, 10+j); s = eval("stars"+j); colIdx = 0;

// Add stars to the layer
for(n=0;n<30;n++){
    x = (Math.random()*(550*2)) - 275;
    y = (Math.random()*500) - 50;

    //  Draw star
    s.beginFill(arrCols[colIdx], 80);
    numPoints = (Math.floor(Math.random() * 4) * 4) + 8;
    numPointsHalf = Math.floor(numPoints/2);
    angle = ((Math.PI * 2) / numPoints) * (Math.random() * Math.PI);
    s.moveTo(x + (Math.cos(angle)*starR), y + (Math.sin(angle)*starR));
    angleOnePoint = ((Math.PI * 2) / numPoints);
    for(m=0;m<numPoints;m++){
        angle += angleOnePoint * (numPointsHalf+1);
        s.lineTo(x + (Math.cos(angle)*starR), y + (Math.sin(angle)*starR));
    }
    s.endFill();

    if(++colIdx>arrCols.length)colIdx=0;
}

// Adjust the layer's alpha and scale to give it depth      
s._alpha = 100 - (j*(100/numLayers));
s.scrollPerc = (1 - (j*(1/numLayers)));

s._xscale = 180 - 20*j;
s._yscale = 180 - 20*j;

// Set up the onEnterFrame handler to track the mouse and move this layer accordingly.
s.onEnterFrame = function() {
    this._x = (_xmouse - 275) * -this.scrollPerc;
    this._y = (_ymouse - 200) * -(this.scrollPerc);
}

}

Yeah this is dirty old AS1 code I've just tidied up a bit.

Wow, I hadn't noticed you guys kept on going in here - very cool DBM - that oldschool parallax starfield is pretty cool - nice job!

After messing with this for awhile, the parallax was the easy part. The part that got me tripped up, and I still haven't really come up with a good solution for, is how to build and arrange the content nodes so they're dynamic, but so they don't also overlap or run together or sit too much behind higher layers (visually), etc.

I kind of regret every saying "yeah, I should be able to replicate something like that for you..."

Famous last words