Здравствуйте, гость ( Вход | Регистрация )

Свернуть

Новости

Форум Лучшее из галереи Уроки и статьи
07.12.2015 Выставочный зал: кошарик - персональная выставка
31.08.2015 Интересные ссылки для рисовальщиков
21.01.2015 Выставочный зал 2: Игрушки Олеси Гавриленко

27.12.2014 Выставочный зал: кошарик - персональная выставка
17.11.2014 Дуэль "Рыбки" - победитель Лисичка
05.11.2014 Конкурс иллюстраций "Снежная королева", до 31 января
30.10.2014 Дуэль "Рыбки" до 16 ноября
14.07.2014 Мастер-класс Мини-мишка в технике фелтинга
26.05.2013 Ау! Мы ищем таланты! – приглашаем модераторов!
Как мышка в листик солнышко поймала...
tn_gallery_5018_735_328924.jpg
Осенний натюрморт
Golubeva N
06.01.2016 Виртуальный Музей: Русский живописец Василий Дмитриевич Поленов
28.12.2015 Виртуальный Музей: Нидерландский живописец Квентин Массейс
16.12.2015 Виртуальный Музей: Итальянский живописец Франче́ско Айец
17.11.2015 Виртуальный Музей: Луи Анкетен (Louis Anquetin)
11.11.2015 Виртуальный Музей: Русский живописец Алексей Иванович Корзухин
Файловый архив
06.09.2013 Прочее: Файлы к уроку "Чайная церемония"
05.09.2013 Журнал Art Tower: ArtTower Magazine #8
16.05.2013 Adobe Photoshop: Кисти: Reid Southen brush
16.05.2013 Adobe Photoshop: Кисти: Goro Fujita brush
16.05.2013 Adobe Photoshop: Кисти: Кисти для рисования в Photoshop
Блоги Новости в цифровом мире и мире дизайна
02.12.2014 Дама с каменьями: Вести с крыши 2
08.11.2014 Timenews: Вассерман: прежняя модель мировой экономики исчерпала себя
06.11.2014 Дама с каменьями: Приятные вести с крыши))) от Гаргула)
02.11.2014 Spell: Книги Дж. Кэмерон
22.10.2014 Vjaz: от ФУ до МА
25.11.2015 Комментарий от Foxx в Costa Rica Adventure Divers, Логотип для компании и рисунок на майку (maria_mer)
18.11.2015 Комментарий от maria_mer в Spellforce - майка, для фанов игры (maria_mer)
18.11.2015 Комментарий от maria_mer в Белая книга. Целитель - любительский прект (maria_mer)
09.04.2015 Комментарий от Romana в Книги Дж. Кэмерон (Spell)
08.04.2015 Комментарий от Romana в Я решил вернуться... (Элбирет)
16.03.2015 ФОТОФОРУМ-2015
01.01.2015 ARQUTE.com и ArtTalk.ru закрываются
19.01.2017 Конкурс дизайна логотипов
26.12.2016 ру/Ководство: О творческом развитии
14.10.2016 ру/Ководство: Разнообразие

2 страниц V   1 2 >  
Добавить ответ в эту темуОткрыть тему
> Flash-8(Preloader)"прелоадер", Preloader-показатель загрузки объекта
V
ache666
сообщение 7.01.2008 - 16:22
Сообщение #1


Проезжий
*


Группа: Жители
Сообщений: 48
Регистрация: 6.01.2008
Из: Москва
Пользователь №: 6949



Симпатии:  3  


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


Идея работы прелоадера очень проста: мы используем возможности 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))иначе Вы не успеете увидеть свой прелоадер, загрузится сразу картинка.


Сообщение отредактировал Des - 18.02.2008 - 21:43


--------------------
-=UnitedChicocosF*ckingPolice=-
-=Toy'S Riot=-
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
Rescan
сообщение 7.01.2008 - 16:29
Сообщение #2


постоялец, живу напротив библиотеки
*******

2 место3 место3 место2 местоМеткий стрелокКаляки-Маляки, 1 местоЗвезда писателя III степени3 место2 место1 место
За вклад в развитие ArtTower.ru
Группа: Почетные граждане
Сообщений: 9283
Регистрация: 8.05.2006
Из: Москва
Пользователь №: 14
Галерея Блог


Симпатии:  312  


ache666, а для какой программы урок?


--------------------
Ищу ум! Можно небольшой,но срочно. Дочь Страшилы. P.S. Опилки не предлагать. Своих некуда девать.

Записки кота Мура ЖЖ
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
Svetilkin
сообщение 7.01.2008 - 16:55
Сообщение #3


