Форум Flasher.ru - ProgressBar в форме кольца

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)

- ActionScript 3.0 (http://www.flasher.ru/forum/forumdisplay.php?f=83)

- - ProgressBar в форме кольца (http://www.flasher.ru/forum/showthread.php?t=171229)

ProgressBar в форме кольца

Создание обычного прямоугольного прогресс-бара не вызывает никаких сложностей, а как быть в случае с кольцом? Т.е. чтоб процесс загрузки отображался путем закрашивания кольца а не прямоугольника. Неоднократно встречал такие прогресс-бары в прелоадерах - как такое можно реализовать?

Рисовать частично закрашенное кольцо программно, например.

Как вариант, изначально нарисовать кольцо, а анимировать уже маску.

Это понятно ) Вопрос именно в том КАК анимировать маску в данном случае

Добавлено через 3 минуты
Кстати с масками не работал еще %) Сейчас я прямоугольный прогрессбар рисую двумя методами:
1. Чисто программно - при обновлении прогресса удаляю старый прямоугольник и рисую новый прямоугольник нужной длины (не самый оптимальный вариант)
2. 50/50 - есть красивый прямоугольник в джипеге/пнг, поверх него лежит прямоугольник цвета фона. Его при обновлении прогресса уменьшаю через scaleX - получается эффект движения прогресс-бара.

А как с маской?

Цитата:

Сообщение от Ookami (Сообщение 1045399)

А как с маской?

Так, как пишут в документации.

у DisplayObject есть свойство mask

А дальше примерно так-же как вы и делаете

Добавлено через 51 секунду
*упс. опередили

Bgg, strangedk - спасибо за ссылки, расширил кругозор.
HardCoder - спасибо за пример, сейчас испробую

Код AS3:

        public class Main extends Sprite {

                private var circ:Shape;

                private var rect:Shape;

                private var preloader:Sprite;

 

                public function Main():void {

                        circ = new Shape();

                        circ.graphics.beginFill(0);

                        circ.graphics.drawCircle(30, 30, 30);

 

                        rect = new Shape();

                        rect.graphics.beginFill(0x00CCFF);

                        rect.graphics.drawRect(0, 0, 60, 60);

                        rect.y = rect.height;                        

                        rect.mask = circ;

 

                        preloader = new Sprite();

                        preloader.addChild(rect);

                        preloader.addChild(circ);

                        this.addChild(preloader);

 

                        this.addEventListener(Event.ENTER_FRAME, loop);

                }

 

                private function loop(e:Event):void {

                        if (rect.y == 0){

                                this.removeEventListener(Event.ENTER_FRAME, loop);

                                return;

                        }

                        rect.y -= 2;

                }

Принцип приблизительно такой. Вместо ENTER_FRAME используете progressEvent.

Код верный, но тут rectangle.
Ну а чтобы нарисовать дугу (Arc), воспользуйтесь этим примером

Цитата:

Сообщение от strangedk (Сообщение 1045408)

Код верный, но тут rectangle.
Ну а чтобы нарисовать дугу (Arc), воспользуйтесь этим примером

Или, вместо rectangle использовать красивую битмапу :) Вариантов море

Да, метод как-раз то что надо, плюс основа из предыдущего поста ) Спасибо

Добавлено через 11 часов 30 минут
Итак, вот что получилось:

Код AS3:

package progressBars

{

        import flash.display.Shape;

        import flash.geom.Point;

        import flash.text.TextField;

 

        public class ProgressBarCircle extends Sprite

        {

                private const ANGLE_OFFSET:Number = -90;

 

                private var radius:Number;

                private var thickness:Number;

                private var progressBar:Shape = new Shape;

                private var progressText:TextField = new TextField;

                private var point:Point;

 

                public function ProgressBarCircle(barRadius:Number = 100, barThickness:Number = 10)

                {

                        // Инициализация

                        radius = barRadius;

                        thickness = barThickness;

                        point = new Point(radius * Math.cos(radians(ANGLE_OFFSET)), radius * Math.sin(radians(ANGLE_OFFSET)));

                        // Описание этапа загрузки

                        progressText.x = radius + thickness / 2 + 20;

                        progressText.y = 0;

                        // Формирование МС

                        progressBar.x = radius + thickness / 2;

                        progressBar.y = radius + thickness / 2;

                        addChild(progressBar);

                        addChild(progressText);

                        update();

                }

 

                public function update(percent:Number = 0):void

                {

                        // Обновим надпись с процентами

                        progressText.text = int(100 * percent) + " %";

                        // Расчитаем текущий угол дуги

                        var angle = ANGLE_OFFSET + 360 * percent;

 

                        draw_arc(progressBar, angle);

                }

 

                private function draw_arc(shape:Shape, angle_to:Number):void

                {

                        shape.graphics.lineStyle(thickness);

 

                        var angle_diff = angle_to - ANGLE_OFFSET;

                        shape.graphics.moveTo(point.x, point.y);

                        shape.graphics.lineTo(radius * Math.cos(radians(angle_to)), radius * Math.sin(radians(angle_to)));

                        point.x = radius * Math.cos(radians(angle_to));

                        point.y = radius * Math.sin(radians(angle_to));

                }

 

                private function radians(degrees:Number):Number

                {

                        return degrees * (Math.PI / 180);

                }

        }

 

}