Why is the ImageSnapshot class not in Flash? Taking steps to get big images out of Flash.

I don’t know if I really have a good post here, just want to know why a very useful, very powerful class that is in the Flex framework isn’t in Flash’s AS3 classes. For those of you who are Flash users but not Flex developers, you may not really know about this class (good explanation here, at Doug McCune’s blog.), but it acts as a shortcut/helper class to assist you when creating snapshots out of display objects or anything that implements IBitmapDrawable. It’s pretty nice.

One thing that this class does that is especially cool is let you get around the 2880×2880 pixel limit imposed on all Flash display objects, including our good friends Bitmap and BitmapData. I have been working around trying to get higher res images out of some of my comps lately and I have all but given up using Flash for it. Even when you run Flash through as an AIR app, and use sneaky tricks like employing AS3Corelib (which is a great selection of classes, I might add) to encode a container sprite as JPG or PNG and output them as files to your local machine you are still limited to the 2880 ceiling. Now, I have seen explanations on why the limit exists, and yes, it makes sense for web apps, but if you are already creating a signed or even an unsigned app for that matter that has to run as administrator on a machine, I see no reason why the 2880 ceiling exists. With monitors gaining pixels with every generation, I’m sure this will change someday, but hey… I’m impatient. No really, I am… ask my wife. ;-)

So then I was doing something like this linked example to get around it. You can use the numbers on your keyboard to move the canvas around. “C” toggles mouse visibility, “1″ moves the sprite back to it’s origin point, “2″ slides everything left by a bunch of pixels (I have a MacBook Pro, so it’s slightly less than 1440), “3″ moves everything to the right by the same amount, “4″ moves everything down by 600, “5″ moves up by 600… you see where I am going with this? I move the canvas, take the screenshot and then stitch them together in Photoshop. This allows me to get a pretty big canvas. But, it’s a pain. To get a 10k x 10k image (something that will give you a nice 2-3 foot size print) takes dozens of images. So I thought back to some stuff I have been playing with in Flex (more on that in an upcoming post) and want to do the same here. But that requires the ImageSnapshot class which is missing from Flash CS3… hmm. How vexing.

So, now, I’m currently planning on making a Flex developed app that will be deployed as AIR that will take an input SWF, allow you to set your dimensions and DPI and then use the imageSnapshot class to get a big fat uncompressed image out of it. ImageSnapshot supports up to 8192×8192 images of around 256meg. Has anyone seen an app like this around already? I certainly don’t like duplicating efforts as free time is at a premium. Thoughts?

Related to this post… I’m getting curiouser and curiouser as to why AIR doesn’t have a PDF encoder (especially since blazePDF is dead and is only AS2). I know I could find some uses for it. Postscript charts and elements from Flex or Flash anyone? Sounds nice. Especially with all the great work being done over at Degrafa, and the rumblings of the mx:Graphics stuff to come in Flex 4.

Apply Vector Drawings as a Graphic Filter/Treatment to an Image

My fellow Bradley Multimedia faculty members and many of my colleagues at Iona (some of them the same people ;-) ) have been working feverishly on the media for a large event Bradley University will be hosting next week to kick off it’s Renaissance Campaign. The work done thus far has been tremendous. A full week of green screen shooting, two full weeks of post and lots and lots of hours are going into this. I’ll let the respective people working on the shoot, motion graphics, quiz engine/SMS gateway and webservice powered live updating Flash trivia games and Dataton Watchout system powering the 4 high lumen linked projectors blog their own part of the production (I know I left some links out there, sorry all…). My good friend and a designer I respect, Jim Ferolo had asked me to help on the project. He wanted me to produce a generative drawing effect that would sample some HDR photos and use the campaign’s logo to create a graphic wash/drawing effect on the images. To see the results continue… (more…)

Flash CS3 Export for Quicktime Small Gotcha.

This tripped me up for a couple minutes. With the release of Flash CS3, the export to Quicktime/AVI functionality was greatly improved. You can now create a video file directly from Flash that respects ActionScript, nested movie clips etc from the IDE. I wrote a post on this feature a while ago and have been using it fairly often. Found a little gotcha earlier today that made me stop and think… Tried to export a movie that was 69.5 seconds long. The time input field on Flash’s export window allows you to type in the time like such:

dont type this inĶ

But, upon entering this information as specified above, you can no longer export the movie. No error message, no crash, nothing. A hint at the cause of the error is there glaring you in the face next to the field (a depiction of the input format expected)… (hh:mm:ss.msec) However, tabbing out of the field does not apply the mask to the field, nor does a warning message or automatic conversion or validation of the number occur. After a bit of head scratching, I suddenly recalled that 69.5 seconds was indeed 1 minute, 9.5 seconds and altered the input in the field accordingly, like so…