"...я не волшебник......"
*******

Меткий стрелокЗа вклад в развитие ArtTower.ru
Группа: Почетные граждане
Сообщений: 5978
Регистрация: 8.05.2006
Из: Россия
Пользователь №: 3
:)
Блог


Симпатии:  238  


Rescan, это Flash


--------------------
— Arttower.ru в соц.сетях!
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
ache666
сообщение 7.01.2008 - 16:58
Сообщение #4


Проезжий
*


Группа: Жители
Сообщений: 48
Регистрация: 6.01.2008
Из: Москва
Пользователь №: 6949



Симпатии:  3  


тема изменена по просьбе участника форума


--------------------
-=UnitedChicocosF*ckingPolice=-
-=Toy'S Riot=-
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
Olka
сообщение 7.01.2008 - 19:38
Сообщение #5


пробегающая
*****

За вклад в развитие ArtTower.ru2 место3 местоЗа вклад в развитие ArtTower.ru3 место
Группа: Почетные граждане
Сообщений: 1935
Регистрация: 28.10.2006
Из: Одесса
Пользователь №: 1330
просто кошка
Галерея Блог


Симпатии:  168  


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


Этот последний пункт и не получился biggrin.gif , в моем Flash 8, такой функции View > Simulate Download нет. huh.gif Хороший урок smile.gif , лови + , но... для меня пока бесполезный, к сожалению. ax.gif


--------------------
То, что нас не убивает, делает нас сильнее. Увлеклась рукоделием, бываю не часто.
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
jokerom
сообщение 7.01.2008 - 19:58
Сообщение #6


Зажиточный Горожанин
*****

2 место1 место2 место1 место1 место3 место1 место1 местоМеткий стрелок3 место
Меткий стрелокЗа вклад в развитие ArtTower.ruМеткий стрелокМеткий стрелокЗа вклад в развитие ArtTower.ru
Группа: Почетные граждане
Сообщений: 2552
Регистрация: 30.09.2006
Из: Москва
Пользователь №: 974
Галерея


Симпатии:  167  


И еще одно маленькое дополнение для обладателей Flash SC3:
- приведенные выше скрипты работают в любом ActionScript кроме ActionScript 3.0
и на третий ключевой кадр необходимо добавить код - stop();,
чтобы весь флеш ролик не превратился в бесконечный цикл из трех ключевых кадров.

Прикрепленное изображение Прикрепленное изображение

Сообщение отредактировал jokerom - 7.01.2008 - 20:04


--------------------
влюбленный апельсин
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
ache666
сообщение 7.01.2008 - 20:00
Сообщение #7


Проезжий
*


Группа: Жители
Сообщений: 48
Регистрация: 6.01.2008
Из: Москва
Пользователь №: 6949



Симпатии:  3  


Теперь жмем Ctrl+Enter и имитируем загрузку, идя View > Simulate......в появившемся окне с привью, смотрим по внимательнее diablo.gif и не вводим людей в заблуждение... tong2.gif
если уж там нет, то не быть мне больше боевым имперским гномом...


--------------------
-=UnitedChicocosF*ckingPolice=-
-=Toy'S Riot=-
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
Olka
сообщение 7.01.2008 - 20:21
Сообщение #8


пробегающая
*****

За вклад в развитие ArtTower.ru2 место3 местоЗа вклад в развитие ArtTower.ru3 место
Группа: Почетные граждане
Сообщений: 1935
Регистрация: 28.10.2006
Из: Одесса
Пользователь №: 1330
просто кошка
Галерея Блог


Симпатии:  168  


Все работает!!!! heart.gif Большой сенкс!!!! kiss.gif

jokerom, kiss.gif drinks.gif


--------------------
То, что нас не убивает, делает нас сильнее. Увлеклась рукоделием, бываю не часто.
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
ache666
сообщение 7.01.2008 - 23:34
Сообщение #9


Проезжий
*


Группа: Жители
Сообщений: 48
Регистрация: 6.01.2008
Из: Москва
Пользователь №: 6949



Симпатии:  3  


jokerom, благодаря за своевременную коррекцию.


--------------------
-=UnitedChicocosF*ckingPolice=-
-=Toy'S Riot=-
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
Des
сообщение 8.01.2008 - 05:14
Сообщение #10


тритониус
****

Звезда писателя I степениЗа вклад в развитие ArtTower.ru
Группа: Почетные граждане
Сообщений: 728
Регистрация: 9.12.2007
Из: Москва \ Питер
Пользователь №: 6553
дышу под водой
Галерея Блог


Симпатии:  68  


Я бы еще добавил вариант аналогичный по функциональности, но более универсальный.

А именно: вместо того, чтобы масштабировать bar_mc программно, я обычно делаю этот bar_mc мувиклипом на 100 фреймов (в данном случае это будет просто Motion Tween или Shaping Tween от сжатой полоски до ее полного размера), и stop(); на первом кадре в нем. Тогда код управления прогресс-баром изменится на следующий:

CODE

bar_mс.gotoAndStop(Math.round(_root.getBytesLoaded() / _root.getBytesTotal()) * 100);


Для данного простейшего прогресс-бара итог не отличается ничем, но если мы захотим сделать прелоадер поинтереснее - то такой способ позволит нам делать/рисовать/анимировать в bar_mc все что угодно.

Сообщение отредактировал Des - 8.01.2008 - 05:15


--------------------
"Высшая мудрость - умение разговаривать с людьми" ((с) Ямамото Цунэтомо (Дзётё), "Хагакурэ")
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
ache666
сообщение 8.01.2008 - 17:02
Сообщение #11


Проезжий
*


Группа: Жители
Сообщений: 48
Регистрация: 6.01.2008
Из: Москва
Пользователь №: 6949



Симпатии:  3  


ооо отлично.
искренне советую прислушать особенно:"Для данного простейшего прогресс-бара итог не отличается ничем, но если мы захотим сделать прелоадер поинтереснее - то такой способ позволит нам делать/рисовать/анимировать в bar_mc все что угодно."


--------------------
-=UnitedChicocosF*ckingPolice=-
-=Toy'S Riot=-
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
HEROINa
сообщение 27.05.2008 - 22:50
Сообщение #12






Группа: Туристы
Сообщений: 2
Регистрация: 27.05.2008
Из: Donetsk
Пользователь №: 8862



Симпатии:  0  


А можете объяснить новичку, как связать предлоадер с сайтом? Как его (index.php) "засунуть" в третий кадр? ))

Сообщение отредактировал HEROINa - 27.05.2008 - 23:22


--------------------
Natura non facit saltus!
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
Des
сообщение 28.05.2008 - 21:56
Сообщение #13


тритониус
****

Звезда писателя I степениЗа вклад в развитие ArtTower.ru
Группа: Почетные граждане
Сообщений: 728
Регистрация: 9.12.2007
Из: Москва \ Питер
Пользователь №: 6553
дышу под водой
Галерея Блог


Симпатии:  68  


Цитата(HEROINa @ 27.05.2008 - 23:27) *
Как его (index.php) "засунуть" в третий кадр? ))


очевидно, имеется в виду не прелоадер, а заставка к сайту? В таком случае - есть функция getURL("link"[,"target"]);
если, напр., нужен переход на index.php и чтобы index.php открылся в том же окне при нажатии на кнопку, то:
(предположим, что экземпляр кнопки в сцене есть и его имя "btn1")

CODE
btn1.onRelease = function() {
getURL("index.php");
}


Можно вызывать функцию getURL() с помощью таймера - тогда через некоторое время после проигрывания заставки будет совершен переход на нужную страницу. Напр., создать (Ctrl + F8) и поместить на сцену в последний кадр (который надо сделать ключевым - F6) пустой movieclip, добавить в него количество кадров, соответствующее нужному промежутку времени, последний его кадр сделать ключевым (F6) и в нем написать AS-код: getURL("index.php");


--------------------
"Высшая мудрость - умение разговаривать с людьми" ((с) Ямамото Цунэтомо (Дзётё), "Хагакурэ")
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
HEROINa
сообщение 31.05.2008 - 01:46
Сообщение #14






Группа: Туристы
Сообщений: 2
Регистрация: 27.05.2008
Из: Donetsk
Пользователь №: 8862



Симпатии:  0  


О! Большое спасибо! Вы мне очень помогли!


--------------------
Natura non facit saltus!
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
Сканцева
сообщение 2.07.2008 - 16:04
Сообщение #15






Группа: Туристы
Сообщений: 1
Регистрация: 2.07.2008
Пользователь №: 9251



Симпатии:  0  


sad.gif хороший урок, но во флеше всё работате при нажатии Stimulate Download" а при тестиррование на странице сайта (еще не готового) нет blink.gif sad.gif , может проблема в том что он у меня 1 мб. весит), не знаю...ваабще уже замучалась... может подскажете в чем проблема, если не жалко конечно smile.gif
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения

2 страниц V   1 2 >
Быстрый ответДобавить ответ в эту темуОткрыть тему
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0

 



- Текстовая версия форума Сейчас: 16.12.2017 - 17:50