Auto Resizing Popups with Actionscript
While, normally I dislike popups, they are definitely an occasional necessary evil. This little utility class can make them much easier to create. Simply pass it the path of an image file (i.e. a .jpg) and it will open up a popup window containing that image and automatically resize itself to fit the picture. Only the path to picture is required, but you can also include a title to display in the popup window as well as specify the usual features of a popup (scrollbars, resizable, status, etc.).
So far I’ve only tested in IE and Firefox on Windows XP, so if someone tries it on another browser/system, let me know if it works. Admittedly, I’m not that javascript savvy.
The util class:
/**
* Use to create a popup an image file that automatically resizes to fit its content.
* Works ONLY with image files.
*
* usage:
*
* OBO_Popup.pop("path/image.jpg", ["Window Title", "yes", "yes", "yes", "yes", "yes", "yes"]);
*
* Only the path to image is required - all other arguments are optional. If not supplied,
* the default window title is "Image".
*
* @author Devon O.
*/
package com.onebyonedesign.extras {
import flash.external.ExternalInterface;
public class OBO_Popup {
public static function pop(url:String, title:String = "Image", resizable:String = "no", toolbar:String = "no", menubar:String = "no", status:String = "no", directories:String = "no", location:String = "no"):void {
if (ExternalInterface.available) {
// does browser use layers or divs?
var hasLayers:Boolean = ExternalInterface.call('document.layers');
// open popup
ExternalInterface.call('imgWin=window.open', '', '', 'scrollbars=no, resizable=' + resizable + ', toolbar=' + toolbar + ', menubar=' + menubar + ', status=' + status + ', directories=' + directories + ', location=' + location + 'scrollbars=0, width=50, height=50, left=50, top=50');
// begin html
ExternalInterface.call('imgWin.document.writeln', '');
ExternalInterface.call('imgWin.document.writeln', '');
if (hasLayers) {
ExternalInterface.call('imgWin.document.writeln', ' ');
} else {
ExternalInterface.call('imgWin.document.writeln', '
');
}
ExternalInterface.call('imgWin.document.writeln', '
');
if (hasLayers) {
ExternalInterface.call('imgWin.document.writeln', '');
} else {
ExternalInterface.call('imgWin.document.writeln', '
');
}
ExternalInterface.call('imgWin.document.close');
ExternalInterface.call('return', 'false');
} else {
trace ("Cannot call javascript functions from current container.");
}
}
}
}
and an example document class:
package {
import com.onebyonedesign.extras.OBO_Popup;
import flash.display.Sprite;
import flash.events.TextEvent;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
public class PopupExample extends Sprite {
public function PopupExample():void {
var fmt:TextFormat = new TextFormat("_sans", 12);
var html:String = "Click here to open a resizing popup.\n\n";
html += "Or, click here to open another."
var textField:TextField = new TextField();
textField.defaultTextFormat = fmt;
textField.autoSize = TextFieldAutoSize.LEFT;
textField.addEventListener(TextEvent.LINK, openPopup);
textField.htmlText = html;
textField.x = 50;
textField.y = 50;
addChild(textField);
}
private function openPopup(te:TextEvent):void {
var argumentArray:Array = te.text.split("|");
var url:String = argumentArray[0];
var title:String = argumentArray[1];
OBO_Popup.pop(url, title);
}
}
}
which yields:
[kml_flashembed movie=”/wp-content/uploads/2008/01/popupExample.swf” height=”150″ width=”400″ fversion=”9″ /]
EDIT: I just realized that class is all but completely illegible thanks to the AS parsing script I use. Below is a link to the actual .as file for anyone actually interested..