Window Focus and Blur

In working on the new Pantone Moods this week, I needed to add a listener to the widget to halt the realtime updates if a user no longer had the page active (meaning, they switched to another browser tab or application) to prevent unnecessary traffic to the server.

The application cycles through the ten most recent Moods posts and, upon nearing the end of its cache, queried the server for a new supply. However, if someone’s focus wasn’t on the page, it makes no sense to keep collecting and displaying results.

With ActionScript 3, this task is quite easy:

stage.addEventListener(Event.DEACTIVATE, onDeactivate);
stage.addEventListener(Event.ACTIVATE, onActivate);

And it’s just as easy when programming for Mobile Applications:

NativeApplication.nativeApplication.addEventListener(Event.ACTIVATE, onActivate);
NativeApplication.nativeApplication.addEventListener(Event.DEACTIVATE, onDeactivate);

With JQuery, we can now accomplish the same thing for AJAX/PHP browser applications to no longer commit resources to updating a page that isn’t being viewed:

$(function(){
	$(window).bind('blur', function(){
		onDeactivate();
	});
 
	$(window).bind('focus', function(){
		onActivate();
	});
	// IE EVENTS
	$(document).bind('focusout', function(){
		onDeactivate();
	});
	$(document).bind('focusin', function(){
		onActivate();
	});
});

Note that the second two methods must be added because Internet Explorer uses focusin/focusout rather than simply focus/blur.

The do’s and don’ts of Flash

This article was originally published on the Firstborn site on July 1, 2011, and is written by my buddy and Flash guru, Zeh Fernando:

The do’s and don’ts of Flash

Zeh Fernando, senior developer at Firstborn, rounds up the ultimate do’s and don’ts of Flash to explain how we can improve our workflow to create powerful, rich online experiences more efficiently.

Developing fully interactive websites is an amazing experience whose technology is in a current state of change.  We’re not only seeing big changes in terms of platforms used for that purpose – HTML5 anyone? – but also in the workflow employed when developing those (so called) rich websites.I think that Flash is a particularly acute example of the latter.  The platform has evolved a lot through the years, not only in regards to what it can do, but in how one should do it.  In that sense, the rich online experiences we create can now be more powerful than ever, so here’s a few pointers on how to get it done a little more efficiently.

Read more…

Category: Web

Flash Video Smoothing

While working on a new project for ERA404, I received a great tip from Zeh, my Flash Obi Wan whom you’ve no doubt read me gushing about in the past. The site (which will be launched at the top of 2010) is centered around a video loop. The loop began as a 208MB raw Quicktime video clip shot by one of ERA404’s video directors/editors, Greg Stadnik (you may remember his work from our Beautiful Children viral video that was featured in Gawker and AdRants last year). The clip was then scaled in 1/2, compressed using the On2 VP6 codec, imported into flash and then manipulated manually.  The final SWF was 3.12MB, but the quality suffered terribly.

This is when Zeh clued me in to video smoothing. It’s the same principle as bitmap smoothing, since embedded video clips are technically just an image sequence. The result was night and day. The left half of the below screenshot shows video smoothing set to true, where the right shows smoothing set to false.

smoothingFigure 1. Video Smoothing – Click image for larger/detailed version

Note that this is just the beginning of this site with the radial gradient and scanlines stripped away to accentuate the smoothing detail. Overall, it’s an easy way to preserve quality without increasing loadtime, memory or processor demand. Give it a try. I’m sure you’ll be as pleasantly surprised as I was by the result.

Flash Indexing with External Resource Loading

flashFrom Google’s Webmaster Central:
We just added external resource loading to our Flash indexing capabilities. This means that when a SWF file loads content from some other file—whether it’s text, HTML, XML, another SWF, etc.—we can index this external content too, and associate it with the parent SWF file and any documents that embed it.

This new capability improves search quality by allowing relevant content contained in external resources to appear in response to users’ queries. For example, this result currently comes up in response to the query [2002 VW Transporter 888]:

t4-tranformations-search-result
Read the entire story, here»

Stamen Design

screenshot05

I came across this site when Sean McDonald forwarded me a link to SF MOMA’s brilliant new site “SF MOMA ArtScope”. (Which, while, functionally, it takes a little while to figure out, the feature-packed design makes it an absolute pleasure to navigate and learn about the collection of modern art on the left coast).

Read more

Flash File Uploader

Uploader Screenshot

Flash File Uploader V3.2 (Allow All Filetypes)
Looking for a Flash File Uploader that allows you to set a custom directory and allows all filetypes? Click here.

I was getting tired of upload scripts timing out in Flash and talked with Mike a little about creating an AJAX uploader. Unfortunately, AJAX has a difficult time updating a progress meter while an upload is running and it still cannot prevent browser requests from timing out on some servers. Granted, you still can use AJAX to do this and I’d recommend reading up on a number of online tutorials that offer solutions. However, up until the advent of Flash’s FileReference Object, programmers had to rely on server-side Perl scripts to manage these uploads and as Zeh so eloquently put it, “I love Flash’s upload. It’s so much better than the extremely crap HTML upload.” Using the new FileReference Object, I put together this handy-dandy Flash File Uploader to manage files with variable file limits. I have to be honest and say that the idea came from YouTube‘s “Upload Video” feature and may owe a little credit to them. The FLA is perfectly skinnable and can easily be adapted to restrict to filetypes (Images, Text, Audio, Video, etc.). This one is pretty standard as I’ll be creating the limitations on a per-use basis, depending on the application. Also, you’ll still need to have PHP running on your server and have access to change file/folder permissions, specifically the repository for uploaded files (default: /files/) I should also mention that NO security scripting has been included in the PHP file. upload.php simply copies the newly-uploaded file to a directory without performing any virus protection at all. So here’s my disclaimer.

