Skinning Flex HSLider component. part II

This post is a quick follow up on my last skinning post, since I realized  that I should add some details about the sliderThumb customization.

In order to create our very own sliderThumb UI we created a class that extends SliderThumb (see full code below). But we need to override some method of SliderThumb otherwise the slider won’t be displayed correctly. (e.g. the original triangle thumb will still be visible :s )

In order to remove the legacy thumb there are several tricks.

  1. Reduce the size of the thumb, to make it almost invisible.
  2. Just override the measure() function and set the size to 0*0 

    override protected function measure():void{
                super.measure();
                measuredWidth = 0;
                measuredHeight = 0;
                measuredMinHeight = -1;
                measuredMinWidth = -1;
            }
    

    That ‘s not the best solution since a small glitchy point will remain visible as the thumb. Check below we can see a small ‘blueish’ ball

  3. Apply a transparent skin to the thumb. (Best solution so far)
  4. In the properties of the H/VSlider we can set a thumbSkin and Flex replace the ugly triangle by our image/skin. The trick here is to use a 1 px transparent image as the skin which going to remove the old thumb so we can only see our custom component.

    //in the mxml
    <mx:style>
    		HSlider{
    			thumbSkin: Embed(source="com/GuN/UI/customUIComponent/slider/empty.png");	
    		}
    	</mx:style>
    	
    	<mx:script>
    		< !&#91;CDATA&#91;
    			import com.GuN.UI.customUIComponent.slider.SliderTrack;
    			import com.GuN.UI.customUIComponent.slider.CSpSliderThumb;
    			
    			
    			var arrayValues:Array = &#91;"null","January '08", "February '08", "March '08", "April '08", "May '08", "June '08", "July '08", "August '08",
    										"September '08", "October '08", "November '08", "December '08"&#93;;
    			
    		&#93;&#93;>
    	</mx:script>
    	<mx: Panel x="0" y="0" width="527" height="104" layout="absolute" title="Custom Slider" backgroundColor="#000000">
    		<mx:hslider x="73.5" y="10"
    			id="s"
    			showDataTip="false"
    			values="{arrayValues}"
    			creationComplete="{s.value=1}"
    			snapInterval="1"
    			minimum="1"
    			maximum="{arrayValues.length-1}"
    			liveDragging="true"
    			trackSkin="{SliderTrack}"
    			sliderThumbClass="{CSpSliderThumb}"
    			 width="360"></mx:hslider>
    	</mx:>
    

    Check the result here (once on the page right click to get the src)

Continue reading

Advertisements

Back online

The last 2 months were just restless for me, except my 3 weeks off where I had the chance to go 1 week in the French Alps, 1 week at the sea and 1 week in Croatia.(This country is beautiful by the way), my ‘main tasks’ list was HUGE.

Tasks List :

  • Finish my professionnal dev. done
  • Writing docs. On progress  (I really hate this part…)
  • Fixing my car. done
  • Posting some CoolUselessHack here. On progress (I have a lot of ideas)
  • Getting back to university every night in order to finish my MSc in Computer science. On progress -_-zzZZz
  • Finding a new job. On progress
  • Playing Warhammer Online. << grr.. not enough hours in a day (damn small 24h)
  • Writing LUA addons for warhammer Online. done (OMG I realize that I spend more time coding addons than playing…)
  • Playing with pixel bender. On progress
  • Buying Sheldon’s green lantern tshirt. You can buy me one here 😉 
  • …and alot more

Big Buck Bunny

As the first post of this blog, I should explain the goals of this blog, what you gonna find …etc. But instead I will talk about Big Buck Bunny

Big Buck Bunny is an amazing open movie created with open source tools (such as Blender) and licensed under the Creative Commons Attribution 3.0

So that means you can freely : Share and Remix the work. That’s really a good news to see that open source tools can provide such a good results.

Must be seen : Elephants Dream (previous project)