The Artima Developer Community
Articles | Discuss | Print | Email | Screen Friendly Version | Previous | Next
This article is sponsored by Adobe.

Graphics in Flex 3 and Flex 4
by Chet Haase
July 7, 2010

Advertisements

Summary
With a demo app from his book, Flex 4 Fun, Chet Haase shows how Flex 4 enables a new, declarative model of drawing custom graphics objects in Flex code.

Once upon a time (as far back as Flex 3), if you wanted custom graphics, you had to dive into ActionScript code, override a method or two, create and use Flash display objects, and issue calls into their Graphics objects. It was the only way to draw custom graphics from your Flex application.

For example, here's how you might draw a circle in Flex 3, from the ThreeCircles application in my book Flex 4 Fun:

    var component:UIComponent = new UIComponent();
    var sprite:Sprite = new Sprite();
    sprite.graphics.beginFill(0xff0000);
    sprite.graphics.drawEllipse(0, 0, 100, 100);
    sprite.graphics.endFill();
    component.addChild(sprite);
    addElement(component);
Flex 4 provides a new graphics API that allows you to easily create objects that describe visual elements. The Flex library internally handles the details of telling Flash how to create and render these objects. For example, here's sample code from the sample example application that draws simple circle using the new graphics classes of Flex 4:
    var circle:Ellipse = new Ellipse();
    circle.width = 100;
    circle.height = 100;
    circle.fill = new SolidColor(0x0000ff);
    circle.x = 100;
    addElement(circle);
And here's a even better example of the Flex 4 approach, using MXML markup:
    <s:Ellipse x="200" y="0" width="100" height="100">
        <s:fill>
            <s:SolidColor color="green"/>
        </s:fill>
    </s:Ellipse>

Here's the stunning output from this complex application:

You will notice some important differences between the old way of creating graphics and the new way of doing it in Flex 4:

In future articles (and in the book Flex 4 Fun), you can read more about the different kinds of graphics objects that you can create with Flex 4.

Share your opinion

Discuss this article in the Articles Forum topic, Graphics in Flex 3 and Flex 4.

Resources

Chet Haase is author of Flex 4 Fun, which is available as a PrePrint™ (early access release) at:
http://www.artima.com/shop/flex_4_fun

Adobe's Flash Builder 4
http://www.adobe.com/products/flashbuilder

Flex SDK 4
http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK

For more on states in Flex 4, see "Working with States in Flex 4":
http://www.artima.com/articles/flex_4_states.html

Flex.org
http://www.flex.org

About the Author

Chet Haase worked as a senior computer scientist on the Flex SDK team at Adobe Systems, Inc., during the Flex 4 release. He was responsible for Flex effects, and writing the next effects infrastructure and classes for Flex 4. Prior to his work at Adobe, he worked at Sun Microsystems for several years, and co-authored the book Filthy Rich Clients about creating rich user experiences with the Java client platform. His entire career has been in graphics software, from the application level to APIs and libraries to drivers for graphics chips. As long as it puts pixels on the screen, he's interested. He earned a B.A. in Mathematics from Carleton College and an M.S. in Computer and Information Sciences from the University of Oregon.

Chet posts regularly to his technical blog at http://graphics-geek.blogspot.com, where you can find articles, videos, demos, and plenty of source code. Chet is also interested in writing and performing comedy; you can see some his work in this completely unrelated field at http://chetchat.blogspot.com, and in his book When I am King..., which is available at Amazon.com.

Articles | Discuss | Print | Email | Screen Friendly Version | Previous | Next

This article is sponsored by Adobe.

Copyright © 1996-2014 Artima, Inc. All Rights Reserved. - Privacy Policy - Terms of Use - Advertise with Us