Skip to content
February 6, 2015 / Daniel Freeman

ExtendedMadness 0.3.1 BETA

MadComponent128exI’ve uploaded a beta of the next release of MadComponents/ExtendedMadness.  The download is pinned at the top of the MadComponents Facebook Group.  This is an FDT archive file of the source classes.  The .swc library is in the lib folder.  You can just take this .swc, and include it in your own project,

This beta fixes some idiosyncrasies with lists that were introduced in the previous release.  There are also five new features.

1. Radial Slider

This is the most exciting new addition.  It’s inspired by Apple Watch UI elements.  A radial slider is a circular slider control.  This component has a lot of options to customise its appearance.  In the centre of the concentric sliders, there’s a textfield that can be written with XML, or assigning to the .text property of UIRadialSlider.  This component dispatches UIRadialSlider.CHANGE, and UIRadialSlider.SELECT events.  UIRadialSlider has a .values property that yields an array of slider positions.  a .index property gives you the index of the last slider changed.  (There is also a .value property, that gives the value of the last slider changed. – but it’s not wired up yet in this beta version.)

Screen Shot 2015-02-06 at 21.39.08Probably the best way to learn what all the attributes do – is just to play around, and experiment with different values.  Here is the XML Layout to generate the four radial sliders above:-

<radialSlider
  values="0.7,0.4"
  rounded="false"
  offsetAngle={-Math.PI}
  maximum="0.8">
  <font color="#66FF66"/>slider
</radialSlider>
<radialSlider
  values="0.2,0.7,0.3"
  background="#FFCCCC,#FFCC99"
  colours="#CC6666,#CC9966"
  buttonColours="#FFFFCC"
  sliderThickness="8"
  margin="4"
  spacing="8"
/>

<radialSlider
  numberOfSliders="3"
  values="0.3,-0.3,0.3"
  minimum = "-0.4"
  maximum = "0.4"
  background="#666699"
  colours="#666699"
  buttonColours="#FFEE99"
  margin="-8"
  offsetAngle={1.5 * Math.PI}
/>

<radialSlider
  numberOfSliders="2"
  values="0.4,0.6"
  width = "50"
  sliderThickness="12"
  margin="4"
  alt="true"
  colours="#CCFFCC,#CCCCFF"
  outlineColours="#339933,#333399"
  background="#99CC99,#9999CC"
  maximum = "0.8"
  spacing="2"
/>

*Note that in this beta we specify angles in radians – this is an oversight, and will be changed to degrees in the next release.

2. Circular Arrangement

The <circular> containers allows you to arrange simple components (such as icons, buttons, or images) in a circlular arrangement. For example:-

<circular>
   <button/>
   <button/>
   <button/>
   <button/>
   <button/>
 <circular/>

Obviously this example is more exciting if the buttons have text or custom skin images.

 

3. Spacing

The <gap> component allows you to tweak the spacing between vertically or horizontally spaced components.  For example:

<vertical>
  <button/>
  <gap height="20"/>
  <button/>
</vertical>

 

4. <image>{DATA}</image>

There’s a change to the <image> component that allows you to specify data for different screen pixel densities, in the same way as the <tabPages> and <icons> components.  Although the <imageX> component allows you to accomplish this in a different way, <image> is now more consistent with other components.  Hence <imageX> is depreciated now.

<data>
  <item
    ldpi={getQualifiedClassName(ERROR_LD)}
    mdpi={getQualifiedClassName(ERROR_MD)}
    hdpi={getQualifiedClassName(ERROR_HD)}
  />
</data>

 

5. FTE Label

The <labelFTE> component is like the <label> component, but it utilises the Flash Text Engine.  The XML attributes match the properties of the  flash.text.engine.ElementFormat and import flash.text.engine.FontDescription classes.  There’s also a leading and a rightToLeft attribute.

 

Join The Community

For community discussions about MadComponents, and to download the latest .swc libraries, come and join the facebook page:-http://www.facebook.com/groups/madcomponents

You may also be interested in the Stage3D Facebook group: http://www.facebook.com/groups/stage3d/
There’s an introductory video to MadComponents here: http://www.youtube.com/watch?v=CMf2XGRhkOk
Please blog and tweet about this project (#MadComponents) and help to spread the word. Also, don’t forget to leave a “star”, or “g + 1″ recommendation on the Google Code site.  Also, help promote the new Github repository.
Advertisements

To discuss MadComponents/MC3D, join the Facebook group!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: