I’m excited to be speaking at Flash Camp St. Louis coming up very soon on September 3rd. Come get a jump on your holiday weekend and join us at the City Museum for a full day of great sessions and mingling.

Be sure to register right away. Space is limited, and it’s only $60 for a full day of sessions, lunch, and probably some free giveaways.

I really hope that my session will have some appeal for both developers and designers. I’ll be focusing on asset management in more advanced, dynamic, or heavier projects. When you have a Flash project with a lot of logic and thus code, and you’re talking to databases and social networks, you find that working with just a Flash FLA file isn’t enough. But how can you continue to utilize the strengths of Flash Pro for animation, composite components, vectors, and general layout? And what do you do about video, audio, social network content, xml, json, and other data sources?

I’ll be looking at different ways to address these questions, the developer and designer workflows involved, and the libraries and tools I’ve found most useful in the process.

To wet your appetite, here is an 18 minute screencast I put together covering one such strategy, the use of a SWC file to provide assets to an Actionscript or Flex project.

Use Flash Pro Assets in Actionscript and Flex Projects from David Ortinau on Vimeo.

In this screencast I use one of my favorite tools, FDT from PowerFlasher. I don’ think I mention it in the screencast, so let me highlight the 2 keystroke combinations you need to master in order to unleash all of the amazing tricks you’ll see me do.

Quick Fix - CMD + 1 (CTRL + 1 on the PC I think)
This fixes missing imports, generates var declarations, initiates new classes, generates handlers, and on and on

Code Complete - CTRL + SPACE
This keystroke is also present in Flash Builder, but has some extra oomph it seems in FDT. Type part of anything and hit it to see options on what you might mean. Also generate constructors or other code blocks.

Hope to see you at Flash Camp!

Flash Camp St. Louis

September 3, 2010
9am - 4pm
The City Museum

I put together a simple demo of how you can capture an image from the webcam in Flex. Nothing super complex going on here once you see it.

Basically we use the Camera, VideoDisplay, and the Bitmap classes. The Camera allows us to do just what you expect prompting the user to connect to their camera. The Camera is then attached to the VideoDisplay component and we can see what the camera sees.

 
 
var camera:Camera = Camera.getCamera();
                
if (camera) 
{
    videoDisplay.attachCamera(camera);                    
} 
else 
{
    Alert.show("Oops, we can't find your camera.");
}
 
 

When we want to capture an image we create a new, empty Bitmap at the same size as the VideoDisplay, and we draw the output of the VideoDisplay to the image. We then write that image back to the stage so we can see it.

 
 
var snap:BitmapData = new BitmapData(320, 240, true);
var snapBmp:Bitmap = new Bitmap(snap);
 
snapBmp.width = 320;
snapBmp.height = 240;
 
if(snapshotHolder.numChildren > 0)
    snapshotHolder.removeChildAt(0);
 
snapshotHolder.addChild(snapBmp);                
snap.draw(videoDisplay);
 
 

Demo: http://www.davidortinau.com/flash/WebcamCaptureDemo/WebcamCaptureDemo.html

Source: http://www.davidortinau.com/flash/WebcamCaptureDemo/srcview/index.html

I have a Flex application that will shrink and grow vertically, but I do NOT want to ever, ever, ever see the Flex scroll bar. Ever! It has its place, but not for the entire app. That’s what the browser has a scroll bar for. And people are intimately familiar with that scroll bar, so I would much rather use that.

My Flex application makes use of the mx:ViewStack and each view will be the same width, but vary in height and even change interactively. At a minimum I want Flash to span the available browser window top to bottom. At a maximum I want the user to scroll with the browser scroll bar.

How I Did It
I disable the Flex scroll bars by modifying the policy value. Depending on how nested your application is (Canvas > VBox > Canvas > HBox > etc) you may have to do this at many levels. If there is a way to disable this by default, please have mercy on a brother and tell me now.

 
<mx:Application 
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" 
width="680"
horizontalScrollPolicy="off" 
verticalScrollPolicy="off">
 

Next I set the ViewStack to resizeToContent.

 
<mx:ViewStack id="mainStack" resizeToContent="true"
     <views:WelcomeView id="welcomeView" />
     <views:OrderFormView id="orderFormView" />
</mx:ViewStack>
 

Now I create a listener to handle any resize of the views. In my case this will always come up through the OrderFormView which is itself an mx:ViewStack.

 
import mx.events.ResizeEvent;
 
private function setupResize() : void
{
     orderFormView.addEventListener(ResizeEvent.RESIZE, formResize);
}
 

And then on formResize I use the ExternalInterface to issue the appropriate javascript to resize my DIV container to the height of my ViewStack plus a buffer of 30 pixels cuz I want a little play at the bottom.

 
private function formResize(e : ResizeEvent) : void
{
     ExternalInterface.call("setFlashHeight", mainStack.height + 30);
}
 

ExternalInterface.objectID is the ID of the DIV made available by Flex. Then in the page I have a javascript function to perform the actual resize.

 
function setFlashHeight(newHeight)
{
var viewportwidth;
var viewportheight;
 
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
 
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) 
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}
 
// older versions of IE 
else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
 
document.getElementById('consumer').style.height = (viewportheight > newHeight) ? viewportheight + 'px' : newHeight + 'px'; 
}
 

Something else you’ll likely want to do is scroll back to the top of the page after the resize.

 
ExternalInterface.call(
    "function() { scroll(0,0); }"
);
 

That’s it. The next thing to do is implement something like SWFFIT or write a little function that appropriately resizes the DIV upon a browser resize event (if the user resizes or removes a status bar or finder bar, etc.).