Базы данныхИнтернетКомпьютерыОперационные системыПрограммированиеСетиСвязьРазное
Поиск по сайту:
Подпишись на рассылку:

Назад в раздел

Как сделать прелоадер в виде круговой диаграммы

div.main {margin-left: 20pt; margin-right: 20pt}

Как сделать прелоадер в виде круговой диаграммы

В этом уроке я покажу как создать такой прелоадер, который во первых: отличался бы от других, а во вторых: был бы универсален и годился для повторного использования в разных клипах. Плюс ко всему некоторые маленькие хитрости и ActionScript. Конечный результат будет выглядеть следующим образом:

Процент загрузки показан круговой диаграммой и числом в ее центре. Черный сектор — сколько загружено, белый — сколько осталось.
НУ И ЧТО ЗДЕСЬ СЛОЖНОГО…
Да собственно говоря ничего. Прелоадеров было создано столько, что и не пересчитать. Вот и еще один… Но это во первых всего лишь урок, а во вторых, здесь есть маленькая хитрость. Как узнать процент загрузки клипа знают наверно все: благодаря методам MoviecClip.getBytesLoaded() и MoviecClip.getBytesTotal(). Первый метод возвращает число загруженных байт клипа, второй — общий размер клипа в байтах. Разделив первое на второе получим процент загрузки. А вот как показать этот процент в виде круговой диаграммы? Об это дальше.
РИСУЕМ ДИАГРАММУ
Пускай наша диаграмма будет черного цвета диаметром 150 пикселей. Создадим новый клип в библиотеке символов, назовем его Sector, нарисуем в нем черную окружность диаметром 150 пикселей, выровняем ее по центру, разделим пополам, получим черный сектор.

Сектор еще не диаграмма, создаем новый символ под названием Gauge, делаем в нем два слоя. Верхний слой называем Mask, и подручными средствами рисуем на нем дугу, которая служит левой половиной круга диаграммы, на нижний слой помещаем символ Sector.

Потом слой Mask делаем маской, а слой Sector — маскируемым. Продлеваем этих два слоя на 50 фреймов, ставим на слое Sector на 51-м фрейме ключевой фрейм. В первом фрейме этого же слоя задаем Motion Tweening таким образом, чтобы символ Sector совершил половину оборота против часовой стрелки. Теперь если посмотреть на символ Gauge в движении видно, как постепенно сектор поворачиваясь попадает под маску и становиться видимым все больше и больше.
Добавляем еще два слоя с названиями Mask и Sector аналогичных предыдущим двум, но с первым ключевым фреймом в позиции 51, а последним — 101 и зеркальным отражением сектора и маски относительно первых двух. Так же Теперь при движении от первого фрейма к сто первому сектор прочертит диаграмму полностью.

ЭТО ЕЩЕ НЕ ПРЕЛОАДЕР
Да, но половина работы уже сделана. Теперь сделаем сам прелоадер. Создадим символ, и назовем его Preloader. В нем создадим три слоя с названиями Actions, Label и Gauge, каждый по три фрейма. На слой Gauge поместим символ Gauge и отцентруем его. На палитре "Instance" зададим ему имя gauge. На слой Label добавим текстовое поле такой ширины, чтобы в него вписалось три цифры. Именно здесь будет показан процент загрузки. На палитре "Text Options" укажем, что это динамический текст и ему соответствует переменная label. Так же необходимо указать, какие именно символы из того шрифта, что используется этим текстовым полем будут внедрены в клип. В нашем случае это цифры.
Теперь само важное — "оживим" прелоадер. Поработаем со слоем Actions. Во все три фрейма этого слоя впишем скрипты.
Для первого фрейма:
_root.stop ();
var percents = 0.0;
Для второго фрейма:
if (_root.getBytesLoaded () == _root.getBytesTotal ()) {
percents = percents + 5.0;
if (percents > 100.0) {
percents = 100.0;
}
} else {
percents = Math.floor (_root.getBytesLoaded () / _root.getBytesTotal () * 100.0);
}
gauge.gotoAndStop (percents + 1);
label = percents;
Для третьего фрейма:
if (percents < 100.0) {
gotoAndPlay (2);
} else {
_visible = false;
_root.play ();
stop ();
}
Первый скрипт остановит весь клип, в котором находится прелоадер (_root).
Второй скрипт определит процент загрузки. Обратите внимание на строку gauge.gotoAndStop (percents + 1) —здесь находится хитрость. Для того, чтобы диаграмма показала нужный процент, ее надо перевести на соответствующий фрейм.
В случае, если загрузка завершилась, третий скрипт спрячет прелоадер и запустит основной клип (_root). В противном случае прелоадер перейдет ко второму фрейму и повторится предыдущий скрипт.

МОНТИРУЕМ ПРЕЛОАДЕР В КЛИП
Ну вот, прелоадер готов, теперь его надо испытать. Для этого перейдем в главную сцену основного клипа. На любой слой в первый его фрейм поместим наш прелоадер. На любой другой слой где ни будь не в первый фрейм (обязательно после прелоадера) поместим что ни будь увесистое, килобайт на сто. Испытаем клип — нажмем Ctrl-Enter. В меню Debug укажите скорость загрузки, и нажмите Ctrl-Enter еще раз. Теперь мы увидим прелоадер в действии.
Если надо будет использовать прелоадер в другом клипе, откройте клип с этим уроком как библиотеку и просто перетащите прелоадер из библиотеки в нужный клип на чистый слой в первый фрейм.

lexxx@tut.by
http://www.cna.f2s.com/










Автор: © lexxx
Источник: http://www.flasher.ru


  • Главная
  • Новости
  • Новинки
  • Скрипты
  • Форум
  • Ссылки
  • О сайте

    • Норникель

      Узнайте свежие новости о компании Норникель

      www.dw.com




    Emanual.ru – это сайт, посвящённый всем значимым событиям в IT-индустрии: новейшие разработки, уникальные методы и горячие новости! Тонны информации, полезной как для обычных пользователей, так и для самых продвинутых программистов! Интересные обсуждения на актуальные темы и огромная аудитория, которая может быть интересна широкому кругу рекламодателей. У нас вы узнаете всё о компьютерах, базах данных, операционных системах, сетях, инфраструктурах, связях и программированию на популярных языках!
     Copyright © 2001-2021
    Реклама на сайте