marinapenno.com - How can this be done?

**freakpower** · 01-12-2006, 11:02 PM

http://www.marinapenno.com/

no english link it seems, but just look at it... beautiful!

huge background image with some flash stuff whacked on it... simple enough.

But what`s the actionscript likely to be to get it all working so well together?

I`d love to do something similar.

**freakpower** · 01-13-2006, 12:38 AM

Seems like it`s using invisible buttons around the edge of the stage, with the actionscript stopping the scroll when it get`s to certain x & y positions.

The background image is actually larger than the scrolling permits, so that the viewer never sees the edges.

the nav bar is within the mouse trail, and has set positions to move to when the mouse is within a certain distance of any other movies.

sound good so far?

Pity I can`t do the actual coding...

**3PRIMATES** · 01-13-2006, 01:48 AM

Yeah, that is a very cool site. Love it.
Im thinking that maybe the background sand is a large tiling image so one section can be repeated and then the other items like grass, shells and the stationary sea urchins are actually transparent pngs that can be reused. That it about the only way that I can see the image being able scroll so smoothly and still be such a huge size. As far as the actionscript goes, it seems pretty basic. It would pretty much be like the standard image scroller only it allows for vertical and horizontal movement of the movie clip that contains the background elements.
Its very well done though and I would imagine alot of testing was done to get it to be so smooth.

3P

**gasbag15** · 01-13-2006, 03:01 AM

Sites like this seem to be the new trend.
http://www.blueprint-studios.com/
http://www.bio-bak.nl/

**freakpower** · 01-13-2006, 04:50 AM

I`m not sure it is tiled. I can`t see any obvious joins/repeats anywhere. Sometimes when I think I have seen the same sand pattern repeat, I check and see that the water reflection or something else is slightly different. Bugger.

My boss (a flash guru) has gotten a demo working of the scrolling, using invisible buttons around the edges of the stage... it`s quite smooth with a 1400 x 1400 image (as a test). With the <param name="scale" value="noscale"> and .swf width/height = 100% the image doesn`t scale up/down etc.
He`s stuck atm with getting the scrolling code right so the viewer doesn`t see the edges of the .jpg . Just a case of going through the x & y values I guess till it`s right, I guess.

The other two sites mentioned are similar, but lack the scrolling element, and the nav`s are fixed whereas Marina`s is quite imaginative (yet simple to implement apparently). The other 2 sites are just using pre-rendered movies as the transition between pages?

Any other insights as to how Marina et al achieved this type of site would be appreciated.

**gasbag15** · 01-13-2006, 06:25 AM

The image he is using as the background is prolly a low quality gif (which would help with the sand effect) so it wouldn't really take up much memory/size.
The bio-bak one is a drag+throw type one rather than a scroll.

**Adobemedia** · 01-13-2006, 10:21 AM

Cool Site. I like the way the square follows your mouse. May put that into my site.

**pea3698** · 01-13-2006, 01:23 PM

I saw one a couple years back like 2001 or something like that, I cant remember the name. But, instead of having to push around the site to find something. Which gets annoying to me at least. You had the option to push around or on the main page which was the middle of the large image there was a menu system you clicked on a section and it would take you to that corner. The menu stayed on screen so you could nav alot faster than dragging around. I think it was a featured site here on fk but im not 100% sure. It is pretty cool I personally like the fish shadows myself...

**freakpower** · 01-16-2006, 03:27 AM

That`s the beauty of that site... the menu follows you around and is there to expand when you need it.

I got a reply from the author:

*******
thanks a lot for your appreciation!
i can say you're on the right way, remember to use the Stage object in order to manage browser resizing and put your invisible buttons in the right place ; ) good luck!

Serena
*******

hmmmmm.