Чоловік з великим флешем

9:54am: test 2

Originally published at Чоловік з великим флешем. You can comment here or there.

ping-ping

12:38pm: test

Originally published at Чоловік з великим флешем. You can comment here or there.

Смотреть фотографии Интерьеров в стиле модерн, эксклюзивная коллекция.

6:34pm: Додаємо трішки магії…

Originally published at Чоловік з великим флешем. You can comment here or there.

Для одного з проектів, над котрими я працюю знадобилося додати трішки «магії», і сьогодні я розповім, яким чином я добився вельми цікавого і одночасно простого ефекту. В результаті моїx експерементів вийшло щось таке:

[kml_flashembed movie="/img/flash/line2lesson.swf" height="400" width="260" /]

Для повторення такого ефекту нам потрібно спочатку намалювати таку лінію у Photoshop. Створюємо новий документ, заливаємо фон чорним кольором, та створюємо новий слой.

Беремо інструмент Pen Tool (P), і малюємо контур кривої, котру далі будемо анімувати.

Ставимо білий колір основним, і обираємо інструмент Brush Tool діаметром 3 пікселі, і з чіткістю 100%.

Тепер переходимо на панель Paths, і там правий клік на новоствореному шляху – Stroke Path…

Обов’язково ставимо галочку навпроти Simulate Pressure, і клікаємо на ОК. В результаті маємо отримати щось подібне:

Зараз вимикаємо видимість фонового (чорного) слою, і публікуємо (Ctrl+Alt+Shift+S) нашу лінію на прозорому фоні у форматі PNG-24.

Настав час Flash!

Створюємо новий fla документ. Задаємо йому чорний колір фону і частоту кадрів рівну 24.

Імпортуємо (Ctrl+R) у перший кадр сцени криву створену Photoshop, і одразу перетворюємо її на символ мувікліпу (F8).

Редагуємо новостворений екземпляр мувікліпу (подвійний клік на ньому).

Створюємо новий слой, і називаємо його “Mask”, тут буде наша маска.

Малюємо невеликий прямокутник на слої Mask (довільного кольору), таким чином, що верхня його границя торкалася, або трішки залазила на нижню границю нашої лінії.

Створюємо новий кейфрем у 12 кадрі слою Mask, і розтягуємо прямокутник по висоті так, щоб він повністю перекривав лінію.

Виділяємо перший кадр слою Mask, та створюємо Shape Tweene (правий клік – другий пункт в контекстному меню).

А зараз правою кнопкою на 45-тому кадрі кожного слою, і з контекстного меню обираємо Insert Frame

Тепер можна тестити (Ctrl+Enter).

Вийшло щось трішки схоже на те, чого ми добиваємось, але щось лінія появляється не так плавно, як нам хотілося б, виправляємо це.

Виділяємо малюнок з лінією, і створюємо новий символ мувікліпу (F8). Тепер до лінії можна застосовувати ефекти, а саме прозорість (Alpha).

На слої, де знаходиться наша лінія створюємо у восьмому кадрі кейфрейм, знову повертаємось до першого кадру, виділяємо екземпляр мувікліпу, у котрому знаходиться малюнок з лінією, виділяємо цей мувікліп в робочій області, і на панелі Properties, і встановлюємо Color: Aplha 0%

Виділяємо перший кадр слою з лінією, створюємо Moution Tween (правий клік на кадрі – Create Moution Tween)

Знову тестуємо (Ctrl+Enter).

Тепер на багато краще, доробимо ще й плавне затухання лінії. Для цього створюємо на слої з лінією кейфрейми у кадрах 35 та 45.

В останньому кадрі виділяємо символ з лінією і ставимо йому значення Alpha – 0.
Створюємо у 35-му кадрі Moution Tween, і дивимось результат (Ctrl+Enter).

Тепер наша лінія плавно з’являється і так само плавно зникає, але вона й досі залишається якоюсь не виразною, до того є там де маска відкриває лінію виходить «обрубаний» край.

Для доведення ідеї до «товарного вигляду» повертаємось у головну сцену, і накладаємо на наш мувікліп з анімацією лінії фільтр Glow.

От і все, створивши декілька таких ліній, і додавши дрібних частинок можна створити вельми цікавий ефект.

Заберайте ZIP-овану магію!

6:55pm: Як вставляють майстри Flash?…

