![[decorative element]](http://designorati.com/wp-content/themes/d3/images/nav1_topics_OFF.png){kind=small}
Customizing Photoshop’s Flash Web Galleries
Readers have been asking me me how to edit the Flash web galleries that come out of Photoshop’s Web Photo Gallery feature. (…)
Readers have been asking me me how to edit the Flash web galleries that come out of Photoshop’s Web Photo Gallery feature. It takes some coding, but it’s pretty easy to do if you know where to look and it doesn’t require the Flash application.
Back in November I wrote an article on Photoshop CS2’s ability to generate Flash-based web photo galleries, and how it gives anyone the ability to add the “rich media experience” of Flash to simple photo galleries online. It was a hit among readers but the question that kept coming up was, how do you customize these galleries? See below:
- “…how do you edit those galleries in Dreamweaver…to add navigations and other eliments (sic) in my templates?”
- “…How can I add description text for each projects in the flash Web photo gallery?”
- “I’m trying to change the background image of the flash galleries and am not having much luck. Is this something that has to be created in the flash source file or can this be edited in the xml file that accompanies the flash gallery?”
These are hard questions because Photoshop does not offer us a native Flash (.fla) file to edit, but a Flash movie file (.swf) that is uneditable by conventional methods. Photoshop’s Web Photo Gallery feature is not designed to give us the editing capability of the true Flash application. However, there is quite a bit of customization you can do to your Flash web galleries, and the key is in editing the XML files that come with the gallery.
ANATOMY OF THE PHOTOSHOP WEB GALLERY
Along with the “gallery.swf” file, which is the Flash movie, Photoshop generates several other files:
- “index.htm” and “index_2.htm”, which look to be exactly the same file. These HTML files allow the SWF file to play in web browsers.
- “photos.js” and “flashobject.js”, two JavaScript files that bring functionality to the HTML pages.
- “photos.xml” and “galleryconfig.xml” two XML files that deliver the actual data (image width and height, source image, titles, etc.) to the SWF file
How these files work together to create the web gallery is beyond the scope of this article, suffice it to say it involves a lot of advanced web programming and development. What we’re interested in are those XML files, because they make the data that drive the web gallery accessible and editable.
HOW TO CHANGE THE XML
XML is raw data with markup, editable by any text editor or web design layout application such as Dreamweaver. “galleryconfig.xml” controls aspects of the web gallery such as image size, the thumbnail navigation, controls and audio. It is commented, which means the author wrote in some helpful comments to help us understand what the code does. Here is a snippet (commenting and open/close tags removed):
IMAGE DISPLAY
width and height (in pixels) of border around main image
var symboltype=”number” name=”bordersize” value=”16″
color (in hex) of the main image preloader
var symboltype=”string” name=”imagePreloadColor” value=”000000″
Change the value of the variables, and the SWF file will respond accordingly.
“photos.xml” controls several other aspects of the web gallery, including color for background, text, links and more. There’s even empty tags for photographer, contact information and e-mail (lines 11–13) that you can fill in and they will display in the SWF file. If you don’t know anything about coding, all it takes to fill in these tags is to type in the data between the tags.
YOU ARE LIMITED BY THE FLASH MOVIE
The XML files allow for customization of several aspects of the SWF file, but you are limited by the makeup of the SWF file itself. The SWF file is only looking for specific XML data such as image source, width, height, photographer and more, and if you were to edit the XML file so a new XML tag (descriptive text, for example) the SWF file would not be looking for it so it’s a lost cause. The SWF file, like all Flash movies, is protected from editing even in Flash so you are stuck with its composition. If you are looking for more customization than the XML files can offer you, then it would be best to create your own Flash web gallery and control it from a native file. Or you may find some software out there designed to crack into SWF files. Or maybe in a future version of Photoshop the Web Photo Gallery feature would generate not only a SWF file but a native Flash file as well. Now that Adobe and Macromedia are one, the possibility of this is much greater.
- New To CS2: Flash-Based Web Gallery Layouts
- See What’s Possibleâ„¢: Photoshop’s New Slogan
- Xara Xtreme Patch for CD Version Released
- Photoshop Lightroom A Mature And Successful App
- REVIEW: Flash CS4 Professional
- Photoshop Express First Impressions
- Que’s On Demand Series Is Impressive
- Mossberg: iPhone due Adobe Flash Plugin
- Photoshop Elements 5 Released
- Photoshop CS2/CS3 and Flash Updates Address Security Threat
There is a way to edit the fla file for the web galleries discussed in this article. Not many people know that the source files are located at Adobe.com. They have also bundled a third web gallery on their site as well.
Is there a way to load the swf into another flash movie? I’ve been trying to do just that, and can’t figure out what it is that won’t let it find all the necessary files when loading into another movie, even though the gallery works perfectly on it’s own.
You can load a SWF into another Flash movie, but it’s beyond the scope of anything Photoshop can do. It must be done within the movie the gallery is going into, and the ActionScript function
loadMovieis what makes it happen.DESIGNORATI
when using loadMovie, and if your loading a swf that contains calls to XML files, do you have to do something else in order for it to embed properly? Ive gotten a swf with xml to embed, but it doesn’t work 100% properly.
im wondering how to get rid of the filename display when u rollover on thumbnails in Flash Gallery 1 ??
I downloaded the flash web gallery files from adobe and would like to replace the jpegs with swf files. Can anyone tell me where to put the loadMovieNum or loadMovie comand in the actionscript file of the flash gallery2 (fla file)???
thank you.
hi!
does anyone know what i can do if i don’t want the background to be of any color but of the picture i use as a background in my website?
thanks in advance
Change the wmode parameter in the flash player html for transparent backgrounds:
I got the source files from adobe but Flash is not bringing up the thumbnails in the gallery. Any suggestions?
What code for transparence ?
PS CS3 flash web galleries failure: mostly empty photo frames; rendering landscape and portrait jpegs from Bridge and CS3; large image frame very small. CS2 never exihibited this behavior.
System: Mac w/latest OS X
I haven’t tried CS3’s web gallery tools yet, but I will have to if the reports of bugs and deficiencies are true…
DESIGNORATI
is there a way to align the flash gallery to the left? and not centered?
Yes, you can align a Flash gallery to the left (or top-left), but the nature of Adobe’s Flash galleries can make it problematic.
Here’s how it’s done: look in the index.htm file, at or around line 139 for this:
var myFlashObject = new FlashObject(”gallery.swf”, “gallery”, “100%”, “100%”, 6, “#ffffff”);
This is what controls the width, height and positioning of the Flash movie which controls the gallery. It’s different than regular XHTML, which would control positioning with CSS. The two “100%” attributes control width and height, respectively. If you give either attribute a set value the gallery will snap to the left or top. For example, changing the first attribute to “300″ puts the gallery on the left side of the page. Changing both attributes puts it at the top-left.
Some Flash galleries, however, don’t have static widths or heights and that can cause a problem when the gallery is at the top-left. Some Flash galleries change shape if images have various widths and orientations, and the gallery resizes from the center (not the top-left corner of the Flash movie) so some movies actually resize right off the page. You’ll need to experiment to find the right values for your Flash gallery.
Good luck from one Jeremy to another,
Jeremy
DESIGNORATI
Hey Jeremy,
Please forgive a rookie question but is there a way to edit the html index page generated by my cs3 flash gallery? (see: http://www.edgewatercottage.net if you are curious) I just want to add a simple gif logo to the top of the page and edit the text fields that are now tagged with
Not sure what the text is you’re talking about (looks like your comment is truncated) but I’d try to edit any text before generating the gallery. As for the image, I think you can do it just by inserting the image code above everything else in the HTML file’s body tag.
DESIGNORATI
I Want to change the ‘bold’ TITLE font at web gallery..I try to make changes into photo.xml & galleryconfig.xml but nothing happened can anyone help me?? thnx in advance!
nobody? plz help me guys… i must get down with this !!!
last time i try to create that in shilafc.com but hav problum bro…how
To amend Flash Gallery 1 (may work for Gallery 2 but I’ve not checked) open Photos.xml and toward the top of the page your looking for the tag called ’sitename’. Overwrite the text between the tags, save, the open in your browser (or refresh the page if the browser’s already open). That worked for me. Best of luck, Dave
Hi people, hope all’s well! Trying to stop the file name titles from appearing when you rollover the thumbnails in Flash Gallery 2. Any ideas?
Thanks in advance!!
I noticed that there are some parameters in the galleryconfig.xml for turning on or off specific buttons in the control-bar. I wonder if there might be others that are not listed by default.
Specifically I would like to have the titles display by default, so the viewer doesn’t have to click the (?) button.
—-
also, (to whoever built the movie) the window should have the picture + thumbnails centered in it, otherwise there will be blank space at the top and the thumbnails will crop at the bottom. Annoying!
Hi. Can anyone help me create links in the photoshop flash gallery? When you enter your email it becomes a mailto but my web address in photographer details is not a link and I really need it to be!
I tried coding a around it on page index.htm but it didn’t work. What do I need to amend?
Thanks.
oh I wrote before that bit that’s turned it green!
jesus this comments board just wont display coding. I wrote the html code for creating a link both times. No display!!
Sarah, I think I understand what you’re talking about—modifying the auto-generated e-mail link. I can’t test it anymore because I’m running Photoshop CS4 and the web gallery module is no longer available by default.
I’m not sure if the e-mail link is created by the HTML webpage or the Flash movie—if it’s in the HTML, I’d use an HTML editor like Dreamweaver to modify it. It probably can’t be done in Photoshop itself.
DESIGNORATI
Looks like a lot of issues here but, I have another one to add. I’ve been modifying the source files for the flash gallery 2 and when I publish a new swf file from the source files and replace the swf generated through photoshop cs3 the titles and image info does not display. The images link just fine. I’ve been looking through the .as files which accompany the original flash file but can’t figure it out. Does anyone know where I should look?
Found the problem - Font embed issue.
is there any way to add a hyperlink to the displayed image?
and|or
is there a way to insert other media content - eg ( flash movie, .mov, animated gif, html content etc.)
has anyone found a more code based FAQ related to the flash web stuff in photoshop?
thanks!!!
Adam, it’s been some time since I worked with Photoshop/Flash web galleries but my guess is there is not a feasible way to add a hyperlink to a displayed image in the Flash movie. The revisions you describe seem too major to work with the canned web galleries. I can’t really test anything though, since this article is based on Photoshop CS2 and since then Adobe has removed web galleries from Photoshop altogether. I use Lightroom to produce them nowadays.
DESIGNORATI
Miguel Garcia’s post above is spam for some real estate company - been there for ages now - The guy owes you money!
Can anyone tell me why after creating my flash gallery in cs3 photoshop why in Fireflox and in Safari it says this at the top of each page=
Please upgrade your Flash Player.
Already have Flash Player? Click here if you have Flash Player 6 installed.
When I have flash already installed? (have not checked IE)
When I click the second one -[Already have...] the flash gallery shows up fine.
I do have the same question than jimwww. Also, is it possible to add vertical and horizontal scrolls?