Link:INB Home|INB English| INB русский язык|INB العربية|INB Türkiye|INB فارسی|INB Español|INB Français|INB Português|INB Deutsch|INB 國語|INB 中文|INB 日本语|INB 한국어|INB ภาษาไทย|INB tiếng Việt||Уроки Flash Preloader - показатель загрузки объекта
INB русский язык Форум
Добро пожаловать! inbforum.COM Интернет без границ Форум Здесь вы можете обсудить с друзьями по всему миру прений, приходите и присоединяйтесь к нам! Постоянный имя: Ruinbforum.forumotion.com
INB русский язык Форум

Добро пожаловать! inbforum.COM Интернет без границ Форум Здесь вы можете обсудить с друзьями по всему миру прений, приходите и присоединяйтесь к нам! Постоянный имя: Ruinbforum.forumotion.com


Вы не подключены. Войдите или зарегистрируйтесь

《《《《《《《上一页INBforum   Перейти вниз

上一页INBforum》》》》》》》Предыдущая тема Следующая тема Перейти вниз  Сообщение [Страница 1 из 1]

1 Уроки Flash Preloader - показатель загрузки объекта в Пт Окт 01, 2010 9:49 am

Admin

avatar
Admin
Как это работает?
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]

Идея работы прелоадера очень проста: мы используем возможности ActionScript для того, чтобы узнать, сколько байт клипа уже загружено у пользователя, и сколько их всего. А потом просто сравниваем -- если загруженных меньше, чем всего, то значит клип еще не загрузился, а если равное количество, то мы можем уже стартовать просмотр. Вдобавок ко всему, мы привяжем к коду графический индикатор загрузки, который покажет, сколько % загружено(в удобном для визуального восприятия виде).
Preloader а зачем и нужен ли он?
Естественно нужен, и так аргументы:
1-Прелоадер предотвращает начало проигрывания клипа(или объекта, интересующего нас) до того, как он полностью загрузится, иначе клип может некорректно отображаться у пользователя.
2-При отсутствии индикатора загрузки сложно понять:а продолжение то есть?(если это сайт то пользователь может не дождаться появления загружаемой части)
Если Вы посчитали выше перечисленное - вескими аргументами, то продолжим, но хочу сразу оговориться,мы рассмотрим общий случай,простой с точки графики и программирования.Но зная принципы работы прелоадера, уже Ваше личное дела на сколько сложной будет графика принцип остаётся тем же.
(В уроке не описано как открыть Flash,создать, редактировать файл и т.д. надеюсь все знают, если нет, то по заявкам - будут уроки.)
Делай РАЗ
Начнем с того, что создадим новый клип со стандартными размерами сцены и частотой смены кадров.
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]

Делай ДВА
Настроим Timeline
Создадим новый слой на timeline'e, переименуем его в Actions, а слой, который уже был - в Contents. Это поможет нам не запутаться(да и просто это "хороший тон"): графика у нас будет на первом слое, а код на втором.
Правый клик мыши на линии со слоем Actions и выбираем (Вставить ключевой фрейм)Insert Keyframe, или просто F6. Теперь правый клик на Contents и выбираем (Вставить фрейм)Insert Frame (F5). У нас получается, что на нижнем слое второй кадр ничем не будет отличаться от первого, т.е. все изменения на первом повлекут за собой изменения на втором, а на верхнем второй кадр никак не зависит от первого. Вообще советую не злоупотреблять Keyframe там, где можно обойтись обычными Frame, ибо чем больше ключевых кадров, тем больше вес мувика.
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]

Делай ТРИ
Создание индикатора
Поскольку графика у нас на слое Contents, то и графический индикатор загрузки мы будем рисовать на этом слое. Один раз кликаем на нем, и выбираем Rectangle Tool. С помощью этого инструмента рисуем по центру сцены прямоугольник, как на рисунке ниже.
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]

Делай Чатыри
Теперь нам необходимо перевести наш прямоугольник в мувиклип, чтобы выполнять с ним действия через ActionScipt. Нам нужно разделить заливку рамку вокруг нее. Для этого используем Selection Tool и выделяем ТОЛЬКО РАМКУ вокруг бара.
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]

