Getting Started with Gumbo (Flash 10)

Intro

We knew from the start in writing Professional Papervision that the technology would change mid-stream. Mid-stream is here and we are delighted with the changes. And we are incorporating them into your book. Yes, expect the book to cover Gumbo (Flex 4) – and much more.

I just couldn’t resist this graphic below. Is it a bird (gumby)? Is it a plane (dumbo)? No it’s Gumbo!

Flex 4 Gumbo

Open Source Flex 4 Gumbo

In addition to the power of the Flash 10 player, having the open source gumbo code opens up a whole new world of development possibilities.

In this tutorial, you’ill learn how to get started with Gumbo by doing the following;

  • Installing and configuring Gumbo
  • Creating your first program
  • Examining the Gumbo classes

I’m thrilled that Gumbo is here and have already started using it to extend the possibilities of Papervision. You’ll hear much about integrating Gumbo with Papervision in future blog post.

Gumbo Rotating Video Example

A great place to go for Gumbo examples is Peter deHaan’s blog on Flex Examples. I’ve been reading his blog since it first came out and he does really good work in Flex – almost an example everyday. I modified his rotating image Gumbo Code and extended it to play video, and have added a discussion on how to discover what is available in Gumbo. And how to work with Gumbo’s class structure. My extended example can be accessed by clicking on the link below – remember you need the Flash 10 player to run it!

Rotating Gumbo Video

Rotating Gumbo Video

You can watch the demo or download the source from the links below;

Demo: http://www.professionalpapervision.com/demos/web/gumborotatingvideo/

Source: http://flex3cookbook2.googlecode.com/files/RotatingGumboVideo.zip

The Big Deal!!!

So what’s the big deal? Why should you even care about Gumbo? Besides the performance enhancement and ease of use, Flex’s components are now native 3D – no more bitmapdata hacks to get them into Papervision – and if you are interested in building a Flash version of Second Life you just got a major boost. Second Life doesn’t handle data well – Flex 4 is a 3D data animal.

Installing and configuring Gumbo

YouTube (Part 1 Installing Gumbo – Part 2 below):


Getting Started Steps (Covered in YouTube Video)

All these steps are covered in the YouTube video, and they are included here so you can follow along.

1. To download Gumbo, navigate to the following URL:
http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4/

2. Download the latest stable build or latest milestone – newest date. Download Adobe Flex SDK.

3. Save latest stable build to your hard drive and extract the files from the .ZIP file

4. In Flex Builder 3, select Window > Preferences from the main menu to open the Flex Builder Preferences dialog box. To add, edit, or remove a Flex SDK, select Flex > Installed Flex SDKs.

5. Click the Add button to launch the Add Flex SDK dialog box and click the Browse button to navigate to the directory where you extracted the nightly SDK build in a previous step.

6. Click OK to apply your changes and add the new Flex SDK. If you want to set the newly downloaded SDK as your default SDK, click the check box to the left of the SDK name. Click OK to dismiss this dialog.

If you want to compile your code against this new SDK you can select Project > Properties from the main menu, select Flex Compiler from the menu on the left, and select your new SDK from the dropdown menu in the Flex SDK version section. Note:Make sure Flash Player 10 is selected.

Also worth mentioning is that you can manage your installed SDKs via the Project Properties dialog menu by clicking the Configure Flex SDKs link, which takes you to the Installed Flex SDKs preferences.

Difference Between Builds

Latest Milestone Release Builds – Releases are builds that have been declared major releases by the development team – Releases are the right builds for people who want to be on a stable, tested release, and don’t need the latest greatest features and improvements

Stable Builds – Stable builds have been found to be stable enough for most people to use. They are promoted from nightly build by the architecture team after they have been used for a few days and deemed reasonable. The latest stable build is the right build for people who want to stay up to date with what is going on in the latest development stream, and don’t mind putting up with a few problems in order to get the latest and greatest features and bug fixes.

Nightly Builds – Nightly builds are produced every night from whatever has been released into the HEAD of the SVN repository. They are untested and may have problems. Some possibly will not work at all.

Different types of Flex SDKs available:

  • Free Adobe Flex SDK – An official Adobe product, with released versions found at http://www.adobe.com/go/flex3_sdk. The Adobe Flex SDK contains everything you will need to build and deploy Flex RIAs
  • Open Source Flex SDK – For users who want a package that contains only open source code, we offer the Open Source Flex SDK, which is available from this site.
  • Adobe Add-ons for Open Source Flex SDK – This package contains all of the items that are in the Adobe Flex SDK and not in the Open Source Flex SDK.