type this in!

Voila. It worked. Now, I know, I know… I should have noticed the cue on the dialog box instructing me how to input the data and followed suit. I didn’t. Should Flash have recognized my ignorance and gave me a hand? One would hope so. So, lesson learned. If you want to have Flash output a movie based on the desired runtime you are looking to achieve (which seems to be necessary if you have deep nesting of movie clips or lots of ActionScript, etc), you must *gasp* do the math to convert the time from seconds to “time code-like” notation yourself. No help for you!

Little usability headaches like this cause a lot of support issues for Adobe, I’m sure. I would consider the lack of properly formatted discrete fields for the hour, minute, seconds values a bug. Without proper guidance from the UI or a mechanism to prevent the user from failure, the software fails to be easy to use.

I got Dugg, sorta. Congrats to ColourLovers on Launching Their API.

The ColourLovers API went public yesterday and the response has been phenomenal (The AIR app built with it is definitely worth a download). The API is super cool and very very easy to use. I built a port of my Dekaf app (built with Degrafa) in it and redubbed it dekafLovers. It has a few options that weren’t in the original Dekaf app.

All in all very very cool and the API was submitted to Digg with a pretty decent response, too. ColourLovers community is just fantastic and very supportive, offering lots of great suggestions to me, many of which I have been able to integrate into the app already, with hopes of adding more features soon.

I’minlikewithyou.com: An amazing example of great Flash/Flex UI

I don’t have a lot of time on my hands these days to visit this site, but if you are looking for a great way to blow an afternoon or three and see some fantastic Flash/Flex UI work, go visit Iminlikewithyou.com. It’s pretty freakin’ fabulous. Great design, silky smooth animations and tranistions, quick loading, unique social networking tools and of course, the unforgetable Blockles. (It uses SWFAddress and some other great modern Flex/Flash techniques, too… It’s really really nice). Think of it as a snarky multi-player Tetris clone and you’ve got it. Absolutely brilliant. It’s the brainchild of Charles Forman, aka SetPixel. He’s a great designer/developer I had the privilege of working with as a freelancer at the now defunct iToons, a Chicago based game design and dev studio, and a fun fun place to hang out and work, I might add. A shout out to all the gusy there, Davers, Norm, Kevin, Tony, Juan and JonK to name a few. Ahh good times… but enough reminiscing… go play some Blockles.

My Favorite Thing About Flash Moving To an XML Format (XFL)? Let Me Count the Ways….

Though not 100% official, John Nack recently blogged that according to Colin Moock, the next gen of the FLA file may actually not be the binary blob that we have all come to know and love/loathe. How many of you have had a FLA take a dump and end up unusable, corrupt or somehow otherwise messed up beyond repair? I’m sure a few of you know what I am talking about. Beyond this reason, an editable, XML based file certainly has some advantages. Let’s bluesky here… what am I excited about with this?

  • Speed up repetitive timeline operations – Blam. You have a pile of similiar actions/keyframes you need to pound out? Don’t want to write the AS to Tween or do something else via code? Need to share the file with animators later that don’t likey the codey? Why not fire up Flex’s editor and regex till your hearts desire and rework or add to that XML file with a few surgical search and replaces. Might actually get me to use Flex less often for some things, especially if Flash added a “Markup View” where you could directly edit the XML in Flash’s IDE.
  • Share/reuse parts of files - Client Logos, Nav bars, commonly used assets, etc… I could see having a few snippets of XML in my “frequently used bits” folder that get copied/pasted into new Flash files on project starts.
  • Proper versioning support – Subversion doesn’t properly support binary file formats, so running diffs on two FLA files just doesn’t have the same effect that you get with AS or MXML files. A non-binary file format solves this neatly. Now, since XFL looks to be some sort of ZIP file, etc… there could be some diceyness here, but ooh lala, my IT guy is liking this, I can tell.
  • Authoring with a ton of different apps - Don’t like the Flash IDE? Make your own. Use Visual Studio, Eclipse… write one with Actionscript. After all, if you are simply editing/writing XML, why not?
  • Replacing assets sound like a snap – Yes, you can use Flash’s library pallette and run one by one updates/linkage adjustments, etc… But if you can simply drag files into a XFL archive and reopen that file in Flash to see all your assets updated, I say let’s do it! Sounds way way faster!

I’m sure I could spend a few more minutes and come up with a half dozen more reasons, but enough… what are you thinking? Do you see the possibilities? What’s on your mind about this development/news?

How To: Apply a Painterly Effect to a Loaded Image.

So, painterly might be a stretch, I realize this… It’s kind of pointilistic, though, maybe, or something… Take a look. Feel free to use the ActionScript after the image…

Sophia Circles.

