digitalflipbook

FLVPlayback directly in Flex

2008-05-01T03:24:03Z

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: bc[ActionScript](pre). 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: bc[ActionScript](pre). 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.

AS3ScribdLib Update 0.90 - Complete API Support

2008-04-03T03:15:50Z

AS3ScribdLib has been updated to version 0.90. With this release, the API is completely supported. Changelog: * Fixed docs.upload() functionality. * Fixed user.signup() functionality. * Fixed request signing to follow API signature guidelines. * Fixed success and error responses. Links: * Main Page * Download * Source * Docs Dependencies: * as3corelib * as3flexunitlib (Only necessary for running unit tests for the library)

AS3ScribdLib Update 0.85

2008-03-31T18:45:47Z

AS3ScribdLib has been updated to version 0.85. Changelog: * Fixed docs.uploadFromUrl(). * Added documentation. * Added a download link (includes docs, src, and swc). Links: * Main Page * Download * Source * Docs Dependencies: * as3corelib * as3flexunitlib (Only necessary for running unit tests for the library) TODO: * docs.upload() * user.signup()

Language Reference Updates

2008-03-06T18:02:10Z

I've updated my Language References post with the latest and greatest since Flex 3 and AIR were officially released. I've also added a subheading for Flash library language references. If you've created a library with public facing docs let me know. I'll continue to try and update the post.

AS3ScribdLib Released

2008-03-03T06:51:50Z

I just finished AS3ScribdLib, the AS3 API for Scribd. The source code can be found on Google Code: http://code.google.com/p/as3scribdlib The project has the following dependencies: * http://code.google.com/p/as3corelib * http://code.google.com/p/as3flexunitlib (Only necessary for running unit tests for the library) The project has the following known issues: * docs.upload() and docs.uploadFromUrl() not functioning properly * user.signup() not functioning properly After committing to creating the API I quickly realized that it is not the API for iPaper, but the actual API for handling document upload and management and user registration for the overall Scribd service. Once I get upload and signup functioning 100%, I'll move onto iPaper to see what API might be available for it.

iPaper... the new FlashPaper?

2008-02-20T19:23:35Z

A little over a month ago I wrote about how FlashPaper seemed like it was taking its last dying breath. After reading the comments and doing some searching on my own, Share currently seems to be the only continuation of FlashPaper in any form by Adobe. This was a little disappointing since Share is definitely not FlashPaper. Share (much like its name states) is basically a document sharing product that offers an embeddable preview of the document that you can embed on your site. The keyword there is "preview". The preview is very basic and doesn't give you any controls besides changing the page. The only way to actually look at the document in all of its glory, with some of the old FlashPaper controls, is to click on the preview which links the user back to Share's website where the actual document is hosted. Unfortunately this is very limiting and annoying to people who are used to being able to embed the entire FlashPaper application in their own page. A month and a half later and along comes a new tool to possibly fill the void left by FlashPaper. Scribd, another document sharing website competing with Share, has released their own version of FlashPaper called iPaper. At first glance, iPaper seems to be everything I was hoping FlashPaper 3 would be. It offers all of the tools that FlashPaper 2 offered, including embedding the entire application, plus some:

iPaper can convert PDFs, Word docs, Powerpoint docs, OpenOffice docs, and more to Flash.
You can integrate Google ads into your documents.
Security... which I still need to look into.
Very light... only 96 KB.
Sharing features built in.

But the thing that caught my eye the most (that I still need to investigate further) is that Scribd offers a full API. From their site: "Use the Scribd API to harness the full power of Scribd's scalable conversion system, storage system, ad network, search engine, and iPaper viewer on your website at no cost to you." Looks like you will be able to control all of iPaper's controls through an API much like FlashPaper allowed. This is very exciting and I can't wait to dig deeper into it and see if there is a need for a component at all anymore. One thing I do see the need for though is an AS3 library to communicate with Scribd's API. So I started AS3ScribdLib. Nothing has been added yet, but keep your eye out and hopefully it will be coming soon.

navigateToURL() Static Window Constants

2008-02-13T12:21:48Z

Not that its a big deal at all, but since almost every constant string value in AS3 is provided in a class as a static constant property, why is there no class that contains the constant window values for navigateToURL()? Shouldn't there be a class that provides the following?:


public static const SELF:String = "_self";
public static const BLANK:String = "_blank";
public static const PARENT:String = "_parent";
public static const TOP:String = "_top";

Like I said, its not a big deal, since its simple enough to do. Just seems like something left out from the AS3 classes.

FlashPaper in 2008: Dead or Alive?

2008-01-02T03:00:06Z

