swf Display issue

[TheJones]

Hi,

Hopefully I can clearly present my issue.

I am trying to use an swf in a division of my site.

This swf displays a group of images stacked on top of each other. The user drags the top image in any direction and lets go, causing that top image to shuffle around to the bottom of the stack. These images will represent "Work Samples"

The div is 550 x 400px and the "work samples" are 400 x 280px images. They are being added to the stage from an xml document.

What I want is for the swf to display the images in the div, but allow the images to be dragged outside of the 550 x 400px div and still be visible. Every option I have tried clips the images as I drag them outside the 550 x 400px area... like a masked box.

Does anyone know what combination of CSS, Actionscript, publish properties are needed to display a non scaled swf with a fullscreen bleed area in a specific area.

I am also trying to incoporate swfObject 2 and display alt content. So, hopefully it will be elegant enough that the alt content will display in the proper location without further styling.

Thanks,
James

I can post code and examples if it will help

[TheJones]

So I figured part of this out... kinda. I took the swf out of the work samples div and positioned it absolutely, and made it 100% of the page with no scale.

Now my problem is this:
When I position my flash movie, no other content is click-able because the movie is 100% of the browser. If I use z-index: -1; the flash is not click-able.

Here is the site for reference: http://www.thejonesbox.com

I've seen plenty of this click through problem online but I can't seem to get up to date on where a solution is at. I still find 2006 and 2007 threads dealing with it. From what I gather there is Javascript that can define the clickable area of flash content. That's fine if I was toggling something on and off with an exact dimension, but I'm looking to make the clickable area go from 550px x 400px to 100% when an object in the flash is being clicked then change back when it gets released.

Is this doable? Can someone point me in the right direction?

Here are pictures if you don't want to look click the link:
http://www.thejonesbox.com/pictures/1.jpg
http://www.thejonesbox.com/pictures/2.jpg

[atomic]

I had read your thread before your PM... But don't really understand what you're going for...

First, what's not clickable? The mail link and the read more's?

BTW, you do know that they remain clickable if you use IE, right?

Second, I don't understand the point in being able to move around a work sample, if nothing else than moving it around is possible... 'Cause as soon as I release it, it goes back behind the other ones... So what's the point?

[TheJones]

Thanks for replying.

In IE it's far from perfect as well. Links click, but text won't highlight and at times the swf highlights over the whole thing. In firefox everything is obscured by the swf.

As for the moving. What I am going for is a small selection of work samples like a featured section. Right now I'm using the same image on 4 different cards, but that will change. As the samples shuffle to the top, alt text and a link will appear (that's not in yet).

The idea behind the site is to give an overall impression right from the main page. I don't feel that anyone should move beyond this page to feel like they know what me and my work is about. So, my reason for this gallery option was to fit multiple work samples without a thumbnail view in a condensed area... and be a bit fun.

If the effect proves to be too difficult to execute correctly I will change the format. The usability is far more important.

Thanks,
James

[atomic]

I understand the gallery & shuffling through... I just don't understand the point in being able to move one page/work sample off the stack, if I can't drop it anywhere and keep it up while I look at others on the stack... As it is now, if I release it, it goes right back behind the stack... So what's the point?

[TheJones]

The point to displaying one at a time rather than letting them be scattered around the page, microsoft surface style, is because I will be displaying information about the top image. You can click on the image without dragging and it will shuffle as well.

Consider it a photo flow or carousel effect, the others are present but one is important.

The effect is far from completely realized. If I can't get this part I won't put the time into the rest of it.

I hope this helps.

[jasonJ]

I'd try the following:
1) Set <div id="flash"> left and top css properties to 0 (leave height and width as 100%).

2) Set <div id="workSamples"> position property to relative so that absolutely positioned <div id="flash"> fits nicely into it.

3) The tricky bit goes here and involves communication between flash movie and javascript via external interface (preferably).

The thing is to modify height, width, top and left properties of <div id="flash"> from the flash movie in an onPress handler (that is, while you press a button to drag the picture), so that <div id="flash"> fits the entire screen. And resize it back to it's original position and dimentions (see 1) and 2)) in an onRelease handler. All this done via external interface calls.
Note that width and height need to be set in pixels and relatively to <div id="workSamples">. You will also need to get user's browser available screen size (see DOM for screen.availWidth and screen.availHeight) and do some calculations with left and top properties of <div id="flash"> so that the change between its fullscreen and fixed dimentions will be seamless.

[TheJones]

Thanks jasonJ,

So, I am looking to modify the css property for the div rather than the published properties of the swf?

I'll give it a try.

[jasonJ]

So, I am looking to modify the css property for the div rather than the published properties of the swf?

I think it doesn't really matter if you modify the properties of <div id="flash"> or directly the object/embed elements. But since it's easier to wrap flash objects in a <div> element, I'd stick to modifying the <div id="flash">.

The only problem I can see now is extending <div id="flash"> to fit fullscreen while precisely pisitioning it within <div id="workSamples"> so that the transition is smooth and seamless (i.e. no additional horizontal or vertical scrollbars space). You could of course set <div id="flash"> relative to the browser window (as opposed to <div id="workSamples">) and make its width and height 100% (no pixel calculations needed) but then you'd have the movie centered on the screen.

The second (only) problem (which I've just thought of) is that when you've finally got the movie container stretched fullscreen, you're dragging the picture, release the button, the movie container immediately goes back to its original position and size but the just released picture is clipped because it moves slower than the container shrinks.
I bet it's bound to happen but a simple 2-3 sec timeout in shrinking the container should do the trick.

[TheJones]

Yeah the positioning is going to be an issue for sure. I don't think it's going to work seamless enough to merit using this effect. I think I will have to abandon it.
Thanks for all the help and if I somehow get it sorted right I'll post it.

Thanks Again,
James