You can also download the FLA file here. You’ll need to also download Zeh Fernando’s Tweener. Take a look at the somewhat animated Flash file here.


import flash.display.Bitmap;
import caurina.transitions.*;
import flash.display.BitmapData;
import flash.display.Loader;
import flash.display.Sprite;
import flash.display.Shape;
import flash.events.*;
import flash.net.URLRequest;
 
var url:String = "yourImagehere.jpg";
var size:uint = 80;
 
function randRange(min:Number, max:Number):Number {
    var randomNum:Number = Math.floor(Math.random() * (max - min + 1)) + min;
    return randomNum;
}
 
function loadClip():void {
    var loader:Loader = new Loader();
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
    loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
    var request:URLRequest = new URLRequest(url);
    loader.load(request);
    addChild(loader);
}
 
function completeHandler(event:Event):void {
 var image:Bitmap = Bitmap(event.target.content);
 for(var i:Number=0;i<5000;i++) {
 	var currX:Number = randRange(0, event.target.width);
 	var currY:Number = randRange(0, event.target.height);
 	var currColor:uint = uint(image.bitmapData.getPixel(currX,currY));
 	var child:Shape = new Shape();
    	var halfSize:uint = Math.round(size / 2);
    	child.graphics.beginFill(currColor,0);
   	child.graphics.lineStyle(randRange(0,5), currColor, Math.random());
    	child.graphics.drawCircle(currX, currY, randRange(3,8));
    	child.graphics.endFill();
 	child.alpha = 0;
    	addChild(child);
 	Tweener.addTween(child, {alpha:Math.random(), time:randRange(1,2), delay:randRange(1,5)});
 }
}
 
function ioErrorHandler(event:IOErrorEvent):void {
            trace("Unable to load image: " + url);
}
 
loadClip();

Creating SEO Flash User Interfaces with Drupal

From DrupalCon 2008: Brian McMurray and Steve Merrill, the brains behind cascadingstyle.net just gave a great presentation to the crowd that was well received… Check it out at their site… The slides are available for download. Anyone who creates content managed sites with a need for Flash should definitely watch the development on this. Their technique is innovative and uses SWFAddress, SWFObject, AMF and Drupal services for a bang up job on making Flash search engine friendly and content manageable. Genius.

How To: Toggle Mouse Visibility for Use in a Kiosk with a Keypress

We develop a fair amount of touchscreen kiosks at work. So, we often have to hide the cursor for the final deliverable. This can cause issues when you need to debug the kiosk or set it up for final deployment, etc. To avoid confusion or prevent the need to constantly edit the movie turning the mouse visibility on and off via Actionscript again and again, try this. You can use this simple function to add a keyboard listener to your AS3 Flash file so that the mouse will be off by default, but you can toggle the visibility on and off by pressing the button of your choice… in this case I use “m” (but you could easily change this to “~” or something less common incase you need alphanumeric input for the application, etc).

One thing to keep in mind is that when testing the app in the IDE, sometimes the Flash IDE may intercept your keypress and switch the tool currently selected in the tools pallette instead of doing what think it should be doing. You can simply open the SWF in the standalone Flash player to see how it really should be behaving…. Anyway, take a look at this code:

import flash.ui.Mouse;
import flash.events.KeyboardEvent;
 
stage.addEventListener(KeyboardEvent.KEY_UP, reportKeyUp);
 
Mouse.hide();
 
var mouseVisible:Boolean = false;
 
function reportKeyUp(event:KeyboardEvent):void {
 
trace("Key Released: " + String.fromCharCode(event.charCode) + " (key code: " + event.keyCode + " character code: " + event.charCode + ")");
 
if (String.fromCharCode(event.charCode) == "m") {
     trace("m!");
     if (mouseVisible == true) {
         Mouse.hide()
         mouseVisible = false;
    } else {
         Mouse.show()
         mouseVisible = true;
    }
}
}

That’s all there is to it. I hope you find this one useful in your next kiosk project.

Drupal + Flash/Flex + SWFaddress = Druplex: Content Managed Flash

A couple friends of mine recently unveiled a SWFAddress Module for Drupal
, the leading opensource PHP content management system. They run a blog called cascadingstyle where you can learn more about it. The cool thing about a CMS with SWFaddress is that you still get manageable content and can use a Flash presentation layer to allow for a cohesive branding on your site. Its bookmarkable, degrades gracefully and uses AMF to pull content into you Flash files. It works with Flash or Flex and Drupal 5, though plans to port it to Drupal 6 are definitely in the works.

They recently presented it at a Drupal camp in Milwaukee and have anupcoming presentation at DrupalCon in Boston next week. Congrats to Steve and Brian and the hard work they have been putting in on it. This really is a major advance in opensource CMS.

Page 5 of 12« First...34567...Last »