Disclaimer: If you intend to use this script, you should be wary of people uploading viruses to your server. By downloading these source files, you agree to indemnify me of any damage from malicious attacks.

That being said, here’s what you’re getting:

1. uploader.fla Fully-skinnable Flash Source file (FLA) that enables browsing to a computer, selecting the file to be uploaded, initiating the upload and watching a progress meter, and completion. 2. upload.php Simply PHP file for moving the newly-uploaded file to a specific directory (default: /files/) 3. index.html HTML page which includes (by way of the Deconcept SWFObject) the uploader.swf, and parameters for php handling and file size limit. 4. SWFObject I included the JS file for your convenience. If you have questions about how to use the SWFObject, please see my previous tutorial, Activating an ActiveX Control’s Interface through Javascript. 5. Files Directory This is an empty placeholder directory for your uploaded-file storage. Make sure it is writeable!

This Page can help you to limit types of files that are being uploaded and I urge you to refer to your favorite PHP tutorial site for instructions on adding security to the upload.php script. Restrict to File Type (hard-coded): Here’s an easy upgrade to the above Flash File Uploader if you’d like to restrict uploads to specific file types (in this example, images and text files).After importing the FileReference Object:

import flash.net.FileReference;

Enter the following code to create a file type array:

var allTypes:Array = new Array();
var imageTypes:Object = new Object();
imageTypes.description = "Images (*.jpg, *.jpeg, *.gif, *.png)";
imageTypes.extension = "*.jpg; *.jpeg; *.gif; *.png";
allTypes.push(imageTypes);var textTypes:Object = new Object();
textTypes.description = "Text Files (*.txt, *.rtf)";
 
textTypes.extension = "*.txt;*.rtf";
 
allTypes.push(textTypes);

Then, simply modify the browse method

file.browse();

to only use the new Array’s file types:

file.browse(allTypes);

Restrict to File Type (dynamic): Now let’s make it a bit more interesting. Add the below variable to your SWFObject:

fo.addVariable("types", "image|text|audio|video");

Remove the hard-coded AllTypes array (above) and enter this instead:

if (_root.types != undefined) {
var typesArray = _root.types.split("|");
var allTypes:Array = new Array();
var len:Number = typesArray.length;
for (var i:Number = len; --i>=0; )
    switch (typesArray[i]) {
    case "image" :
        var imageTypes:Object = new Object();
        imageTypes.description = "Images (*.jpg, *.jpeg, *.gif, *.png)";
        imageTypes.extension = "*.jpg; *.jpeg; *.gif; *.png";
        allTypes.push(imageTypes);
        break;
    case "text" :
        var textTypes:Object = new Object();
        textTypes.description = "Text Files (*.txt, *.rtf)";
        textTypes.extension = "*.txt;*.rtf";
        allTypes.push(textTypes);
        break;
    case "video" :
        var videoTypes:Object = new Object();
        videoTypes.description = "Video Files (*.avi, *.flv, *.mov, *.wmv)";
        videoTypes.extension = "*.avi;*.flv;*.mov;*.wmv";
        allTypes.push(videoTypes);
        break;
     case "audio" :
        var audioTypes:Object = new Object();
        audioTypes.description = "Audio Files (*.aif, *.mp3, *.wav, *.wma)";
        audioTypes.extension = "*.aif;*.mp3;*.wav;*.wma";
        allTypes.push(audioTypes);
        break;
    }
}
}

Down by the browse statement, change the browse method to this:

browse.onRelease = function() {
    if (allTypes != undefined) {
        file.browse(allTypes);
    } else {
        file.browse();
    }
;

Republish your Flash file and experiment with changing the variable in your SWFObject to change the file type restrictions. Show only images:

fo.addVariable("types", "image");

Show only text files:

fo.addVariable("types", "text");

Show only video files:

fo.addVariable("types", "video");

Show only audio files:

fo.addVariable("types", "audio");

Show all:

fo.addVariable("types", "image|text|audio|video");

Pretty nifty, eh? For questions, feel free to submit a comment. Enjoy!

May 30, 2008 – Added script to Flash and PHP to stripslashes which in previous versions broke Javascript functions.
August 18, 2007 – Suppressed the “A script in this movie is causing Flash Player to run slowly” browser alert (Thanks to Matt Kull, Zeh and Pete).
June 17, 2007 – Mike updated the PHP files to enable caching of auto-generated thumbnails, preview mode (prior to upload) and fixed some security issues.
Download Flash Uploader v2.0 (ZIP) Includes: All the Flash and PHP project files with step-by-step instructions for installation on your site.
Download Flash Uploader v3.0 – Custom Dirs (RAR) Includes: All the Flash and PHP project files with step-by-step instructions for installation on your site.
Download Flash Uploader v3.1 – Details Bug Fix (RAR) Includes: Complete FLA, PHP and source files with options for Custom Dirs, File Name Rewrite.

Download Flash Uploader v3.2 – Allow All Filetypes (RAR) Includes: FLA, PHP and source with Custom Dirs, File Name Rewrite, int’l characters and “Allow All”.

Blur Effect

Blurry Cursor

I originally created this effect for the old ERA404 web site when we were using the “Not Found” themes, but the concept was deprecated when we updated our marketing strategy. Since I really loved the result, I was happy to see a need for this script arise again during the creation of the Who is Augustine? site, created for Jonathan Safran Foer and his first novel, Everything is Illuminated. You can see the effect employed if you click on Augustine’s glasses in the link that takes you into her house.

People have asked how this was created and its actually quite simple. Rather than explain it, I’ve provided a zip for you to download to see the simple code involved. If you have questions, feel free to post comments.

Click here to download the source.