Flash Game — Spinner/Slider specification

Overview/Goals

Flash or Flex designer/programmer wanted
to complete a graphical control for an online board game.

The control is a spinner, like those used in board games. The game is for players from age five through adult, and the purpose is music education.

Spinner/slider prototype

The currently Spinner/Slider has:

    • acceptably designed graphics
    • a slider thumb that the user can drag (within vertical and horizontal constraints)
    • "example" interactivity:

      1. the thumb 'eases' back to center on mouse up
      2. the spinner arrow responds to a mouseUp in the thumb, spinning and coming to rest with a elastic effect.
      3. unintentional spins occur because stage listens for mouseUp. It gets a mouseUp any time there's a mouseUp outside the thumb. (Listening at a the "bubblling" event phase to alleviate this.)
    • If you haven't seen it already, you can view a basic example spinner here (same example as above)

The spinner/slider development goals are:

The contracter is to a spinner object in an ActionScript 3.0 file (.ai) while addressing the following goals:

Make the slider and spinner parts easily skinnable, preferable by CSS
(i.e. the skin is easily redefined by a CSS reference ... or changed by attribute):

  • allow the arrow image, text labels, background color to be skinned
  • allow the slider thumb, track, background rectangle to be skinned

The spinner object will take a the following parameters:

  • a list of text labels that are displayed proportionally around the circle (presently this is just A, B, C ...). This list can contain an unlimited number of labels. (The labels are center aligned ... to position properly it may be necessary to determine height and width of the label text.)
  • a distance parameter that governs how close the labels are displayed relative to the center of the spinner circle
  • fontSize, fontStyle and fontFace properties for labels, or a reference to a CSS file that describes these properties
  • color parameters for background color, arrow color, slider background color, thumb color — or an easy way of skinning the controls with alternate graphics.
  • a reference to "click" sound
  • parameters for custom easing. For instance, so most of the tween occurs near the end of the end of the tweens duration.
  • pass in an easing function* as a parameter? (the docs I looked at included only five classes: Back, Bounce, Circular, Cubic, Elastic, but now I see five more: Exponential, Linear, Sine, Quadratic, Quartic, Quintic

    http://livedocs.adobe.com/flex/3/langref/mx/effects/easing/package-detail.htmlhttp://livedocs.adobe.com/flex/3/html/help.html?content=behaviors_08.html

The spinner must contain methods that ensure that:

  • the arrow will always come to rest at one one of the text labels
  • a currently playing animation (such as rotation tween) reacts logically to a new spin that interrupts the executing tween. (I think it's possible to get the duration of the tween as a result of the tween function; so it's possible to disable the slider until the tween has completed.)
  • an audible click occurs as the arrow rotates past each label (A, B, C ...)
  • on mouseUp the arrow spins — harder for a long drag and softer for short drag, but somewhat randomly

The user will be able to:

  • click the thumb (or press s or spacebar) to make a random spin
  • drag the thumb downward to prepare for a clockwise spin, with the arrow cocking counterclockwise slightly on drag.
  • drag the thumb upward to prepare for a counterclockwise spin, with the arrow cocking clockwise slightly on drag
  • Alternately, I might want to allow the user to drag the arrow, and have the thumb slider react. Tracking and translating circular motion may be difficult— note the way radial knobs react to mouse movement in the mixers of various digital audio applications. Many only react to purely vertical or purely horizontal movement.

The musical "board game" concept

Ultimately the game will look something like the illustration below.

It is undecided if play will proceed along the "m" path as indicated in the image here. I think it would be fine to have play go straight up and down, or follow an "n" path ... a simple yet extensible approach is best for version 1.0. Please note, creation of the board, play logic, and interaction is a separate project, and not part of this specification. This specification is just about the spinner.

 

Contact

flashDesign@theorecticallycorrect.com

 

 

 

 

Links on this page: gameboard