Email Updates RSS Subscribe
Line

This blog is created and maintained by the technical team at Hook in an effort to preserve and share the insights and experience gained during the research and testing phases of our development process. Often, much of this information is lost or hidden once a project is completed. These articles aim to revisit, expand and/or review the concepts that seem worth exploring further. The site also serves as a platform for releasing tools developed internally to help streamline ad development.

Launch
Line

Hook is a digital production company that develops interactive content for industry leading agencies and their brands. For more information visit www.byhook.com.

Line

Amazing Flash Peephole

Line
Posted on December 2nd, 2009 by Jake
Line

Ever wonder what is behind your browser window? “Pixels!” you say? You’d be wrong, its clearly remote controlled ponies. I can prove it, click “Read More”. Then go ahead.. drag your browser window around.. no really.. go ahead.. its just ponies.. I promise!


Get Adobe Flash player

Drag your broswer window for awesomeness

I sort of hate to admit it, but the code to make this happen is relatively simple. There are two parts to the trick, the javaScript portion and the actionScript portion.

In actionScript we make use of the ExternalInterface class, which allows us to call functions in the object that contains the swf. In this case an html/javaScript page. We register a callback function in the container, and then make use of the call() method in the ExternalInterface class to call a js function we wrote to get the browser’s screen coordinates.

ActionScript Side:

//set up external interface
if (ExternalInterface.available)
{//start
	trace("External Interface Available");
	ExternalInterface.addCallback("onWindowMove", handleWindowMove);
	addEventListener(Event.ENTER_FRAME, handleEnterFrame, false, 0, true);
}//start
 
private function handleEnterFrame(e:Event):void
{//handleEnterFrame
	ExternalInterface.call("getBrowserXY");
}//handleEnterFrame

JavaScript Side:

function getFlashMovieObject(movieName)
{//getFlashMovieObject
   var isIE = navigator.appName.indexOf("Microsoft") != -1;
   return (isIE) ? window[movieName] : document[movieName];
}//getFlashMovieObject
 
function getBrowserXY()
{//getBrowserXY
	var flashMovie = getFlashMovieObject("windowTest");
	var newX = (document.all)?window.screenLeft:window.screenX;
	var newY = (document.all)?window.screenTop:window.screenY;
	flashMovie.onWindowMove(newX, newY);
}//getBrowserXY

If we store the last known location of the browser window and know the current location we can simply move the contents of the swf accordingly.

Sadly as all web developers are painfully aware, browser compatibility can be a real issue with things like this. In our case, many of the Mac implementations of the browsers don’t update the window’s internal X/Y values while dragging.. This of course completely breaks the illusion, which is very sad. So if you are running FireFox, Chrome, or IE on windows, I hope you enjoy the experience. However if you are running on another platform, I do apologize, but we are making efforts to get this running on a wider range of browsers.

Thanks!

Line
1 Response to “Amazing Flash Peephole”
  1. bre735_ says:

    haha fun ! well done


Leave a Reply

*

Line
Line
Pony