Делаем: loading 56%… 57%….69%….

Автор: Tarus Среда, Апрель 4th, 2012 Нет комментариев

Рубрика: Флеш-технологии

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

Предполагается, также, что пользователь уже имеет
первоначальное представление об инструментах создания
объектов и рисовании в редакторе.

Начнем с создания нового документа.

1. Открываем FLASH5
2. Сохраняем новый файл с именем «preloader.fla»
3. Нарисуем прямоугольник, который будет служить нам фоном для текстового поля.
4. Создадим текстовое поле.
(для этого выберем в панели инструментов инструмент «text tool»,
нарисуем им прямоугольник некоторой длины, чтобы в него приблизительно поместился
нужный текст шириной в 4-6 символов.
После сделаем на поле правый клик мыши и в выпадающем меню выберем
panels>text options.
5. Окошке «Text Options» мы заменим в выпадающем меню «static text» на «dynamic text»
и в поле «Variable» впишем название — text

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

6. Далее выделим все объекты в сцене (CNTR+A) и сделаем их одним символом (F8>Movie CLip, просто Мувик)
7. На полученном Movie Clip-e сделаем правый клик мыши и выберем «Actions»
8. Вписываем код.

примечание: для того, чтобы вводить вручную код, необходи режим эксперта (expert mode)
для этого надо щелкнуть мышкой в окно и нажать CNTRL+E.

сам код можно скопировать отсюда:
//————————————-
onClipEvent (load)
{
tot = _root.getBytesTotal();
}
onClipEvent (enterFrame)
{
loaded = _root.getBytesLoaded();
percent = loaded/tot*100;
text=Math.floor(percent);
text=text+»%»
if(loaded >= tot){_root.gotoAndStop(2)}
}
//————————————-

пояснения к коду:

весь код внутри клипа заключается в фигурные скобки { — открывающая, } — закрывающая
————————
onClipEvent (load) — событие(event) клипа которое срабатывает в момент его полного появления в сцене
tot — объявляем новую переменную
————————
_root — означает, что обращение к остальным действиям в строке идет через основную сцену (_root)
————————
getBytesTotal() — функция, которая выдаст нам общее количество байтов, где?
…а там где напишем
… если мы пишем _root.getBytesTotal(), значит
мы получим общее количество байтов всего _root-а, то есть полный размер нашего ролика.

————————
onClipEvent (enterFrame) — событие(event) клипа которое обрабатывается каждый раз когда проигрывается новый кадр (связано с

ФПС, по умолчанию=12 раз в секунду, изменить можно, нажав CNTRL+M)
————————

loaded — создаем переменную, которая будет считать загруженные байты и присваиваем ей значение…
_root.getBytesLoaded() — функция, выдаст нам количество уже загруженных байтов
————————
percent = — сделаем еще одну переменную, которая будет отвечать за проценты
————————
loaded/tot*100; — тут мы просто высчитаем процент уже загруженного от общего количества (школьная формула).
————————
text=Math.floor(percent);
text — переменная-имя текстового поля, которое уже лежит внутри нашего мувика.

Math.floor(percent) — функция, округляет, заключенное в скобки (percent) значение до ближайшего целого
(например: Math.floor(2.5) = 2)
————————
text=text+»%» — добавляем к переменной text еще один символ «%» в результате получим круглое число «percent» + «%»
————————
и завершит наш код условие

if(loaded >= tot){_root.gotoAndStop(2)}

[ if ] — если

[ loaded ]- уже загруженные байты

[ >= ] — больше или равны

[ tot ] — общему количеству байтов

[ gotoAndStop(2) ] — то переходим ко второму кадру

[ _root.gotoAndStop(2) ] — то переходим ко второму кадру в основной сцене.
————————

9. Ну, а теперь мы воткнем этот самый 2 кадр в основную сцену (выделим в линейке кадров 2 кадр и нажмем F7)

10. Поместим в него какую-нибудь фотографию, к примеру, для увеличения веса всего ролика.

11. Протестируем прелоадер.

Нажимаем CNTRL+ENTER один раз
Нажимаем CNTRL+ENTER второй раз

процесс пошел, ждем…

и теперь, как только прелоадер добежит до 100%, он перепрыгнет на 2 кадр сцены, где нас уже ждет прекрасная муза (см. исходник) :) .

в добавок:

Нажимаем CNTRL+B
Теперь видим Bandwidth — профиль в котором видно покадрово, сколько всего весит каждый кадр сцены.
А также видны бегущие проценты загрузки.

В меню debug>customize выставим подходящую нам скорость загрузки для теста.
И полюбуемся немного в тишине.

————————
Полученный нами в результате всего, мувик можно просто копировать в другие документы и он должен также исправно работать.
————————
Небольшая поправка к коду:
для корректной работы прелоадера
необходимо все же писать не
loaded == tot (как на рисунке)
а
loaded >= tot (см. код)

————————

Автор: Уильям Бредбери

E-mail: willyam@newmail.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты