overstimulate

Flash was given a full screen capabilities a couple years ago, around the same time JavaScript based lightboxes were becoming popular. While I prefer standards based solutions, I don't know of any other way to implement full screen. My goal was to create a really small flash-based lightbox that uses all your pixels to show you images. While not a finished project, I think this 647 byte swf shows potential.

Overview & demo

The basic idea to overlay thumbnails with a flash movie with arrows indicating you can make the image bigger. If you click the arrows, you switch to full screen and the large version of the image is shown.

You can see a demo at the project page. Sorry about that but flash embeds don't survive rss/email so I'm not even going to attempt it.

Code Walkthrough

FlashLiteBox is built using two open source projects. swfmill takes an xml file of resources and compiles the final swf. MTASC compiles the ActionScript 2 code into a swf for swfmill.

Arrows.as

class Arrows extends MovieClip {
  function onLoad() {
    Stage.align = "TL";
    Stage.scaleMode = "noScale";
    Stage.addListener({
      onFullScreen: function(full) {
        if (!full) _root.image.removeMovieClip();
      }
    });
  }

  function onRelease() {
    if (Stage['displayState'] != "fullScreen") {
      Stage['displayState'] = "fullScreen";
      _root.createEmptyMovieClip("image", getNextHighestDepth());
      _root.image.loadMovie(_root.img_src);
    }
  }
}

onLoad runs when the movie starts. We setup flash not to scale our image and to align the images to the top left. A listener is added which checks for a change to full screen mode. This listener allows removal of the image when escape is hit, leaving the flash movie in its original state.

onRelease runs when the mouse button is released. If the movie isn't already full screen we: enter fullscreen mode, then add a new "movie clip" into we load the image. The URL of the image is provided as a flashvar and accessible via _root.img_src.

This ActionScript is complied into classes.swf.

flashlitebox.xml

<movie>
  <clip import="classes.swf"/>
  <background color="Black"/>
  <frame>
    <library>
      <clip class="Arrows" id="arrows" import="src/maximize.png"/>
    </library>
    <place id="arrows"/>
  </frame>
</movie>

In the final flash movie we load several clips. First we import classes.swf, which is a compiled version of the code above. Then src/maximize.png is added as an image clip (16x16 png). It is given an id, which we use place the movie clip into the main movie frame. The class attribute attaches the actionscript classes we imported from classes.swf.

Further ideas & improvements

The code is open source (BSD) and on github. This is a crude prototype and I am not flash developer, so don't flame me!

• The demo html is crude and should probably add/position the flash via JavaScript, preferably gracefully degrading to a JavaScript lightbox if you don't have flash.
• Instead of a 16x16 png to click, allow clicking anywhere on the thumbnail to open up the full screen view. I think this requires the flash movie cover the image and capture the click for security reasons.
• Show the progress of the large image while it downloads instead of a black screen
• The image in full screen mode should be centered and scaled to fit
• It would be nice to be able to go to the previous/next image without leaving full screen mode

I'd love to see someone take this and create a movie usable by people creating galleries. Or perhaps someone should create a greasemonkey script to add it to existing galleries.