Skin Flex4 powerful -- in the case of RadioButton

Recommended for you: Get network issues from WhatsUp Gold. Not end users.
Skin Flex4 powerful -- in the case of RadioButton

Flex4 weakens the CSS pattern, the complex interface effects must be accomplished by Skin, Skin can realize nearly all you want to design the interface display effect.

SparkSkin is a container of Group type (derived from Group); visual controls all of mx.spark's appearance is all subclasses of SparkSkin,

 

There are several ways to use Skin:

(1)Direct definition in CSS

s|Button{

        skinClass:ClassReference("com.skin.ButtonSkin");

}

(2)Set in the component definition

<s:Button skinClass="com.skin.ButtonSkin"/>

 

Skin example explanation:

All skin to modify the way they are the same, according to the detailed notes, can clearly understand the realization method of control style, to know which is used to design the border, which is used to design the fill color, and the color which is the reality of the text. Through the <s:stroke> <s:fill> to modify the frame, to modify the filling;.

The following explains how to through the skin will be as the ordinary radioButton, the effect of design.

   

1)First create a MXML Skin file types, component selection RadioButton.

2)The initial generation of the file, to the skin effect the system default. First you will see

<s:states>

        <s:State name="up" />

        <s:State name="over" stateGroups="overStates" />

        <s:State name="down" stateGroups="downStates" />

        <s:State name="disabled" stateGroups="disabledStates" />

......

 </s:states>

The definition of the RadioButton view state, including the mouse over the selected state, etc., in the skin definition will often see such as "0xFFFFFF color.downStates="; "alpha. over= 1" to define different state component rendering color.

3)Then there will be a Group container, which put a lot of components for the design effect, RadioButton original skin is composed of many Ellipse components, including its borders, shadows, high light effect. Because the display effect graph is bigger than the original effect, so will the Group size is determined by the length and width of 13 to the length and width are 14.

First find the notes for the <drop shadow! - --> elliptic controls, the content of the definition of the RadioButton shadow effect.

By default the shadow effect:

<!-- drop shadow -->

        <s:Ellipse left="-1" top="-1" right="-1" bottom="-1">

            <s:stroke>

                <s:LinearGradientStroke rotation="90" weight="1">

                    <s:GradientEntry color="0x000000"  color.downStates="0xFFFFFF" alpha="0.011" alpha.downStates="0" />

                    <s:GradientEntry color="0x000000" color.downStates="0xFFFFFF" alpha="0.121" alpha.downStates="0.57" />

                </s:LinearGradientStroke>

            </s:stroke>

    </s:Ellipse>

The border of a linear gradient, width is 1, the rotation angle of 90 degrees, i.e. the cutting of shadow, according to the effect graph, shadow effects on the right, so the rotation angle to 45 degrees,

The shadow color is not pure black color

In order to increase the effect of gradual change, change to the four colour linear gradient, between the different color transparency to achieve the buffering effect,

Shadow width increases to 3 enhanced stereoscopic effect.

<!-- drop shadow -->

        <s:Ellipse left="-1" top="-1" right="-1" bottom="-1">

            <s:stroke>

                <s:LinearGradientStroke rotation="45" weight="3">

                  <s:GradientEntry color="0x7ca39b" color.downStates="0xFFFFFF" alpha="0.8" alpha.downStates="0.8" />        

                  <s:GradientEntry color="0x7ca39b" color.downStates="0xFFFFFF" alpha="1" alpha.downStates="1" />

                  <s:GradientEntry color="0xf5f8f7" color.downStates="0xFFFFFF" alpha="0.8" alpha.downStates="0.8" />

                  <s:GradientEntry  color="0xf5f8f7" color.downStates="0xFFFFFF" alpha="1" alpha.downStates="1" />          

                </s:LinearGradientStroke>

            </s:stroke>

      </s:Ellipse>

Look at the border, compare the original image and the renderings will find, rendering no borders, only by the shadow formation to form a circular shape, so find the comment to <! - border component, delete, or set the alpha value is 0, so that it does not display the border.

 

Check point: dot

Find the notes for <! -- dot --> components, can be found, the election center point, is a path painted the origin, filling and become, now need to increase this origin.

The path instruction is difficult to remember, rendering half final I gave up, with a simple Ellipse painted.

But note: you can use the other components to replace the existing components, but the definition of id= "dotFill" will still remain for the new definition of the filler component, or an error, the code as follows.

<s:Ellipse right="3" bottom="3" left="3" top="3" includeIn = "selectedStates" id="dot" itemCreationPolicy="immediate">

           <s:fill>

              <s:SolidColor id="dotFill" color="#e67f25" />

           </s:fill>

    </s:Ellipse>

4)Using the defined skin.

.chartRadioButton{

        skinClass:ClassReference("com.skin.radioButtonSkin");

        symbolColor:#1cb49b;

}

Effect:

.levelRadioButton{

        skinClass:ClassReference("com.skin.radioButtonSkin");

        symbolColor:#e67f25;

}

Effect:

Use the same Skin, set up differentsymbolColor(element of color), making the selected effect have different display effect.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Adonis at January 06, 2014 - 6:32 AM