Recently in Flex Category

I remember trying this a while back with Flex Builder 2 after reading Stefan Richter's article and never being able to get it working properly. You couldn't use the FLVPlayback swc directly, you had to compile out of Flash first with a wrapper MovieClip and you still had issues with the skin scaling properly.

I decided to try it again a couple of weeks ago with Flex Builder 3 and having complete success. You can use the FLVPlayback swc directly in Flex Builder now. I'm not sure if Flex Builder 3 or an update to the FLVPlayback component made a difference or if I've just gotten better at Flex. Either way, I wanted to document it for everyone.

Its actually rather simple and requires just a few steps:

1) Create a new Flex project.
2) Copy the FLVPlaybackAS3.swc from your Flash CS3 directory (under Configuration/Components/Video) and add it to your libs directory in your Flex project.
3) In your main application mxml file, create a UIComponent and give it an id of "container". This id can be anything you want, just remember it for below.
4) Add a Script tag and listen for the creationComplete event on the application. Within the Script tag, add the following:

import fl.video.VideoScaleMode;
import fl.video.FLVPlayback;
 
private function creationCompleteHandler():void
{
 	var playback:FLVPlayback = new FLVPlayback();
 	playback.width = 320;
 	playback.height = 240;
 	
 	container.addChild( playback );
 	
 	playback.play( "assets/video/video.flv" );
 	playback.scaleMode = VideoScaleMode.MAINTAIN_ASPECT_RATIO;
 	playback.skin = "assets/skin/SkinOverAllNoCaption.swf";
 	playback.skinAutoHide = true;
}

Make sure you change the references to the video and skin to the correct directories and files in your project.

That's it!
Yep... it really is easy now. This is great. Especially since there still isn't a good video component in Flex.
You can use the FLVPlayback swc directly, you don't need to create a wrapper in Flash first, and no skinning issues when resizing. I've also tested and fullscreen works perfectly too.

As a note, you can also use the source code for the FLVPlayback directly as well. You just have to make a few tweaks to the code directly to handle references to Flash's live preview for the component. Because of the tweaks, I would highly suggest copying the files into your project and editing them there rather than editing the originals in your Flash application directory.

Follow the steps above, but replace step 2 with the following.

1) Copy the fl package from your Flash CS3 directory (under Configuration/Component Source/ActionScript 3.0/FLVPlayback) and add it to your src directory in your Flex project.
2) Create a new class in the fl.video directory called Icon. The class is fine with an empty constructor, its just used to stop a compile error.
3) Open fl.video.FLVPlayback and add an if statement around lines 874 - 876:

if( boundingBox_mc )
{
 	boundingBox_mc.visible = false;
 	removeChild(boundingBox_mc);
 	boundingBox_mc = null;
}

4) For good measure, add a void return to the set skinScaleMaximum method. This will stop a compiler warning.

There you have it. You are now able to compile and use the FLVPlayback component from Flex Builder directly with either the swc or the component source.

After adding AS3 support to SyntaxHighlighter, I got hooked on it.

I offered to setup a forum at work, and after some time debating between phpBB and Vanilla, I decided upon the latest phpBB 3.
After getting it all setup, one of the most annoying things was how code blocks looked when posted. The default code block in phpBB allows for only php syntax. So I got to work on adding in SyntaxHighlighter.

It was surprisingly harder than I thought. I ended up having to manipulate some of the underlying php code of the forum to get it to function 100% (before doing that, the forum would always adjust the code to show up on one single line).

To make it easier for other people, I've created a phpBB SyntaxHighlighter mod.

As I said above, this was built for phpBB 3, not 2.

Please update me here or at the phpBB forum if you find any bugs or have any requests.

The Flex-Ajax Bridge is a wonderful little code library that completely opens up a swf to be controlled via JavaScript. Quoting the Flex-Ajax Bridge Labs page, "essentially anything you can do with ActionScript, you can do with JavaScript." At least as far as I know, up until now this has been limited to use with the Flex framework and could not be used with a standard AS3 project.

With a recent project we worked on, we really didn't need the entire Flex framework, but did however desperately want to use the capabilities of the Flex-Ajax Bridge. After a little digging in the framework code and a little more testing, we found out that its completely possible to use the Flex-Ajax Bridge with standard AS3 projects as well. Quite possibly the name should be changed to Flash-Ajax Bridge instead. We used this with the original FABridge source that was released quite a while ago, but right before posting this I tested it with the latest Flex Builder 3 Beta (which finally includes the code, so you don't have to search random sites for it).

Note: I'm really not sure how this fits in with the EULA, so use at your own risk.

With the latest Flex Builder 3 Beta, copy the following sourcecode from the frameworks directory and paste them into your AS3 project source directory:

1) FABridge.as
from: /sdks/3.0.0/frameworks/javascript/fabridge/src/bridge/
to: bridge/

2) FABridge.js
from: /sdks/3.0.0/frameworks/javascript/fabridge/src/bridge/
to: your bin/js/ directory

3) IMXMLObject.as
from: /sdks/3.0.0/frameworks/projects/framework/src/mx/core/
to: mx/core/

4) Version.as
from: /sdks/3.0.0/frameworks/projects/framework/src/mx/core/
to: mx/core/

5) mx_internal.as
from: /sdks/3.0.0/frameworks/projects/framework/src/mx/core/
to: mx/core/

6) ItemPendingError.as
from: /sdks/3.0.0/frameworks/projects/framework/src/mx/collections/errors/
to: mx/collections/errors/

7) IResponder.as
from: /sdks/3.0.0/frameworks/projects/framework/src/mx/rpc/
to: mx/rpc/

Once you get those 6 classes and 1 js file into your AS3 project, you're good to go!

To test, in your AS3 project base class create a new FABridge instance, then set the rootObject property of the instance to "this" (the base class reference). Give the bridgeName property of the instance a name and then in js you reference the flash bridge with that name, like the following: FABridge.[bridge name].root(). Now follow along to the tutorials on the Labs page.

That's it... nothing to it.
Just remember, until we find out some more information regarding the EULA on this topic, use at your own risk.

I spent a little free time and added AS3 support to SyntaxHighlighter.

Here's a sample.

According to Alex Gorbatchev (the creator of SyntaxHighlighter) it should be added to the next release. But until then, you can download the source here.

It's pretty straight forward to use, but just in case:

1) Download the latest SyntaxHighlighter source.
2) Download my AS3 extension.
3) Place the compressed script in SyntaxHighlighter's Scripts directory.
4) Replace the css file in SyntaxHighlighter's Styles directory if you like my version of the code block more than the default.
5) Upload the SyntaxHighlighter directory to your server.
6) At the minimum, add the following to your head tag (pointing to wherever you have placed your js, css and flash files):

<link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link>
<script language="javascript" src="js/shCore.js"></script>
<script language="javascript" src="js/shBrushAS3.js"></script>
<script language="javascript" src="js/shBrushXml.js"></script>
<script language="javascript">
window.onload = function () {
dp.SyntaxHighlighter.ClipboardSwf = 'flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
}
</script>

7) Create a pre block similar to the following:

<pre name="code" class="actionscript">
... some code here ...
</pre>


As you can see, I'm not actually using SyntaxHighlighter with Movable Type yet, but once I get that figured out, I'll let you know.

Fellow Schematician Roger Braunstein recently completed the O'Reilly Short Cut "Introduction to Flex 2". I got a chance to preview it before he was completely done and even at that time it was a great read full of tips to quickly get you up to speed on Flex 2 and AS3. Now that it's released, I can safely say it's a steal at under $10. What are you waiting for?... go get it!