Flickorama 3D Update and Camera Work

Inspired by the PlexiGlass (OpenFlux 3D) example that opened easy to use Element Flow-like capabilities to Flex applications, I created Flickorama mashup last year to explore public photos from Flickr.

You can read about it in my outdated by now Flickorama update post or see an independent Flickorama review by Eric Miraglia on his Impressive Pixel blog.

A lot has changed in Flickorama since then. The added camera work with pan, tilt and zoom features provided by the tucked in Away3D engine, along with the added keyboard navigation make it a breeze now to flip through a stack of photos. I also added new Random view layout option and integrated my Flickr Flipbook, but that deserves a separate post.

Random3DView Demo and List3D

The only reason I am rambling about those updates because while digging through openflux plexiglass trunk code I’ve tried different layouts and cameras, ended up adding a couple of my own and making some tweaks to existing cameras and layouts for improved interaction and user experience.

Now, I have not seen any updates to the openflux library recently, and I am not sure about openflux roadmap or future development work, although I really like the separation of model, view, layout and 3D perspective that this library provides.

However, if you have an application that requires similar 3D list view display, I created a Random3DView demo that demonstrates the setup behind Flickorama 3D photo viewer. You can view Random3DView source code and the resulting camera and layout work in the updated Flickorama 3D mashup.

While working on Random3DView I realized that there must be many applications that could benefit from a simple List3D view component that taps into Away3d capabilities with OpenFlux Plexiglass or some other MVC framework overlayed, yet hidden and nicely encapsulated for simple List 3D data binding and rendering.

So, I’ve decided to do some refactoring on my Random3DView code and see if I can create a reusable List3D component that will make it very easy for anyone to put together a Flex application like Flickorama, backed by the powerful Away3D engine with some Tweener animation and different layouts, in minutes. Stay tuned for updates.

Degrafa Maps and Globe

Some Degrafa world maps in various projections and mapping to 3D globe with Flex 3D are coming in the next few weeks too.

You can see some early demos of my Degrafa maps here. Some nights and weekends were spent on converting blank SVG maps of the world to make those interactive maps with selectable regions and countries in Flex. I am currently rethinking how those maps are configured and loaded.

You can see a production version of my Degrafa mapping technology used in a Beer Hunter application on destinationbeer.com.

This Flex 3D Earth demo and my poking in Away3D lately gave me some ideas on creating a rotating Degrafa Globe that I am planning to enable and get it to work with my degrafa map, zoom in, tooltips and all the 3d camera rotation and tilt effects.

So, check back for some demos and new open source List3D and Map3D components soon.

Related Posts

• Flickorama update
• Flickorama – OpenFlux PlexiGlass Flickr Mashup
• Flex 3D Degrafa Earth Globe with 2D World Map Plane
• From Day 1 of Flex SVG Explorer Dev and Research
• Back to SVG and a cup of Java ME

So, I added new silvery Light UI skin to this app with an option to switch between the default and light skin:

And here is the screenshot of Flickr Flip Book Light:

It’s a little plain, but easy on the eyes. Maybe I’ll add some album page background pattern options in v.2 to make it stand out and more colorful.

In the meantime, I am planning to do a short how-to with some sample code next, to show how easy it is to add support for multiple UI skins to Flex apps with a well-designed UI and cleanly separated view/layout code and styles.

Related Posts

• Back to SVG and a cup of Java ME
• Some cool 3D stuff and Degrafa Maps coming soon
• Flickr Flip Book
• Interactive BitmapData Perlin Noise Explorer
• Noise Test

Flickr Flip Book Features:

- Flickr Tag Search prompt

- Flip Book animation with Photo Album pages displaying photos and extra photo informaion

- Detailed Photo Information: description, tags, author, number of views, date posted, comments

- Photo strip to navigate through the album photos and skip pages

- Tag clouds to view photo tags and perform a quick search of similar images

- Keyboard navigation to flip through photos and zoom in for a larger photo view

- Search by content or media type with some sort options: relevance, interestingness, date posted/taken

- Sequential and random slideshow playback

- Full screen view

Flickr Search Prompt

When you enter Flickr Flip Book, a typical Flickr text search prompt is displayed:

Just enter some key phrase of interest to search Flickr.

You can also pass the search text query via url using deep linking with the “text” parameter. For example, the following url will retrieve matching sunflower images on load, bypassing the initial Flickr search prompt: http://www.randomfractals.com/FlickrFlipBook/FlickrFlipBook.html#text=sunflower

Flipping through Pics

The Flip Book that simulates Photo Album with page flipping effect is not my original work, although I’ve spent a lot of time picking the most suitable visualization and tried a few different flip book components before settling on Ely’s Flex Book. The other flip book components I’ve evaluated just were not as flexible or had some serious sizing and animation performance issues on page resizing and the actual page flip.

