[ главная ]   [ рейтинг статей ]   [ справочник радиолюбителя ]   [ новости мира ИТ ]



Ответов: 0
25-02-12 07:01







   Web - программирование
PHP


ASP






XML



CSS

SSI





   Программирование под ОС











   Web - технологии








   Базы Данных









   Графика






Данные




Web - технологии / Flash /

Создание процентного показателя загрузки

Шаг 1

Наличие показателя закрузки (прелоадера) сегодня является просто необходимым для клипов, объемом от 200 килобайт. Прелоадер предотвращает начало проигрывания клипа до того, как он полностью загрузится, иначе клип может некоректно отображаться у пользователя. В этом уроке вы научитесь создавать показатель закрузки, для начала самый простой в плане графики, но все они делаются по одному принципу, поэтому стиль загрузчика в ваших проектах будет зависить только от вас. Для изучения этого урока, вам совсем не нужны какие-то глубокие познания в ActionScript, урок достаточно простой, и понять его может даже человек, изучающий флеш всего второй день.

Как это работает?

Идея работы прелоадера очень проста: мы используем возможности ActionScript для того, чтобы узнать, сколько байт клипа уже загружено у пользователя, и сколько их всего. А потом просто сравниваем -- если заргруженных меньше, чем всего, то значит клип еще не загрузился, а если равное количество, то мы можем уже стартовать просмытривать его. Вдобавок ко всему, мы привяжем к коду графический индикатор загрузки, который покажет, сколько % загружено.

Шаг 2

Начнем с того, что создадим новый клип со стандартными размерами сцены и частотой смены кадров.

Шаг 3

Настроим Timeline

Создадим новый слой на timeline'e, переименуем его в Actions, а слой, который уже был - в Contents. Это поможет нам не запутаться: графика у нас будет на первом слое, а код на втором. Также это является хорошим тоном среди флешеров, ведь если кто-то кроме вас будет изучать исходник, ему тоже будет значительно легче понять, где что.

Правый клик мыши на линии со слоем Actions и выбираем Insert Keyframe, или просто F6. Теперь правый клик на Contents и выбираем Insert Frame (F5). У нас получается, что на нижнем слое второй кадр ничем не будет отличаться от первого, т.е. все изменения на первом повлекут за собой изменения на втором, а на верхнем второй кадр никак не зависит от первого. Вообще советую не злоупотреблять Keyframe там, где можно обойтись обычными Frame, ведь чем больше ключевых кадров, тем больше вес мувика.

Шаг 4

Создание индикатора

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

Шаг 5

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

Шаг 6

Теперь преобразуем рамку в мувиклип. Жмем F8 на клавиатуре, в появившемся окошке выбираем Movie clip и называем наш символ как вам нравится, мне, например, нравится Outline :)

Шаг 7

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

Шаг 8

Небольшой ньюанс, в котором мы должны убедится, состоит в том, что рамка должна быть вокруг прямоугольника, и ни в коем случае не налазить на него. Шанс этого очень мал, потому что мы создали рамку первой и не двигали ее, однако всякое может быть, так что лучше проверить сейчас, чем потом мучатся с ней. Если рамка и прямоугольник не совпадают, опять берем Selection Tool и двигаем стрелками на клавиатуре рамку.

Шаг 9

Теперь последний, завершающий шаг: выделяем наш прямоугольник и открываем панель Properties и задаем ему instance name - bar_mc. Это нам необходимо для того, чтобы ActionScript понял, с каким именно ему объектом делать команды, которые мы сейчас ему зададим.

Шаг 10

Создание поля с %

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

Шаг 11

Добавление 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, или нажимаем Ctrl+Enter дважды.




Комментарии

 Ваш комментарий к данному материалу будет интересен нам и нашим читателям!



Последние статьи: Web - технологии / Flash /

Flash: 99% Proof
26-04-2010   

В прошлом году я забил тревогу в своей статье Рак Web-а под названием Flash. Я выступал против многомиллионных Flash-сайтов и дизайнеров, их создававших... подробнее

Кол. просмотров: общее - 3118 сегодня - 0

Flash неприемлем на 99%
26-04-2010   

Вкратце: Несмотря на то, что мультимедиа прокладывает себе дорогу в Web, современная технология Flash ухудшает удобство пользования Web по трем причинам: она способствует появлению плохого дизайна, вступает в противоречия с фундаментальными принципами взаимодействия пользователя с Web, и поглощает ресурсы, которые могли бы быть использованы на улучшение содержания самого сайта... подробнее

Кол. просмотров: общее - 3142 сегодня - 0

Flash - что может быть хуже?
26-04-2010   

С самого первого момента, когда я познакомился с Flash, меня не покидало ощущение, что где-то я уже это видел. Что-то до боли знакомое я видел в каждом навороченном Flash-сайте с бегающими менюшками, разворачивающимися кубиками, летающим фоном, выпрыгивающими текстами и мельтешащими фотографиями... подробнее

Кол. просмотров: общее - 3442 сегодня - 0

Простой предлоадер
26-04-2010   

Открываем flash, и в первом фрейме пишем: Загрузка и ставим точку, желательно, чтобы размер шрифта был достаточно большой... подробнее

Кол. просмотров: общее - 3156 сегодня - 0

Создание шлейфа мыши
26-04-2010   

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

Кол. просмотров: общее - 3087 сегодня - 1



  WWW.COMPROG.RU - 2009-2012 | Designed and Powered by Zaipov Renat | Projects