Finally I just want to say: Adobe, I love Flash but I still think this is way to complicated. A simple DisplayObject.invertedMask = theMask; would be just fine. I know it’s easy to say ”just do it” but this is a feature a lot of developers would find useful.

Demo

The InvertedMask.as-class

package com.mattiasnorell.bitmap
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.BlendMode;
import flash.display.DisplayObject;
import flash.display.Sprite;

/**
* Inverted Mask
* Version 2.0
*
* ...
* Original author:    Rachel Diesel
*                     http://dieselation.com/2009/04/11/inverting-a-mask-in-actionscript-3/
*
* Pure AS3 code    Mattias Norell
*                     http://blog.mattiasnorell.com/2010/08/21/pure-actionscript-3-inverted-mask-2/
*
*/

public class InvertedMask extends Sprite{

private var inverted:Sprite;
private var dup:BitmapData;
private var newAlpha:Bitmap;
private var isInverted:Boolean;

public function InvertedMask($parent:DisplayObject,$mask:DisplayObject,$maskPos:Object):void {
inverted = new Sprite();
inverted.x = $parent.x;
inverted.y = $parent.y;

dup = new BitmapData($mask.width, $mask.height, true, 0xffffff);
dup.draw($mask);

newAlpha = new Bitmap(dup, "auto", false);
newAlpha.x = $maskPos.x;
newAlpha.y = $maskPos.y;
newAlpha.blendMode = BlendMode.ERASE;

$mask.parent.removeChild($mask);

$parent.x=$parent.y = 0;

inverted.addChild($parent);
inverted.addChild(newAlpha);

inverted.blendMode = BlendMode.LAYER;

addChild(inverted);

isInverted = true;
}

public function moveMask($target:Object,$maskPos:Object):void {
$target.getChildAt(0).getChildAt(1).x  = $maskPos.x;
$target.getChildAt(0).getChildAt(1).y  = $maskPos.y;
}

public function Show():void{
inverted.blendMode = BlendMode.LAYER;
}

public function Hide():void{
inverted.blendMode = BlendMode.NORMAL;
}

public function autoShowHide():void{
(inverted.blendMode == BlendMode.LAYER) ? Hide() : Show();
}

public function swapMaskType($type:String = "auto"):void{
if($type == 'auto'){
$type = (isInverted == true) ? 'normal' : 'inverted';
}

if($type == 'inverted'){
Show();
inverted.mask = null;
isInverted = true;
}else if($type == 'normal'){
Hide();
inverted.mask = newAlpha;
isInverted = false;
}else{
trace("You must use either 'inverted','normal' or 'auto'.");
}
}

public function remove():void{
inverted.mask = null;
inverted.blendMode = BlendMode.NORMAL;

newAlpha.bitmapData.dispose();
newAlpha = null;
dup.dispose();
dup = null;
}
}
}

Source for the demo swf

When I code I use Flash Develop, hence the [Embed]-code below. If you use the Flash IDE just remove those two rows and import the image from the library.

package{
	import flash.display.Sprite;
	import flash.events.MouseEvent;

	public class Main extends Sprite{

		[Embed(source="image.jpg")]
		public var imgCls:Class;

		public function Main():void{
			var img:Sprite = new Sprite();
			img.addChild(new imgCls());
			addChild(img);

			var mask:Sprite = new Sprite();
			mask.graphics.beginFill(0xFF0000,1);
			mask.graphics.drawRect(0,0,30,30);
			mask.graphics.endFill();
			addChild(mask);

			var newMask:InvertedMask = new InvertedMask(img, mask, { x:0, y:0 } );
			addChild(newMask);

			newMask.addEventListener(MouseEvent.MOUSE_MOVE, moveMask);
			newMask.addEventListener(MouseEvent.CLICK, swap);
		}

		private function swap(e:MouseEvent):void {
			e.currentTarget.swapMaskType();
		}

		private function moveMask(e:MouseEvent):void {
			e.currentTarget.moveMask(e.currentTarget, { x:mouseX-10, y:mouseY-10 } );
		}
	}
}

Det jag tyckte var värst var egentligen inte att iPhonen gick ruskigt långsamt utan att jag förlorade alla jailbreakprogram som gav mig alla de ”förbättringar” iOS4 skulle ge. Fast på ett sätt så att det faktiskt gick att använda telefonen. Program som Backgrounder, Kirikae, SB Settings, FiP, openSSH gjorde iPhonelivet både roligare och enklare.

Hur man gör

