A Blog by Web Bright Consulting

CoffeeCup Photo Gallery is a software that allows you to add animated photo gallery to your website. You can download a free trial and use for 21 days. The registered version cost $34. The software is easy to install and very simple to use, still, an online Help manual is included, and better yet, you can view video tutorials to many of the software functions online.

Integrating the Photo Gallery with Your Website

When you save your project, CoffeeCup Photo Gallery creates three files: an .swf, .html, and .xml with the name of the gallery you specified, and a sub-folder which includes all the images from your albums. You need to upload the three files and the sub-folder to your website. Basically, a Flash object (.swf) will be inserted into the HTML page (.html) and the photos will be displayed using XML (.xml). If you like your photo gallery to have the same theme as the rest of your website, you can insert the Flash object (.swf) into an HTML page created from your site’s template. If you’re using Dreamweaver, you can create a new HTML page using the site’s Template, then select Insert -> Media -> Flash to insert the fla file (warning: your gallery project should be saved in the same Site folder as your web pages).

In order for the gallery to fit into your web page you might want to resize the gallery. The default size of the photo gallery is 500×460 pixels. You can change the gallery size using CoffeeCup Photo Gallery, or if you’re using Dreamweaver, you can resize the Flash Object in the Design View. Reducing the width of the gallery might eliminate the buttons for the sound, slideshow and albums, which are displayed on the right side of the gallery by default. However, using CoffeeCup Photo Gallery you can move these buttons to anywhere on the gallery so they’re still visible when you resize it.

A Live Example

Ok, so you want to see how this looks like in real, view this website that I added a photo gallery to using CoffeeCup: http://kjainteriors.com/gallery.html.

Photo Gallery Options for Websites (pdf with summary table)

It seems like almost all professional websites can use a photo gallery for a reason or another. For example, my interior designer client wants a photo gallery to showcase photos of her projects, my children boutique client wants a photo gallery to display pictures of some of her products, my non-profit organization wants a photo gallery to show pictures of events and members to give their website a more friendly look and my city club wants a photo gallery to show pictures of their facility and dining offerings.

So, how can you create a photo gallery for a website?

There are many different options. And the best option might be different for each website depending on the requirements. For example, for the non-profit group I used Flickr while for the children boutique I used CoffeeCup.

This article provides a review of 8 different photo gallery options and gives a comparison of some of their functionalities and features. Options reviewed include: Photoshop, Dreamweaver, CoffeeCup Flash Photo Gallery, PhotoFlow, Flash Photo Gallery, SimpleViewer, Coppermine and Flickr. The article is not a how-to create the photo gallery with these tools, since the process in most cases is straightforward and is documented elsewhere.

1. Photoshop

Description: Creating a Web Photo Gallery is one of Photoshop automated tasks. You’ll need to load all the images that you like to add to one folder and specify another as the destination. Several gallery styles are available including a couple of slideshows. Photoshop will produce several HTML pages, including an HTML page for each photo as well as a thumbnail page. To add caption to each photo, you’ll need to access the corresponding HTML page and change the code.

The raw photo gallery that Photoshop produces is very basic. However, since all the images are displayed in HTML files, you can use CSS to improve the look.

Cost: $649 for Photoshop CS3

URL: http://www.adobe.com/products/photoshop/index.html

Demo: http://funkymonkeysc.com/photogallery/Photoshop%20Photo%20Gallery%20for%20Funky%20Monkey/index.htm

Admin: No.

Albums: No.

Animation: yes, with the Slide Show styles.

Music: No.

Technical Support: Adobe (provider of Photoshop) has great product support and extensive online and offline documentations.

2. Dreamweaver

Description: Dreamweaver can automat the task of creating a photo album. For details on how to use Dreamweaver to create a Web Photo Album, see: http://webdesign.about.com/b/2007/11/27/you-have-lots-of-options-for-web-photo-albums.htm#gB3. As with Photoshop, Dreamweaver creates several HTML pages including one for each image and one for the index images, which are displayed as thumbnails in a table. As with Photoshop photo gallery, the look can be improved using CSS.

