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. ;-)