Hi All,
I need to build a portfolio for a photographer and am trying to figure out the best approach. I could use some suggestions here!
REQS:
- 3 layers of images (groups) with a parallaxe like effect, meaning:
- trough gaps in top layer you see the second and through that the third layer.
- subsequent layers appear incrementally smaller.
- top layer moves quickest, subsequent layers move incrementally slower
- 'hazy' effect (gray semi transparant mask or blur) increases for 'farther' away layers.
- random keypress moves layers horizontally in one direction only.
- space bar halts movement for all layers.
- backspace and return keys zoom to next/prev layers.
- all keystrokes are visible in a textbox. Results are possibly used/stored.
- pristine quality images
- quick loading
QUESTIONS:
1) Considering all requirements and especially the part about the image transparency, would AS3 be the wise choice?
2) What would be the best way to address this grouped image/alpha situation?
INFO:
So, I first started working out a prototype in Javascipt using JQuery and some available plugins after which I wrote some own code. This gets me in a good direction, but there's one MAJOR problem: file size. This, among other reasons, make me consider using Flash. I haven't used Flash in years and have just started diving into Actionscript 3, which is a beauty! Let me explain a bit more and tell me how feasible my idea is.
As this is a photographers portfolio, there are quite a lot of pictures and they need to be in clear quality. All images will be displayed at 700px height. No problem for 'single' images, but there are a lot of assembled images, which consist of multiple stacked photo's in weird geometrical shapes that need to have transparency. Ergo, no JPEG, or at least not for these special cases, but PNG-24 with alpha. => huge files. Especially if you have to load 'em all at once. There's a couple of solutions to counter that problem, i think:
1)- create low res versions, possibly transparent GIF or PNG-8 with 64 colors that load quickly and add an eventhandler that dynamically loads the highres version of the center image and replaces the lowres one if the slider stops or is stopped.
2)- assemble those groups of images from smaller JPG files in separate SWF files.
3)- save these assembled images as JPG and use some sort of (automated) masking routine to cut out the unneeded parts. This could be white or maybe a special key color, like a matte used in film
Option 2 seems too tedious. Options 1 and 3 seem to work (or am I missing something) and might be used in conjunction if the amount of pictures really skyrockets. As I'm somewhere at the beginning of this AS3 learning curve, I'm not sure whether this is feasible or if there's already a lot of classes which handle parts of my required functionality.
Thanks for your time and hopefully your answers!
Best, Tim