Jag utgick från en guide på websitetology med några små förändringar. Detta skall också fungera på 3GS:er men jag låter detta vara osagt då jag bara testat det på min 3G. Jag behöver väl inte påpeka att saker och ting görs på egen risk? Bra. Tänkte väl det.

1. Starta om din iPhone i DFU-läge. Detta gör du genom att koppla in telefonen via USB-sladden till datorn sedan stänga av iPhonen.

   Sätt på den genom att hålla ner både på- och hemknappen i tio sekunder. Efter tio sekunder släpper du på-knappen och fortsätter hålla hemknappen nedtryckt tills iTunes upptäcker en iPhone i återställningsläge. Skärmen skall nu vara helt svart och inte visa en bild på iTunesloggan samt en USB-sladd.

2. I iTunes, klicka på ”Återställ”-knappen samtidigt som du håller altknappen intryckt om du kör Mac och shift om du kör Windows. iTunes kommer nu be dig välja vilken firmware du vill använda. Firmwares finns att ladda ner här.
3. Nu kommer iTunes försöka återställa din iPhone. När processen är färdig kommer du få ett felmeddelande med kod 1015. Det ska vara så. Kort och gott.
4. iPhonen är nu fast i recoveryläge och kommer inte starta. Vi använder RecBoot för tvinga den ur recoveryläget och när telefonen startat om är den nedgraderad och klar. Ladda ner RebBoot här
5. Vill man jailbreaka den så kör man redsn0w version 0.9.4 tillsammans med firmware 3.1.2.

1. This is a work in progress. As of now it only lets you display one image, no text or navigation and so on. I plan to rewrite most of the plugin sometime in the future to make it more like ”the real lightbox”.

2. This jQuery plugin was inspired and based on jQuery lightBox by Leandro Vieira Pinho – http://leandrovieira.com. In other words, I stole pretty much everything and rewrote some of the code.

Demo can be found here.
And a developmentversion of the plugin here. (You need to copy/paste right now, sorry.)

Include the following in your html-file:
ALWAYS add ”id” as an attribute in your embedcode if you want IE7 to do what you want.

<link rel="stylesheet" type="text/css" href="JavaScript/flashlightbox/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="JavaScript/flashlightbox/jquery.flashlightbox-0.1.js"></script>

<script type="text/javascript">

$(document).ready(function() {
$('body').append('<div id="flashLightbox"></div>');
});

function flashLightbox(val) {
$('#flashLightbox').flashLightBox({
image: val,
imageLoading:'lightbox-ico-loading.gif',
imageBlank:'lightbox-blank.gif'});
}

</script>

The code for the demoswf (I use FlashDevelop, FlexSDK 3.5 and Flash Player 9):

package
{

// Import stuff
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.events.IOErrorEvent;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.external.ExternalInterface;
import flash.events.IOErrorEvent;
import flash.display.Loader;
import flash.net.URLLoader;
import flash.net.URLRequest;

/**
* ...
* @author Mano
*/

public class Main extends Sprite
{

// Setup vars used later on
private var imgUrl:String;
private var imgLoader:Loader = new Loader;

public function Main():void
{

// It's hammertime!
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}

private function init(e:Event = null):void
{
// Always remove eventlisteners you dont use
removeEventListener(Event.ADDED_TO_STAGE, init);

//
stage.align=StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

// Set the var image Url.
if (this.loaderInfo.parameters.imgUrl) {
imgUrl = this.loaderInfo.parameters.imgUrl;
}else {
imgUrl = '2648636603_c65d0ecc9c_b.jpg';
}

// Load the image
imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete,false,0,true);
imgLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,onError,false,0,true);

var request:URLRequest = new URLRequest(imgUrl);
imgLoader.load(request);
}

private function zoom(e:MouseEvent):void {
// If the swf is allowed to use ExternalInterface we call the javascript-function 'flashLightbox'.
// Remeber to always test ExternalInterface on a server and not localy.
if (ExternalInterface.available) {
ExternalInterface.call("flashLightbox", imgUrl);
}else {
trace("ExternalInterface not available");
}
}

