What I came up with isn’t a fix so much as a working solution. When you initiate a popup in Flash it’s done by calling a JavaScript function called window.open(). This function returns a boolean of True upon success or False upon failure. So programmatically this gives us a way of knowing if the popup has been blocked. In which case we offer the user up an HTML link to the popup that we know won’t get blocked. I believe that when designed well and with thought this can be an elegant solution for a small base of users who are probably already used to seeing certain functionality across the web fail for them.

There’s obviously a number of way to implement this, but as a quick and dirty example lets create a hidden HTML block to appear if the popup fails:

The window was unable to open, possibly due to your popup blocker. Click here to open.

Okay now lets look at the popup JavaScript function that Flash calls:

function shareFacebook(){
	success=window.open('http://www.facebook.com/sharer.php?u=http://www.pixelsfromtheedge.com','FacebookShare','toolbar=0,status=0,width=626,location=no,menubar=no,height=436');
	if (!success){
		document.getElementById("popupMessage").style.display="block";
	}
}

So basically what’s going to happen is that the hidden window appears only if the popup failed, thus allowing for the user to click the HTML which doesn’t get blocked.

But what if we have multiple popup windows? We need a way to have one message div that can trigger an endless number of popups. And why does the message have to remain forever visible once it appears?

Bearing this in mind here’s an example of a more elegant generic version. Again it’s quick an dirty code and I wouldn’t necessarily expect it to be in a production environment in its current state:

This time we have the popupMessage call a generic function:

The window was unable to open, possibly due to your popup blocker. Click here to open.

The actual popup JavaScript function that Flash calls is the same, but this time we need it to set global variables:

var popupFunc="";
var popupTimer="";
function shareFacebook(){
	p=window.open('http://www.facebook.com/sharer.php?u=http://www.pixelsfromtheedge.com','FacebookShare','toolbar=0,status=0,width=626,location=no,menubar=no,height=436');

	if (!p){
		popupFunc="facebookShare";
		clearTimeout(popupTimer);
		$("#popupMessage").slideDown("slow");
		popupTimer=window.setTimeout('$("#popupMessage").slideUp("slow")',10000);
	}
}

So what basically happens is if the popup fails we set the name of the popup function that failed into a global variable called popupFunc. We use the jQuery slideDown() method to gracefully make the message appear. We also use a global variable called popupTimer to hide the message after 10 seconds. And in case the message is already showing from a different request we clear the popupTimer so it doesn’t disappear too quickly.

And finally lets look at the generic popup function:

function launchPopup(){
	$("#popupMessage").slideUp("slow");
	eval(popupFunc+"()");
}

We hide the message and call the popup function.

Like I say this is all quick and dirty for display purposes. But I really believe this to be a solid and elegant solution to a frustrating and problematic situation.

“By using a Google Streetview-like camera, a system with six lenses, not as a photo but as a video camera, an all-encompassing picture is captured. […]
From the point where the images were recorded, the viewer can look in any direction, let his eyes wander through the crowd, or stare at the ground or the air, which makes viewing a video an experience without boundaries.” – Yellow Bird press release

The company has by far the longest domain name I have ever seen:
www.yellowbirdsdonthavewingsbuttheyflytomakeyouexperiencea3dreality.com

For the most part it seems many of the implementations of this technology so far have been very gimmicky, though I just recently came across the USPS Package Simulator which is the first practical usage of the technology I’ve seen. Of course as practical as it seems to be, its real world usefulness could be limited which could land it back in the gimmick column, I don’t send packages ever so I just don’t know.

Gaming so far seems to be the best way to highlight this technology. And I really love what Topps has done, in a time when the baseball trading cards industry was in serious decline due to modern day gaming, they found a way to marry their product with gaming, by using the augmented reality technology. I’ve yet to try it out for real, though I keep telling myself I’ll buy a pack of baseball cards next time I’m at the 7-11. It looks really fun (as in innocent, simple fun), I hope it’s helping turn the industry around. Checkout the instructions and watch the video below:

Another game I’ve come across, which is breaking away from the confines of the desktop, is a Tegra Zombie game. I won’t go into it much, if you haven’t seen it yet it’s pretty amazing, just watch the video:

I can picture this taking place on a huge scale, the size of a football field or bigger, with hundreds of gamers walking around with the device in their hands, all connected wirelessly in one giant game! And better yet the devices wouldn’t be hand held but tv goggles, and the buildings and zombies would be life size! It’s really not that far away folks, in fact Jobs and Gates probably play this shit already in each others basements!

Of course all this isn’t really true augmented reality, it is to an extent, but it’s limited to a certain environment and true augmented reality lives in the real world. This type of technology has just started coming out recently thanks to mobile devices with built-in camera, GPS, compass, and fast internet that are capable of placing what they see with pinpoint accuracy. I can barely imagine what’s to come, what’s currently being developed, or even what currently exists in some mad scientists laboratory. But check the following video out if you haven’t already. It’s a true augmented reality app released by IBM for Android phones for people wandering around at the Wimbledon tennis club. With the entire Wimbledon complex tagged and hooked up to monitors you can look through your device and see what’s going on around you with supplemental information. I think what really blew me away was the fact you can look across the lawn club and see where all the restrooms are and it even shows you how long the lines are so you can make sure you join the one with the shortest wait!

Dubbed “The end of slideshows” Animoto is a very tidy web application that instantly creates fun little video slideshows of a photo gallery. It is very clean and easy-to-use, comprising of two simple steps – upload images and pick a background song (you can pick from a simple selection of provided songs or upload your own), and a then just wait out a few minutes of rendering time. Within minutes I’d created a neat little video slideshow of my boy, shown above. It’s free to create a short 30 second video (12-15 photos recommended), and $3 to create a full length video or $30 for an unlimited amount for a full year and for $5 per video you can download it DVD quality. There’s also a professional license for $249 per year which gives you everything included at no extra charge as well as allowing a call-to-action button, white labeling the video, free commercially licensed music, and of course all the videos you make are approved for commercial use.

