Home | Flash | Slider thumb skin, size in Flash and Flex. Изменяем размер thumb skin в компоненте Slider

Slider thumb skin, size in Flash and Flex. Изменяем размер thumb skin в компоненте Slider

Font size: Decrease font Enlarge font
image

Изменение размеров thumb и track скина для компонента Slider во Flash и во Flex

Вариант для Flash (делалось во Flash CS3)

Для начала добавьте на сцену компонент Slider из библиотеки компонентов (Window ->Components, UserInterface Slider
Кликнув на нем два раза можно редактировать скин. Очень просто, однако, если попробовать изменить размер thumbа, то он все равно останется 13х13. Нам это не подходит, поэтому поступим как описано ниже.

В папке установки FlashCS3 ->en\Configuration\Component Source\ActionScript 3.0\User Interface\fl\controls класс Slider.as и откроем его.
Это класс нашего слайдера, найдем в нем функцию configUI(). В этой функции есть наш thumb где устанавливаестся его размер по умолчанию (13х13) и track (полоска, по которой движется бегунок, 80х4).
Для того чтобы изменить эти значения создадим свой собственный класс CustomSlider, который является расширением Slider.

package
{
   import fl.controls.Slider;
  
   public class CustomSlider extends Slider
   {
      public function CustomSlider():void
      {
        super();
          thumb.setSize(25, 25);
          track.setSize(80, 10);
      }      
   }
}

Теперь установим наш класс в свойствах Slider'а (клик правой кнопкой мыши на слайдере в библиотеке и выбрать Properties), в поле Class написать CustomSlider, в свойствах Linkage тоже в поле класс прописать CustomSlider.
Запускам ролик и видим что размер скина также изменился.

Вариант для Flex (Flex 2 и Flex 3)
У компонента Slider во Flex sliderThumbClass, где мы можем указать свой класс.
Создадим свой и установим этому свойству:

package {
import mx.controls.sliderClasses.SliderThumb;

public class CustomThumbClass extends SliderThumb {
public function CustomThumbClass() {
super();
this.width = 25;
this.height = 25;
}
}

}

 



Исходники для Flash - source

 

Comments ( posted):

Post your comment comment

Please enter the code you see in the image:

  • email Email to a friend
  • print Print version
  • Plain text Plain text
Tags
No tags for this article
Rate this article
5.00