пятница, 17 мая 2013 г.

Как сделать простейший прелоадер для Флеш-игры

В найденных мною мануалах все очень сложно, нужно создавать 100 кадров, много лишних движений.

Простейший прелоадер спроится по следующей схеме:
1. В новом проекте сразу создаются все нужные кадры и именуются (preloader, menu, credits, rules, game и т.д.). Кадру прелоадера задается код: stop(); (чтобы не переходил к следующему кадру).
2. В кадре прелоадера рисуется полная полоса загрузки, какой она будет на 100 процентах (делайте прямоугольник без рамки!).
3. Жмем F8 - создаем новый клип. Затем F9 - переходим к коду клипа, пишем там следующее:
onClipEvent(enterFrame) {
    // Получаем значения размера файла и сколько байт загружено
    total = _root.getBytesTotal();
    loaded = _root.getBytesLoaded();
   
    // Вычисляем, сколько процентов загружено
    percents = loaded/total*100;
   
    // Пишем округленное значение в цифровой индикатор
    _root.percents_text.text = Math.round(percents);
   
    // Вычисляем текущую длину бара загрузки
    this._xscale = percents;
   
    if (total <= loaded) {
        _root.gotoAndPlay("menu");
    }
}

Что делает этот код:
- сначала получаем глобальные переменные общего размера файла и текущее количество загруженных килобайт.
- затем вычисляем в процентах текущий прогресс загрузки файла.
- далее - опционально, у меня это маленький динамический текст под полосой загрузки, показывающий прогресс в цифрах.
- ниже меняем размер нашего клипа по длине на текущую величину прогресса.
- самое нижнее условие в if - это проверка, если размер загруженного файла больше или равен размеру файла, то переходим к кадру menu.
- onClipEvent(enterFrame)- означает, что пока кадр работает, код данного клипа будет активен. Если бы событие было (load), то картинка была бы статичной, т.к. Флеш выполнил бы код только один раз при открытии флешки. А так он каждую секунду выполняет его, пока прелоадер не сделает перенаправление на другой кадр.

Если Вы хотите добавить цифровой индикатор, то нужно поместить на поле кадра Dynamic text, дать ему имя percents_text и задать align по-центру, нужный цвет, размер и местоположение.

Пример:
Дополнительно:
Можно прелоадеру добавить всякие красивости - рамку, окаймляющую полосу загрузки (как на примере выше), наложить полупрозрачные полосы или полосы цвета фона для "деления" полосы на "кусочки" или косые ромбы.

Как сделать рамку - рисуем точно такой же прямоугольник, но с рамкой и больше на 2 пикселя по ширине и высоте. Затем наводим на полосу загрузки и жмем Ctrl+стрелка_вниз, чтобы новая фигура "ушла" под бар загрузки, тогда возникает эффект, будто этот бар цельный и "наполняется" полосой загрузки.

Полоски, блики делаются аналогично, но остаются сверху бара, а им задается альфа-прозрачность (панель Color) нужной величины (например, 10%).

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

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