To flip Photo Album pages you can click on the page corners, drap them to experience the full page flip effect, or use the photo thumbnail strip at the bottom of the Flickr Flip Book to navigate to the desired photo page.

Album Photo View

The Photo Album displays two pages per photo: Photo page on the left and Photo Information page on the right:

Photo Page

The Photo Page displays medium size photo from flickr, resized and enlarged to fit your screen resolution and browser window:

If you mouse over the photo image, you can view the photo title, number of views from flickr, photographer’s icon, link to the  photographer’s photostream, and posted photo date and time.

Photo Popup

You can click on the photo image to see high resolution image or hit space bar key to show and hide the large photo image:

I’ve used Josh’s PopUpThumbnail component for this one, with minor adjustments to hide popup image on slideshow playback and adding support for the enlarged image aspect ratio and bitmap smoothing on popup. Turns out half of the Flickr images are of low-res, actually “medium” according to Flickr, with 500 px on the longest side.

Photo Information Page

The Photo Information page displays photo title, description, tags and comments.

Photo Description:

Photo Tags:

Photo Comments:

Discover New Photos with Tag Search

Flickr Flip Book has two tag search options:

1) Select tags on the Photo Information Page to search for similar photos. This is handy if you don’t know exactly what you are looking for. Most photos on flickr have 10-20 tags to pick from. Just select the most interesting tags and click search:

2) The toolbar at the top has a link to the Album Tag Cloud that displays all tags for the current photo set:

Search Options

The top toolbar also has a link to the Search Options dialog, located under the text search field. There is not much there yet, but a good start to get some basic search and sorting going:

Keyboard Navigation

You can use arrow keys to flip pages and space bar key to show/hide large photo popup.

If the app looses focus, just click on the photo strip to regain keyboard navigation functioanlity. I am still looking into this issue.

PhotoStrip and Slideshow Playback

Flick Flip Book uses the same photo strip navigation I’ve used for Flickorama at the bottom of the application window, with options to get next/previous photo set and Play sequential or random slideshows:

See my Flickorama update post for more info on the Slideshow PhotoStrip.

Slideshow playback in Flickr Flip Book is really cool. Just fire it up and see those pages flip.

Let me know if you encounter any problems.

Related Posts

• Some cool 3D stuff and Degrafa Maps coming soon
• Flick Flip Book Light

I only noticed it because after reading The 3D Web in 2008 by Sarah Perez on readwriteweb.com last night,  I started considering getting back to it and adding some new features to keep me busy.

Eric Miraglia posted an encouraging Flickorama review on his Impressive Pixel blog with good suggestions on improving ergonomics of this application, making it more responsive to mouse gestures, improving large photo view and taking screen resolution into consideration when displaying the photo sets.

I really liked the Popup Thumbnail component Josh posted recently with the Lightbox popup effect. I think that will make my large photo view really pop and create a much smoother image loading effect with the added animation. That’s one area I’ve been struggling with when designing this photo viewer.

I’ve started my own wish list in my previous update on Flickorama. Also, I’ve been doing some custom Wordpress build outs lately. More on this later, but what struck me is the staggering number of Wordpress plugins available, and I’ve been itching to do a plug-in of my own to get my hands dirty in some php.

So, I’ll be plugging away on Flickorama over the next two weeks.  Please drop me a note with your comments and suggestions on improving user interface, interactions, adding additional data sources or parametrized widgets/plugins you’d like to see.

Yes, 3D browsing is finally here and I think it will become mainstream for multimedia and news browsing in 2009.  The PhotoStream is a good example of such a news site.

As Sarah notes in her 3D Web in 2008 article:

Where 3D is Cool: Browsing

… we’ve seen some developments in the use of 3D to deliver better visual browsing experiences. Amazon launched their 3D Winodwshop site which lets you virtually browse through the company’s top products.

We’ve also seen other web applications integrate this 3D visual browsing technology including ManagedQ’s semantic Google-based search, Photo Stream’s visual newsroom as well as newer search engines like Viewzi and SearchMe. Although none of those have hit the mainstream, they all are interesting experiments.

However, one of our favorite 3D browsing tools is the technology from Cooliris, a browser plugin that lets you transform the web into an immersive 3D experience. With Cooliris, you can surf a “wall of content” from sources like Google, Flickr, Yahoo, SmugMug, and DeviantArt.

Related Posts

• Flickorama update
• Flickorama – OpenFlux PlexiGlass Flickr Mashup
• 2008 Campaign Finances Remix — Mashup of the Day!
• Some cool 3D stuff and Degrafa Maps coming soon
• Treemap History