private function onComplete(e:Event):void {
/*
Next we resize the image so that we can load a huge image, which we probably will since we want to zoom it and it might not fit.
We create a bitmap and load the loadercontent into the bitmap.
*/

var image:Bitmap = Bitmap(imgLoader.content);
var imageHeigth:int = 200;

var newWidth:int = image.width/image.height * imageHeigth;
image.height = imageHeigth;
image.width = newWidth;
image.smoothing = true;

imgLoader.unload();

/*
* Since we are going to add a MouseEvent we need to create a holder in which we place the bitmap
* because bitmaps are not InteractiveObjects and don't have a clue how to fire events.
*/

var holder:Sprite = new Sprite();

// Some graphic mumbojumbo.
holder.graphics.beginFill(0xcccccc, 1);
holder.graphics.drawRoundRect(0, 0, image.width+40, image.height+40, 20);
holder.graphics.endFill();

// Add eventlistener
holder.addEventListener(MouseEvent.CLICK, zoom);

image.x = 20;
image.y = 20;

holder.addChild(image);

// Position the sprite in the center of the stage
holder.x = (stage.stageWidth - holder.width) / 2;
holder.y = (stage.stageHeight - holder.height) / 2;

addChild(holder);

trace('Image loaded. URL: ' + imgUrl);
}

private function onError(e:IOErrorEvent):void {
trace('Image not found. URL: ' + imgUrl);
}

}
}

And I use FlashDevelop and the FlexSDK, so if you use the Flash IDE you need to remove the embedcode on row 24-25 and import the image from the library.

Demo

package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.Event;
	import com.greensock.TweenLite;

	/**
	 * ...
	 * @author Mano
	 */
	public class Main extends Sprite
	{

		// Setup a few variables
		private var background:Sprite = new Sprite();
		private var ballHolder:Sprite = new Sprite();
		private var ball:Sprite = new Sprite();
		private var maskBPD:BitmapData;
		private var maskBMP:Bitmap = new Bitmap();

		// Embed the image "the Flex SDK"-way
		[Embed(source="key.jpg")]
		public var imgCls:Class;

		public function Main():void
		{
			// Makesure the stage is ready
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private function init(e:Event = null):void
		{
			// Remove the eventlistener. ALWAYS remove unnecessary listeners.
			removeEventListener(Event.ADDED_TO_STAGE, init);

			// Create the BitmapData. Use tranceparancy or it will mask everything.
			maskBPD = new BitmapData(stage.stageWidth, stage.stageHeight, true,0xffffff);

			// And a ball to play with
			ball.graphics.beginFill(0xFF00FF, 1);
			ball.graphics.drawCircle(0, 0, 30);
			ball.graphics.endFill();

			// Add the background image to the stage
			background.addChild(new imgCls());
			addChild(background);

			// ...somthing to hold our ball
			addChild(ballHolder);
			ballHolder.addChild(ball);

			// ...and the mask
			addChild(maskBMP);

			// ...and set the the bitmap as a mask for "background".
			background.mask = maskBMP;

			// Add a listener that will call the function updateBallPosition everytime the event EnterFrame is fired.
			stage.addEventListener(Event.ENTER_FRAME, updateBallPosition);
		}

		private function updateBallPosition(e:Event):void {
			// To make stuff a little easier we use the excellent TweenLite
			// First we kill all of our balltweens
			TweenLite.killTweensOf(ball, false);
			// ...and tell our ball to move to the same position as the mousepointer.
			TweenLite.to(ball, 1, { x:mouseX, y:mouseY } );

			// Draw the clip "ballHolder" to the bitmapdata
			maskBPD.draw(ballHolder);
			// And update the Bitmapimage
			maskBMP.bitmapData = maskBPD;

			// This is really important, we need to cache both the background and the mask as bitmaps otherwise the mask won't work.
			background.cacheAsBitmap = true;
			maskBMP.cacheAsBitmap = true;
		}
	}
}

We could add a lot of balls or what ever object we want to play around with and change the way the move but you get the idea. So, run along now kids and play with you own balls, or what ever object you want.

Not as much Frankencode as I was affraid it would be but someone might find it useful so I thought I´d share it. The code is commented if you are new to AS3 and want to know what is going on.

And here is a demo of the little thing. Doubleclick inside the swf to add anchorpoints and doubleclick the handles to remove them.

