Flex 4's layouts, animations, and interpolators

Below is an applet that demonstrates three new Flex features:
1. Custom layouts
2. Generalized animations
3. Custom interpolators

The applet, called AngleTest (source code here), shows the notes of the diatonic scale (Do, Re, Mi, etc.) placed around a circle:


Re is at the top to make the symmetry of the diatonic scale more obvious (because horizonal or vertical symmetry is much easier for human brains to recognize than symmetry along any other axis).

Initially, the scale is in Do-mode ("major," or "Ionian"). You can tell, because degree number 1—in green, to make it stand out—is next to Do.

If you click the "Next Mode" button (in the upper-left corner of the applet), the degree numbers change to reflect their positions in Re-mode ("Dorian"). Degree 1, in green, is now next to Re.

I don't know about you, but I find that sudden change of numbers, in place, to be almost impossible to follow. What changed, exactly, and how?

So, I added an "Animate" checkbox, also towards the upper-left corner. Click it, so that a checkmark appears in its check box, thereby enabling animation. Now, click the "Next Mode" button again.

Cool! The degrre numbers slide smoothly from one note-name to another, showing—with much greater clarity—the relationships of the modes to the underlying scale. That's due to the interaction of two new Flex features: (a) Flex's new custom layout feature, which my code uses to place each degree label at the angle specified by its "angle" property, and (b) Flex's new generalized Animation effect, which smoothly animates the angle property between values.

Er, hmmm, but...there's a problem. One of the degree numbers rotates in the wrong direction! Whichever degree label is on Mi goes all the way around the circle counter-clockwise to Fa, instead of going clockwise a short ways to Fa. WTF?

The problem is fairly simple, actually: Mi's angle is 330 degrees, and Fa's is 0 degrees. The natural way to interpolate the numbers between 330 and 0 is downward, through 300, 200, 100, and so on down to 0...and that's exactly what the Animation effect's default interpolator does. That's the only interval on the circle in which a degree label is moving from a large starting angle to a small ending angle, so it's the only interval for which the degree label goes the wrong way.

What we need here is a custom interpolator -- an *angle* interpolator -- which recognizes that angles fall on a circular continuum, rather than a linear continuum.

In the "Interpolator" panel, just below the "Animate" checkbox, are two radio buttons that let you select whether to use Animate's default "Number" interpolator or my custom "Angle" interpolator.

The "Angle" interpolator keeps all of the degree labels moving clockwise.

It isn't commercial-grade, though. I'm pretty sure that the increment and decrement methods aren't right, but my code doesn't need those functions so I haven't tested or revised them accordingly. (You've been warned!)

The layout of the note-names is a little off, too. I'm not sure why. I think that it's because the bounding boxes of the labels reserve space for descenders -- the bits of letters like 'y' and 'p' that stick down below the rest of the text. Not sure, and for now, don't care -- it's good enough for Version 1.0.

When I look at other people's sample Flex code, I am frequently stunned by the amazing effects they are able to get out of a tiny bit of code. My code's not like that. I seem to have to write reams of the stuff.

For example, the arcs that show the widths of the seconds around the circle—the red and blue arrows—are, well, *arcs*, and Flex's new FXG graphics code does not support arcs. Theoretically, one can program them using cubic Bezier curves, but I seem to have missed that post-graduate mathematics course. Instead, I kludged them up in Adobe Illustrator, ran Illustrator's output through Adobe's Flash Catalyst, and pasted the result into my app. The result looks fine, but involved reams of impenetrably-complex MXML/FXG that's almost certainly longer than necessary. But...hey!  It works, and that counts for a lot.

Way behind

I'm way behind on developing new lessons, for three reasons:
(1) I had a short consulting contract that occupied a couple of weeks of my time
(2) I need to correct some pedagogical deficiencies in earlier lessons (e.g., introducing the term "note" without defining it in Lesson 4) rather than focus on new lessons, and
(3) I invested a couple of days learning more about Adobe's Text Layout Framework (TLF).

I need to understand TLF better because JiMS makes heavy use of superscripts -- in note-names such as Re⁰ -- which, in Flex, require the use of TLF.

But, I'm back in the saddle now. A corrected version of Lesson 4 should be posted tomorrow (Lesson 004.01), with a modified version of Lesson 5 to follow a few days thereafter.

Lesson 004.0

Here's my first draft of Lesson 4 (source code here):


It uses the same crummy state-controlling button-bar at the bottom, for now. I'm going to write a new control for progressing-through-the-lesson-control soon, probably this weekend.

Moodle
I spent some time earlier this week looking at Moodle, the open-source learning management system. I'd like to package my lessons in a Moodle wrapper, because it has excellent support for all sorts of things (like gradebook databases) that I don't want to have to think about. Unfortunately, Moodle's Flash/Flex support is seriously deficient. Fortunately, an effort appears to be underway to address this deficiency. Therefore, I will proceed as if Moodle will have excellent support for Flash within the near-enough future.

I met the Moodle guys when I was living near their home base in Perth, Western Australia. I knew at the time that they had a good chance of beating their commerical competition. The signs were there, even then. Moodle hasn't been gaining market share as rapidly as I had expected, though. It needs some professional help with its evangelism, I suspect, to accelerate its rate of growth. If Moodle doesn't pick up the pace, it could be the next MySpace. It's "do or die" time.

Music & Pedagogy
Lesson 4 is the first lesson to introduce JIMS keyboard. The keyboard is introduced by deriving the pentatonic scale from an octave-reduced stack of (tempered) (major) fifths.  Notice that the lesson never qualifies the term "fifth" -- that is, it doesn't call it a "perfect" fifth or a "major" fifth. I don't want to, or need to, open that can of worms quite yet.  All in good time.

