Завантажити флеш із сайтуможна, можливо різними способами. Але деякі з них досить громіздкі, деякі вимагають використання плагінів, програм та сайтів. Тим часом є спосіб дуже елегантний і простий, реалізація якого не займає багато часу.
Спочатку визначимося, навіщо нам взагалі флеш, і що це таке. Флеш- це мультимедійна презентація, зроблена за допомогою програми Adobe Flash або . Такі файли називають флеш-роликами, хоча вони можуть бути набагато більшими, ніж ролик.
Вони можуть бути цілими міні-програмами: банерами, які реагують на рух мишки відвідувача, невеликими іграми, так званими flash-іграми, тестами з видачею результатів тощо.
А можуть бути дійсно просто відео-, або аудіороликами.
Стандартним розширенням для флеш-файлів є SWF. І коли нам трапляються такі ролики на сайтах, ми не можемо їх скачати так просто, як картинки правою клавішею миші. Доведеться трохи попрацювати.
Завантажуєте флеш із сайту
Заходьте на сторінку сайту, на якій стоїть потрібний флеш-файл. Після цього:
Відкриваєте код сторінки
Натискаєте на сторінку правою клавішею миші та вибираєте Перегляд коду сторінки . Ще два варіанти відкрити код сторінки: натиснути Ctrl+U, або написати перед адресою сторінки view-source:
Шукаєте в коді адресу SWF ролика
Для цього вмикаєте пошук за допомогою гарячих клавіш Ctrl+F, і введіть у поле пошуку .swf. Потім натискаєте Enter .
Знаходьте саму адресу, яка матиме вигляд:
http://site.ru/papki/rolik.swf
або такий вигляд:
/papki/rolik.swf
Якщо у Вас другий варіант, значить адреса відносна, а не абсолютна. Його потрібно приставити ліворуч до адреси головної сторінкисайту.
Перевіряєте адресу
Вставляєте адресу флеш-ролика в адресний рядок будь-якого браузера в новій вкладці. Має з'явитися ролик.
Робите адресу посиланням
Якщо ролик з'явився, копіюєте адресу в блокнот, і робите посиланням, тобто додаєте відповідний код.
У результаті напис у блокноті виглядатиме так:
Завантажуєте флеш ролик собі на комп'ютер
Збережений файл відкриваєте у браузері. Усередині нього буде посилання. Клакаєте правою клавішею миші, вибираєте Зберегти посилання як... або Зберегти за посиланням..., і зберігаєте flash-ролик у себе на комп'ютері.
Щоб подивитися, чи відкриваєте його у браузері, чи використовуєте флеш-плеєр, наприклад Macromedia Flash Player .
Інші варіанти
Хоча описаний вище варіант мені здається найцікавішим, все ж таки наведу ще й інші способи збереження флеш у себе на комп'ютері.
- За допомогою сайту http://save2go.ru. Введіть адресу сторінки, на якій знаходиться Ваш флеш-ролик, та натискаєте Зберегти із сайту . Нижче з'явиться посилання на ролик. Натискаєте правою клавішею і вибираєте Зберегти посилання як... або Зберегти за посиланням... .
- За допомогою плагіна для браузера, наприклад, Downloadhelperдля Firefox .
- За допомогою програм-завантажувачів, наприклад, Download Master.Для початку потрібно знайти адресу флеш-ролика, а потім вставити її в завантажувач.
Докладніші відомості Ви можете отримати у розділах "Всі курси" та "Корисності", в які можна перейти через верхнє меню сайту. У цих розділах статті згруповані за тематиками блоки, що містять максимально розгорнуту (наскільки це було можливо) інформацію з різних тем.
Також Ви можете підписатися на блог, і дізнаватися про всі нові статті.
Це не займе багато часу. Просто натисніть на посилання нижче:
Досі ми розглядали Flash-фільми, які відтворювалися без втручання глядача від початку до кінця. Однак Flash дозволяє створювати інтерактивні програми, в яких користувач може керувати демонстрацією контенту. У цьому уроці ми почнемо знайомство з елементами мови опису сценаріїв Action Script і розглянемо, як за допомогою цього можна створити інтерактивні програми. Як приклад створимо фотоальбом з елементами інтерактивного інтерфейсу. Але перш ніж приступити до опису Action Script, слід розповісти про ще один вид символів, який ми досі залишали без уваги, - це символи-кнопки. Для побудови інтерактивного інтерфейсу вони просто потрібні.
Створення кнопок
Кнопка є чотирикадровим інтерактивним мувікліпом. Коли ми привласнюємо тип «Кнопка», Flash створює для нового символу монтажну лінійку з чотирьох кадрів:
Up-стан - це кадр, що відповідає ситуації, коли кнопка не натиснута і покажчик миші розташований не над кнопкою;
Over-стан кадр, що ілюструє вид кнопки, коли покажчик миші розташований над кнопкою, але кнопка не натиснута;
Down-стан | даний кадр показує вид кнопки при її натисканні;
Hit-стан визначає область, в якій кнопка реагує на клацання миші; цю область у кліпі не видно.
Щоб створити кнопку, виконайте команду Insert => New Symbol (можна набрати клавіші Control+F8). У діалоговому вікні Create New Symbol введіть ім'я символу-кнопки (наприклад, but1) і виберіть тип символу Button («Кнопка»).
Flash перейде в режим редагування символу, надавши кадри Up, Over, Down і Hit. Перший кадр, Up, стає порожнім ключовим кадром. Намалюємо у цьому кадрі ненатиснутий вигляд кнопки (рис. 1).
Мал. 1. UP-кадр кнопки
Виділимо другий кадр, помічений як Over та відповідний стану, коли курсор занесений над кнопкою. Вставимо у цьому кадрі ключовий кадр (за командою Insert => Keyframe), у результаті з'явиться ключовий кадр, що повністю повторює зміст Up-кадра. Змінимо колір кнопки, як показано на рис. 2.
Рис 2. Over-кадр кнопки
Аналогічно додамо наступний кадр (Down-кадр) та намалюємо натиснутий стан кнопки (рис. 3).
Мал. 3. Down-кадр кнопки
У Hit-кадрі поки не нічого малюватимемо, а повернемося до цього кадру трохи пізніше.
Перейдемо до основної сцени, викличемо бібліотеку за командою Window => Library та створимо екземпляр символу кнопки шляхом перетягування його на сцену (рис. 4)
Мал. 4. Створимо екземпляр кнопки, перетягнувши його з бібліотеки
В результаті отримаємо наступний фільм. Як видно з даного фільму, Натискання кнопки відбувається не тільки тоді, коли ми натискаємо мишею на центральну (робочу) зону кнопки, але і при натисканні на рамку навколо неї. Пов'язано це з тим, якщо Hit-кадр не намальований, то робоча область кнопки буде відповідати Up-кадру.
Для того, щоб натискання кнопки відбувалося тільки в робочій зоні, необхідно в Hit-кадрі визначити цю зону, тобто намалювати кнопку без рамки (див. рис. 5)
Мал. 5. Hit-кадр кнопки
Після того як ми додамо необхідний Hit-кадр, отримаємо наступний фільм, в якому при натисканні на рамку продавлювання кнопки не відбувається.
Щоб зробити кнопку інтерактивною, необхідно пов'язати факт натискання кнопки із виконанням певних команд, тобто описати певний сценарій. Для завдання сценаріїв у Flash існує спеціальна мова Action Script. У цьому уроці ми торкнемося лише незначної частини можливостей цієї мови, а надалі повертатимемося до структури та синтаксису Action Script у міру ускладнення прикладів створення інтерактивних фільмів на Flash.
Поняття про Action Script
Action Script є мовою написання сценарію - набору інструкцій, які керують елементами Flash-фільму. Сценарії Action Script можуть бути вбудовані у фільм або зберігатися у зовнішньому текстовому файлііз розширенням AS.
При вбудовуванні сценарію у фільм його можна впроваджувати у різні частини фільму. Точніше, сценарії Action Script можуть містити ключові кадри, екземпляри кнопок та екземпляри мувікліпів. Відповідно сценарії називаються сценаріями кадру (Frame Action), сценарієм кнопки (Button Action) та сценарієм кліпу (MovieClip Action).
Сценарії Action Script виконуються після настання певних подій, ініційованих користувачем або системою. Механізм, що вказує програмі Flash, який оператор слід виконати під час настання тієї чи іншої події, називається обробником подій.
Action Script має власний синтаксис, багато в чому схожий із синтаксисом JavaScript. Flash MX 2004 підтримує Action Script всіх попередніх версій Flash.
Одним з основних понять Action Script є Actions – команди, які видають інструкції під час виконання SWF-файлу. Наприклад, gotoAndStop() відсилає відтворюючу головку (Рlayhead) на певний кадр або мітку. Від слова Actions і походить назва мови – Action Script (дослівно – сценарій дій). З більшістю понять цієї мови ми ознайомимося на конкретних прикладах.
Інтерактивний фотоальбом
Продемонструємо використання кнопок для керування фотоальбомом – створимо набір фотографій та додамо дві кнопки, які будуть гортати фото вперед та назад.
Помістимо на основній монтажній лінійці перше фото і додамо кнопку зі стандартного набору. Для доступу до потрібної папки слід виконати команду Windows=> Control Panels Common Libraries => Buttons (рис. 6).
Мал. 6. Додамо кнопку зі стандартної бібліотеки
В результаті виконання цієї команди з'явиться панель, що містить великий набір намальованих кнопок. різних типів. Виберемо, наприклад, Key Buttons (кнопки, схожі на клавіатурні клавіші), відкриємо відповідну папку, виберемо кнопку key-left (рис. 7) і створимо екземпляр цієї кнопки (шляхом перетягування її на сцену).
Мал. 7. Елементи папки Key Buttons
Зверніть увагу, що коли ви встановлюєте другу кнопку (key-right) на сцені і переміщаєте її, щоб встановити на одному рівні з першою кнопкою, програма підказує (пунктирну лінію), яка дозволяє точно позиціонувати кнопку (рис. 8).
Мал. 8. Автоматичне вирівнювання кнопок на одному рівні
Щоб додати сценарій, необхідно викликати редактор Action Script за командою Window =>Development Panels => Actions або натиснувши клавішу F9. Якщо ви збираєтеся часто писати скрипти, цю клавіатурну команду варто запам'ятати. В результаті з'явиться редактор Action Script (рис. 9).
Мал. 9. Панелі редактора Action Script
Якщо ви експериментуєте, виділяючи різні елементи на сцені, одночасно відстежуючи повідомлення в панелях редактора Action Script, то виявите, що програма підказує, на який елемент можна «вішати» код. Якщо виділити на сцені кадр, то у верхньому лівому куті панелі редактора з'являється напис Actions - Frame, якщо клацнути по кнопці, то з'явиться напис Actions - Button, тобто програма підказує, що код, що вводиться, буде ставитися до сценарію кнопки. А якщо виділити фотографію, то в полі, призначеному для введення скрипту, з'явиться повідомлення: Current selection cannot have actions applied to it (до цього виділеного об'єкта не можна застосувати сценарій).
Ми будемо надавати сценарій кнопці. У останніх версіях ActionScript є можливість писати централізований код, тобто код, який розміщений в одному місці, і така можливість дозволяє краще розумітися на великих програмах. Однак у простих прикладах(які ми і розглядаємо) привласнення сценарію кнопці цілком допустиме.
Отже, для кнопки зі стрілкою вліво нам потрібно формалізувати наступний сценарій: "Якщо кнопка відпускається на деякому кадрі, то з цього кадру необхідно перейти на попередній кадр". Відповідно до синтаксису мови Action Script (рис. 10) це буде виглядати так:
У першому рядку записаний обробник подій кнопки on(), що має формат:
Тепер додамо кілька ключових кадрів так, що в них скопіюються створені в першому кадрі кнопки, і помістимо у створені кадри потрібні фотографії.
Якщо запустити на виконання створений фільм, то кадри безперервно програватимуться один за одним, а отже, насамперед нам потрібно дати команду «Стоп» на першому кадрі. Для цього першому кадру додамо відповідну команду (рис. 11).
Мал. 11. Сценарій, наданий першому кадру
Зверніть увагу: команда надається вже не кнопці, а кадру. Той факт, що кадру присвоєно сценарій, відзначається на основній монтажній лінійці - у позначенні кадру над жирною точкою з'являється маленька літера «a».
В результаті ми отримали наступний фільм.
Якщо у нас у фотоальбомі всього кілька кадрів, то двох кнопок – «Вперед» і «Назад» – цілком достатньо, але якщо набір фотографій великий, то бажано мати ще й кнопки, що відсилають на початок і кінець фільму. У наступному прикладі ми додамо відповідні кнопки: "В перший кадр" та "В останній кадр". Вибрати кнопки відповідної мнемоніки можна зі стандартної бібліотеки кнопок із папки Сircle Вuttons (рис. 12).
На запропонованому прикладі ми ознайомимося з ще однією командою gotoAndStop(), яка дозволяє перейти до потрібного кадру з наступною зупинкою.
Мал. 12. Кнопки із папки Circle Buttons
На кнопку переходу до першого кадру (третя зліва на рис. 13) повісимо код, як показано на рис. 13.
Мал. 13. Сценарій для кнопки "В перший кадр"
У випадку з фотоальбомом з п'яти кадрів до останньої кнопки додамо сценарій переходу «В останній кадр»:
Автоматизоване написання скрипту
Досі ми набирали всі команди вручну, проте панелі редактора ActionScript надають низку сервісів для автоматизованого написання скрипта. Розглянемо ці можливості.
Мал. 14. Засоби автоматизованого написання скрипту
Панель редактора Action Script дозволяє вибирати, перетягувати, перерозподіляти та видаляти команди.
Покажемо, як можна написати той самий скрипт для кнопки "Вперед" в автоматизованому режимі. Вибравши папку Movie Clip Control (верхнє ліве вікно на рис. 14) можна отримати доступ до оброблювача подій on, а далі потрібно або двічі клацнути по відповідному пункту, або перетягнути вираз на поле написання скрипта в режимі Drag and Drop.
Мал. 15. Підказка для завершення виразу
В результаті на робочому полі з'явиться необхідний вираз та підказка виду (рис. 15): вибираєте з меню потрібну команду та вираз завершується автоматично. Як видно з меню, можна вибрати не тільки умову, пов'язану з екранними кнопками - можна також вибрати з меню рис. 15 пункт keyPress “
Мал. 16. Звертання до кнопки клавіатури
Задіємо команду keyPress “
Мал. 17. Команду nextFrame можна знайти у папці Timeline Control
Для кнопки, яка переводить фільм на початок фотоальбому, в якості події можна вибрати з меню натискання клавіші Home, а далі (рис. 18) перетягнути на поле команду gotoAndStop, в результаті чого з'явиться ще одна підказка щодо можливого синтаксису цієї команди.
Стрілки в підказці дозволяють переглянути різні варіанти синтаксису. Програма надає два варіанти (рис. 18 і 19), тобто пропонує задати сцену та кадр або лише кадр. У нашому випадку достатньо вказати лише кадр (Frame). Якщо назва сцени опущена, за промовчанням здійснюється перехід до кадру поточної сцени.
Мал. 18. Підказка щодо можливого синтаксису команди
Мал. 19. Стрілка-трикутник дозволяє переглядати варіанти синтаксису
Після того як ми призначимо всім кнопкам відповідні кнопки клавіатури, отримаємо наступний фільм , де перегортання фотографій відбуватиметься з клавіатури, а натискання мишею на екранні кнопки не буде викликати жодних наслідків.
Чи можна забезпечити сценарій, за якого різні події призводитимуть до тих самих дій? Виявляється, можна - для цього в обробнику подій необхідно перерахувати список найменувань подій. Якщо ви поставите кому у списку подій після першої події, то програма сама запропонує вам меню (рис. 20).
Мал. 20. Під час введення коми у списку подій автоматично з'являється меню додаткових команд
Додамо до першої події (натискання клавіатурної кнопки) друга подія (відпускання екранної кнопки):
on (keyPress " |
Повторимо процедуру для інших кнопок і в результаті отримаємо фотоальбом, в якому перегортання фотографій відбуватиметься як за допомогою миші, так і за допомогою клавіатури (вихідний файл FLA можна отримати за посиланням).
У розглянутому прикладі ми використали перехід за номером кадру, але цей спосіб не завжди зручний: якщо в процесі редагування фільму нумерація кадрів зміниться, то логіка може порушитись. Більш зручно використовувати перехід за міткою кадру. Розглянемо приклад, у якому потрібно як перегортання альбому, а й перехід до різних розділів, тобто складніша навігація.
Нехай альбом складатиметься з малюнків, комп'ютерної графікита фотографій.
Першому кадру розділу «малюнки» дамо мітку Pictures, аналогічно першим кадрам інших розділів надамо мітки graphics і photo.
Створимо шар для розміщення міток та назвемо його Lables. Щоб поставити мітку кадру, у панелі Properties необхідно вибрати тип мітки Name та записати її ім'я. У разі Pictures (рис. 21). Аналогічно розмістимо мітки у кадрах 5 та 10 (рис. 22).
Мал. 21. Приклад присвоєння кадру мітки
Тепер додамо новий шар та назвемо його Actions. У першому ключовому кадрі шару Actions викличемо панель Actions Frame (шляхом натискання кнопки F9) та наберемо команду stop () (див. мал. 22)
Мал. 22. Сценарій першого кадру
Додамо ще один шар під ім'ям Subjects (тематика), в якому дамо назви відповідним кадрам: «Малюнки» (рис. 23), «Графіка» та «Фото».
Мал. 23. Назва для кадрів розділу «Малюнки»
Тепер додамо збоку кнопку меню з аналогічними іменами, які розташуємо на новому шарі під назвою Мenu.
Надрукуємо з лівого краю перший пункт меню «Малюнки» та переведемо його в кнопковий символ. За допомогою інструмента Arrow виділимо текстовий блок «Малюнки» і виконаємо команду Modify => Convert to Symbol (цю команду можна виконати і за допомогою клавіші F8), на панелі Convert to Symbol задаємо тип символу Button і визначимо його ім'я як pictureButton (рис. 24 ).
Мал. 24. Призначимо кнопці початку розділу малюнків ім'я рictureButton
Створимо чотири кадри для кнопки «Малюнки»: перший представлятиме просто вихідний текст (рис. 25), другий - той самий текст тільки синього кольору, третій кадр ми пропустимо (у цьому випадку Down-кадр буде такий самий, як і Over-кадр ), а в Hit-кадрі намалюємо прямокутну область, яка визначить область натискання кнопки (рис. 26).
Мал. 25. Up-кадр кнопки pictureButton
Мал. 26. Hit-кадр кнопки pictureButton
Тепер нам потрібно повісити сценарій на новостворену кнопку. Для цього виділимо кнопку в сцені Scene 1 і натиснувши F9, викличемо панель Actions, а потім внесемо код, показаний на рис. 27.
Мал. 27. Сценарій переходу на кадр із міткою
Робота з кадрами у кількох шарах
Налаштування розділу кадрів
Початок роботи
 |
Перший кадр шару відзначений порожнім кухлем. Це означає, що кадр 1, і шар " Layer 1 " порожні - на шарі немає вставлених об'єктів. Вставимо будь-який об'єкт на шар "Layer 1". Ви можете переглянути створену мультиплікацію, натиснувши клавішу Enter . Зазвичай фоновий шар блокується, щоб запобігти його зміні – ставиться значок замка.
Можна додати або видалити прості кадри. Видалення кадрів:
Додавання кадрів: Або можна натиснути на будь-якому кадрі між 1-м і 30-м і в контекстному меню вибрати Додати кадр (Insert Frame). Останнє оновлення: грудень 2014 р. |
