Overview

what it is and does

Zoom Wheel XML Gallery was inspired by the wonderfully innovative gallery at DVEIN. This gallery has been coded from scratch to be smooth performing, simple to edit, and intuitive to navigate.

Zoom Wheel XML Gallery currently boasts the following features:

  • Performance - Framerates remain silky smooth whether there are 10 images in your gallery or 200.
  • XML Managed - All thumb images, full sized images, and text can be changed through a simple XML file.
  • Light Weight - Published SWF size of about 37KB.
  • Compatibility - Coded in AS2, opens with Flash 8+. Backwards compatible from Flash Player 8 all the way to Flash Player 10 beta.
  • TweenMax Driven - Unparralled tweening performance and flexibility.
  • Dynamic Image Sizing - Regardless of your full images size - tall, wide, big or small - it will be intelligently formatted to fit the users screen.
  • Fluid Layout - All gallery elements are dynamically aligned and centered no matter what size the browser window may be.
  • Mouse Wheel Navigation - Spin the image wheel with your mouse wheel for even quicker browsing.

 

what you need

and things to keep in mind

Zoom Wheel XML Gallery makes use of the freely available TweenMax and PreloadAssetManager classes by GreenSock. Both are included with this package for simplicity. Note however, that the version of PreloadAssetManager that is included is specially modified, so this file cannot be changed (it has been modified to provide a progress check without the typical delay associated with the trackProgress:boolean).

The font FS-IngridBold, by FontSmith is used in the demonstration. This font is NOT free, but is available for purchase. A great alternative is 'Trebuchet MS - Bold' which is preinstalled on most computers.

Zoom Wheel XML Gallery aligns its elements according to the Stage width and height, this is also known as a fluid layout. In order for the fluid layout to work, you need to embed the SWF at 100% browser width and height, and set the alignment to 'TL' (Top Left). Take a look at the sample index.html to see how this was done using swfObject. If you are loading the gallery SWF into your main SWF, the main SWF needs to be embedded in this same manner.

The gallery SWF is very compact at only 37KB. Since this small amount of data can be loaded almost instantly, there is no preload animation for the gallery SWF. If you decide to build the rest of your website within the gallery SWF, you may want to consider implementing a preloader depending upon the increase in size.

 

variables

simple tweaks

Zoom Wheel XML Gallery has a number of variables available which can be changed to easily tweak the look of the gallery. I welcome any suggestions for this list.

The following variables can be found on the 'AS variables' layer :

  • damp - .9 - Resistance when spinning wheel. Decimal values between 0 and 1 are acceptable. 0 stops immediately, 1 spins forever.
  • recSizeX - 229 - Width of thumb images.
  • recSizeY - 131 - Height of thumb images.
  • smallThumbScale - .57 - Scale of inactive thumbs.
  • posZ - 130 - Wheel radius.
  • posZ2 - 170 - Wheel radius for expanded category.
  • enlargedSpread - 40 - Spacing between images of a selected category. Lower numbers mean more space.

 

faq

and answers to them

"I just finished changing all the thumb images but they look squashed now. What Gives?"

Make sure your thumb jpeg's are of the same proportions as the recSizeX and recSizeY variables. If they aren't, you can either go back and change your image sizes to match the recSizeX and recSizeY variables, OR you can change the recSizeX and recSizeY variables to match the proportions of your image.

"I've loaded this gallery into my own SWF, but now the gallery isn't aligned properly."

This is a fluid gallery so it needs a couple things in order to intelligently align to the browser window:
1. Check your HTML file to make sure your main SWF is embedded for 100% browser Width and Height, and that it is aligned 'TL' (Top Left).
2. Make sure that the movieClip you are loading the gallery into has X and Y coordinates of 0, 0.

"Can I request a feature?"

Of course! I'm looking to expand and improve this gallery so your input is highly appreciated. Naturally I can't implement every feature requested, but they will be considered.