Updated 2011-07-30 Highly recommend the tutorial located here. It will solve the transparency issue. Thanks to Motiejus for the link. Source code and example has also been updated.
This is my implementation of Shadowbox to work with Flash. It’s inspired by article about JavaScript code injection in Flash. So here is the source:
package com.shiftarray.utils
{
import flash.external.ExternalInterface;
/**
* ...
* @author Alex Logashov
* http://shiftarray.com
* Version 1.5 (2011/07/31)
*
*/
public class Shadowbox
{
// Shadowbox Properties
private static const PLAYER:String = "iframe";
// Shadowbox Options
// For Detailed Description Visit: http://www.shadowbox-js.com/options.html
// This class was tested with Shadowbox 3.0.3
static public var animate:Boolean = true;
static public var animateFade:Boolean = true;
static public var animSequence:String = "sync";
static public var autoplayMovies:Boolean = true;
static public var continuous:Boolean = false;
static public var counterLimit:Number = 10;
static public var counterType:String = "default";
static public var displayCounter:Boolean = true;
static public var displayNav:Boolean = true;
static public var enableKeys:Boolean = true;
static public var fadeDuration:Number = 0.35;
static public var flashParams:Object = {bgcolor: '#000000'};
static public var flashVars:Object = {};
static public var flashVersion:String = "9.0.0";
static public var handleOversize:String = "resize";
static public var handleUnsupported:String = "link";
static public var initialHeight:Number = 160;
static public var initialWidth:Number = 320;
static public var modal:Boolean = false;
static public var overlayColor:String = "#000";
static public var overlayOpacity:Number = 0.80;
static public var resizeDuration:Number = 0.35;
static public var showOverlay:Boolean = true;
static public var showMovieControls:Boolean = true;
static public var skipSetup:Boolean = true;
static public var slideshowDelay:Number = 0;
static public var viewportPadding:Number = 20;
// End of Settings
static private var _instance:Shadowbox;
public function Shadowbox()
{
if (_instance)
return;
_instance = this;
init();
}
static public function get instance():Shadowbox
{
return _instance || (_instance = new Shadowbox);
}
private function init():void
{
if (ExternalInterface.available)
{
ExternalInterface.call(SHADOWBOX_JAVASCRIPT);
ExternalInterface.call("sbox.init", animate, animateFade, animSequence, autoplayMovies, continuous, counterLimit, counterType, displayCounter, displayNav, enableKeys, fadeDuration, flashParams, flashVars, flashVersion, handleOversize, handleUnsupported, initialHeight, initialWidth, modal, overlayColor, overlayOpacity, resizeDuration, showOverlay, showMovieControls, skipSetup, slideshowDelay, viewportPadding);
}
}
public function open(content:String, title:String, width:Number, height:Number):void
{
ExternalInterface.call("sbox.open", content, title, width, height, PLAYER);
}
}
}
internal const SHADOWBOX_JAVASCRIPT:XML =
<script>
<![CDATA[
function() {
try { sbox }
catch (e) { sbox = new Object(); }
sbox.init = function( animate,
animateFade,
animSequence,
autoplayMovies,
continuous,
counterLimit,
counterType,
displayCounter,
displayNav,
enableKeys,
fadeDuration,
flashParams,
flashVars,
flashVersion,
handleOversize,
handleUnsupported,
initialHeight,
initialWidth,
modal,
overlayColor,
overlayOpacity,
resizeDuration,
showOverlay,
showMovieControls,
skipSetup,
slideshowDelay,
viewportPadding ){
Shadowbox.init( {
animate: animate,
animateFade: animateFade,
animSequence: animSequence,
autoplayMovies: autoplayMovies,
continuous: continuous,
counterLimit: counterLimit,
counterType: counterType,
displayCounter: displayCounter,
displayNav: displayNav,
enableKeys: enableKeys,
fadeDuration: fadeDuration,
flashParams: flashParams,
flashVars: flashVars,
flashVersion: flashVersion,
handleOversize: handleOversize,
handleUnsupported: handleUnsupported,
initialHeight: initialHeight,
initialWidth: initialWidth,
modal: modal,
overlayColor: overlayColor,
overlayOpacity: overlayOpacity,
resizeDuration: resizeDuration,
showOverlay: showOverlay,
showMovieControls: showMovieControls,
skipSetup: skipSetup,
slideshowDelay: slideshowDelay,
viewportPadding: viewportPadding
} );
}
sbox.open = function(content, title, width, height, player) {
Shadowbox.open({
content: content,
title: title,
width: width,
height: height,
player: player
});
}
}
]]>
</script>
You use it as singleton class calling “open” public method that accepts several parameters: content – link to image / swf file or html code, title, width and height for Shadowbox window. You can use class’ private static constants to further configure Shadowbox.
Here is an example of how to use this class:
package com.sbnet.experiments.shadowbox
{
import com.shiftarray.utils.*;
import flash.display.*;
import flash.events.*;
import flash.geom.*;
import wumedia.vector.*;
/**
* ...
* @author Alex Logashov
*/
public class Main extends Sprite
{
[Embed (systemFont = "Arial"
,fontName = "ArialFont"
,mimeType = "application/x-font"
,unicodeRange = "U+0041-U+007A"
,embedAsCFF = "false")]
static public const Arial:Class;
public function Main()
{
if (stage) init();
else
addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
stage.addEventListener(Event.RESIZE, resize);
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.frameRate = 30;
VectorText.extractFont(stage.loaderInfo.bytes);
stage.addEventListener(MouseEvent.CLICK, onClick);
resize();
}
private function onClick(e:MouseEvent):void
{
Shadowbox.overlayOpacity = .5;
Shadowbox.flashVersion = "10.3";
Shadowbox.instance.open("http://www.youtube.com/v/4TshFWSsrn8", "Ken Block - Gymkhana", 800, 600);
}
private function resize(e:Event = null):void
{
draw();
}
private function draw():void
{
this.graphics.clear();
var w:Number = this.stage.stageWidth
var h:Number = this.stage.stageHeight
var type:String = GradientType.RADIAL
var lightTheme:Array = [0x00ff00, 0x00ffff]
var colors:Array = lightTheme
var alphas:Array = [1, 1];
var ratios:Array = [0, 255];
var spreadMethod:String = SpreadMethod.PAD
var interpolationMethod:String = InterpolationMethod.RGB
var matrix:Matrix = new Matrix(1, 0, 0, 1, w >> 1, h >> 1);
graphics.beginGradientFill(type, colors, alphas, ratios, matrix, spreadMethod, interpolationMethod, 0);
graphics.drawRect(0, 0, w, h);
graphics.endFill();
graphics.beginFill(0x666666, .8);
VectorText.write(this.graphics, "ArialFont", 36, 18, 0, "CLICK TO OPEN SHADOWBOX", stage.stageWidth >> 1, stage.stageHeight >> 1, Number.POSITIVE_INFINITY, VectorText.CENTER);
}
}
}
I’ve tested this class with current 3.0.3 full version and it works fine. Of course you have to link Shadowbox JS files to your HTML code. One thing I’ve noticed – whenever div is overlayed over Flash Player, Flash Player disappears. So I guess messing with Shadowbox opacity or fade effects is pointless.
