Компонент ползунка диапазона вспышки

Есть ли что-то похожее на этот компонент jquery во флэш-памяти или есть готовые примеры того, как сделать это?

Спасибо.


person Maksim Vi.    schedule 05.01.2010    source источник


Ответы (2)


Я не знаю каких-либо встроенных (или сторонних, если на то пошло) компонентов такого рода. Я уверен, что должны существовать сторонние программы, но вряд ли они будут бесплатными.

Вы можете создать свой собственный без особых проблем. Я создал базовую рабочую версию, которую вы можете использовать, если хотите:

// Main class, shows how to use other classes:

import flash.display.*;
import flash.events.*;
import flash.text.TextField;


public class Main extends Sprite
{
    private var output:TextField;
    private var range:RangeSlider;

    public function Main()
    {
        output = new TextField();
        addChild(output);

        // SliderImage and ThumbImage are PNGs exported (inheriting from BitmapData) from the fla
        var thumb:SliderThumb = new SliderThumb(new ThumbImage(20, 20), stage);
        range = new RangeSlider(new SliderImage(1, 1), thumb, 100);

        range.x = 55;
        range.y = 55;

        range.addEventListener(Event.CHANGE, updateOutput);

        addChild(range);

        updateOutput();
    }

    private function updateOutput(e:Event = null):void
    {
        output.text = range.min + ' to ' + range.max;
    }
}

SliderThumb класс:

import flash.display.*;
import flash.events.*;
import flash.geom.Point;

public class SliderThumb extends Sprite
{
    private var image:Bitmap;
    private var mouseIsDown:Boolean;
    private var _stage:Stage;

    public var min:Number;
    public var max:Number;


    public function SliderThumb(imageData:BitmapData, _stage:Stage)
    {
        min = max = 0;

        this._stage = _stage;

        image = new Bitmap(imageData);
        addChild(image);

        addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init(e:Event):void
    {
        removeEventListener(Event.ADDED_TO_STAGE, init);

        mouseIsDown = false;

        // Center image:
        image.x = -Math.round(image.width / 2);
        image.y = -Math.round(image.height / 2);

        addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
        _stage.addEventListener(MouseEvent.MOUSE_UP, mouseUp);
        _stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
    }

    public function clone():SliderThumb
    {
        var clone:SliderThumb = new SliderThumb(image.bitmapData, _stage);

        clone.min = min;
        clone.max = max;

        return clone;
    }

    private function mouseDown(e:MouseEvent):void
    {
        mouseIsDown = true;
    }

    private function mouseUp(e:MouseEvent):void
    {
        mouseIsDown = false;
    }

    private function mouseMove(e:MouseEvent):void
    {
        if (mouseIsDown) {
            x = parent.globalToLocal(new Point(_stage.mouseX, 0)).x;

            if (x < min) {
                x = min;
            }
            else if (x > max) {
                x = max;
            }

            dispatchEvent(new Event(Event.CHANGE));
        }
    }
}

RangeSlider класс:

import flash.display.*;
import flash.events.*;
import flash.geom.Point;

public class RangeSlider extends Sprite
{
    private var background:BitmapData;
    private var sliders:Array;

    // Background is a one-pixel wide image that will be tiled horizonatally to give the slider its look
    public function RangeSlider(background:BitmapData, slider:SliderThumb, size:Number)
    {
        this.background = background;

        slider.min = 0;
        slider.max = size;
        sliders = [slider, slider.clone()];
        for each (slider in sliders) {
            addChild(slider);
            slider.addEventListener(Event.CHANGE, function (e:Event) { dispatchEvent(e); });        // Pass on the CHANGE event
        }
        sliders[1].x = size;

        this.size = size;
    }

    public function set size(value:Number):void
    {
        // Update background:
        graphics.clear();
        graphics.beginBitmapFill(background);           // Tiles by default
        graphics.drawRect(0, 0, value, background.height);
        graphics.endFill();
    }

    // Returns the position of the first slider (from 0 to size):
    public function get min():Number
    {
        return sliders[0].x;
    }

    // Returns the position of the second slider (from 0 to size):
    public function get max():Number
    {
        return sliders[1].x;
    }
}
person Cameron    schedule 05.01.2010
comment
Это потрясающе. Большое спасибо. Мне не хватает класса SliderImage, но я предполагаю, что это просто BitmapData. - person Maksim Vi.; 05.01.2010
comment
Да, ThumbImage и SliderImage наследуются от BitmapData. - person Cameron; 06.01.2010
comment
Следует помнить, что размер ползунка (т. Е. Максимальное значение) соответствует его ширине в пикселях, что, вероятно, не слишком желательно. Кроме того, в текущей реализации минимальное значение всегда равно 0. Как я уже сказал, есть на что опираться :-) - person Cameron; 06.01.2010

Если вы готовы импортировать библиотеки Flex, есть несколько уже созданных решений:

  1. В библиотеке Flex 3 MX есть компонент слайдера, поддерживающий два больших пальца.
  2. Патрик Маурер создал компонент слайдера Flex 4 Spark, в котором также реализована опция для нескольких больших пальцев. Однако я думаю, что в настоящий момент у него все еще есть функция trackHighlight (как видно из примера пользовательского интерфейса jQuery) в его списке дел. Хотя во фреймворке Flex 4 это не так сложно реализовать. Он доступен бесплатно на GitHub: https://github.com/pmowrer/spark-components

Как я уже сказал, оба этих решения требуют использования библиотек Flex, что означает дополнительные накладные расходы. Тем не менее, это действительно «флеш-решения».

person merv    schedule 25.08.2011