Archive for April, 2011

Slider Track and Thumb Skinning

April 28, 2011 1 comment

This example derives from a couple questions.  The first was how to create a Slider track with sort of a blue pearl look, a permanent ‘highlight’ in the middle, and corresponding changes to the look of the data tooltip.  The second question pertained to using a custom Path to draw a new Slider thumb shape.  Combining these two requests provides an opportunity to explore skinning an existing Spark component.

Each component documents its default skin skin class, which in turn defines skin parts and their associated classes.  Create new MXML Skin classes as copies of the default skin classes.  This provides a baseline class for modifying the skin.  Change the skin class references to point to the custom skins and you’re in business.

I’m not sure what a light blue pearl theme should look like, so I tried something with a radial gradient in tandem with chromeColor (set via styling).  To illustrate using a Path for the thumb, I chose a simple triangular shape.  I might replace this with something using a combination of lines and quad. Beziers in a future modification.

This screenshot contrasts the default and custom skin.

Dragging the top slider adjusts the height of the custom skinned slider so you may view how the skin varies with slider height.

View demo.

View source.

Categories: Flex Tags: , ,

TRON Clock V2

April 22, 2011 4 comments

I wanted to contrast different implementations of the same concept in the TRON clock, so welcome to V2.  My intent in the first version was to always display an analog-style clock with a circular theme and varying background quadrant graphics for the minutes.  The former was considered part of the component and the latter was the skin.  That’s a pretty narrow view of  a skin.  What if someone wanted to replace the circular theme with something triangular or square or even a digital display?

In V2, the concept of the clock skin is expanded to include the entire clock display, both dynamically drawn and artist-supplied parts.  The drawing logic is now entirely relegated to the skin class.  The component is responsible for validating style and input time values.  The component determines if the input time is different from the currently displayed time.  If so, the skin’s display list is invalidated and the skin redraws based on time values queried from the host component.

I also illustrate using embedded symbols from a SWF vs. instantiating a symbol that exports to a MovieClip or a subclass.  The latter is useful for animations like the TRON text in which we rely on timeline actions (these are stripped during the embed process).

A millisecond indicator existed in V1, but it was not used.  The millisecond indicator moved along with the seconds.  In V2, the milliseconds indicator is fully functional.  The clock may be used to display current time or as a stopwatch.  The latter functionality is shown in the demo in a countdown from two minutes.  You may toggle the __countDown Boolean variable in TronClockV2.mxml to see the new clock in normal time mode.

I did not have time to refactor the drawing utilities.  That will have to wait for another revision as  time is short in my current schedule.  Nor did I have time to fix the graphic alignment issues caused by the artist (me) selecting the application background image after the Flash drawings and trying to hack the two together.  This is, of course, why we try to get real artists to work on actual projects 🙂

There is room for additional improvement beyond the utilities, so experiment with the code and have fun!

View demo.

View source.

Categories: Flex Tags: , , , ,

Creating FXG Dynamically in Actionscript

April 19, 2011 3 comments

This demo derived from one of many conversations at 360|Flex.  Suppose an artist provides an FXG file, probably exported from another graphic package, for use in a Flex component or item renderer.  This particular example focuses on the latter scenario.  Suppose the FXG is to be re-used one or more times inside the item renderer, which is itself written completely in Actionscript.  I often get called in to write low-level components/renderers in Flex apps. entirely in AS, so this is a common scenario from my personal experience.

The FXG is in a file, and we want to code something like new ArtistGeneratedGraphicThingy() and add that to the display list in the renderer.  Fortunately, it’s pretty easy as the FXG is wrapped in a SpriteVisualElement.  The contrived example is a list of student names with a score in the 0-100 range.  A number of stars is placed by the student name based on the score (say one star for every 20 points up to 100, so five stars maximum).  The actual score is displayed on hover and rendered in red when selected.

The latter conditions delve into how to implement state changes inside an item renderer entirely in Actionscript (as it’s always useful to know what’s going on under the hood).  A screenshot of the rendered List component is shown below.

The output was created with the MXML,

<s:List id=”sampleList” height=”150″ itemRenderer=”renderers.StarRenderer” dataProvider=”{testData}” />

No styling or skinning is applied to the Spark List, so feel free to modify the demo to suit your visual taste.  The FXG for the star graphic is in the drawings folder, gradientStar.fxg .  To create the graphic dynamically in AS, just

import drawings.gradientStar;

then instantiate via something like

__star1 = new gradientStar() as SpriteVisualElement;

The item renderer (100% AS) is StarRenderer, in the renderers folder.  It keeps things simple by instantiating all five stars and controlling visibility based on actual data.  I like simple 🙂

I hoped to add some dynamic drawing to the item renderer, but time is short so I must pick that up at a later time.  Still have to blog on Tron Clock V2!

View Source is available, so check it out and modify to make it cooler and better.  Hope you get something out of the demo.

View demo.

View source.

Spark Component TRON Clock

April 8, 2011 3 comments

I had a bit of spare time before leaving for 360|Flex, so I wanted to create a Spark component example.  The original TRON played on cable a few nights ago, so a TRON clock seemed in order.  I wanted to illustrate integration of artist-generated assets and animation along with what I do best – programmatic drawing and animation, all inside an Actionscript (Spark) component.

The current demo is in beta form.  I created the background clock skin before deciding on the Application background image, so things don’t ‘line up’ as well as if a real artist handled all the visuals from scratch.

This example shows how to set and animate the Application background as well as integrate dynamic drawing into a skinned component.   Styling is used to set skin classes and other relevant properties.

There is a PM indicator and darkness/lightness of the hour indicator glow varies based on time of day.

The drawing utilities need some additional work.  I wrote the Wedge class back in 2005 and updated it in 2006.  That was used for the seconds display, then I hacked it to create the drawing class for C-sections (used to draw minutes).  Then, I hacked it again to create an Arc class.  In a subsequent release, I will refactor those classes to use Arc as a base utility (via composition) and draw the C-sections and Wedge using Arcs.

I’m a big believer in single responsibility, so the clock component displays time and that’s it.  It does not control or manage timing.  In the next release, I’ll show how to use the same component as a stopwatch.  Also in the next version, I’ll place some formal states into the clock component and its skin and illustrate use of invalidateSkinState().  Lots on the todo list 🙂

Probably need to do some more testing and tweaking, but I wanted to get something out before leaving for 360|Flex.  Full source code (and the .FLA files for the visual assets) are provided.   Hope you get something out of it whether you’re a TRON fan or not.

View demo

View source

UPDATE: V2 (dynamic drawing and static artist assets as skin parts) of this component is now available here –

Categories: Flex Tags: , ,

Going to 360|Flex

April 5, 2011 1 comment

I didn’t think this was going to happen, but sometimes it’s better to be lucky than good 🙂  I’m looking forward to attending 360|Flex in Denver next week.  If you’re attending, make a note to say hello (to the geek that dresses like a tennis player).

I’m also coming available for new gigs in the latter part of the month, so if you have something available to discuss at the conference, let me know in advance.  You can setup a meeting by contacting me directly at theAlgorithmist[at]gmail[dot]com.

Thanks and see you there!

Categories: Flex