And once you’ve created the video it’s available to post to any social media (using Clearspring) or embed in your blog. And you can create a remix, which can be a one-click automatic process, or you can edit the remix – revolving images, adding text, spotlighting, as well as adding or deleting images. This is the one-click remix I made of the above video:

It wasn’t the ideal product for us to use for this particular project, but I was very impressed with the concept and the execution and it’s something I will be keeping in mind for the future. For personal use I think I could have a lot of fun with it – converting family photo albums, and work party or street barbecue photo mashups, and the fact it comes as an iPhone app and I can instantly create the videos from my photo reel on-the-go, as well I have all the ones I’ve previously created with me at all times, is pretty awesome.

I wonder what experiences others have regarding this? Was it your practice to not enable it and you now do? Or maybe you still don’t? Or maybe you never did?

Next Gen and Flash Windowless Mode

What is Windowless Mode?

Windowless Mode (WMODE) enables control over Flash applications within a webpage. It is necessary to enable WMODE to allow JavaScript and CSS to fully control the layout and functionality of a webpage that includes a Flash app. Its main benefits include:

· Stacking – allow the flash object to go on top of some elements but underneath others

· Transparency – show content beneath the flash object

The default WMODE is Window. When a Flash app is in its default mode it actually doesn’t belong to the browser, even though it appears to. It is most efficient for Flash to draw this way and this is the fastest, most efficient rendering mode. The other two are:

· Opaque: Enables stacking

· Transparent: Enables stacking and transparency, is the most processor intense

Examples:

Disabled

http://www.communitymx.com/content/source/E5141/wmodenone.htm

Opaque

http://www.communitymx.com/content/source/E5141/wmodeopaque.htm

Transparent

http://www.communitymx.com/content/source/E5141/wmodetrans.htm

Who has WMODE enabled?

Sample of Alexa.com top 50 ranking sites that have WMODE enabled:

http://www.yahoo.com/ – Transparent

http://espn.go.com/ – Opaque

http://www.cnn.com/ – Transparent

http://www.flickr.com/ – Opaque

http://www.weather.com/ – Opaque

http://dashboard.aim.com/aim – Opaque

http://www.nytimes.com/ – Opaque

https://www.bankofamerica.com/index.jsp – Transparent

http://www.nba.com/playoffs2008/index.html – Transparent

http://www.bbc.co.uk/?ok – Transparent

http://www.cnet.com/ – Transparent

http://www.netflix.com/ – Transparent

http://www.adobe.com/ – Transparent

http://abc.go.com/ – Transparent

Sample of competitor sites:-

http://www.toyota.com/ – Transparent

http://www.chevrolet.com/ – Transparent

http://www.chrysler.com/en/ – Transparent

http://www.audiusa.com/audi/us/en2.html – Opaque

http://www.gm.com/shop/ – Transparent

http://www.hyundaiusa.com/index.aspx – Transparent

http://www.jeep.com/en/ – Transparent

http://www.dodge.com/en/ – Transparent

http://www.bmwusa.com/Default.aspx – Transparent

http://www.ferraristore.com/ – Transparent

http://www.saturn.com/saturn/SaturnIndex.jsp – Transparent

http://www.miniusa.com/#/MINIUSA.COM-m – Transparent

http://automobiles.honda.com/ – Opaque

http://www.mazdausa.com/MusaWeb/displayHomepage.action?bhcp=1 – Transparent

http://www.gmperformanceparts.com/ – Transparent

Known issues

In IE frame count stays current but interval count lags behind:

http://justin.everett-church.com/wmode/

- Only affects user experience if flash requires a high refresh rate, such as games

- Avoid WMODE for these apps

Animation slow and jumpy with slow processors:

- Our sites currently already experience this with the full flash framework without WMODE enabled, though an html version is available

- HTML site will provide more seamless experience with only Flash apps being affected

- Capture slow experience and offer alternative content?

In Firefox text entry fields do not function correctly with international keyboards:

http://www.5etdemi.com/blog/archives/2005/06/firefox-wmodetransparent-is-completely-screwy-and-breaks-textfields/

- Only applies to user input

- Barely applies to sites built to only serve North America

- Make sure input is captured outside of Flash

- Disable WMODE for flash modules requiring input

- Hacks can be applied to the flash is necessary

Mac Firefox Flash disappears when using translucent overlays:

http://www.hedgerwow.com/360/bugs/opacity-disable-flash-on-mac-firefox.html

- Avoid translucent overlays with Flash

- If absolutely necessary use base 64 encoding for translucent image

Screen Readers cannot see Flash when WMODE is enabled:

http://dynamicflash.com/2006/10/flash-accessibility-and-wmode/

- Use html instead of flash for blocks of text

- Make text contained within Flash available outside of Flash

- Current site lacks accessibility and HTML/CSS layout will go a long way to improve this

Supported Browsers and Platforms

All our supported browsers and platforms allow WMODE to be enabled.

Conclusion

It is important to enable WMODE for modern web page design and functionality. We must embrace WMODE to remain competitive. There are negative issues surrounding WMODE but they can be eliminated by being aware of these issues at design and development stage as the majority of our Flash needs are not CPU intensive. The users negatively impacted by WMODE are a tiny minority. Only enable WMODE when necessary, using opaque setting over transparent when possible. If a Flash app is severely affected by WMODE find a seamless way to serve it with WMODE disabled.

Sources

http://www.communitymx.com/content/article.cfm?cid=e5141