Lightbox

Kind of class: public class
Package:
Inherits from:
  • Sprite
Version: 16 Apr 2010 Improved error handling
7 Apr 2010 Redesigned next/prev buttons, added textfield for indexing current element
7 Apr 2010 LightboxWindow is autosized to the size of the Stage
30 Mar 2010 LightboxFormat now uses TextFormat objects for Lightbox TextFields
29 Mar 2010 ContentCreator class renamed ContentDisplayCreator, updated package structure
28 Mar 2010 LightboxWindow stays centered for full screen lightboxes
27 Mar 2010 Now uses LightboxContentInfo to manage properties of content
7 Mar 2010
Author: John Polacek, john@johnpolacek.com
Classpath: com.johnpolacek.components.Lightbox
File last modified: Thursday, 24 February 2011, 22:09:57
The Lightbox class is used to show various media (video, images, audio) in a popup content window on the top level of a flash file. The lightbox size is sized dynamically to match the size of the Stage. Lightbox content can be shown individually or organized into groupings.
Example

  • Basic usage, pass a content url to the lightbox:
    import com.johnpolacek.components.Lightbox;
    var lightbox:Lightbox = new Lightbox();
    addChild(lightbox);
    button.addEventListener(MouseEvent.CLICK, function():void {
    lightbox2.displayContent("example.flv");
    })
    
    Example of content grouping Note: Lightboxes can have multiple content groupings:
    lightbox.addContentToGroup("content/example.jpg");
    lightbox.addContentToGroup("content/example.flv");
    lightbox.addContentToGroup("content/example.mp3");
    button0.addEventListener(MouseEvent.CLICK, function():void {
    lightbox.displayContentIndex(0);
    })
    button1.addEventListener(MouseEvent.CLICK, function():void {
    lightbox.displayContentIndex(1);
    })
    button2.addEventListener(MouseEvent.CLICK, function():void {
    lightbox.displayContentIndex(2);
    })
    
    Example using LightboxFormat class to apply custom formatting and the LightboxContentInfo class to add text fields and additional params:
    import com.johnpolacek.components.Lightbox;
    import com.johnpolacek.components.LightboxFormat;
    var format:LightboxFormat = new LightboxFormat;
    format.titleTextFormat = new TextFormat("Arial", 24, 0xF58220);
    format.subtitleTextFormat = new TextFormat("Arial", 14, 0xFFFFFF);
    format.noteTextFormat = new TextFormat("Arial", 12, 0xAAAAAA);
    format.audioTitleTextFormat = new TextFormat("Arial", 14, 0xF58220);
    format.audioSubtitleTextFormat = new TextFormat("Arial", 12, 0xFFFFFF);
    format.buttonColor = 0xF58220;
    format.contentBackgroundColor = 1;
    format.margin = 20;
    var lightbox:Lightbox = new Lightbox(format);
    
    Examples of different types of content:
    // AudioPlayer (single audio file) 
    singleAudio:LightboxContentInfo = new LightboxContentInfo();
    singleAudio.titles = ["Audio Title"];
    singleAudio.subtitles = ["Audio Subtitle"];
    singleAudio.url = "content/sample1.mp3";
    singleAudio.title = "Sample Audio File"; 
    singleAudio.subtitle = "Must be mp3 format";
    singleAudio.note = "Every Kind Of Creep (Zebra remix) Mashup by ToTom";
    lightbox.addContentToGroup(singleAudio);
    // AudioPlayerMenu (multiple audio files)
    var multipleAudio:LightboxContentInfo = new LightboxContentInfo();
    var titles:Array = [];
    var subtitles:Array = [];
    titles.push("Every Kind Of Creep (Zebra remix) Mashup");
    titles.push("My Life on the Crazy Train Sucks (So What?)");
    titles.push("Pump Up the Doorbell");
    subtitles.push("by ToTom");
    subtitles.push("by byDanMei & MarcJonce");
    subtitles.push("by Party Ben");
    multipleAudio.titles = titles;
    multipleAudio.subtitles = subtitles;
    multipleAudio.url = "content/sample1.mp3,content/sample2.mp3,content/sample3.mp3";
    multipleAudio.title = "Sample Audio File";
    multipleAudio.subtitle = "Must be mp3 format";
    multipleAudio.note = "Mashups from bootiemashup.com", 
    lightbox.addContentToGroup(multipleAudio);
    // AutoSlideShow
    var slides:LightboxContentInfo = new LightboxContentInfo();
    slides.url = "content/cat1.jpg,content/cat2.jpg, content/cat3.jpg,content/cat4.jpg";
    slides.title = "Slideshow of images";
    slides.subtitle = "Can be jpg, gif or png";
    slides.note = "Image courtesy of icanhascheeseburger.com";
    lightbox.addContentToGroup(slides);
    // SWF
    // defining the width/height is sometimes necessary for proper display
    var flashExample:LightboxContentInfo = new LightboxContentInfo();
    flashExample.flashWidth = 550;
    flashExample.flashHeight = 420;
    flashExample.url = "content/EaseVisualizer.swf";
    flashExample.title = "Sample Flash File", 
    flashExample.subtitle = "GreenSock Ease Visualizer",
    flashExample.note = "The GreenSock Tweening Platform rocks!",
    lightbox.addContentToGroup(flashExample);
    

Summary

Constructor
Instance properties
  • format : LightboxFormat
    • Controls all formatting (colors, fonts, etc.)
  • contentGroups
    • An array that organizes content into groups.
  • contentPath : String
    • Default path to content directory.
  • projectorScale : Number
    • If running in projector mode (scaled full screen mode) then lightboxWindow position is adjusted.
Instance methods

Constructor

Instance properties

contentGroups

contentGroups = [](read,write)

An array that organizes content into groups.

contentPath

contentPath:String = ""(read,write)

Default path to content directory. Default: ""

format

format:LightboxFormat(read,write)

Controls all formatting (colors, fonts, etc.) Default: null (results in default formatting)

projectorScale

projectorScale:Number = 1(read,write)

If running in projector mode (scaled full screen mode) then lightboxWindow position is adjusted. Defaault: 1 (no scaling)

Instance methods

addContentGroup

function addContentGroup() : void

Creates a new content group

addContentToGroup

function addContentToGroup(c = *, groupIndex:int) : void

Adds content to a content group

Parameters
 

close

function close() : void

Closes lightbox

createContentGroupFromArray

function createContentGroupFromArray(contentArray:Array) : void

Creates content group from array

Parameters
contentArray:An array of content url's or LightboxContentInfo objects

displayContent

function displayContent(c = *, resetContent:Boolean = true) : void

Loads and displays content

Parameters
 

displayContentIndex

function displayContentIndex(contentIndex:int, groupIndex:int) : void

Displays content from a content group

Parameters