Cost: $399 for Dreamweaver CS3

URL: http://www.adobe.com/products/dreamweaver/

Demo: http://funkymonkeysc.com/photogallery/Dreamweaver%20Photo%20Gallery%20for%20Funky%20Monkey/index.htm

Admin: No.

Albums: No.

Animation: No.

Music: No.

Technical Support: Adobe (provider of Dreamweaver) has great products support and extensive online and offline documentations.

3. CoffeeCup Flash Photo Gallery

Description: This is a desktop software. It’s easy to install. Has a very elegant user interface. Very intuitive to use: Did not need to read any documentation to be able to create the albums and add the photos. Took 5 minutes to download, install and start creating albums. The slideshow it creates is very elegant and easily customizable- it even allows adding background music and sound effect for the slideshow transition (five options available including: Fade In, Scroll from Top/bottom/left/Right). The software even allows uploading the album directly to a Web server. The company website is very informative and customer service is highly accessible providing phone numbers and email forms. The gallery can be uploaded as stand-alone HTML pages or can be incorporated into existing website’s pages.

Cost: $34.00. Free trial available for 21 days.

URL: http://www.coffeecup.com/photo-gallery/

Demo: http://funkymonkeysc.com/photogallery/CoffeeCup%20Flash%20Photo%20Gallery/funkymonkey.html

Admin: yes.

Albums: yes.

Animation: yes.

Music: yes.

Technical Support: Toll Free, Sales Hotline, Fax, Office Hours, Contact Form.

4. PhotoFlow by FlashLoaded

Description: This is a Flash extension (or component) that creates a photo gallery, which displays multiple images with a stack effect, perspective and reflection. The images can be flipped by clicking on a specific image in the stack, using the supplied skinnable scrollbar, or scrolling the mousewheel. Images can be added or changed directly in the Component Inspector, through ActionScript or using an external XML file.

Cost: AS2 version: $59.95. AS2 & AS3 version: $79.95. No Free Trial version.

URL: http://www.flashloaded.com/flashcomponents/photoflow/?id2=kirupa_photoflow

Demo: http://www.flashloaded.com/flashcomponents/photoflow/?id2=kirupa_photoflow

Albums: No.

Admin: No

Animation: Yes.

Music: No.

Technical Support: No contact information provided. Only “support forum” that requires registration.

5. Flash Photo Gallery (for Dreamweaver) by Alvena.

Description: Flash Photo Gallery is a Dreamweaver extension that creates a Flash photo gallery in a customizable table; you can set number of rows and columns and adjust measurements and appearance of the cells.

Cost: $24.75. No free trial version.

URL: http://www.alvena.de/ext/gridgallery.html

Demo: http://www.alvena.de/ext/gridgallery.html

Admin: No.

Albums: No.

Animation: Yes

Music: No.

Technical Support: Phone, Email, Support, and contact form.

6. SimpleViewer by Airtight

Description: SimpleViewer is a server-side PHP application that creates a Flash photo gallery. For administration features allowing adding and removing photos and customizing the gallery, you can use SimpleViewerAdmin. This option requires installing the application on the hosting server, which might require the involvement of a technical support member of the hosting service provider.

Cost: Free.

URL: http://www.airtightinteractive.com/simpleviewer/

Demo: http://kjainteriors.com/simpleviewer/index.php

Admin: Yes using SimpleViewerAdmin http://www.redsplash.de/projects/simplevieweradmin/

Animation: Yes

Music: No

Technical Support: (for SimpleViewerAdmin): No. (Developer no longer support this tool.)

7. Coppermine

Description: Similar to SimpleViewer, Coppermine is a server-side PHP application that requires installation on the hosting server. It allows the viewer to change the theme and add comments for each photo.

Cost: Free.

URL: http://coppermine-gallery.net/

Demo: http://coppermine-gallery.net/

Admin: Yes.

Albums: Yes.

Animation: Yes.

Music: No.