Originally published at Чоловік з великим флешем. You can comment here or there.

…swf файли у HTML сторінку (:

Можна використовувати стандартний код, котрий генерує Adobe Flash, але я рекомендую використовувати SWFObject.

Що це?

Це JavaScript розроблений гарними людьми, котрий дозволяє легко і просто вставляти флешки у сторінки сайту. Стандартний код є доволі місткім, і не дуже зручним у застосуванні. При використанні swfobject увесь html код зі вставкою флеш у сторінку зводиться до наступного:

<script type="text/javascript" src="swfobject.js"></script>
<div id="flashcontent">
  Цей текст буде замінено на Flash.
</div>
 
<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8", 
    "#336699");
   so.write("flashcontent");
</script>
 

</p>

Застосований скрипт створює новий об’єкт SWFObject:

var so = new SWFObject(swf, id, width, height, version, background-color
[, quality, xiRedirectUrl, redirectUrl, detectKey]);

</p>

Основними параметрами є:

swf — шлях до swf файла
id — ідентифікатор елементу, вміст котрого буде замінений на флеш елемент
width — ширина мувіка
height — висота мувіка
version — версія флеш плеєру. Якщо версія буде менше ніж встановлена - скрипт спробує завантажити потрібну версію, або просто не буде виводити флеш на екран (тим самим залишаючи вміст «контейнера» для флеш)
background-color — очевидно колір фону під флешкою

Додатковими параметрами є:

quality — якість у котрій буде програватися мувік
xiRedirectUrl — якщо ви бажаєте редирекнути відвідувача, котрий завершив ExpressInstall оновлення версії флеш плагіну, ви можете вписати цей URL тут
redirectUrl — а за цією адресую будуть перенаправлені всі ті, хто не має коректної версії плагіну
detectKey — Це додає відслідковування змінної в URL при наявності котрої відміняємо перевірку поточної версії флеш плагіну.

so.write("flashcontent");

Це основний метод, котрий замінює вміст «контейнера» для флеш на флеш мувік.

SWFObject у прикладах:

Додаємо параметр:

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "400", "100%", "8",
    "#336699");
   so.addParam("quality", "low");
   so.addParam("wmode", "transparent");
   so.addParam("salign", "t");
   so.write("flashcontent");
</script>

</p>

Додаємо змінну:

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8",
    "#336699");
   so.addVariable("variable1", "value1");
   so.addVariable("variable2", "value2");
   so.addVariable("variable3", "value3");
   so.write("flashcontent");
</script>

</p>

Також можна додати змінну у флешку одразу з адресної строки:
http://www.example.com/page.html?variable1=value1&variable2=value2

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8",
    "#336699");
   so.addVariable("variable1", getQueryParamValue("variable1"));
   so.addVariable("variable2", getQueryParamValue("variable2"));
   so.write("flashcontent");
</script>

</p>

Для кого це потрібно?

Окрім мене це використовують
Adobe.com (трішки перероблену версію),
Windows.com,
YouTube.com,
Skype.com

Більше подробиць на офіційному блозі розробників SWFObject.

Отримати swfobject 1.5

4:18pm: Без цього не може обійтися ніхто

Originally published at Чоловік з великим флешем. You can comment here or there.

Дозвольте презентувати вам дещо, без чого важко уявити динамічний флеш мувік — це МегаПрелоадер!

