This Photoshop + Flash tutorial will show you how to design a cool photo gallery as seen on AppleTV website and in many Mac application (ie. iTune, iPhone). In fact, this tutorial is very easy to follow, all you need is some basic Photoshop and Flash skills. To complete this tutorial, you need Photoshop CS2+, Flash 8+, and a photoFlow component from Flashloaded.
1. Gradient background
In Photoshop, create a new document, 950 x 620px. Select black foreground color and dark grey (#384b55) background. Use Gradient tool and drag from lower-middle to the bottom of the document.
2. Thumbnail grid
Collect some sample photos and create a thumbnail grid as shown below:
Then duplicate the thumbnail grid and apply flip vertical transform (Edit > Transform > Flip Vertical). We will need this duplicated grid to create the reflection effect.
3. Warp transform
Select the top layer grid and go to Edit > Transform > Warp. Now you should see the Warp transform grid:
Drag the four corner anchor points and the two middle vertical lines slight upward to create the bent effect.
Repeat previous step for the reflected grid. While you are dragging the anchor points, try to keep the reflected grid align to the top layer.
Set the top layer opacity to 30% and bottom layer to 50%. Then apply a gradient layer mask to the bottom layer.
4. Glow
Make a oval selection and fill it with a sky blue color. Apply 50px Gaussian Blur (Filter > Blur > Gaussian Blur). Condense it a little so it looks like a spot light.
5. Flash
In Flash, create a new document exact same size as the Photoshop image. Copy & paste entire image in the first layer.
6. Flash component
If you have the photoFlow component installed, simply drag the component onto the stage. If you don't have the component, get one from Flashloaded or enter our Free photoFlow Component Giveaways contest.
Now open the Component Inspector palette and you will see all available parameters. Here you can customize the component setting such as: XML path, autoflip, image dimensions, reflection, zoom effects... For more information on how to use photoFlow, please read the user guide.
6. Updating the gallery
Since the gallery is loaded from an external XML file, you can simply update the XML file to add or remove photos.
PhotoFlow component used in this tutorial is provided by Flashloaded. To get a free copy for yourself, don't forget to enter our Free photoFlow Component Giveaways contest.
Really really nice ive always wondered how to create something like that on photoshop
neat trick …
i want photoflow!
If you like this gallery, take a look at http://guckn.com ! It’s shows your Flickr and Picasa photos in a similar way.
I made a Spanish translation of this tutorial on unblogged.net
Check it out!
Thank you for this tutorial!!
please send me , 2d beautty clip art toturial for tv ad .
thank u /
great stuff! how do you add a txt description to the image? something through the xml right? and adding dynamic txt box in flash right?
Thanks for your great ideas,I also want to see your others product.
Confirm to me,please.
Thankyou.
hi,thx it’s really great,but the zipped package is damaged ,can u plz add another link
manaparai
nice tutorial ,
just confuse how to upload this .swf on the internet..im upload but no picture appear..what should i do??…something missing on my component or my uploading step..
really need a help..
amazing tutorial and download. xml photo galleries are making this technology more accessible to the common artists that might have perhaps a little technological knowledge and a lot of artistic vision/ambition. thank you for taking the time to put this together.
where is Fla?
Can you do update the code to allow autoscrolling of thumbnails when we point the mouse cursor to the left or to the right side? It would be perfect with this option added! Also maybe add comments in bottom… Like (picture details like description, exposure, aperture,…). TY for sharing with us :)
o0k well, how can i give a link on active photos? for example, there will be some photos at bottom side of page that active, and we click on them to change photos. on a photo, i wanna give a link by clicking to go a another else web site. i dunno how to do that :( please help me!
regards!
Since when do they charge for stuff on Kirupa.com (the photoflow component you have to download) – gah! Has anybody got a tutorial to write this not as a component?
nice but too complicated for me…
for variety of flash compone visite our site
http://www.saffronflashcms.com
for variety of flash components visit our site
http://www.saffronflashcms.com
carpediemhoney@gmail.com –
Since it is an embedded flash application you will either have to create a movieclip in Flash (you can do this on the Flash timeline or by loading a movieclip externally onto the root) OR by using -
on(release) {
getURL(www.example.com, “_blank”);
}
on a button or movieclip in Flash.
podtim –
The swf will get the images externally just like a browser will, so any files that are referenced in the xml file must be in the same place relative to the swf file. In other words, if your images are referenced as being in the ‘images’ folder, when you upload your swf you must also upload you images in a folder called ‘images’ in the same directory as the swf file. Also, your xml file must be present in order for the swf to get the image files. Upload everything and see if it works.