Technical Support: No contact information. Support Forum with registration.

8. Flicker

Description: Flicker is a photo publishing and sharing tool provided by Yahoo!. It is a good option for non-profit groups and organizations as well as for individual use; however, flickr’s tem of use does not permit it for commercial purposes, as such it is not a valid option for most websites. Photo galleries created using Flickr are stored and viewed on the Flickr server and cannot be integrated with website pages.

Cost: Free

URL: http://www.flickr.com

Demo: http://www.flickr.com

Admin: Yes.

Albums: Yes.

Animation: Yes.

Music: No.

Technical Support: Yes.

There are two methods for adding a sound to a document in Flash: a) using the library and b) linking at runtime.

A) Using the Library 

1. Import the sound file into the library.
2. Add a layer for the background sound.
3. Use the property panel to select the sound file.
4. Set Sync to either Event or Stream.

“There are two types of sounds in Flash: event sounds and stream sounds. An event sound must download completely before it begins playing, and it continues playing until explicitly stopped. Stream sounds begin playing as soon as enough data for the first few frames has been downloaded; stream sounds are synchronized to the Timeline for playing on a website.”

Streaming the background sound is a better option, especially if the sound file is large.

1. Add as many frames as needed to play the sound.

Disadvantages:

1. Since the sound file should be imported into the Flash project, the size of the SWF will be impacted accordingly. This in turn impacts the download time for the site, possible resulting in an unacceptable performance.
2. The sound file may require more or less frames than the rest of the layers.

Advantages:

1. You can control the number of times the sound repeats
2. You can add effects to the sound like Fade In, Fade Out, Left Channel/Right Channel and Fade Left to Right/Fade Right to Left.
3. You can choose between Event and Stream.

b) Linking at Runtime

An alternative to adding the sound file to the Flash project, is to link to an external sound file from the Flash project (or loading sound at runtime). This method has the advantage of keeping the SWF file size smaller and the performance better.

To link to an external sound file use the following ActionScript:

var background_music:Sound = new Sound();

background_music.loadSound(”sound_file.mp3″, true); 

See the loadSound method of the Sound object for more details.

Check out our new Flash website at: www.webbrightconsulting.com.

Thank you to all those who contributed to this project.

While Flash web sites give the Internet user a much richer experience, most of the site content is invisible to the search engines. KC Swenson, a Search Strategist with Red Brick Media in Francisco, offers two possible solutions:

1. One version of the site: initial load of the RIA application must contain the optimized elements such as TITLE and headers and also must be reachable from a fixed address:

• URL rewrite: mod_rewrite
• Get inbound links (internal and external) to that particular resource

1. Have an alternate version of the site available (Swenson’s preference)

• Or have a subset of the site available – these would be the pages optimized for the desired keyword list

Creating a second version of the site should be done with caution; search engines can penalize a site by removing it from its index if clocking is suspected (clocking refers to the practice of presenting different content or URLs to users and search engines). However sites that serve up the same content to the search engines and users may not be penalized according to Google’s guide for creating a Google-friendly site: “if you suspect that your dynamically generated pages (such as URLs containing question marks) are causing problems for our crawler, you might create static copies of these pages. If you create static copies, don’t forget to add your dynamic pages to your robots.txt files to prevent us from treating them as duplicates.”

http://www.google.com/support/webmasters/bin/answer.py?answer=40349&ctx=sibling

References:

Wikipedia.org on Robots.txt: http://en.wikipedia.org/wiki/Robots.txt

Wikipedia.org on Rich Internet application: http://en.wikipedia.org/wiki/Rich_Internet_application

Google’s Webmaster Help Center: http://www.google.com/support/webmasters/bin/answer.py?answer=40349&ctx=sibling

Adobe OnDemand Seminars: http://www.adobe.com/cfusion/event/index.cfm?event=list&loc=en_us&type=ondemand_seminar&product=Creative+Suite&interest

KC Swenson’s presentation on Search Engine Optimization for Flash sites - For Web Professionals