Делай Пять
Теперь преобразуем рамку в мувиклип. Жмем F8 на клавиатуре, в появившемся окошке выбираем Movie clip и называем наш символ как вам нравится(в данном случае - Outline )
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]

Делай Шесть
Теперь выделяем сам прямоугольник с помощью того же Selection Tool, жмем F8 и видим уже знакомое нам окошко. Нам нужно изменить Registration Point(регистрация), т.е. положение, из которого начинает "рости" наш прямоугольник. Для этого выбираем левую сторону квадрата в окошке Conver to Symbol, как на рисунке ниже. Также выбираем (Фильм клип)Movie clip, называем Bar.
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]

Делай Семь
Небольшой нюанс, в котором мы должны убедится, состоит в том, что рамка должна быть вокруг прямоугольника, и ни в коем случае не налазить на него. Шанс этого очень мал, потому что мы создали рамку первой и не двигали ее, однако всякое может быть, так что лучше проверить сейчас, чем потом мучатся с ней. Если рамка и прямоугольник не совпадают, опять берем Selection Tool и двигаем стрелками на клавиатуре рамку.
Делай Восемь
Теперь последний, завершающий шаг: выделяем наш прямоугольник и открываем панель Properties и задаем ему instance name - bar_mc. Это нам необходимо для того, чтобы ActionScript понял, с каким именно ему объектом делать команды, которые мы сейчас ему зададим.
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]

Делай Девять
Создание поля с %
Это один из простейших шагов, просто выбираем Text Tool и созадем небольшое текстовое поле под прелоадером. В Properties измените Text Type на Dynamic и задайте instance name - loader_txt. Шрифт и размер можете поставить любой, я выбрал to _sans размером 12px черного цвета.
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]
[Вы должны быть зарегистрированы и подключены, чтобы видеть это изображение]

Делай Одиннадцать
Добавление ActionScript
Переходим на первый слой Actions. Идем на ВТОРОЙ кадр и добавляем на панель Action следующий код:

if (_root.getBytesTotal() != _root.getBytesLoaded()){

gotoAndPlay(1);

}

bar_mc._xscale=(_root.getBytesLoaded()/_root.getBytesTotal())*100;

loader_txt.text=Math.round((_root.getBytesLoaded()/_root.getBytesTotal())*100)+"%";


Первая часть кода

if (_root.getBytesTotal() != _root.getBytesLoaded()){

gotoAndPlay(1);

}

проверяет, сколько байт загружено у пользователя и сравнивает с тем, сколько есть на самом деле. Если Значения не равны (!=), то возвращаемся на первый кадр. Далее мы растягиваем прямоугольник на столько процентов, сколько загружено:

bar_mc._xscale=(_root.getBytesLoaded()/_root.getBytesTotal())*100;

и задаем текстовому полю процентное значение + "%":

loader_txt.text=Math.round((_root.getBytesLoaded()/_root.getBytesTotal())*100)+"%";

Все, наш прелоадер готов, теперь все содержимое мы можем размещать с третьего кадра. Для примера разместим на третьем кадре картинку большого веса и проверим работу загрузчика (File > Import > Import to Stage и выбираем картинку). Теперь жмем Ctrl+Enter и имитируем загрузку, идя View > Simulate Download, (важно заходим в следующий пункт контекстного меню, который позволит выбрать скорость загрузки, например: 14.4(1.2Kb/s))иначе Вы не успеете увидеть свой прелоадер, загрузится сразу картинка.]

Посмотреть профиль http://ru.inbforum.com

上一页INBforum   Перейти вниз

上一页INBforumПредыдущая тема Следующая тема Вернуться к началу  Сообщение [Страница 1 из 1]

Права доступа к этому форуму:
Вы не можете отвечать на сообщения

Copyright ©2009-2010 LTD Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

IT:SINGLESERVGoogle谷歌翻译TranslateFORUMSOFTLAYERGoogle谷歌广告联盟AdSenseAsia

 

Создать форум на Forum2x2 | © PunBB | Бесплатный форум поддержки | Контакты | Сообщить о нарушении | Blog2x2