MAX started off today a bit bumpy for me. I had a talk about “Moving from Flex 3 to Flex 4” at 11:30 which was directly after the first keynote of the conference. Unfortunately, the keynote started 20 mins. late and ended 45 mins. late, so, while my session was supposed to be at max capacity (about 175 people), only about 25 people were in the room at 11:40 when I decided to start. By about noon, they asked me stop my presentation and restart it at 12:25 so that people coming from the keynote could still attend. Ahhh! What a pain. Anyways, thanks to the people who showed up on time to my talk and apologies that you had to wait so long for the talk to complete.
Finally, at 1:30 or so, the session ended.
Here are the slides for the presentation for those who are interested:
I’m hoping for a smoother session on Wednesday at 11!
Update (10/9/09) – I’ve updated the slides since my presentation on Wednesday. I added more details about using TLFTextfield with Beta 2 to avoid embedding fonts twice when using MX and Spark components. I also fixed a typo I had in the States slide excludeIn -> excludeFrom.
Flex 4 offers you some new tools to draw graphic primitives like lines, curves, ellipses and rectangles. These new classes are all found in the spark.primitives.* package. They all subclass GraphicElement rather than UIComponent (like all of the other Flex components), therefore, they are more lightweight.
However, there are actually two different ways to include graphics in a Flex 4 application. You can include graphics in your application or skins using “optimized FXG” or MXML Graphics. Optimized FXG refers to the use of .fxg files as mxml components. These .fxg files can be exported from Fireworks, Flash Catalyst (when this product is available to the public), Illustrator and Photoshop. For example, here is a simple png that I created in Fireworks:
If you use are using Fireworks CS4, you can use the menu option Command -> Export to FXG.
This will produce an FXG file like: Star.fxg
Then, in your Flex application, you can simple use this as a custom component.
<g:Star id=”fxg_star” x=”10″ y=”10″ xmlns:g=”*” />
There are some limitations to using optimized FXG, however. While, you can scale, resize and move it, you cannot change any attribute of the graphic. For example, if you wanted to change the colors in the LinearGradient of this star, you would not be able to. The base class that wraps .fxg is spark.core.SpriteVisualElement.
If you want to create graphics where you can change attributes at runtime, then, you will want to use MXML Graphics. Here are the mxml tags that you would use to create the same star:
<s:Graphic y=”20″ horizontalCenter=”0″>
<s:Path winding=”evenOdd” data=”M 50 13 L 65 33 L 90 39 L 74 58 L 75 82 L 50 74 L 24 82 L 25 58 L 9 39 L 34 33 L 50 13 Z ” blendMode=”normal” alpha=”1″>
<s:RadialGradient x = “56” y = “52” scaleX = “81” scaleY = “81” rotation = “0”>
<s:GradientEntry id=”gradientColor1″ color=”#666666″ ratio=”0″ alpha=”1″/>
<s:GradientEntry id=”gradientColor2″ color=”#339999″ ratio=”1″ alpha=”1″/>
<s:SolidColorStroke color=”#ffff33″ weight=”2″/>
Now, that this is defined in an application, you can edit any of the colors of the fill or stroke or the data for the Path at runtime.
In this sample, you can change the gradient colors of the star at runtime using the ColorPickers.
Sample Application: MXMLGraphic_Star.swf
Sample Code: MXMLGraphic_Star.mxml