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.).

We all know Flash has very limited support of HTML markup, right? I had a recent AS2.0 update project where the client gave me content that included some tables, so I went looking for a 3rd party component that might be able to do the trick.

And I found it. I bought TableMaker for $24.99 from FlashRelief.

My content looks like this:

For my needs, this component works flawlessly. You can embed fonts, style the cells, span columns, etc. By default it’s setup to load from an external file with HTML, HEAD, and BODY tags.

To load up content from a string looks like this:

Notice I’m also using an embedded font in the library named “GothamMedium”. The component also works behind masks and inside of ScrollPanes.

This is actually the first adventure back to AS2 I’ve done in over a year of all AS3 projects. I’m glad I found this component, because it saved me a lot of time AND impressed the client who wasn’t expecting to see a table in Flash.

In my spare time, or when I just need a break from a crushing deadline, I’ve been continuing to work on the smaller details on this site. I find the tangent brings me back on task revitalized. But that’s another story about the fruitful benefits of adventuring down rabbit trails.

The original design for the site had my twitter feed just above in the red bar displayed in a slightly nicer, thicker font. I also had some of the other detail of the tweets such as the program used included. I decided to make this portion of the page into a little Flash widget and explore a little interactivity.

The PHP Part: Getting the Feed
The HTML only version which still displays on iPhone, mobile, and non-Flash displays is bring delivered via a simple, easy to use Expression Engine plugin: Twitter Timeline. I’ve also used this plugin on the Oceania Official band website. This plugin benefits from EE caching which is helpful because the Twitter API limits requests from an application to 100 / hours. By default the Twitter Timeline doesn’t expose all of the data provided by the Twitter API.

Because I wanted more data from Twitter, and I didn’t really want to hack up the plugin, I went looking for other PHP solutions. The solution I’m using is from arc90 labs. Using this library written by Matt Williams, it was an easy one two step to get all the data I wanted ready to go for Flash.

The Flash Part: Making it Look Better
Then in Flash I’m using the URLLoader to pull in the php feed which renders nicely formed XML. I decided for right now to create a timer that cycles the last 8 tweets every 12 seconds, or you can click on the text to transition to the next tweet.

The transition is a blur plus a fade tween using GTween. The FLA has a sprite called tweetView with a TextField inside of that. That code for the tweening looks like this:

var unblurTween:GTweenFilter = new GTweenFilter(tweetView,1,{blurX:0,blurY:0},{filterIndex:0,autoPlay:false,ease:Sine.easeIn});
var fadeIn:GTween = new GTween(tweetView,1,{alpha:1},{autoPlay:false,ease:Sine.easeInOut});
unblurTween.addChild(fadeIn,GTween.DURATION);
 
var blurTween:GTweenFilter = new GTweenFilter(tweetView,1,{blurX:20,blurY:20},{filterIndex:0,autoPlay:false,ease:Sine.easeOut});
var fade:GTween = new GTween(tweetView,0.6,{alpha:0},{autoPlay:false,ease:Sine.easeInOut});
blurTween.addChild(fade,GTween.END);
blurTween.addEventListener(Event.COMPLETE, _onBlurComplete);

Then on my timer events I call:

unblurTween.play();

or

blurTween.play();

You’ll notice I have two components to each tween with the GTweenFilter being the parent to do the blur and the GTween as the child to do the alpha. I found that the parent-child relationship doesn’t work the other way around.

On the blurTween I have a listener on the complete event so I can trigger the text to update. That function in turn calls the unblurTween and the cycle repeats (not shown in the code, fyi).

Also worth pointing out regarding this use of GTween is the timing on the blurTween. The blur has a duration of 1 and the alpha has a duration of 0.6 however they are sequenced to match at the end (GTween.END), so the alpha waits for 0.4 before beginning. I really like how GTween handles this.

btw - if I wanted one tween to happen after the other in a chain I would have used nextTween() instead of addChild().

The Flash Part: Adding the Hyperlinks
The text coming from Twitter needs to be parsed so that urls are live links and twitter names also link to the appropriate profiles on twitter.com. I love to code, but I don’t love to solve problems already solved unless I’m playing Sudoku in order to fall asleep. So, I did a quick Google search and within just a few minutes found exactly what I needed on this blog courtesy of Jim Jeffers (@jimjeffers) and Brian Shaler (@brianshaler).

Future
I want to work out a navigation scheme that is intuitive telling the user that more posts exists and that you may interact with the feed. For now, it’s a little improvement.

Additional Resources
CodeIgniter has a twitter library here: http://codeigniter.com/wiki/CodeIgniter-Twitter_Library/
Zend has a twitter client here: http://framework.zend.com/manual/en/zend.service.twitter.html

AS3 Twitterscript - a Twitter API in actionscript: http://code.google.com/p/twitterscript/

http://www.prettyloaded.com has already sucked more than a few minutes of my life away…wait, no that’s not right. It’s actually inspired me to remember how cool a Flash preloader can be and to not take the easy route with a bar fill. I’ve done some coolish preloaders in my years of Flash dev, but I’m not sure they rank up against some of those. Who knows, maybe I should dig up the top few.

Prettyloaded is courtesy of Big Spaceship Labs (http://www.bigspaceship.com) and you can follow them both on twitter at @prettyloaded and @bigspaceship respectively.

Perhaps a lesser known framework for building Flash projects, CASA Lib (formerly CASA Framework) is a nice package of helpers and loose structure for constructing your actionscript world. CASA Lib is the ongoing work of Aaron Clinger and Mike Creighton, both previously working together at Odopod.

I've worked on a couple of projects with Mike and seen his use of CASA Lib first hand. Mike does really nice work, and on that merit alone I'm taking a long look at how CASA Lib can help me.

I've used Cairngorm in Flex and goofed around with EasyMVC and PureMVC. For Flex, Mate is another one out there that seems to be getting more and more buzz. There is a LOT of information about frameworks for Flex and Flash out there, but not a ton of consensus or guidance from what I've seen. Finding best practices for developing Flash/Flex is a real chore, not that it's ever easy in any technology given how opionated developers can be.

CASA Lib is really something completely different. I think with my current understanding I would characterize it more as a loose framework built with a bagful of the most frequently used helper methods for things such as loading xml data, destroying instances, event handling and other tasks.

Check it out and let me know what you think.