package{
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.Event;

public class Main extends Sprite{

//Setup a some stuff
public var maskBG:Sprite = new Sprite();
public var cord:Array = [];

public function Main():void{

// The image that will appear thru the mask
var lemmyImage:Sprite = new Sprite();
lemmyImage.addChild(new Lemmy());
addChild(lemmyImage);

// An invisible sprite that tracks where the user click
var clickMe:Sprite = new Sprite();
clickMe.graphics.beginFill(0xFF0000,0);
clickMe.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
clickMe.graphics.endFill();
addChild(clickMe);

// Some eventhandlers to see where the user click and to update the mask
clickMe.doubleClickEnabled = true;
clickMe.addEventListener(MouseEvent.DOUBLE_CLICK,addCord);
stage.addEventListener(Event.ENTER_FRAME,updateMask);

addChild(maskBG);

// Set the mask layer to cover the image
lemmyImage.mask = maskBG;

}

private function moveStart(e:MouseEvent):void{
e.currentTarget.startDrag();
e.currentTarget.addEventListener(MouseEvent.MOUSE_MOVE, moveUpdate);
}

private function moveStop(e:MouseEvent):void{
e.currentTarget.stopDrag();
e.currentTarget.removeEventListener(MouseEvent.MOUSE_MOVE, moveUpdate);
}

private function moveUpdate(e:MouseEvent):void{
// Get the location in the array for the handler
var id:int = getHandleId(e.currentTarget.name);

// Update the array with the new values
cord[id] = {id:e.currentTarget.name,x:e.currentTarget.parent.mouseX,y:e.currentTarget.parent.mouseY};
}

private function removeHandle(e:MouseEvent):void{
// Get the location in the array for the handler
var id:int = getHandleId(e.currentTarget.name);

// Remove the part of the array by splicing it.
// Save the splica in a temporaryarray so that it is possible
// to merge the stuff after out deletedpart with the array again.
var a:Array = cord.splice(id,cord.length);
for(var i:int = 1;i<a.length;++i){
cord.push(a[i]);
}

e.currentTarget.parent.removeChild(e.currentTarget);
}

private function updateMask(e:Event):void{
// Clear the masklayer
maskBG.graphics.clear();
maskBG.graphics.lineStyle(2,0xffffff);
maskBG.graphics.beginFill(0xFF0000,1);

// If the value of i is 0 then we want to move to the locatino.
// If we use lineTo it will draw a line from the top left corner.
for(var i:int=0;i<cord.length;++i){
if(i==0){
maskBG.graphics.moveTo(cord[i].x,cord[i].y);
}else{
maskBG.graphics.lineTo(cord[i].x,cord[i].y);
}
}

maskBG.graphics.endFill();
}

private function getHandleId(val:String):int{
// Hack to find the location of the coordinate in the array
for(var i:int=0;i<cord.length;++i){
if(cord[i].id == val){
var id:int = i;
}
}

return id;
}

private function addCord(e:MouseEvent):void{

//Add handle
var handle:Sprite = new Sprite();
handle.graphics.beginFill(0xff0000,1);
handle.graphics.drawRect(0,0,10,10);
handle.graphics.endFill();
handle.x = e.currentTarget.mouseX-5;
handle.y = e.currentTarget.mouseY-5;

// I use the datemethod just cause it easy to get a uniquevalue.
// It's not close to perfect so you should rewrite this part.
// It was late when I did this, sorry  I guess =)
var now:Date = new Date();
handle.name = String(now.getUTCMinutes()+now.getMilliseconds()*Math.random());

// Set up the listeners for the handler
handle.doubleClickEnabled = true;
handle.addEventListener(MouseEvent.MOUSE_DOWN, moveStart);
handle.addEventListener(MouseEvent.MOUSE_DOWN, updateMask);
handle.addEventListener(MouseEvent.MOUSE_UP, moveStop);
handle.addEventListener(MouseEvent.DOUBLE_CLICK, removeHandle);
handle.addEventListener(Event.ADDED_TO_STAGE,updateMask);
addChild(handle);

// Push the coordinate into the array
cord.push({id:handle.name,x:e.currentTarget.mouseX,y:e.currentTarget.mouseY});
}
}
}

But this is’nt a post about how great Brightcove is. I know by experience that you can find a lot of stuff on the internet but not that many tutorials about Brightcoveplayers and that is a problem if you are just getting started and need a push in the right direction.

Before I start.

I do assume that you have used the Brightcove Studio, you know how to create playertemplates using BEML and know some basic ActionScript 3.

Some background.

The client I’ve done most of my Brightcoveprojects for wanted a chromeless player with nothing more than a mutebutton. They didn’t want to use the default controllers so I needed to write a custom plugin. Doing so is pretty straight forward but if you know a thing or two about the Player API you might understand how things work a little more.

It all began in… the template

The first thing you need to do is download the API SWC from Brightcove.

Then you need to create a playertemplate inside the Brightcove studio. The player on which I based this tutorial got no controls beside the ”play”-button that appear when you click on the moviearea.