As my first post of 2008, I thought I would ask this question and see what people thought. Since Adobe took over Macromedia, FlashPaper seems to have been put on the backburner or quite possibly extinguished all together. Adobe already has the pdf format and now seems focused on a new xml-based representation of pdf, the Mars Project. With CS3, Adobe did not include FlashPaper with any of the suites and has pulled FlashPaper from Contribute. You can of course still buy FlashPaper 2 from the Adobe store, but it is still v2 and does not work with Vista or Intel Macs. I have heard a few rumors that FlashPaper might be included as an export option in Acrobat, but so far thats just that... a rumor. So what do you think... will FlashPaper be revived in 2008 or has it gasped its last dying breath?

Papervision3D: Lava Rock

2007-12-13T20:28:21Z

I have to say Papervision3D really is great. I've had my eye on it for a while but just never seemed to find the time to start playing around with it. I actually come from a 3D background (which you can see if you go way back in my blog) but slowly found myself creeping into the Flash world and haven't had a chance to look back. The opportunity to combine these two interests is hard to resist, but up until Papervision wasn't very viable. With the advent of Papervision3D 2 and Andy Zupko's effects addition, 3D in Flash is not only viable but seems to really be taking off. When I heard there was going to be a Papervision class in NYC, I couldn't pass it up. Since the class, I've been digging in and messing around and once Andy added his effects classes to SVN I jumped and started working on the lava rock at the top of the page. Its basically a sphere primitive with a video texture applied to it. I created a procedural texture in 3ds Max and applied it to a sphere primitive until I was happy with this: Once I had the look I was happy with, I animated the texture. From there, I rendered out the texture as a flat series of images. I then created a Photoshop action that took the flat texture and created a seamless spherical texture. I then took the series of spherical images and created an flv. Once there, I applied that texture to the primitive sphere in Papervision. To top it all off, I used some of Andy's effect classes and created steam that seems to come from the actual cracks in the lava rock. It took a little while to get it all setup and learn the ins and outs of Papervision, but now I'm hooked and can't wait to keep messing around with it.

SyntaxHighlighter in phpBB

2007-11-08T16:09:30Z

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.

Reunion Show

2007-10-23T03:32:55Z

I usually try to keep digitalflipbook focused on programming and design and use my other blog to keep people updated on my family and personal life, but I had so much fun doing this that I had to post it for all to check out. My old band, Quadiliacha, was asked to play a reunion show a few months back and the big day finally came October 18th. I flew back to our hometown Atlanta and everything immediately felt like 1996 all over again. The show was more fun than I could've ever imagined and I have to thank everyone that was able to come out. Here are some great pics from that night. And here is a video of some of the show. ... and in case you're wondering, I'm the one in red. If you like what you see and you happen to live near Gainesville, FL, we're playing one more show, so get you're ass out there!

AIR Application ActionScript Project with Flex Builder 3

2007-10-09T00:25:17Z

Until the final version of Flex Builder 3 comes out (which should have application type as an option under new ActionScript project), there is an easy way to create an AIR application ActionScript Project with the new beta. All you have to do is create a new Flex Project, set the Application type as AIR, and on the last screen of the new project wizard change the Main application file extension from .mxml to .as. This will then create the main .as file just like it would if you were creating a new ActionScript Project. That's it. Hit Debug like you would a Flex AIR application and you're well on your way to creating an AS3-only AIR app.

FABridge: Flex(and now Flash)-Ajax Bridge

2007-10-05T03:12:11Z

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.

AS3 Syntax Highlighting (with SyntaxHighlighter)

2007-09-19T21:02:05Z

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

7) Create a pre block similar to the following:


... some code here ...

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.

Complete Site Overhaul

2007-09-10T07:34:17Z

It might not look like much of a difference, but digitalflipbook has been rebuilt from the ground up. Movable Type 4 came out last month and I finally got around to updating my site. MT always allows for an easy upgrade process, but this latest version is quite a departure from their previous versions. To fully take advantage of all of the new capabilities and features, you can't do a simple update. Instead, I had to backup my original and then build my site again from scratch using the new features. Its been quite a headache, but I am finally much happier with what's behind-the-scenes. Before, the css was all over the place, but now I've made a digitalflipbook theme. What this means is that all of the specific site styles and images are in a completely separate directory and if I want, I can now completely change the look of the site with the press of a button, but maintain the structure. Another reason for the upgrade was that I was getting inundated with spam comments and needed a better way of managing them. MT4 is now built in with CAPTCHA support and allows for additional CAPTCHA plugins. I decided to go with reCAPTCHA, which so far seems great. I did quite a bit of testing before replacing the previous site, but issues can always arise. If you notice anything, please let me know and use that updated comment system down there. :)