Custom Flash Image Viewer

[Rogue3ky]

I would like to create an image viewer that looks pretty much like my image pop-up box does now:

http://www.jeditemplearchives.com/2006saga2/

(click on any image link to see the pop-up box)

What I would like to do is have the image open in the same box (minus the IE borders). In the outside graphic frame, I'd like to add some nice features:zoom in/out, pan, and the title in smaller letters, as well as the option to add more links if there happen to be multiple guides of the same item.

When you zoom in, i'd like the image to fill the complete white space and to be able to 'grab' the image to pan around.

The images I would be using are higher res than what I have now, but i'd like them to downsize to what they are and when you zoom you get to see the full resolution and details.

The problem, i'm not sure where to start. I've never programed in flash, although I do have macromedia flash. I just don't know how to get started. Any tips or templates out there to get me started?

[renderhjs]

1- the word wide web wasn´t designed for the IE initially- it´s certain people that dont know any better
2- what about pop-up blockers - ever thought why people use them? ,- tabs or new windows and or divLayers or a complete flash solution might be a better coise (less spammy)
3- are you even sure you want it in flash- at least the example doesn´t use flash at all.

anyway some links, hopefully they might be usefull to you:
flash popup code generator:
http://www.flash-db.com/PopUp/PopUp.html

load images in flash:
http://www.lukamaras.com/tutorials/a...jpg-image.html
http://www.webwasp.co.uk/tutorials/b...ages/index.php

[Rogue3ky]

There are no automatic pop-ups on the site. Each popup is user driven. It's easy enough to allow popups to occur on specific sites. And, no ad popups, so how is that spammy?

The reason I wanted to go with a flash solution is so that I could offer hi res zooming. We have higher res copies of most of our guides, but to prevent saving the higher res images for printing I thought flash would be a good way. Also, I don't want the windows that open to have scroll bars or be bigger than an 800x600 screen. So, ideally they would pop-up like you see now, then have some options to zoom, etc. Our site would basically stay the same, we would just offer these 'enhanced visual guides' to click on with the flash interface. All of our normal ones would still be in place. The ones with the flash interface would have a small icon next to them indicating there is an enhanced version available, if desired.

[renderhjs]

well in that case you need of course some backend server script like php that stores all I´d of the images and will generate the popup html code wich again will feed the swf file each time with different variables.

1 way of doing so is to attach additional parameters after the source swf parameter in the html flash object code:
e.g "?url=folder/sample/picsub0014456.jpg"

here is a example of how the html code would look like (partly ripped from ign.com,- so some crap between the lines)

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"');
ID=flashad WIDTH=728 HEIGHT=90>
<PARAM NAME=movie VALUE="http://mydomain.com/swf/sample.swf?someExtraVars">
<PARAM NAME=quality VALUE=autohigh> <PARAM NAME=wmode VALUE=opaque>
<EMBED SRC="http://mydomain.com/swf/sample.swf?someExtraVars" QUALITY=autohigh
NAME=flashad WMODE=opaque swLiveConnect=TRUE WIDTH=728 HEIGHT=90');
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT> 

because Netscape and IE did fetch the swf url different from the very beginning (blame either IE or NS for it) the source path has to be double otherwise some browsers wont display anyhting


in flash you then can display that part with:

var extra = _url.slice(_url.lastIndexOf(".swf?")+5,_url.length);
trace("extra parameter: "+extra); 

that would already enable you to load image based on the parameters because you could pass more than just the url through like title, color, style,...

after that it´s movieClipLoader stuff to preload the image and or scale it after that

just a little note:
you wont see the parameters of course if you test the movie in flash,- an in the browser you can´t use the trace command so use a textfield to output the extra variables while you are debugging