It’s no secret that creating sleek and usable interfaces in flash is a big pain in the head. Whether your the average run-of-the-mill blogger who wants to add a little bit of flashy animated navigation or a seasoned web designer working on a tight deadline – creating flash navigation from scratch is almost a death sentence. Unless you really know the inner-workings of animation design, designing visually stunning animation in flash seems far from achievable (or at least not without effort).
Fortunately, there are a number of readily available flash components that you can avail and can make the job of creating professional animated interfaces really easy and fun while achieve quality results. Today we look at one of such components – Flashloaded‘s photoFlow.
photoFlow is a flash component that showcases photos in 3d stack effect, complete with realistic physics-based flipping animation and reflection. This is similar to an already loved interface prevalent in iTunes and OSX Leopard. For this review I was able to play around with Actionscript 2.0 version of the component. Here are some of the key features of photoFlow:
- Easily update images using the Component Inspector, ActionScript or an XML file
- Adjustable flip speed, spacing between stacked images and image size
- Customizable perspective view and reflections
- Option to flip images as a slideshow
- Add links/hyperlinks to each image
- ActionScript events to perform an action when an image has loaded, is selected, etc…
- Images can be external or included in the library
- Mouse wheel image flipping (Windows only)
- Optionally display a name for each image
- Option to set the number of images to preload
- Option to automatically scale images to fit or to fill the defined size
- Zoom in on selected image or on all images on mouse over
- photoFlow can open on a pre-defined image
- Customizable background color and opacity
- Option to start flipping from left-to-right or right-to-left
- Supports sound effects for image flipping
- Built-in preloader
- Light weight (weighs only 18kb with the scrollbar)
Setting up photoFlow was really straightforward and easy. It took me less than 30 minutes to get an actual working photoFlow interface after installing it through Adobe’s Extenson Manager. photoFlow comes with very thorough and easy to understand instructions that walks you through a basic setup to explaining more elaborate integration points through actionscript events.
One roadblock that I ran to while setting it up was that I forgot that I had the actionscript 2.0 version and proceeded to make an Actionscript 3 project – in which case I couldn’t find the photoFlow component in the Components panel. So it’s important to double check whether you have the Actionscript 2 or 3 version of photoFlow before you make a new flash project.
Aside from that everything was a breeze in using the component. There are a lot of settings to play around with. You can even opt to either manually load files through the component options or load via xml for more advanced users. Skinning is also no problem as you can customize the look of your photoFlow component. Animation and transition of photos can be tweaked to your liking including perspective and depth of the reflection.
All in all photoFlow is one topnotch flash component. Easy to setup, install and tweak – photoFlow is an excellent tool for those who want to setup quick but elegant photo galleries for portfolios, photo albums and even as navigation for a product catalog. photoFlow would definitely cut your time in figuring out how to do stuff and just get you right to creating and designing. It’s something I definitely would consider next time I had to make a flash-based interface.
photoFlow costs $59.95 for the ActionScript 2 version, and $79.95 for the AS2 and AS3 version. Licensees of the AS2 version can upgrade for $20.
Asst. Editor’s Note: this is a sponsored post written on request by Flashloaded.
Marco Palinar is an accomplished Web and Graphic Designer currently specializing in aesthetic, highly-functional and user-centric design solutions that scale. While he majored in Psychology and Political Science from the Philippines' premier state university - Marco discovered early on that his real passion was in art, resulting in his immersion into a career rooted in graphic and web design. And since 2004, he has been creating design solutions for various different companies where he has been employed or worked with in his freelance career. From creating scalable user interface design for social networking giant Friendster to redesigning/implementing the website of Philippine's top clothing retailer Penshoppe - his application of design and internet technologies are diverse and well rounded, while being rooted on web standards and best practices. At present Marco is concentrating on creating highly-usable and aesthetic design solutions, targeting web applications and user-centric websites and more recently has delved into delivering these interface designs solutions to mobile platforms. He is currently a freelance web designer working on several web start ups as Chief User Interface Designer.