Flex 4 Learning Game with Complex Text FX


This is a reblog of a very interesting project I worked on for Voyager Learning in Dallas, TX.

The problem is to render interactive ‘word selectors’ in-line with text, provided in html format.  An example input is of the form,

<passage><p>Sarah’s <word>father</word> had died in 1797, two years earlier. Life was difficult with him gone, but the family had learned to <word>adapt</word>. Sarah found that she had to support the family with her daily hard work.</p><p>The family’s main <word>product</word> was cattle, but it also raised chickens—and Sarah had been put in charge of both types of animal. Father had worked hard at <word>farming</word> and building furniture, but that business was <word>defunct</word> now that he was gone. Together, the family survived without him due to their courage, tenacity, and <word>strength</word> of character.</p></passage>

Some passages may contain <b> or <i> tags as well.  Everywhere a <word> tag is present, an interactive word selector must be rendered in-line with the text.  TinyTLF is used to render the text and the word selectors are rendered by a custom TextBlock factory assigned to the TinyTLF text engine.  The factory and the word selectors implement specified interfaces (IWordSelectorBlockFactory and IWordSelector).  An event is dispatched when the word selectors are added to the stage, which allows the skinnable component controlling passage display to obtain references to the created IWordSelector.

TinyTLF allows the text to be easily styled by assigning styles, either through an external style sheet or constructed from Flex style properties assigned to the passage display class (the technique I use in this app).  The rendered result is shown below after some interaction with the word selectors (the same synthetic data is used across all test passages, so the concept of correct vs. incorrect selection is meaningless in this example).

The really cool thing about programming the Skinnable component to a set of interfaces and not specific implementations is the ability to quickly create new block factories and selector implementations.  This was actually used to switch out rectangular 2D selectors with Actionscript 3D rectangular boxes.

The entire game is implemented as a Flex 4 Skinnable component, with separate skinnable components for the primary game constituents, the most complex of which are the passage display and the vault graphic controller.  The former uses TinyTLF for the inline word selector rendering.  Word Selectors are injected based on block controller factory classes assigned in the CSS file for this game.  The (artist-generated) vault graphic is embedded as a .SWF (not as symbols within a .SWF).  The individual symbols are extracted and manipulated either as skin states or as part of invalidating the component.

Different skin classes were substituted for the passage display during the course of development, ranging from customized formatting for different paragraphs to 3D boxes for the selectors.  The ease at which these changes were made really emphasizes the benefits of Skinnable Components in Flex 4.

Comments are closed.