Code Creation and Working with Classes (Covered in YouTube Video)

YouTube Video (Part 2 Code Creation)

After downloading deHaan’s example of the rotating image load it into Flex and get it working. You’ll modify his code to get a button-controlled video (play, stop, pause) instead of an image rotating. Here are the steps below;

  • Add the Video Display import statement

import mx.controls.VideoDisplay;

  • Add a video1 private variable for your video

private var video1:VideoDisplay

  • Add video play, stop, and pause buttons and include their event listeners in the initiation function

fxVideoPlay =new FxButton();
fxVideoPlay.label = “Play Video”;
fxVideoPlay.addEventListener(MouseEvent.CLICK, playVideo);

fxVideoPause =new FxButton();
fxVideoPause.label = “Pause Video”;
fxVideoPause.addEventListener(MouseEvent.CLICK, pauseVideo);

fxVideoStop =new FxButton();
fxVideoStop.label = “Stop Video”;
fxVideoStop.addEventListener(MouseEvent.CLICK, stopVideo);

  • Add the buttons to the VGroup

vGroup.addItem(fxVideoPlay);
vGroup.addItem(fxVideoPause);
vGroup.addItem(fxVideoStop);

  • Instantiate the Video Display, add its source, position, style, and add to the stage

video1 = new VideoDisplay();

video1.source=”assets/abc7listens.flv”;
video1.width=320;
video1.height=240;
video1.autoPlay=true;

video1.setStyle(“horizontalCenter”, 0);
video1.setStyle(“verticalCenter”, 0);

addItem(video1);

  • Finally add the play, pause, and stop button function for your listeners

private function playVideo(evt:MouseEvent):void {
video1.play();
}

private function pauseVideo(evt:MouseEvent):void {
video1.pause();

}

private function stopVideo(evt:MouseEvent):void {
video1.stop();

}

  • And that’s it! To see the code click the more button below.

A great place to go for Gumbo examples is Peter deHaan’s blog on Flex Examples. I’ve modified his rotating image Gumbo Code and extended it to play video as shown above. The entire rotating gumbo video code is below;

<?xml version=”1.0″ encoding=”utf-8″?>
<FxApplication xmlns=”http://ns.adobe.com/mxml/2009&#8243; initialize=”init();”>

<layout>
<BasicLayout />
</layout>

