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

Цей урок присвячений створенню простих, але гарненьких і функціональних прелоадер. Можливо, досвідченим майстром читати його не варто, а от новачкам в самий раз.


Частина 1 (loader.fla)


1. Створимо новий документ зі стандартними розмірами 550 х 400. Фон зробимо чорним.


Урок по прелоадер


Рис. 1


2. Єдиний шар, який у нас поки є, назвемо “Background”. Створимо новий шар, який назвемо “Progress Bar”.


Урок по прелоадер


Рис. 2


3. Тепер вставляємо новий символ, йому присвоюємо ім’я “Progress Bar Fill” (рис. 3). Це буде наша смужка, яка буде рухатися.


Урок по прелоадер


Рис. 3


4. Ми автоматично перейдемо в режим редагування цього символу. Малюємо червоний прямокутник з червоними кордонами розміром 165 х 20 за допомогою Rectangle Tool. Якщо хто не знає, як задавати розміри: вибираємо Rectangle Tool:




Рис. 11


Якщо ніяк не виходить підігнати за розміром кордон і символ смуги-завантаження, то збільште кордон, поставивши їй товщину 2 або 3, як це зробив я.


Це наш перший звичайний прелоадер, який зобов’язаний робити кожен Флеш-майстер. Тепер, звичайно, справа за вашою фантазією і смаком. В результаті, щоб ви не робили, це повинно бути красиво. Експериментуйте. Можна зробити гарненький мувікліп над прелоадер з написом “Loading” або навіть розмістити міні-гру, типу хрестиків-нуликів, щоб юзери не нудьгували. Знову ж таки повторюся, немає межі досконалості. Надихайтеся і творіть.


Частина 2 (loader2.fla)

Розібравшись у частині першій і зрозумівши техніку створення прелоадер, ускладнить її у частині другій.

Спочатку трохи ускладнимо наявний файл. Зробимо так, щоб крім процентного відношення завантаженої інформації відображалося і кількісне.

1. У шарі “Progress Bar” у першому ключовому кадрі створюємо нове текстове поле, до якого прив’язуємо змінну loadingBytes. Налаштування тексту аналогічні п.7 Частини 1. Колір, розмір, шрифт встановлюєте за смаком.

2. Тепер в панелі Actions для Progress Bar Feel пишемо наступний скрипт:
CODE
onClipEvent(load) {
/ / Визначаємо розмір файлу.
totalFileSize = _root.getBytesTotal();
/ / Ховаємо смугу завантаження.
this._xscale = 0;
}
onClipEvent(enterFrame) {
/ / З’ясовуємо, скільки байт вже завантажено.
bytesLoaded = _root.getBytesLoaded();
/ / Перетворимо це значення в величину від 0 до 1.
amountLoaded = bytesLoaded/totalFileSize;
/ / Перетворимо отримане значення в величину від 0 до 100.
percentLoaded = Math.floor(100*amountLoaded);
/ / Визначаємо масштаб смуги завантаження.
this._xscale = percentLoaded;
/ / Встановлюємо текстові поля в основній тимчасовій шкалі.
_root.loadingMessage = percentLoaded + “%”;
_root.loadingBytes = Math.floor(bytesLoaded/1000) + ” kb / ” + Math.floor(totalFileSize/1000) + ” kb”;
/ / Перевіряємо, чи все вже завантажено,
if (amountLoaded >= 1.0) {
_root.gotoAndStop (“start”);
}}

3. Тестуємо і милуємося: Ctrl + Enter.


Частина 3 (loader3.fla)
Тепер створимо прелоадер не тільки з процентним і кількісним відношенням завантаженої інформації, але і швидкістю завантаження і залишилися часом.
До наявних у нас ще з Частини 2 двом текстовим полям додамо два нових у першій ключовою кадр шару “Progress Bar”. Параметри виставляємо аналогічно пункту 7 Частини першої. До одного з цих текстових полів прикріплюємо змінну speedMessage, а до іншого timeMessage. У символ “Progress Bar Feel” пишемо такий код:


CODE

onClipEvent(load) {
/ / Визначаємо початкові параметри
totalFileSize = _root.getBytesTotal();
startTime = getTimer();
startBytes = _root.getBytesLoaded();

/ / Ховаємо смугу завантаження
this._xscale = 0;
}

onClipEvent(enterFrame) {

/ / З’ясовуємо, скільки байт вже додано
bytesLoaded = _root.getBytesLoaded();

/ / Перетворимо це значення в величину від 0 до 1
amountLoaded = bytesLoaded/totalFileSize;

/ / Перетворимо отримане значення в величину від 0 до 100
percentLoaded = Math.floor(100*amountLoaded);

/ / Визначаємо масштаб смуги завантаження
this._xscale = percentLoaded;

/ / Дізнаємося швидкість
timeSoFar = getTimer() – startTime;
speed = bytesLoaded/timeSoFar;

/ / Дізнаємося, скільки залишилося
bytesLeft = totalFileSize – bytesLoaded;
timeLeft = (bytesLeft/speed)/1000;

/ / Швидкість завантаження (перетворення)
speed = Math.floor(10*speed)/10;

/ / Встановлюємо текстові поля
_root.loadingMessage = percentLoaded + “%”;
_root.loadingBytes = Math.floor(bytesLoaded/1000) + ” kb / ” + Math.floor(totalFileSize/1000) + ” kb”;
_root.speedMessage = speed + ” kb/sec”;
_root.timeMessage = Math.floor(timeLeft) + ” seconds remaining”;

/ / Перевіряємо, чи все вже завантажено
if (amountLoaded >= 1.0) {
 _root.gotoAndStop(“start”);
}
}


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


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

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

Ваш отзыв

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

*

*