New Features:

• Slideshow thumbnail photo strip
• Large Photo View
• Full Screen View
• Link to the photographer’s photostream
• Photo highlights, transparency, borders, drop shadows and typography enhancements

Slideshow Photo Strip

The most notable change is the new slideshow control bar at the bottom of the application screen:

You’ll notice large Start Slideshow (play) button on the left and a scrollable photo strip control with thumbnails from the currently displayed photo set. The photo strip control will display left and right scroll buttons automatically if all the thumbnails from the currently displayed photoset don’t fit on your screen. Photo strip scrolling is enabled on mouse over. You still need to click on the Next/Previous Set buttons to load photo sets.

The photo strip is fully synchronized with the OpenFlux PlexiGlass list view. So, when you shuffle images in the main 3D view by dragging images around, you’ll notice they are shuffled in the photo strip as well.

I also added photo highlighting and tooltips that display photo title and clearly indicate the selected photo in PlexiGlass list view and photo strip. In addition, the slideshow control bar, buttons and image boxes now have a refined treatment of borders, transparency, caption display with text truncation, drop shadows and glow filters.

Large Photo View

I am still not completely satisfied with the Large Photo view, but the latest version has some new features that make it more flexible and usable for the slideshow and different 3D photo set layouts. Here is the snapshot of the Large Photo View canvas:

When you click on the selected photo or double click on the photo thumbnail, the Large Photo view is displayed. This photo view canvas is draggable and you can reposition it in the main view to place it in the most convenient location. You can also toggle between medium (500×500) and large (750×750) photo view by double-clicking on the Large Photo image.

The caption box in the Large Photo view displays photo title, date taken, and has a link to the photographer’s photostream. The photostream link opens new browser window and links directly to the flickr photostream page for now. I plan to extend this feature to load the original photographer’s photostream in Flickorama in the future.

Full Screen View

The top application control bar has two new buttons: Large Photo on the left and Full Screen View button on the right:

The Large Photo button opens the Large Photo View and Full Screen button allows to break out of the browser window and view Flickorama full screen.

The toggle buttons in the middle are for switching between the different 3D Photoset Layouts. The currently supported layouts are:

• Cover Flow
• Vertical Cover Flow
• Carousel
• Grid
• Spiral
• Roller Coaster
• Time Machine

I am considering adding Book, Sphere and Collage photo set layouts eventually.

Under the Covers

Quite a few changes, bug fixes and enhancements were added behind the scene. Images are now pulled directly from flickr without an extra pass through the image proxy on my server. I also switched to using Ely’s Super Image for image loading and caching. Image caching and direct loading from flickr gave flickorama a noticeable performance boost.

I still need to play a little with image caching settings and profile the whole application. It performs well for a casual user, but you might encounter problems if you go through over a thousand of photos.

What’s next?

I am planning to add Advanced Search options and Tag Cloud, generated from the currently displayed photo set, to provide extra search and explore options.

Other ideas:

• Going AIR :)
• Multi-tab Flickorama
• Save your favorite pics and searches
• Geo-search

Related Posts

• Flickorama – OpenFlux PlexiGlass Flickr Mashup
• Another hit…
• Some cool 3D stuff and Degrafa Maps coming soon
• 2008 Campaign Finances Remix — Mashup of the Day!

Here is the Flickorama with sample layouts:

Cover Flow:

Roller Coaster:

Time Machine:

There are more layouts available and a larger photo preview feature that is currently in beta.

With Flickorama you can search public Flickr photos by tags, paginate through the returned photo sets, or sit back and let the sequential or random photo slideshow flickr on your screen.

I’ve been sitting on this prototype since Ryan Campbell put together that OpenFlux 3D PlexiGlass cards example. When I first saw it, I knew that’s the UI to use for some fun Flickr pics browsing.

First, I wired it to Flickr to demo some alternative image gallery display options to one of my clients. I ended up using Ely Greenfield’s Display Shelf component for that project.

However, I was so far along into wiring OpenFlux PlexiGlass to Flickr that I have decided to spend some extra time to add photo set pagination and cleanup the UI a bit.

You can access it on my new site: http://www.randomfractals.com/Flickorama/Flickorama.html

I’ll be hosting my most interesting prototypes and demos on that site from now on.

I should also give credits to Juan Sanchez for the shadow Flex UI theme I’ve used for this application and Brian Kent for the really cool AEnigma Scrawl font he created. I’ve seen it used in quite a few Flex apps lately.

Related Posts

• Flickorama update
• Another hit…
• Some cool 3D stuff and Degrafa Maps coming soon
• 2008 Campaign Finances Remix — Mashup of the Day!