The next lesson, Lesson 5, will state that JIMS' unique approach gives its students the power and flexibility to understand and describe the music of many cultures. It will suppor this statement by extending the Stack of Fifths to produce the diatonic, chromatic, and enharmonic scales, and by showing that -- using a tuning slider -- the student can change the tuning to match that of many different non-Western cultures and Western eras, while retaining the simplicity and consistency of JIMS' keyboard's pattern.

I think that it's important to make this point early on, because immediately after making it, the lessons will shift their focus to the diatonic scale, and spend a LOT of time in the diatonic world thereafter. If the flexibility of the JIMS keyboard isn't demonstrated early on, a knowledgeable music teacher, reviewing JIMS' early lessons, might reasonably conclude that JIMS teaches concepts that are applicable only to the diatonic scale.  I need to plant the seed of JIMS' power early on, even if I don't water it until much later.

Programming
I'm becoming more comfortable with the architecture that I'm using for these lessons, in which the lesson's content is implemented in the transitions between Flex's application states. If I choose the states wisely, then the architecture works well -- even if this architecture is, as I suspect, an unanticipated application of Flex's "state" feature.

Flex's 4 Beta 2's implementation of stateGroups seems to be a bit buggy (as one might expect from a new feature in a beta-version framework).  It seems to clobber properties that aren't set by the relevant states. For example, you'll notice that in Lesson 4 above, the note's octave numbers disappear partway through the lesson. That appears to be a manifestation of the stateGroup bug.  I spent a couple of hours trying to work around it, before deciding that the lack of octave numbers, in those states, was not a big enough bug to worry about. Also, don't use stateGroups to affect the setting of the properties of a slider, because the max/min/value will be set to NaN under conditions that I haven't spent the time to rigorously quantify.

Now, if I were a really serious beta-tester, I'd dig into Adobe's online bug reports and open-source nightly builds of Flex, to track down the bug and try to identify a fix. However, I'm confident that the bug is severe enough that others will have done this work, so it will be fixed in the release version. Although my use of the state feature in my application's architecture is, as I've suggested above, likely to be unusual, the use of stateGroups is not, so other people should be encountering this bug.  If it persists in the next release, I will become more actively concerned.

Schedule
I've decided to try to post a new lesson each week. That would give me fifty lessons in a year. Assuming that I'll make the first dozen free, on a "try before you buy" basis, then those who subscribe to the paid lessons will get an additional 38 lessons (because 50 - 12 = 38). Thirty-eight is more than three dozen, and hence is three times the number of free lessons -- which ought to make the paying customer feel like they are getting enough to make the $29.95 purchase worthwhile. Of course, I'll be adding new lessons constantly thereafter, but with 50, I ought to have enough to "go live" and start selling subscriptions.

I'll have to pause my output while writing a "notation" component, but since JIMS' sequencer-like notation is so much simpler than traditional notation, it shouldn't slow me down by too much.

Lookin' good.  ;-)

wordWrapping a Flex Panel's title?

How does one turn on word wrap in the title of a Flex Panel?

I'm using Panels to present questions, and the question statements can occupy more than one line. However, the Panel clips them to just one line. There must be a way to make the Panel use as many lines as necessary to display the title's text in full, preferably from MXML.

How?

I suspect that the answer involves using "Cascading Style Sheets," which is on my steadily-growing "must-learn" list.  That list seems to be growing from the bottom faster than I can scratch newly-learned things off the top, which is a bit worrisome.  The problem isn't that cascading style sheets are rocket science; I'm sure that they are not. It's just one more thing on the list.

States in Flex 4 (entry 2)

This app looks the same as the last one I posted, but it implements the transitions between states using Flex's 'transitions" mechanism, rather than just executing onEnterState event handling code (source code here):


Other differences include:
1) on entry to State1, the label for the current state is spun at the same time as the narration is played, and
2) on entry to State2, a second sound is played after "test narration two" completes.

It shows the same clipping problem in IE on Windows. I'm going to have to look into that.

States in Flex 4

One way to architect the code for a "lesson" is as a series of states. Flex 4 (now in beta) has improved its support for states, so this seems like a reasonable approach to explore.

Here's a program that demonstrates a trivial use of states in Flex 4 Beta 2 (source code here):

A ButtonBar at the bottom is initialized with the names of each of three states, and a label reflects the name of the currently-selected state. When the ButtonBar is clicked, the state is changed. Whenever a new state is entered, a short narration is played.

To use this approach in my courseware, I'll need to break each lesson up into a series of states, and define the actions to be taken whenever a new state is entered. Flex 4's new-and-more-general animation model should make it easier to define these actions than was previously the case.

I have no idea whether this is the "best practice" way to architect interactive courseware in Flex. I'm kinda flying blind here. Suggestions welcome.

[Postscript: All three ButtonBar-buttons display properly in Safari on my Mac, but the rightmost part of the StateTest1 widget, including most of the third ButtonBar button, is clipped off in Internet Explorer on my Windows machine.  I don't know why.  Welcome to the joys of cross-browser incompatibility, I guess.]

CircularSlider

Here's my first attempt at a Spark-based Flex control, using Flex's new skinning architecture. It's a circular slider.  This (uncopyrighted) file, posted by Jacob Goldstein, was a big help.  Thanks, Jacob!  :-)



There's some seriously-weird stuff happening in this control.
- Firstly, it attempts to draw a horizontal slider's track, for reasons that I haven't found yet. This "ghost track" appears to be intercepting some of the slider's events, which causes the thumb to jump around erratically during a thumb-drag.
- Secondly, it resists resizing. Apparently, I need to locate methods that faciliate resizing Spark controls and override them.

It's a start. ;-)