Completion of a large full screen gallery that loads images and thumbnails from an XML file. It already has an interactive thumbnail navigation and general layout done in Flash. It needs some basic AS3 animation including liquid expansion added to it. And to be able to read a couple more variables from an already loaded XML file & two Flash Vars from the HTML.
Action Script 3 Stuff:
- Already uses PhotoFlow component for thumbnails, which has already been added to and configured in the stage. PhotoFlow imports an XML file with all the attributes it needs, and any others that have been added to the XML file.
- Full size photographs urls will be the XML attributes as the thumbnails, but instead of being in the "../gallery/th/" directory full photographs will reside in the "../gallery/" directory. They do not need to be preloaded until a user clicks on one.
- Whichever thumbnail is clicked on in PhotoFlow will preload that full screen image and engage the transition effect on the full screen image.
- Add a gray button beneath the photo description that launches the Gallery full screen, like a YouTube video.
- The description and name of the photograph will be loaded from the XML file.
- Add a link between the photo title and logo that says "<< Go Back to (whatever the name of the URL is that it loads from the Flash Var)"
- Simple preloader for the swf file, and separate preloader for the large image. Thumbnails already have a preloader.
- Needs to accept the following Flash Vars from the HTML:
- Which photo to show first in the PhotoFlow component (a numbered index based on the XML file order), and which full screen photo to display first.
- URL of a page it can "<< Go back" to.
- Name of the URL it goes back to.
- The left hand column and all items inside of it will remain 300px wide and will not move. However, the columns background should expand to fit the screen height.
- The full screen image and PhotoFlow thumbnails will be centered in the width of the right hand column. And the right hand column of course expands to fill the rest of the screen.
- The Photoflow Thumbnails top edge will anchor to 300px above the bottom edge of the screen.
- The full screen image will also be centered in the height of the right hand column. And the full screen image itself will scale (while maintaining it's ratio) to fill or shrink to available space in the right hand column. However, there will be a 50px margin on the edges of the photo, for white-space.
- The buttons that are beneath the description in the left hand column will need to move up or down depending on the length of the description. There should be appropriate white space between those buttons and the description.
- The copyright will be anchored to the lower right hand corner of the photograph. It will be offset from that corner X:-185 Y: -29 (appearing over the photo, just like it currently does).
Photo swap will cause the photograph to fade to 0 alpha while simultaneously getting blurry. In the center of that photo a black & white circular preloader will have appeared loading the next image. Once the next image is loaded that one will fade in. I want these transitions to be fast and not impede navigation.
I have an AS3 mouse tracker working in the actions layer. When the mouse goes inactive it will successfully execute the function hideThumbs(). And when the mouse is moved again it will execute the function showThumbs(). Currently all those functions do is change the visible state of the PhotoFlow component. Instead I want hideThumbs() to slide Photoflow up a few pixels, almost imperceptibly, then slide down 200 pixels, while simultaneously fading to 0 alpha. This will be a fast transition, less than a second long. showThumbs will do the exact same transition in reverse.
The full screen photograph has an AS3 "reflection" applied to it, this will need to be maintained in the final product.
Please contact me with any questions, I will be available all day. Thanks for you consideration. Also, I require the finalized .fla file so modifications can be made in the future by myself.
NOTE: The PhotoFlow component is used in the .fla file provided and is already configured, although some flash variables will need to be passed to it by your script. I am assuming that once a component and assets are added to a .fla even people without the component on their machine can edit it. If not then you may require the PhotoFlow extension to make some of the changes.
Link to PhotoFlow API: [url removed, login to view]