Форум Flasher.ru

Форум 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)

Ookami 12.11.2011 01:20

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

-De- 12.11.2011 01:23

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

strangedk 12.11.2011 01:37

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

Ookami 12.11.2011 01:44

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

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

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

Bgg 12.11.2011 01:52

Цитата:

Сообщение от Ookami (Сообщение 1045399)
А как с маской?

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

strangedk 12.11.2011 01:55

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

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

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

Ookami 12.11.2011 02:16

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

HardCoder 12.11.2011 02:17

Код 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.

strangedk 12.11.2011 02:21

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

HardCoder 12.11.2011 02:25

Цитата:

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

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


Часовой пояс GMT +4, время: 12:46.

Copyright © 1999-2008 Flasher.ru. All rights reserved.
Работает на vBulletin®. Copyright ©2000 - 2026, Jelsoft Enterprises Ltd. Перевод: zCarot
Администрация сайта не несёт ответственности за любую предоставленную посетителями информацию. Подробнее см. Правила.