Клас дозволяє завантажувати у середовище флеш файл формату swf, jpg, gif (тільки статичні), png та відслідковувати процес його завантаження. Ну, принаймні, я таким його задумував (:

Головним методом класу є

LoadMc(file:String, target_mc:MovieClip):Void

</p>

де
file — URL адреса файлу, котрий завантажуємо;
target_mc — екземпляр кліпу, у котрий завантажуємо.

Добре, завантажити у мувік ми щось вже можемо, але що ще ми можемо витягнути корисного з цього класу? Розглянемо геттер-функції (методи класу, що повертають різні значення поточного стану завантаження):

getStatus():Boolean — повертає true якщо завантаження ще триває, або false — якщо нічого не грузимо
getWidthValue():Number — повертає число з плава.чою комою від 0 до 1, що відображає співвідношення завантажених байт до загальної їх кількості
getLoadedBytes():Number — кількість завантажених байт
getTotalBytes():Number — усього байт
getLoadBytesSpeed():Number — швидкість у байтай за секунду
getPercent():String — повертає стан завантаження у відсотках (одразу із символом «%»)
getLoadedSize():String — повертає кількість завантажених байт в «красивому» вигляді
getTotalSize():String — загальна кількість байт в «красивому» вигляді
getEstimatedTime([type: String]):String — повертає наближену кількість часу до завершення завантаження у різних форматах (в залежності від значення змінної type)
getLoadSizeSpeed():String — швидкість завантаження у «красивому» вигляді

Під «красивим» виглядом мається на увазі автоматичне форматування байтів у кілобайти, чи, за необхідності, у мегабайти з додаванням одиниці виміру — KB чи MB відповідно.

Розглянемо більш детально метод getEstimatedTime([type: String]);. В залежності від того, яке значення параметру type буде передано під час виклику цього методу — буде отримано результат в різних форматах.

"hh:mm:ss" — повертає час у вигляді 00:00:00, тобто, якщо залишилось до кінця завантаження 15 секунд, метод поверне «00:00:15»
"mm:ss" — повертає час у вигляді 00:00, аналогічно попередньому.
"ss" — повертає час у вигляді 00, але слід зауважити, що якщо залишилось більше хвилини, то результат буде 01:00
За замовчуванням, якщо не передавати значення параметру type у методі, то результатом буде наступний строковий вигляд:

hours+" год. "+minutes+" хв. "+seconds+" сек."

Тобто, якщо залишилось до кінця завантаження 1 година, 23 хвилини і 20 секунд, то в результаті отримаємо наступне:
1 год. 23хв. 20сек.

А тепер все це на практиці

Створимо новий fla файл, і назвемо його test_MegaPreloadera.fla. У папку, де знаходиться наш тількино створений файлік поруч кладемо файл MegaPreloader.as.

У першому кадрі нашого fla фалу пишемо наступне:

var myPreloader = new MegaPreloader();// створюємо екземпляр класу (:
 
// створимо пустий мувік...
_root.createEmptyMovieClip("image",_root.getNextHighestDepth());
// ...у котрий завантажемо тестовий малюночок
_root.myPreloader.LoadMc("test.jpg",image);

</p>

Замість "test.jpg" вам треба вказати URL будь-якого локального файлу формату PNG, JPG, GIF чи SWF.

Так. Зробили. Похлопали собі (:

Але нам ще треба якось «дивитися» на процес завантаження, одже дописуємо в нашому скрипті ще таке:

if (_root.myPreloader.getStatus()) {// якщо ще завантажуємо
	trace("Завантажено байт: "+_root.myPreloader.getLoadedBytes());
	trace("Усього байт: "+_root.myPreloader.getTotalBytes());
	trace("Завантажено: "+_root.myPreloader.getPercent());
	trace("Завантажено: "+_root.myPreloader.getLoadedSize());
	trace("Усього: "+_root.myPreloader.getTotalSize());
	trace("Залишилось часу: "+_root.myPreloader.getEstimatedTime());
	trace("Швидкість: "+_root.myPreloader.getLoadSizeSpeed());
	trace("Байт за секунду: "+_root.myPreloader.getLoadBytesSpeed());
}
 

</p>

От і всі складнощі! Тепер весело клацаємо Ctrl+Enter.

Бачимо перед собою свіженьку опубліковану флешку, натискаємо View – Download Settings, і там обираємо значення поменше (для тих, хто позатанком — зараз ми будемо імітувати завантаження малюнка, і тільки но ми обрали швидкість нашого віртального модему).

Натискаємо ще раз Ctrl+Enter (чи View – Simulate Download), і насолоджуємось результатами у вікні Output (F2);

Cкачати MegaPreloader з прикладом використання.

8:44pm: 7 причин закохатись у Flash

Originally published at Чоловік з великим флешем. You can comment here or there.

При розробці сайту одне з найважливіших завдань полягає в тому, щоб правильно поставити задачі, котрі він має розв’язати, але не менш важливим є те, за допомогою яких технологій ці задачі будуть вирішені.

Я на своїй роботі регулярно маю протистояння двох технологій — Ajax та Flash. Нижче наведу 7 причин, чому я обираю у більшості випадків саме Flash.

1. Анімація

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

Якщо згадати, то саме для цього флеш (тоді ще Super Paint) і було винайдено. Якісна, повноцінна альтернатива циклічним анімаціям.

От тільки анімацію треба використовувати обережно, і лише там, де вона насправді потрібна (сайти, на яких головною ідеєю є «показати шоу»).

2. Інтерактив

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

Починаючи з Flash 5 почала активно розвиватися внутрішня мова програмування ActionScript, котра зараз вже переросла у повністю об'єктно орієнтовану форму, і має версію 3.0.

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

Окремим абзацом хочу виділити інтеграцію Flash з XML. В останніх версіях цього продукту інтеграція XML даних у середовище флеш за допомогою вбудованих компонентів, чи навіть власноруч написаних аналізаторів є напрочуд легкою і вельми приємною справою. У подальших статтях даного блогу я ще не раз буду демонструвати легкість, з якою можна опрацьовувати XML формат у флеш.

3. Незалежність від платформи

Для програвання флеш файлу на стороні клієнта флешу необхідно лише встановлений плагін у браузері. 9-та версія плагіну встановлена більш ніж на 96% комп’ютерів у всьому світі.

У 2006-му році вийшла 9-та версія флеш плагіну для Linux, тим самим зробивши стрибок у сторону операційних систем з відкритим кодом.

4. Однакова робота й відображення незалежно від браузеру

Так, тільки ті, хто верстають сайти можуть зрозуміти, скільки «щастя» буває при спробах добитися однаково вигляду сайту в ІЕ та в нормальних браузерах. Різні принципи опрацювання коду різними типами і версіями браузерів наштовхують на кримінальні бажання.

Вміст флеш ролика однаково відображається у всіх браузерах, бо залежить лише від плагіну, але аж ніяк не від програми, де той плагін встановлений. Звісно виключенням є наш улюблений ІЕ 6 та 7, зі своєю забороною на використання компонентів ActiveX, але при використанні таких речей як SWFObject — навіть про цю маленьку прикрість можна забути.

5. Сприятливе середовище для розробки

Кількість вбудованих функцій, логічність побудови самого додатку, один з найкращих мануалів вбудований безпосередньо у середовище програмування плюс відмінний компілятор, котрий дійсно відмінно вказує на помилки коду — це лише вступ до розповіді, на скільки зручно користуватися флешем.

З одного боку — це доволі потужний редактор векторної графіки, з іншої сторони – програмне середовище, котре майже не має аналогів (компанія Майкрософт вирішила щось там своє створити, але я не знаю, чим все це завершиться). Це треба спробувати, щоб зрозуміти, на скільки це зручно.

Технічні та програмні можливості флеш задовольнять практично будь-які вимоги, а легкість їх втілення — здивують навіть програмерів зі стажем.

6. Флеш може виступати у ролі платформенної та типової проксі

Людською мовою це найлегше показати на прикладі такого популярного сервісу як Ютуб. Ви завантажуєте відео, і його можна продивитися у будь-якому браузері, головне, щоб там стояв флеш плагін (а як вже зазначалося вище — це більше 96% комп’ютерів).

Флеш з легкістю відображає практично будь-які формати відео (у тому числі справляється й з HDV), та графіки, а також має повноцінну функціональність при роботі з mp3 файлами, навіть до рівня читання тегів.

7. Підтримка стандартів, та безпечність.

У флеш плеєру — один розробник, це корпорація Adobe. Ця компанія веде активну політику підтримки стандартів, цьому слугує досить висока функціональність коду з підтримкою максимальної сумісності різних версій плагінів.

Починаючи з флеш 5 — безпечності приділяється окрема увага. Пройшли ті часи, коли через флешку на сторінці можна було відформатувати чийсь диск (банально запустивши cmd.exe format C:\). Тепер навіть на зчитування даних з іншого серверу вимагається дозвіл у вигляді спеціального XML файлу.

Я люблю флеш. Це зручний і приємний у використанні інструмент для розв’язання багатьох задач. Думаю у рамках цього блогу я зможу переконати вас, що це не просто гламурна забавка для попсових анімацій, а потужний засіб, за допомогою котрого ви зможете легко і з посмішкою на обличчі розв’язувати найрізноманітніші задачі, котрі постануть перед вами.

P.S. Використання Flash не обмежується інтернетом, я колись робив у ньому розрахункову роботу з теоретичної механіки, але це зовсім інша історія…