<Script>
<![CDATA[
import mx.components.FxButton;
import mx.components.VGroup;
import mx.controls.Image;
import mx.controls.VideoDisplay;
import mx.effects.FxRotate3D;
import mx.effects.effectClasses.*;

private var fxButtonX:FxButton;
private var fxButtonY:FxButton;
private var fxButtonZ:FxButton;

private var fxVideoPlay:FxButton;
private var fxVideoPause:FxButton;
private var fxVideoStop:FxButton;

private var fxRotate3DX:FxRotate3D;
private var fxRotate3DY:FxRotate3D;
private var fxRotate3DZ:FxRotate3D;

private var video1:VideoDisplay;

private var whereatX:Number=0;
private var whereatY:Number=0;
private var whereatZ:Number=0;

private function init():void {
fxRotate3DX = new FxRotate3D();
fxRotate3DX.xFrom = whereatX;
fxRotate3DX.xTo = 360;
fxRotate3DX.duration = 2000;

fxRotate3DY = new FxRotate3D();
fxRotate3DY.yFrom = whereatY;
fxRotate3DY.yTo = 360;
fxRotate3DY.duration = 2000;

fxRotate3DZ = new FxRotate3D();
fxRotate3DZ.zFrom = whereatZ;
fxRotate3DZ.zTo = 360;
fxRotate3DZ.duration = 2000;

fxButtonX = new FxButton();
fxButtonX.label = “FxRotate3D X-axis”;
fxButtonX.addEventListener(MouseEvent.CLICK, fxButtonX_click);

fxButtonY = new FxButton();
fxButtonY.label = “FxRotate3D Y-axis”;
fxButtonY.addEventListener(MouseEvent.CLICK, fxButtonY_click);

fxButtonZ = new FxButton();
fxButtonZ.label = “FxRotate3D Z-axis”;
fxButtonZ.addEventListener(MouseEvent.CLICK, fxButtonZ_click);

fxVideoPlay =new FxButton();
fxVideoPlay.label = “Play Video”;
fxVideoPlay.addEventListener(MouseEvent.CLICK, playVideo);

fxVideoPause =new FxButton();
fxVideoPause.label = “Pause Video”;
fxVideoPause.addEventListener(MouseEvent.CLICK, pauseVideo);

fxVideoStop =new FxButton();
fxVideoStop.label = “Stop Video”;
fxVideoStop.addEventListener(MouseEvent.CLICK, stopVideo);

var vGroup:VGroup = new VGroup();
vGroup.setStyle(“left”, 10);
vGroup.setStyle(“top”, 10);
vGroup.addItem(fxButtonX);
vGroup.addItem(fxButtonY);
vGroup.addItem(fxButtonZ);
vGroup.addItem(fxVideoPlay);
vGroup.addItem(fxVideoPause);
vGroup.addItem(fxVideoStop);
addItem(vGroup);

video1 = new VideoDisplay();

video1.source=”assets/abc7listens.flv”;
video1.width=320;
video1.height=240;
video1.autoPlay=true;

video1.setStyle(“horizontalCenter”, 0);
video1.setStyle(“verticalCenter”, 0);

addItem(video1);

}

private function fxButtonX_click(evt:MouseEvent):void {

fxRotate3DX.play([video1]);
trace(“3x”);
}

private function fxButtonY_click(evt:MouseEvent):void {
fxRotate3DY.play([video1]);
trace(“3y”);
}

private function fxButtonZ_click(evt:MouseEvent):void {
fxRotate3DZ.play([video1]);
trace(“3z”);
}

private function playVideo(evt:MouseEvent):void {
video1.play();
}

private function pauseVideo(evt:MouseEvent):void {
video1.pause();

}

private function stopVideo(evt:MouseEvent):void {
video1.stop();

}

]]>
</Script>

</FxApplication>


5 Responses to Getting Started with Gumbo (Flash 10)

  1. DJC says:

    Mike,

    thanks for your posts! very helpful :)

    what does it mean to say “Flex components are now native 3d.”?

    looking forward to the book!

  2. Mike Lively says:

    Concerning the native terminology – the way Flex components are presently brought into Papervision is through a hack where you do a bitmapdata copy of them. And it’s not easy to do – well not as easy as it is with Gumbo.

    With Gumbo, no hack is needed all you do is instantiate them (like you do in 2D) and there they are. This really is a big deal since building enterprise applications requires a robust and simple solution. Since I was in the process of building a series of these components for Papervision, I was glad to see it already done in Gumbo.

  3. viatropos says:

    Hi Mike,

    Can you briefly describe how far you think the native 3d thing in Flex will go, and when you would want to use papervision. I was also wondering if you could describe how the perspectiveProjection feature in Flash10/Gumbo works (or what this would be in papervision) because it’s unclear from the documentation right now how to use it.

    Thanks so much! Love your posts.

    Best,
    Lance

    • Mike Lively says:

      That’s a good question. With Flash 10 you get flying post cards – which are 3D planes – I need primitives. As Flash continues to evolve it will take more and more of Papervision’s territory. And Papervision creator’s are now working really hard to create a new version of Papervision called PapervisionX which is optimized for the Flash 10 player.

      When the engineers of Flash first saw Papervision they were not aware that Flash could do this stuff. They got caught with their pants down – but that has turned around 180 degrees and you will see Adobe work really hard to capture an every growing 3D market.

      So the bottom line is that you should expect more 3D on the web and that Adobe intends to be a driver of this technology. But that open source will play a big roll in shaping that direction.

      Best,
      Mike

  4. viatropos says:

    Thanks Mike, sounds like we’ll see some good things out of this! I have one last question… Do you know how to set the registration point to the center on a UIComponent in Flex 4 (or even 3.2)? The FxRotate3D class has some interesting methods that seem to allow them to make the rotation pivot point be the center, but I can’t seem to mimic/do that in plain Actionscript.

    They’ve added transformAround() to the UIComponent class that seems to perform some of the logic for creating a center registration point but then they also use the matrix class, perspectiveProjection, Matrix3D, and Vector3D. It seems like there should be a simple way to make transformations from the center in 3D.

    If you know of a way to accomplish this, I would love to know.

    Thanks,
    Lance

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: