Уроки Flash: Preloader – показник завантаження об’єкта, Програми для роботи з графікою, Програмні керівництва, статті

Як це працює?

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


Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*