Mike Potter

May 12, 2006

A Flash / Flex Front End to PHP Gallery

A while back, I posted a message on the Gallery forums that I was working on a Flex application that acted as a front end to Gallery. Well, I think I hit a nerve with some people, because I've gotten emails about this every day, asking where the code was, how to help, what it looked like etc...

Well, now that Flex Beta 3 is out, I figured I better spend some time updating the application to get it working. First off, this is a very simple example. If you don't know PHP or Flex, then this isn't for you. This is something to look at and then improve on or use an inspiration for a better solution. Its a very simple application: a drop down listbox that gets a list of Albums from Gallery, and then a datagrid that shows off thumbnails of the photos, depending on which album is selected. I chose to build a completely Flex based application. Others may choose to use the Flex / Ajax bridge to create a Flex theme for Gallery and build the Flash front end using JavaScript. Its up to you.

Here's a screenshot, showing an album with 2 pictures of my cats, Gus and George.


FlexGalleryScreenshot.jpg


Here's the source files in a .zip file. Use them as you like. The only thing I ask is that if you build something cool with Gallery and Flex, let me know, because many people are interested in this.

Here's what you need to do (I'm assuming you have Apache, PHP and MySQL going already).
1. Download Flex Builder from Adobe Labs.
2. Download AMFPHP from AMFPHP.org.
3. Download and install Gallery from Gallery.
4. Add some albums and photos to Gallery.
5. Extract AMFPHP to your website. I put mine at http://localhost/amfphp/
6. Extract the .zip fileand put embededGallery.php into the services/ directory in your AMFPHP install. Mine was at http://localhost/amfphp/services/embededGallery.php
7. In embededGallery.php, change http://localhost/gallery2 to point to your install of Gallery (I don't understand the Gallery APIs very well... I thought that I could create a full URL to the Gallery images, but it didn't work for me).
8. Create a new Flex project. I called mine FlexGallery.
9. Add FlexGallery.mxml, RemotingConnection.as and Thumbnail.mxml to the root of your FlexGallery application.
10. In FlexGallery.mxml, change http://localhost/amfphp/gateway.php to point to your installation of AMFPHP.
11. Right click on FlexGallery.mxml, choose Build as Flex Application. It should launch a browser that will play your Flex app. It will connect to your local install of Gallery and get the list of albums. Select an album, then your photos should appear below.
12. Profit.

Hopefully this helps out a few people. Again, its very simple. You should use this as inspiration to build a better Flex front end to Gallery.

Posted by Mike Potter at 10:54 AM on May 12, 2006

Comments

Chris Charlton — 04:13 PM on May 13, 2006

Awesome! I'm in a Flex class right now, I was getting into AMFPHP last night, and I recently used Gallery on a client site since their host had it ready for them - perfect timing.

Chris Charlton — 04:18 PM on May 13, 2006

Awesome! I'm in a Flex class right now, I was getting into AMFPHP last night, and I recently used Gallery on a client site since their host had it ready for them - perfect timing.

Phillip Midwinter — 05:48 AM on May 15, 2006

Some of the gallery front ends are pretty terrible - there are so many things that could be done with flex as a new frontend for applications. The major plus being is it prevents even the really really bad designers(aka programmers) from making anything look seriously horrendous.

Ross McTaggart — 01:11 AM on May 26, 2006

I cannot seem to get this to work here even though the code and logic all make sense to me :(

I have php , mysql , amfphp, gallery2 all working fine. The only thing I can figure is maybe iis vs apache?

It contacts the server but just sits stuck at the transfering data from the server and doesnt even load the album name :(

tia

[I'll post some instructions on ways to debug your application today to my blog - Mike]

Matthew — 11:21 AM on May 27, 2006

Hey Mike. Thanks a lot for the great sample code. Do you know if anyone has taken this to the next level? I'm really looking for a flash front end to Gallery 2.0.

Cheers.

- Matthew
[I don't think anyone has taken this any further, at least not anyone who has contacted me. - Mike]

Ross McTaggart — 01:45 PM on May 29, 2006

I am working on making a shop front end to gallery here. I just am fighting with getting exisiting code call to work with a tab navigator. What I am trying to do is have the script call out, get a list of albums, then use that to create the album tabs.

I just cannot for the life of me this weekend get it to pull the pictures. as soon as you try to use anything but a change event things fall apart. I even tried rolling my own event direct calling but it still seems to complain on compile :(

Rocky — 10:10 AM on August 19, 2006

Thats really cool! can it play the videos in gallery?

Thank you for signing in, You may now comment. (Sign Out)

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Add your comments

Remember Me?

(You may use HTML tags for style.)