Создание прелоадера (загрузчика) для флеш-ролика на As3
Важной частью любого flash-ролика солидных размеров является качественно сделанный прелоадер. Это та часть флешки, которую пользователь видит в первую очередь и поэтому ей стоит уделить немало внимания. В то же время мы не хотим, чтобы прелоадер весил больше за сам ролик, так что важно не перестараться. Стоит заметить, что в качестве прелоадера можно взять не только шкалу прогресса, к которой мы уже все привыкли, а любую качественную, но не тяжёлую, анимацию и, дописав заветное слово, "loading..." превратить её в оригинальный прелоадер.
В основном создание прелоадера касается flash-игр, flash-сайтов, то есть тяжёлых флеш-роликов. В простеньких баннерах использование прелоадера не оправдано. С нынешними скоростями интернета даже в некоторых играх кастомныйпрелоадер не оправдан. Но тем не менее, если у вы сделали красивый, стОящий проект, то заставлять пользователя смотреть на стандартный белый экран с точечками тоже не очень хорошо.
Кстати, кому интересно, исходный файл стандартного флешового прелоадера находится в папке с флешом: ...\Common\Configuration\ActionScript 3.0\rsls
Способов создания прелоадера много. Тут нельзя однозначно судить, какой из них правильный, а какой нет. Нужно использовать тот принцип, который удобен именно вам. Наверное, лучше всего было бы использовать два отдельных флеш ролика – один для прелоадера, а другой для контента. Но аниматору проще, когда всё в одном файле, поэтому мы разберём именно этот вариант. Рассмотрим линейный прелоадер:
Этот тип прелоадера самый простой и базируется на программном изменении свойства scaleX некоторого горизонтального длинного обьекта. Если у этой полоски нужно сделать скруглённые края, то целесообразно использовать маску (как мы и сделали). То есть, изменяя scale маске мы постепенно открываем нашу полоску прогресса.
Создадим новый пустой символ (Ctrl+F8) с именем preloader. Внутри него будем складывать графику для прелоадера. Для нашего линейного прелоадератаймлайн имеет следующую структуру:
fg - это тёмный ободок вокруг полосы загрузки:
mask - клип, который покрывает сверху всю полосу загрузки.
Этому клипу назначаем Instance name – barmask:
Дальше bar - это полоса загрузки, которая будет показываться при изменении размера маски:
Верхний слой mask превращаем в маску для данного слоя bar соответственно с начальным рисунком.
Следующий слой textсодержит классический динамический текст loading (можно написать что угодно, например "100%", текст меняется при запуске ролика на соответствующий процент). Назначаем этому тексту instance name txtloading:
И последний слой bg - это светлая подложка:
С графикой всё. Добавляем наш клип с прелоадером на сцену и назначаем instancename c_preloader.
Слоем выше в первом кадре пишем код:
stop();
var percent:Number; // процент загрузки
this.loaderInfo.addEventListener(Event.COMPLETE, loadComplete);
this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);
function loadComplete(e:Event) {
// загрузка завершена.удаляем события и перемещаемся на слудующий кадрthis.loaderInfo.removeEventListener(Event.COMPLETE, loadComplete);
this.loaderInfo.removeEventListener(ProgressEvent.PROGRESS, loadProgress);
gotoAndStop(2); // или play(); или nextFrame();
}function loadProgress(e:ProgressEvent):void {
// отношение загруженных байтов к общему колличествуpercent = e.bytesLoaded / e.bytesTotal;
// производим необходимые манипуляции с графикой прелоадераc_preloader.barmask.scaleX = percent;
c_preloader.txtloading.text = Math.floor(percent*100) + "%";
}
Переходим на следующий кадр. В нём мы должны разместить что-то поистине большое. Например, это может быть большая картинка, музыка или флеш игра:) Таймлайн должен выглядеть примерно так:
Теперь самая важная часть – тестирование ролика. Как проверить, что прелоадер работает правильно? Есть два варианта.
Первый – поместить в кадр чтото очень большое, експортировать fla и html файлы и загрузить их куда-то, например на dropbox, получить ссылку на html и протестировать в браузере. Проблема в том, что современные браузеры кешируют всё и вся, поэтому в следующий раз, после обновления страницы flash-ка будет грузиться быстрее. Также, если у вас большая скорость интернета, то размер контента во втором кадре должен быть очень внушительным.
Есть второй более простой способ. Во флеш есть возможность симулировать загрузку. Запустить её можно повторным нажатием Ctrl+Enter. На вкладке View/DownloadSettings можно выставить скорость загрузки:
Таким образом выставляем нужную скорость, жмём ещё раз ctrl+enter и, если всё сделано правильно, видим как полоска прелоадера медленно заполняется, а текст меняется на соответствующее процентное значение.
Автор урока: Андрей Барвинко
flash-animated.com
Скажите пожалуйста, этот прелоадер загружает только сцену или весь файл?
Мне кажется, было бы логичнее сначала удалить Listener для PROGRESS, а потом уже COMPLETE, внутри самой же функции для COMPLETE.
то есть не:
this.loaderInfo.removeEventListener(Event.COMPLETE, loadComplete);
this.loaderInfo.removeEventListener(ProgressEvent.PROGRESS, loadProgress);
а:
this.loaderInfo.removeEventListener(ProgressEvent.PROGRESS, loadProgress);
this.loaderInfo.removeEventListener(Event.COMPLETE, loadComplete);
Хотя может быть я и не прав. Поправьте, если что
Кстати, между словом "function" и названием самой функции не хватает пробела. Человек, который не разбирается в кодах и просто скопипастит его, может не найти ошибку.
Упс. В varpercent тоже ошибка. Должно быть:
var percent
Максим, поправила, спасибо за ваш зоркий глаз)
Класный урок! Кстати, видел зборку неплохих наборов прелоадеров для флеш роликов - http://flashmaster.org.ua/view_post.php?id=74. Думаю с ними можно не париться с дизайном прелоадера, а взять готовый.
Хороший урок)
Кстате, с кешированием можно бороться добавляя в конец адреса флешки
какую нибуть переменную и присваивать ей рандомное число
my.swf?do= тут рамдомное число