A Brightcove plugins is nothing more than a SWF that you tell the template to import using the SWFLoader. So in the template we add a VideoPlayer-object and a SWFLoader-object. Since we use a VideoPlayer-object we can’t add a playlist to the player and therefore we don’t need to tell it which playlist or video to play since it will get that ID thru the embedcode. Moving on to the SWFLoader. The most important thing is the source, here you tell the template from where you want to load the plugin. Then set the X and Y-position of the plugin to what ever you want.

And that is pretty much all we have to do inside the Brightcove Studio. The last thing you need to do is to create the player itself and enable the ”Enable ActionScript/JavaScript APIs”-option otherwise you will bash your head bloody against the screen since nothing you do will work.

<Runtime>
<Layout style="background-color:#000000" width="600" height="200">
<VideoDisplay id="videoPlayer"/>
<SWFLoader depth="2" y="10" x="10" source="YOUR_DOMAIN_URL_HERE/swfname.swf"/>
</Layout>
</Runtime>

The plugin

When I code I use FlashDevelop or Flex Builder. As long as the IDE you use can import SWC-files your safe, if not i suggest you download the free IDE FlashDevelop and the Flex SDK.

Fire up your IDE and create a new project. The only thing that matters is that you use AS3. Now include the Player API SWC in the project and we can start to write some code. *jay* You can read more about SWCs here and how to include them into your FlashDevelop-project here.

When I write plugins I do it in two different ways. The first one is to hook the VideoPlayer-module yourself. That requires you to write a lot of extra code but saves you a few kb in the end and gives you more control. The other way is to let your mainclass extend the CostumeModule. The CostumModule-class will take care of all the API-stuff at the cost of a few extra kb but in the end it will save you some work. It’s all comes down to if you want to re-invent the wheel or not.

Since I wanted the mutebutton to have an on and off-state I created two MovieClips with the classname ”muteOn” and ”muteOff” in Flash, exported the graphics as a SWC and included it in my FlashDevelop-project.

We begin by importing everything we need. The Sprite and MouseEvent are standard AS3-stuff so nothing new there so we move on to the three Brightcove-classes. APIModules, CustomModule and VideoPlayerModule. If you want more in depth knowledge about what they do just follow the links. Now we create all the stuff we want to use. The only thing that might be new is the datatype for the _playerModule, VideoPlayerModule. This will allow us to use all the stuff the videoplayer can, like mute, but before we can do that we must link _playerModule and the actual videoplayer together. We do that by overriding the initialize-function in the CostumModule-class, or at least I think it’s in that class. But it works.

In the Main-function we set up the graphics and the mouseevent. The variable muted is just to keep track of whether the player is muted or not. You might be able to ask the videoplayer if it’s muted or not, it’s not pretty but for this plugin I think this solution does the job.

When the user click the button the MouseEvent will call the mute-function and set the visibility for both icons to false and then let the if-statement check whether the player is muted. If not, the visibility of ”muteOnGfx” is set to true and the mute-function within the videoplayer-object fires. When we call the mute-function we have to pass a booelan parameter, True if we want the sound off and false if we want it on. And that is it. Mute away now kids!

The code in one piece

package
{
import flash.display.Sprite;
import flash.events.MouseEvent;
import com.brightcove.api.APIModules;
import com.brightcove.api.CustomModule;
import com.brightcove.api.modules.VideoPlayerModule;

public class Main extends CustomModule{
private var button:Sprite = new Sprite();
private var _playerModule:VideoPlayerModule;
private var muted:Boolean = false;
private var muteOnGfx:muteOn = new muteOn();
private var muteOffGfx:muteOff = new muteOff();

override protected function initialize():void {
_playerModule = player.getModule(APIModules.VIDEO_PLAYER) as VideoPlayerModule;
}

public function Main():void {
button.addChild(muteOnGfx);
button.addChild(muteOffGfx);

if (muted == false) {
muteOnGfx.visible = false;
}else {
muteOffGfx.visible = false;
}

button.buttonMode = true;
addChild(button);

button.addEventListener(MouseEvent.CLICK, mute);
}

private function mute(e:MouseEvent):void {
muteOnGfx.visible = false;
muteOffGfx.visible = false;

if (muted == false) {
_playerModule.mute(true);
muteOnGfx.visible = true;
muted = true;
}else {
_playerModule.mute(false);
muteOffGfx.visible = true;
muted = false;
}
}
}
}

Conclusion

This plugin could of course be modified to control almost everything like play-, pause-, stopbuttons etc. But this is a start and I plan to write some more tutorials about how to make the Brightcoveplayer do what you want. The first step is the hardest, right?