Flash Image Viewer with interactive animated physics

Interactive Image Viewer v1 @ FlashDen

September 17, 2008 • 2,794 views

I’ve re-purposed an old project of mine, the interactive pog portfolio viewer, to FlashDen. I call it the pog portfolio because each work is represented by a circle, or pog, and you play ith it in the “bay” with different interactive physics configurations. When you click a pog you can view a close up image of that item and more details. The whole file has been cleaned up (code and graphics) and documented for easy customizations.It is a small file size as well, under 36kb swf!

This is mainly an image viewer, stay tuned for any updates, like video support etc.

INTERACTIVE IMAGE VIEWER WITH PHYSICS AND ANIMATION EXAMPLE!

View Details here at FlashDen

Works and configuration loaded in through a single xml file. Select works from the bay to view title, description image and a link (if applicable). Organize works with the tags or select all and choose the physics of the bay for interactivity control (gravity, spring, grid and friction).

It is fully customizable and fully driven by xml. The xml file contains values for configuring the swf, and also all the information about each work to be included in the portfolio.

Each work is loaded into the â€œbayï¿½? as a round thumbnail or â€œpogï¿½?. These pogs are animated with the interaction options (gravity, friction, spring and grid). The pogs are sortable by tags (parsed in from the xml).

The whole color scheme of the image viewer is configurable, or can even be set to random! Have a different color scheme every time your image viewer loads!

Clicking a pog in the interactive bay sends that thumb to the holding area and loads the close up into the focus window for that work. It also loads the details about that work into the detail box (to the right of the focus box). Each works needs a 50Ã—50 thumbnail and a close up (max 375px x 270px) image. Focus images are all loaded in with an informative preloader and fade is once loaded.

Site easily integrates with Google Analytics to track user interactions within this flash portfolio!

All works in the portfolio are passed in through an external xml file, here is a sample work node from xml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!-- Name or Title of work -->

Random Gear

<!-- Description of work -->

Random gear photograph from FlashDen assets.

<!-- Image paths (thumb and focus) are both constructed with the directory names above, or you can use an absolute path (http://flashden.net/new/images/pictures/icon_newsroom.gif) -->

<!-- Image thumbnial, this is brought in and masked to a circle (width:50px x height:50px) -->

random_gear.jpg

<!-- Focus thumbnail, loaded into the Focus Box when pog is clicked (max width:375px x height:270px) -->

random_gear.jpg

<!-- If a link exsists place it here the Text goes in the title node and the url in the url, if no link leave empty -->

http://flashden.net

<!-- Tags for this work. Tags are parsed and displayed across the bottom of the bay (seperated by a pipe '|') -->

Photo|Industrial