40. [junior] Preloader Part1. Отображения прогресса загрузки

junior – серия статей для начинающих ActionScript-разработчиков.
Все статьи серии:
http://flashpress.ru/blog/category/junior/

В статье мы разбирали как можно загрузить внешний ресурс во флешку. В этой же серии мы будем учиться отображать компонент отображающий прогресс загрузки. Так же будут рассмотрены способы отображения процесса загрузки самого себя во флеше. Например если у вас получилась большая флешка состоящая из одного файла, вы не сможете показать прелодер обычным способом, до тех пор пока флешка не загрузится целиком. Мы разберем способы отображения прогресса загрузки самого себя в редакторах Adobe Flash Professional и Adobe FlashBuilder. Метод который мы применим в редакторе FlashBuilder, можно с легкостью перенести и на другие редакторы, например FlashDevelop.

В этой статье мы разберем как делать прямоугольный загрузчик. Так же научимся делать загрузчик более плавным, без рывков. А загружать мы будем картинку большого размера, что бы можно было увидеть сам процесс загрузки. Что бы узнать на каком этапе сейчас загрузка, необходимо слушать событие ProgressEvent.PROGRESS:

Здесь должна быть флешка. Установите Flash Player


FlashBuilderFlashIDE
Код для редактора Adobe FlashBuilder
Код для редактора Adobe Flash CS Professional

Добавляем анимацию для более плавного отображения прогресса загрузки
Если у пользователя вашего приложения шустрый интернет, то процесс загрузки может отображаться рывками. Это не всегда выглядит красиво, поэтому давайте разберем как можно сделать движение прогресса более плавным. Делается это с помощью библиотеки любой tween-библиотеки, например FPTween. Вот пример анимированного загрузчика:

Здесь должна быть флешка. Установите Flash Player

FlashBuilderFlashIDE
Код для редактора Adobe FlashBuilder
Код для редактора Adobe Flash CS Professional

Как можно подключить библиотеку SWC читайте здесь.
Скачать исходники урока можно здесь

Задание #1

Сделайте отображение загрузчика который заполняет полу прозрачную картинку как показано в этой флешке:

Здесь должна быть флешка. Установите Flash Player


Подсказка: добавьте на сцену две одинаковые картинки, одну над другой. Нижнюю сделайте прозрачной на 50%, а верхнюю спрячьте под маской. И меняйте размер маски в момент загрузки. Статья про работу с масками будет доступна в самое ближайшее время.

Если у вас что то не получилось или вы хотите получить оценку сделанному, прикладывайте в комментариях или отправляйте мне на почту архив с вашим проектом. Отправить письмо можно в разделе Контакты

Да прeбудет с вами Flash.
Serious Sam

Эту статью прочитали 2104 раз

Возникли вопросы по статье? Не стесняйтесь спрашивать в комментариях или любым другим способом на странице Контакты .

Присоединяйтесь к нам в социальных сетях: ВКонтакте , Twitter и Facebook
Понравилась статья? Буду благодарен если вы поделитесь ссылкой с друзьями:


Комментарии ВКонтакте:




Комментарии Facebook:




Комментарии WordPress:


  1. ivan

    пишу чтоб забрать свои слова обратно..очень полезный блог с очень полезными статьями! уже нашёл несколько статей которых не смог найти в другом месте!
    Спасибо!