Всім доброго дня! Сьогодні поговоримо з вами про те, як вставити flash на сайт. Здавалося б, питання дріб'язковий. Якщо це банер, то просто скопіювати запропонований код і розмістити в шаблоні, віджет або на сторінці через редактор. Якщо це flash анімація для сайту, то вставити за допомогою того ж коду, але прописаного самостійно. Однак і в цьому нескладному процесі є свої тонкощі, про які ми зараз поговоримо.
Flash анімація для сайту
Отже, нам треба було розмістити флеш анімацію на сайті. Для цього використовується стандартний код:
На перший погляд все правильно і ніщо не віщує проблем. Однак, якщо ви перейдіть вгору, то побачите таку особливість, що розміщена таким чином flash анімація буде перекривати адмінських тулбар - верхню чорну панельку адміна WordPress.
За великим рахунком, це не критично, оскільки дану панель бачите тільки Ви і ваші помічники, якщо на блозі відключена реєстрація користувачів. Але справжні проблеми виникають, коли на сайті використовується багаторівневе css меню, під яким розміщений флеш банер, який в цьому випадку його перекриває.
Це відбувається тому, що flash завжди по глибині знаходиться попереду блоків div. Щоб цього уникнути, потрібно додати всього лише один додатковий параметр в наш код:
В цьому випадку ролик flash поводиться як звичайне зображення. Також можна скористатися аналогічним параметром value \u003d "transparent», але це створить додаткове навантаження ні сповільнить завантаження сторінки. В кінцевому результаті на код вставки флеш на сайт буде виглядати так:
Плагін для розміщення flash анімації на сайті
Якщо Вам доводиться часто вставляти різні ролики або просто боїтеся щось неправильно написати в цьому довгому коді, то можна скористатися плагіном, який вставляє флеш на сайт автоматично - від вас вимагається лише вказати адресу його розташування. Називається він WP-SWFObject. Як завжди, завантажуємо і встановлюємо його, потім заходимо в «Параметри\u003e WP-SWFObject» і виконуємо необхідні настройки. Тут можна все залишити за замовчуванням, крім одного - пункту «Window Mode». Для того, щоб вставити swf на сайт з урахуванням тих параметрів, які нам потрібні, виберіть тут зі списку «OPAQUE» і збережіть налаштування.
Тепер, щоб вставити флеш на сайт, пропишіть шорткод (його потім можна для зручності додати на панель редактора)
У дії виглядати буде так:
Для прямого розміщення через шаблон використовуйте інший код:
Якщо ви коли-небудь пробували вставити Shockwave Flash файл в ваш блог на WordPress, то ви знаєте, що зробити це не так просто. Крім того, якщо ви розміщуєте ваш блог на WordPress.com, то ви не зможете завантажувати flash з міркувань безпеки. Якщо у вас є свій хостинг-акаунт, то є кілька способів, за допомогою яких ви зможете завантажувати swf файли в ваші WordPress записи. Перший варіант включає використання плагіна. Цей варіант кращий, якщо ви не дуже добре звертаєтеся з кодом. Інший спосіб вимагає базових знань html. У цій статті ми покажемо, як вставити swf в запису WordPress за допомогою плагіна і без нього.
Метод з плагіном
Для початку вам потрібно завантажити і встановити Easy Flash Embed для WordPress. Цей плагін настільки простий, що в меню адміністратора навіть не додається ніяких налаштувань. Все, що вам потрібно, це використовувати шорткод при створенні записів, ось так:
завантажити Easy Flash Embed плагін ви можете.
Метод з кодом
Для тих, хто хоче мати більше контролю над кодом, ми покажемо, як вставити ваші flash файли прямо в WordPress записи, пости і навіть теми. Хоча за роки було придумано безліч способів зробити це, найпростіший і підходить під стандарти - використовувати елемент.
Код вставки буде виглядати приблизно так:
Зверніть увагу, що ви використовуєте 2 елемента . Внешний элемент - для Internet Explorer, тогда как внутренний - для всех остальных браузеров. Вы можете изменять ваш альтернативный текст, если необходимо. Вы можете добавить также другие опции , например wmode или allowScriptAccess .
P.S. Всегда нужно использовать wmode=transparent , чтобы ваша вставка не перекрывала существующий контент, например плавающий блок.
Любой флеш-файл с расширением *.swf
можно вставить в блог.
Например, мы нашли игру «давим пузыри»:
Вставим её в свой блог. Для этого ссылка должна быть «прямой» (заканчиваться на типичное расширение флеш-файлов *.swf
)
Просто копируем адрес файла и ставим в код вместо "ссылка-на-файл
":
отримуємо:
Повний код цієї «флешки» для вставки в блог:
Міняємо розмір флеш-об'єкта, змінюючи значення:
width \u003d 450 - ширина 450 пікселів
height \u003d 300 - висота 300 пікселів
Для вставки з компа файлів з розширенням * .swf допомагають хостинги, рекомендовані на стор. - всі вони видають «прямі» посилання на файл. Отримуємо посилання і ставимо в код.
все 🙂
Приклади вставки в блог флеш-об'єктів (* .swf)
Код для вставки в блог:
Код для вставки в блог:
нотатки
- недолік методу - у користувачів у яких встановлено flash, але відключений javascript, побачать тільки альтернативне вміст
- використання параметра wmode може привести до некотрая помилок роботи flash (наприклад, при wmode \u003d "transparent" не можна ввести кириличні символи в поля введення), використовуйте його тільки коли це дійсно необхідно + добре потім тестируйте функціональність flash-об'єкта
- в попередній версії методу використовувалося значення transparent параметра wmode, від нього довелося відмовитися, тому що обробка прозорості веде до зниження продуктивності браузера
- проект SWFObject (є документація, опис api)
Рішення з використанням javascript бібліотеки SWFObject 2
update 16.03.2010 Олександр Головко
Ще один варіант динамічної вставки об'єкта реалізується викликом функції embedSWF.
Для цього підключаємо бібліотеку, скачати яку можна на сторінці проекту SWFObject в Google Code:
Як і в попередньому варіанті, створюємо HTML контейнер для flash з альтернативним вмістом:
Встановити свіжу версію FlashПри динамічної вставці пишемо скрипт, який викликає функцію swfobject.embedSWF і передає їй параметри вставки flash-об'єкта. Це може виглядати, наприклад, так (демонстраційний приклад взятий з офіційної документації):
Параметри і атрибути вставки flash на сторінку
Так як скрипт буде вставляти на сторінку конструкцію object з вкладеними param, необхідно передати йому параметри цієї конструкції. Вони діляться на три групи:
- параметри безпосередньо скрипта;
- список елементів params вкладених в object.
- атрибути елемента object;
Список параметрів безпосередньо скрипта
Це власне аргументи функції swfobject.embedSWF ()
| ім'я параметра | Тип параметра | опис параметра |
|---|---|---|
| swfUrl | String, обов'язковий | URL SWF файлу |
| id | String, обов'язковий | id HTML елемента (що містить альтернативний контент) який повинен бути замінений на Flash контент |
| width | String, обов'язковий | ширина SWF |
| height | String, обов'язковий | висота SWF |
| version | String, обов'язковий | версія Flash плеєра необхідного для даного SWF (формат: "major.minor.release") |
| expressInstallSwfurl | String, необов'язковий | задає URL для express install SWF і активує Adobe express install. Зверніть увагу, що express install спрацьовує тільки один раз (при першому виконанні), вимагає Flash плеєр версії 6.0.65 або старше на Win або Mac платформах. Мінімально можливий розмір SWF для його роботи 310x137px. |
| flashvars | Object, необов'язковий | змінні передаються Flash в вигляді пар ім'я: значення |
| params | Object, необов'язковий | елементи params вкладені в object у вигляді пар ім'я: значення |
| attributes | Object, необов'язковий | атрибути елемента object у вигляді пар ім'я: значення |
| callbackFn | JavaScript функція, необов'язковий | може бути використана для визначення функції зворотного виклику, сповіщаючи про успішне або неуспішному впровадженні файлу SWF |
Параметри перераховуються через кому. Необов'язкові параметри можна пропускати, замінюючи значенням false. При цьому замикають false можна не вказувати. Наприклад замість:
Swfobject.embedSWF ( "myContent.swf", "myContent", "300", "120", "9.0.0", "false", flashvars, "false", "false", "false");
пишемо просто:
Swfobject.embedSWF ( "myContent.swf", "myContent", "300", "120", "9.0.0", "false", flashvars);
Параметри flashvars, params і attributes є JavaScript об'єктами, їх можна пропустити не тільки вищевказаним методом, але і передавши порожній об'єкт :().
params
Var params \u003d (); params.menu \u003d "false"
Для управління прозорістю, часто застосовується параметр wmode, для управління якістю - quality.
Var params \u003d (); params.menu \u003d "false"; params.wmode \u003d "transparent"; params.quality \u003d "high";
attributes
Це ті атрибути, які в нашому прикладі виглядають ось так:
Var attributes \u003d (); attributes.id \u003d "myDynamicContent"; attributes.name \u003d "myDynamicContent";
Для flashvars, params і attributes існує скорочений варіант запису, в один рядок, без створення додаткових змінних, наприклад так:
Тепер подивимося ще раз на демонстраційний приклад, який, сподіваюся, вже став значно зрозуміліше. Для зручності параметри записані одним рядком.
Тут всього-на-всього написано: «Флешку з файлу myContent.swf вставити в HTML елемент c id \u003d" myContent ". Ширина флеша 300px, висота 120px. Необхідна версія Flash плеєра 9.0.0. Для установки плеєра при його відсутності використовуємо файл expressInstall.swf. У флеш передаємо три змінних name1 \u003d "hello & quot name2 \u003d" world ", name3 \u003d" foobar ". Відображаємо меню, яке містить тільки настройки і опції Flash. Створеному тегу object присвоюємо id \u003d" myDynamicContent "і name \u003d" myDynamicContent "».
Трохи громіздко, але зовсім не страшно, чи не так?
Наостанок ще один приклад вставки флеша. Трохи складніший і наближений до реальності.
Сьогодні вирішив відкрити деякі простенькі секрети, які дозволять вам набагато поліпшити зовнішній вигляд вашого сайту. І мова піде про техніку флеша.
Взагалі, я вважаю, що робити весь сайт на флеш - просто неповага до відвідувача, та ще й проблеми з індексацією в пошукових системах, але ось робити цікаві вставки на флеш, дуже навіть прикрашає дизайн будь-якого сайту.
У статті мова піде про те, як правильно вставляти ці флешролікі так, щоб вони органічно вписувалися в фон.
Для початку, я хотів би показати навіщо нам це потрібно на прикладі.
Викачуємо останню версію з гугла, там же можна подивитися і різні способи вставки, я ж розповім про один з них, який нам потрібен буде для вставки флеш з прозорим фоном.
Для цього будемо використовувати динамічний метод вставки флеш. Це означає, що потрібно в коді створити div з певним id - в нього ми вставимо альтернативний контент, який буде показуватися, якщо у користувача не встановлено \\ відключений флеш програвач. Вийде щось на зразок цього
Для перегляду ролика встановіть флеш-програвач
Тепер потрібно вивести замість нашого шару флеш ролик. Для цього пишемо такий код
Тепер розшифрую.
- var flashvars потрібно нам для позначення змінних. У нашому випадку, це не потрібно.
- var params - дуже важливо тут вказати wmode: "transparent" - тому що без цього, ролик буде вставлено без прозорого фону. У цьому рядку можна вказувати і інші параметри для флеша
- var attributes - тут вказуємо атрибути, нам це теж не потрібно.
У цьому рядку
Swfobject.embedSWF ( "myContent.swf", "myContent", "300", "120", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
Ми вказуємо по порядку
- swfUrl (Шлях до ролика на флеш)
- id (Id того шару, який ми запам'ятали вище)
- width (Ширина SWF)
- height (Висота SWF)
- version (Версія Flash плеєра необхідного для даного SWF)
- expressInstallSwfurl (Задає URL вашого express install SWF і активує Adobe express install. Зверніть увагу, що express install спрацьовує тільки один раз (при першому виконанні), вимагає Flash плеєр версії 6.0.65 або старшої на Win або Mac платформах, мінімально можливий розмір SWF для його роботи 310? 137px.)
- flashvars (Підключаємо змінні)
- params (Підключаємо параметри)
- attributes (Підключаємо атрибути)
Ось і все, якщо ж щось незрозуміло, то ось вам архів, в ньому показаний приклад підключення такого флеш ролика.
fleek.org
