Html — Помощь в реализации Flash на HTMLPHP.


Содержание

Как вставить флеш-объект в html-файл.

Флеш, mp3, mp4, flv, avi, 3gp — для HTML всего лишь объекты, которые вставляются в хтмл-файл при помощи уже знакомого нам тега OBJECT. Если в предыдущих объектах(графика, аплеты, фреймы) у нас была альтернативная замена(img, ifame, APPLET), то для этих типов файлов альтернативы нет, но не расстраивайтесь. Все эти типы файлов объединяет флеш-плеер, который установлен у 98% посетителей. Но об всем по порядку.

Как вставить флеш-объект в html-файл.
Почти все флеш-файлы имеют расширение «.SWF»(file.swf), с этим типом мы и будем работать.
Самый простой способ вставить флеш-объеккт в в HTML-файл:

Мы в тег object помещаем атрибут data с адресом нашего флеш-объекта и указываем тип при помощи атрибута type, в котором указываем что это приложение(application) которое должно обработаться флеш-плеером(x-shockwave-flash), а также устанавливаем размеры. Все-бы хорошо но не у всех этот плеер установлен или браузер не поддерживает данный тип файлов.
Более полный код выглядит так:

Результат:

1)Мы тегу object присвоили размеры, а также атрибутом codebase указали какая версия флеш-плеера нужна. По поводу версии, здесь все зависит от того что за объект, если это просто гримированная картинка в флеш, то подойдет и как в моем примере 6 версия, если используется ActionScript 2.0 то 7версия, а если ActionScript 3.0 то флеш-плеер должен быть не менее 10версии. Но запомните, чем выше требования — тем меньше шансов что пользователь ваш флеш-объект увидит.
2)Мы не атрибутом data, а тегом param передаем адрес нашего объекта.
3)Тег embed в спецификации по HTML-4 не описан вообще, он является дочерним для тега object, выступает в роли «патча»(заплатка), в данном случае используется для браузеров которые не понимают код указанный мной первым и дублирует для него размеры, указывает тип данных, а так-же если браузер не понимает атрибут data тега object.

Но если честно то нет смысла особо «заморачиваться» с флеш-обектами, так как, флеш-файлы вы можете только двумя способами получить:
1)Создать самому(самой) флеш-приложение, в этом случае ваш флеш-редактор сам сгенерирует хтмл код и вам останется только вставить этот код в нужную страницу и возможно немного отредактировать пути к объекту.
2)Установить какой-либо флеш-плеер, игрушку или просто флеш-банер, то в этом случае вам дадут только код нужного объекта, который вам нужно просто разместить на сайте. С плеерами немного сложнее но о них поговорим в следующей главе.

Поиск по тегам:
Список всех тегов
А вы знаете как при помощи каскадных таблиц стилей можно использовать несколько шрифтов одновремено?

Вставка flash в HTML

Задача

Вставить flash-объект в HTML страницу, придерживаясь следующих требований:

  • кроссбраузерность — работоcпособность во всех современных браузерах;
  • альтернативный контент — если не установлен flash или установленная устаревшая версия, выводим альтернативное изображение и ссылку для инсталляции свежей версии flash;
  • максимальная простота и гибкость использования метода;
  • SEO и юзабилити дружественность;
  • чистота кода — меньше кода, проще работать с шаблонами;
  • соответствие стандартам.

Решение с использованием javascript библиотеки SWFObject 1

Блок, в который будет вставлен flash, имеет альтернативный контент — это будет отображено при не установленном flash, либо при устаревшей версии. Для примера выведем альтернативную картинку и ссылку для установки свежей версии flash:

Демонстрация вставки одного flash-объекта. Для вставки нескольких flash-объектов используем необходимое количество контейнеров и вызовов функции вставки:

Заметки

  • недостаток метода — у пользователей у которых установлен flash, но отключен javascript, увидят только альтернативное содержимое
  • использование параметра wmode может привести к некотрым ошибкам работы flash (например, при wmode=»transparent» нельзя ввести кириллические символы в поля ввода), используйте его только когда это действительно необходимо + хорошо потом тестируйте функциональность flash-объекта
  • в предыдущей версии метода использовалось значение transparent параметра wmode, от него пришлось отказаться, т.к. обработка прозрачности ведет к снижению производительности браузера
  • Скачать библиотеку SWFObject (9.5Kb)
  • проект SWFObject (есть документация, описание api)
  • хорошая статья по вставке flash в HTML

Решение с использованием javascript библиотеки SWFObject 2

Еще один вариант динамической вставки объекта реализуется вызовом функции embedSWF.

Для этого подключаем библиотеку, скачать которую можно на странице проекта SWFObject в Google Code:

Как и в предыдущем варианте, создаем HTML контейнер для flash с альтернативным содержимым:

При динамической вставке пишем скрипт, который вызывает функцию swfobject.embedSWF и передает ей параметры вставки flash-объекта. Это может выглядеть, например, так (демонстрационный пример взят из официальной документации):

Параметры и атрибуты вставки flash на страницу

Так как скрипт будет вставлять на страницу конструкцию object с вложенными param, необходимо передать ему параметры этой конструкции. Они делятся на три группы:

  1. параметры непосредственно скрипта;
  2. список элементов params вложенных в object.
  3. атрибуты элемента 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 можно не указывать. Например вместо:

params

Это те атрибуты, которые в нашем примере выглядят вот так:

Каждая пара имя:значение «развернется» скриптом в отдельный тег param. Таблицу этих параметров можно посмотреть в статье Параметры для вставки объектов.

Для управления прозрачностью, часто применяется параметр wmode, для управления качеством — quality.

attributes

Это те атрибуты, которые в нашем примере выглядят вот так:

Каждый из них станет атрибутом тега object, динамически вставленного на страницу. Их перечень также приведен в статье Параметры для вставки объектов.

Для flashvars, params и attributes существует сокращенный вариант записи, в одну строку, без создания дополнительных переменных, например так:

Теперь посмотрим еще раз на демонстрационный пример, который, надеюсь, уже стал значительно понятнее. Для удобства параметры записаны одной строкой.

Тут всего-навсего написано: «Флешку из файла myContent.swf вставить в HTML элемент c ».

Немного громоздко, но совсем не страшно, не правда ли?

Напоследок еще один пример вставки флеша. Чуть более сложный и приближенный к реальности.

Связь БД через PHP во Flash

Привет всем,
мне необходимо вывести данные из БД (MySQL), используя PHP файл в Flash.

PHP файл con.php:

Динамическое текстовое поле: varText должно выводить строки массива получаемые из БД. Но у меня выводится всегда только последняя строчка из БД.
Помогите, очень надо.

ActionScript 3
30.09.2009, 22:42

Не могу загрузить картинку ни через один браузер. Flash обновил, пишет flash crashed :(
Очень надо. Пробовал через Opera, IE, FF. Флеш обновил, перезагрузился. Всё одно и то же. Опера.

Можно ли через VB организовать связь (через паралельный порт) с отдельным устройством?
Вот хотелось бы узнать можно ли через VB организовать связь (через паралельный порт) с отделным.

Flash и PHP
помогите кто чем может. засада с курсовой. необходимо создать 3 функции в классе. 1. вход в игру.

PHP и Flash
Здравствуйте. Не знал куда правильней будет поместить данную тему, но решил тут. В общем встретил я.

PHP и FLASH
помогите кто чем может. засада с курсовой. необходимо создать 3 функции в классе. 1. вход в игру.


30.09.2009, 23:03 2

неужели нельзя вывод сразу в while() засунуть.

а теперь самое главное, чтобы загрузить данные во флеш твой php скрипт должен генерировать xml а уже этот xml суй во флеш и проблем не будет =)))

30.09.2009, 23:19 [ТС] 3

Спасибо NecroS, за столь быстрый ответ.
к сожалению я пропустил определение, какой сегодня день в con.php.
$Day = date(‘d’);
а потом я его сверяю с БД, там есть столбец с таким именем: day.

все работает, в PHP это все показывается как положено, сколько строчек в массиве, столько и выводится, а в Flash выводится только последняя строчка, вот это и есть проблема.

30.09.2009, 23:51 4
ActionScript 3
ActionScript 3
30.09.2009, 23:51
01.10.2009, 00:04 [ТС] 5
ActionScript 3
ActionScript 3
01.10.2009, 00:13 6
ActionScript 3
ActionScript 3
01.10.2009, 00:32 7
01.10.2009, 23:58 [ТС] 8

Не знаю почему, но varText.text не работает, только varText.
с varText += у меня выводится в динамическом тексте снова же последняя строчка, но несколько раз. А вообще желательно мне передавать через PHP в флеш массив. Тогда я смог бы управлять текстом так как мне это будет нужно. А надо выводить каждую строку из БД отдельно через определенное время.
Если есть такая возможность, то подскажите, к сожалению я еще не волшебник, я только учусь , поэтому прошу немного терпения.
А как выводить в XML я тоже не знаю.

Добавлено через 20 минут
Дополнение к выше написанному. Мне необходимо выводить строки из БД в динамический текст по одной через массив, тогда можно было бы манипулировать выводом текста. Строки из массива в флеше должны выводиться по одной, причем с определенным интервалом проявляться и таким же образом изчезать.
Жду с нетерпением ответа, заранее всем спасибо.

02.10.2009, 00:19 9

Добавлено через 3 минуты
И использовать потом эти массивы по своему усмотрению..

Html — Помощь в реализации Flash на HTML/PHP.

Данная рубрика заменит Вам полноценный «HTML5 учебник». Здесь Вы сможете найти ответы на большинство вопросов, связанных с HTML5.

Расширяем возможности HTML за счёт создания собственных тегов

В этом уроке я покажу процесс создания собственных HTML тегов. Пользовательские теги решают множество задач: HTML документы становятся проще, а строк кода становится меньше.

Определение доступности атрибута HTML5 с помощью JavaScript

Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

HTML5: API работы с вибрацией

HTML5 — глоток свежего воздуха в современном вебе. Она повлиял не только на классический веб, каким мы знаем его сейчас. HTML5 предоставляет разработчикам ряд API для создания и улучшения сайтов с ориентацией на мобильные устройства. В этой статье мы рассмотрим API для работы с вибрацией.

Создание форм с помощью Webix Framework — 4 практических примера

Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.

Знакомство с фрэймворком Webix

В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

Отключение HTML5 валидации

Бесит валидация, которая добавляется к полям формы, если вы пользуетесь HTML5? Её можно без проблем отключить.

5 устаревших фишек в HTML5

В этой статье мы рассмотрим пятёрку элементов HTML5, которые устарели и были удалены из спецификации.

Как сделать форму в HTML для сайта

Рассматривая основыные теги HTML мы не можем не затронуть такой важный элемент как формы. Часто на web-страницах необходима обратная связь. Например, заполнение анкеты на сайте, регистрация, авторизация, комментарии и т.д. Во всех этих случаях пользователь заполняет специальные области (поля формы) на странице, после чего происходит отправка данных на сервер. Для создания обратной связи используются формы. Форма это фрагмент HTML документа предназначенный для ввода информации пользователем.

На рисунке представлена форма регистрации студента на сайте образовательного учреждения.

Для создания формы используется контейнер с атрибутом action, в котором указывается страница на сервере, которая будет обрабатывать данные переданные формой.

Структура простейшей формы:

В каждой форме необходимо также наличие кнопки submit, предназначенной для отправки данных после заполнения формы.

Итак, для записи практически всех элементов форм используется тэг с атрибутом type. Для создания кнопки, которая сбрасывать все данные с форм используется следующая структура:

Для создания текстового поля (textfield) существует параметр text. При этом используются параметры: name – имя поля; size – для поля в симолах; maxlength – максимально возможное количество символов в поле; value – информация, отображаемая в форме по умолчанию

Пример записи формы с двумя текстовыми полями:

Результат работы формы представлен на рисунке.

В случае, если в текстовое поле необходимо ввести большое количество информации, например, комментарий используется форма текстовой области (textarea),которая создается при помощи тэга

Результат работы кода с текстовой областью представлен на рисунке.

Следующим элементом форм являются списки, позволяющие сделать выбор из представленного множества значений. Создать форму списка позволяют тэги с параметром value, отвечающем за значение элемента и

Для того, чтобы элемент был выделен при загрузке страницы необходимо в тэге дописать атрибут selected. Различные возможности построения элемента списка и его код представлены на рисунке.

Аналогичным способом выбора являются элементы формы флажок (checkbox) и радиокнопка (radiobutton). Отличие этих элементов состоит в том, что флажок позволяет сделать множественный выбор, а радиокнопка только единичный.

Структура записи флажка и радиокнопки:

В указанных в структуре элементах для выделения флажка и радиокнопки по умолчанию используется атрибут checked. Пример использования флажка, радиокнопки, а также HTML код представлены на рисунке.

Еще одним элементом формы является кнопка, задаваемая при помощи атрибута typeтэга со значением button:

В указанном коде для создания кнопки присутствует параметр onclick, в котором как правило задается код на языке программирования для выполнения того или иного действия при нажатии на эту кнопку:

Для вывода сообщения в специальном окне используется команда на языке jаvascript – aler. Результат работы примера представлен на рисунке.

Для вставки изображения в кнопку используется код, представленный в следующем примере:

При регистрации и входе на сайты используется поле со скрытым тестом, отображаемым в виде звездочек. Это элемент формы password:


Часто регистрация на сайте разбивается на несколько страниц и каждая последующая должна содержать в себе информацию из предыдущей. Для того чтобы скрыть передаваемую информацию используется элемент формы hidden:

Элемент формы hiddenбудет невидим в окне браузера.

Для загрузки файлов на сервер в формах имеется элемент file. Пример кода для загрузки файлов на сервер представлен ниже:

Итак, в этой теме были рассмотрены элементы форм для создания различных HTMLстраниц, которые вместе с обработчиками сценария на компьютере или сервере позволяют разрабатывать полноценные web-приложения.

Блог Vaden Pro

Достаточно часто у нас возникает необходимость включить PHP код внутрь HTML страницы. Сделать это достаточно просто, когда понимаешь основные принципы работы парсера кода и знаешь основные методы его вставки с различиями между ними. Об этом и пойдет речь далее.

Принцип обработки файла содержащего PHP

После того, как парсер заходит на страницу, он начинает читать код построчно до тех пор, пока не наткнется на специальные теги, обозначающие начало и конец кода PHP, до этого момента он просто выводит содержимое документа на экран монитора.

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

Для лучшего понимания можете запустить у себя файл php следующего содержания:

Способы вставки PHP кода

Этот способ вставки выигрывает у своих альтернатив по ряду причин:

  • Не требует дополнительной активации или чего-либо в этом роде (доступен всегда)
  • Может быть без опасений использован в файлах со стандартами кода XML и XHTML
  • В силу своей распространенности стал практически общепринятым стандартом вставки PHP скриптов

Данная конструкция хоть и не требует никаких предварительных настроек от нас, как и предыдущая, но на практике встречается на порядок реже, поскольку не несет в себе никаких преимуществ.

Не смотря на всю свою простоту и привлекательность есть ряд причин по которым эта конструкция для вставки PHP не получила всеобщего признания, как первая:

  • Чтобы его возможно было использовать, нужно зайти в файл php.ini , найти в нем строку содержащую short_open_tag и активировать данный вид вставки скриптов в HTML код (в случае скомпилированного кода используется опция —enable-short-tags)
  • Иногда могут появляться проблемы с их поддержкой на не родном сервере, потому если Вы не имеете доступа к платформе, где будут после располагаться вписанные подобным образом скрипты, то лучше не применять эту конструкцию.
  • С версии PHP 5.4 конструкция будет верно истолкована парсером даже, если short_open_tag не будет активен, тем не менее ее применение на практике по-прежнему испытывает проблемы с совместимостью

Удобный на первый взгляд вариант также имеющий ряд проблем с применением на практике:

Как вставить флэш-ролики, видео и аудио файлы в HTML документ? Урок №18

2014-04-10 / Вр:19:02 / просмотров: 13454

Думаю, пришло время получить ответ на вопрос, как вставить флэш-ролики, видео и аудио файлы в HTML документ.
Покажу несколько способов, как вставить видео ролик или аудио файл.

Видео и аудио файл можно вставить в HTML-документ с помощью тега .

Возможно, когда вы проверите пример, ваш браузер может потребовать подключения к специальному плагину:

Вид плеера зависит от подключенного плагина и атрибутов тега .

Например, вот Google Chrome:

Или в Internet Explorer:

Атрибуты EMBED

height — высота плеера (в пикселях). Пример:

width — ширина плеера (в пикселях). Пример:

src — адрес флэш-ролика, видео или аудио файла. Пример:

type — указывает MIME-тип (спецификация форматирования сообщений и кодирования информации для передачи по интернету) содержимого элемента.

pluginspage — адрес страницы в Интернете, откуда можно скачать и установить плагин к браузеру.

autostart — если параметр стоит «0», то это значит, что после загрузки веб-страницы, плеер будет остановлен. Если указать параметр « 1 », тогда после загрузки веб-страницы, плеер будет автоматически воспроизведен (работает в браузере IE). Пример:

title — вывод всплывающей подсказки при наведении курсора мышки на аудио или видео плеер. (Работает в браузере IE).

Результат в Google Chrome:

А можно вот так:

Результат в Google Chrome:

Изображения, аудио, видео, Java приложения, ActiveX, PDF и Flash можно вставить в HTML-документ с помощью тега

Атрибуты OBJECT

data указывает путь к файлу объекта;
type тип обекта (не является обязательным). Например:

type=»application/x-shockwave-flash» или type=»image/png» и т.д.;

width – ширина;
height высота

Также можно прописать текст между открывающими тегами . Написанный текст будет отображаться в том случае, если браузер не поддерживает элемент object .

Результат данного примера в окне браузера, если он не поддерживает тег OBJECT :

Вставить аудио на веб-страницу можно и тегом :

Атрибуты тега AUDIO

autoplay — аудио воспроизводится автоматически сразу после загрузки веб-страницы;

controls — панель управления к аудио плееру;

height — высота аудио плеера;

loop — повтор воспроизведение аудио сначала после его завершения;

src — путь к аудио файлу

Вставить видеоролик на веб-страницу можно и тегом :

Атрибуты тега VIDEO

autoplay — видео воспроизводится автоматически сразу после загрузки веб-страницы;
controls — панель управления к видео плееру;
height — высота видео плеера;
width — ширина видео плеера;
loop — повтор воспроизведение видео сначала после его завершения;
src — путь к видео файлу;
poster — адрес картинки. Картинка будет отображаться пользователю, пока видео не доступно или не воспроизводится.

Вначале загружается картинка «kartinka.png» .

Когда вы нажмете «плей», картинка исчезнет и заработает видео:

Если браузер не поддерживает тег , вы увидите вот это:

Вот и все.
Если есть исправление, дополнение или вопросы по теме «как вставить флэш-ролики, видео и аудио файлы в HTML документ», пишите в комментарии, постараюсь ответить.

Внедрение Flash с помощью SWFObject 2

Вопрос о внедрении Flash с помощью разметки соответствующей стандартам возникает достаточно часто, между тем у этой проблемы есть достаточно известное решение — SWFObject. SWFObject 2 не только позволяет внедрять Flash динамически, с помощью JavaScript, но и статически, когда для внедрения используется стандартная разметка, а JavaScript только исправляет неразрешимые с помощью разметки проблемы, при этом даже если JavaScript отключен пользователи все равно увидят Flash.

Скачать библиотеку и получить дополнительную информацию можно на странице проекта SWFObject в Google Code.

Что такое SWFObject?


SWFObject 2:

  • Предоставляет два оптимизированных метода внедрения Flash, основанный на разметке и использующий JavaScript
  • Предоставляет JavaScript API со всеми возможностями необходимыми для внедрения SWF файлов и получения информации о Flash плеере. [http://code.google.com/p/swfobject/wiki/api]
  • Использует один небольшой JavaScript файл (SWFObject 2.0 size: 8.7Kb / GZIPed: 3.4Kb, SWFObject 2.1 size: 9.5Kb / GZIPed: 3.8Kb)
  • Преемник SWFObject 1.5 [http://blog.deconcept.com/swfobject/] и UFO [http://www.bobbyvandersluis.com/ufo/]
  • В конце концов должен заменить Adobe Flash Player Detection Kit [http://www.adobe.com/products/flashplayer/download/detection_kit/]
  • Объединяет все существующие методы внедрения Flash и претендует на новый стандарт внедрения Flash.
  • Проект с открытым кодом Джефа Стирнса, Михаеля Вильямса и Бобби ван дер Слуйса, ранее известный как SWFFix [http://code.google.com/p/swffix/]

Почему вы должны использовать SWFObject?

  • Он более оптимизированный и гибкий чем любой другой способ внедрения Flash плеера
  • Он является универсальным решением для всех: будь вы HTML, Flash или JavaScript разработчик, это решение подходит для всех
  • Прекращает затянувшееся использование специфичной разметки для некоторых браузеров, позволяет использовать стандартную разметку и альтернативный контент
  • Использует ненавязчивый JavaScript и лучшие практики JavaScript
  • Прост в использовании

Подробное обоснование необходимости использования SWFObject 2 вы можете найти в статье Flash Embedding Cage Match опубликованной на A List Apart [http://www.alistapart.com/articles/flashembedcagematch/].

Почему SWFObject использует JavaScript?

SWFObject 2 использует JavaScript преимущественно для преодоления проблем, непреодолимых с помощью разметки:

  • Определяет версию Flash плеера и в зависимости от результата отображает Flash или альтернативный контент, чем предотвращает искажение Flash в плеерах старых версий.
  • Позволяет вернуться к альтернативному контенту с помощью DOM манипуляций в случае, если используется Flash плагин неподходящей версии (Примечание: если Flash плагин не установлен то вместо элемента object автоматически отображается вложенный альтернативный контент).
  • Позволяет использовать Adobe Express Install для установки последней версии Flash плеера
  • Решает проблему со старыми версиями движка Webkit, игнорирующими вложенные в object элементы param, используя проприетарный элемент embed. (Это единственный случай когда используется проприетарная разметка, это будет исключено в будущих версиях)
  • Позволяет публиковать Flash контент с помощью JavaScript тем самым исключать механизмы активации
  • Предоставляет продуманный JavaScript API для выполнения распространенных действий с Flash плеером и Flash контентом.

Какой из методов публикации предпочтителен, статический или динамический?

SWFObject 2 позволяет внедрять Flash двумя различными методами:

  1. При статическом методе публикации Flash и альтернативный контент внедряются с помощью стандартной разметки, а JavaScript используется для решения проблем непреодолимых с помощью разметки.
  2. Динамический метод публикации основан на замене альтернативного контента Flash контентом в случае если есть достаточно новая версия Flash плеера и поддержка JavaScript.

Преимущества статического метода публикации:

  1. Используется стандартная разметка
  2. Механизм внедрения Flash контента не зависит от JavaScript благодаря чему Flash будет доступен значительно большей аудитории:

Преимущества динамического метода публикации:

  1. Позволяет обойти механизмы активации активного контента в Internet Explorer 6/7 и Opera 9+. Обратите внимание, что Microsoft выпустил обновления исключающие механизм активации в браузерах Internet Explorer [http://www.swffix.org/devblog/?p=19]
  2. Отлично интегрируется в JavaScript приложения

Статический метод публикации Flash с помощью SWFObject

Шаг 1: Внедрение Flash и альтернативного контента с помощью стандартной разметки

Примечание: Метод вложенных объектов требует дублирования объявления object (внешний object предназначен для Internet Explorer а внутренний object для остальных браузеров), поэтому если вам нужно определить атрибуты или param для object то их нужно продублировать для внешнего и внутреннего объектов.
Обязательные атрибуты:

  • classid (только для внешнего object, значение всегда clsid:D27CDB6E-AE6D-11cf-96B8-444553540000)
  • type (только для внутреннего object, значение всегда application/x-shockwave-flash)
  • data (только для внутреннего object, определяет URL SWF файла)
  • width (для обоих элементов object, определяет ширину SWF)
  • height (для обоих элементов object, определяет высоту SWF)

Обязательные элементы param:

  • movie (только для внешнего элемента object, определяет URL SWF файла)

Примечание: Мы рекомендует не использовать атрибут codebase для указания URL установки Flash с серверов Adobe, поскольку это противоречит спецификации которая ограничивает доступ доменом текущего документа. Вместо этого используйте альтернативный контент с сообщением, что пользователь может получить полную версию установив Flash плагин.

Как использовать HTML для конфигурирования Flash контента?

Зачем нужен альтернативный контент?

Элемент object может содержать альтернативный контент который будет отображен если Flash плеер не установлен или не поддерживается. Альтернативный контент доступен поисковикам, поэтому он может быть хорошим инструментом при оптимизации сайта для поисковиков. Альтернативный контент нужен если вы хотите сделать сайт доступным для пользователей не использующий плагины [http://www.adobe.com/devnet/flash/articles/progressive_enhancement_03.html], хорошо индексируемый поисковиками [http://www.adobe.com/devnet/flash/articles/progressive_enhancement_04.html] и ненавязчиво показывающий пользователям, что они могут увидеть его во всей красе если установят Flash плагин.

Шаг 2: Подключение библиотеки SWFObject

Шаг 3: Зарегистрируйте ваш Flash контент и задайте параметры

Советы

  • Используйте SWFObject HTML и JavaScript генератор для автоматического создания кода [http://code.google.com/p/swfobject/wiki/generator]
  • Чтобы вставить несколько SWF просто повторите шаги 1 и 3
  • Простейший способ получать активный элемент object — это использовать JavaScript API: swfobject.getObjectById(objectIdStr) [http://code.google.com/p/swfobject/wiki/api]

Динамический метод публикации с помощью SWFObject

Шаг 1: Создание альтернативного контента с помощью стандартной разметки

Шаг 2: Подключение библиотеки SWFObject

Шаг 3: Внедрение SWF с помощью JavaScript

Конфигурирование Flash контента

Как используя JavaScript объекты установить переменные, параметры и атрибуты?

Советы

  • Используйте SWFObject HTML и JavaScript генератор дляавтоматического создания кода [http://code.google.com/p/swfobject/wiki/generator]
  • Чтобы вставить несколько SWF просто повторите шаги 1 и 3

Переход от SWFObject 1.5 к SWFObject 2

  1. В SWFObject 2 НЕТ обратной совместимости с SWFObject 1.5
  2. Предпочтительно чтобы весь код JavaScript был в разделе head
  3. Имя библиотеки теперь в нижнем регистре: swfobject вместо SWFObject
  4. Методы доступны только через библиотеку (вместо экземпляра SWFObject в SWFObject 1.5)
  5. API абсолютно новое: [http://code.google.com/p/swfobject/wiki/api]
  6. SWFObject 2 заменяет указанный HTML блок с альтернативным контентом полностью, включая элемент контейнер, в случае если есть достаточная поддержка Flash и JavaScript, тогда как SWFObject 1.5 заменяет только содержимое указанoго контейнера. Если вы явно не указали атрибут id, элемент object автоматически наследует id указанного HTML контейнера с альтернативным контентом

Переход от UFO к SWFObject 2

  1. SWFObject 2 заменяет указанный HTML блок с альтернативным контентомполностью, включая элемент контейнер, в случае если есть достаточнаяподдержка Flash и JavaScript, тогда как UFO заменяет толькосодержимое указанoго контейнера. Если вы явно не указали атрибут id, элемент object автоматически наследует id указанного HTML контейнера с альтернативным контентом
  2. setcontainercss отсутствует в SWFObject 2, похожий функционал обеспечивает SWFObject JavaScript API: swfobject.createCSS(selStr, declStr) [http://code.google.com/p/swfobject/wiki/api]

Поддерживает ли SWFObject 2 MIME тип application/xhtml+xml?

SWFObject 2 НЕ поддерживает XML MIME типы, это сознательно решение.
Есть несколько причин почему мы не поддерживаем их:

  • их использует очень малая часть веб-разработчиков
  • мы не уверены, что веб пойдет этим путем. Internet Explorer его не поддерживает и все остальные основные производители браузеров больше склоняются к новому, стандартному способу парсинга HTML (в HTML 5), отходя от парсинга HTML как XML, каким его видит W3C
  • отказавшись от поддержки XML MIME типов мы уменьшили размер файла и упростили тестирование и поддержку

Дополнения предложенные в комментариях:

Средства для внедрения Flash в популярных JS фреймворках

WMODE

Параметр заслуживающий отдельного упоминания.
wmode может принимать значения: window, opaque, transparent и определяет режим отображения Flash на веб странице.
window — значение по умолчанию, в этом режиме для flash используется отдельное окно (в пределах страницы) главная проблема этого режима в том, что flash отображется поверх любых элементов страницы, вне зависимости от их z-order, что часто является причиной попадания под flash выпадающих меню и прочих неприятностией.
opaque — непрозрачный flash не перекрывающий элементы страницы которые он перекрывать не должен.
transparent — прозрачный flash, сквозь который просвечивает фон HTML страницы, как и в предыдущем случае не перекрывает то чего перекрывать не должен, но в этом режиме возможны проблемы с производительность при использовании анимации.
К сожалению, wmode не решает проблемы с перекрыванием flash роликом других элементов в Linux, по крайней мере в FF3 точно не решает.

Современные формы на HTML5 и CSS3

Дата публикации: 2013-02-08

От автора: давайте рассмотрим создание функциональной формы html5, производящей валидацию пользовательских данных на стороне клиента. Сделав это, мы улучшим ее с помощью CSS, в том числе CSS3!

Шаг 1: Формирование представления о функциональности

Сначала нам нужно составить концепцию того, как будет выглядеть наша форма на HTML5, и как она будет функционировать. Для примера давайте создадим простую контактную форму, запрашивающую у пользователя следующую информацию:

Адрес электронной почты

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Нам нужно убедиться, что пользователь вводит информацию правильно. Чтобы этого добиться, применим новые техники валидации на стороне клиента HTML5. А как насчет пользователей, у которых нет возможности использовать формы HTML5? Можно просто применить валидацию со стороны сервера, но наша статья не об этом.

Шаг 2: Разработка формы

Давайте постараемся определить то, как следует выглядеть нашей форме, создав грубую модель.

Видите, нашу форму составляют следующие элементы:

Заголовок
Обозначение обязательных для заполнения полей


Названия полей ввода

Поля ввода данных
Текст-заполнитель

Подсказки к полям

Кнопка «Отправить» (Submit)

Теперь, когда вы определили, какие элементы составляют нашу форму, можно создавать разметку HTML.

Шаг 3: Первичный код HTML

Вплоть до этого момента HTML-файл в браузере пока пуст. Это – просто начальный код для страницы HTML5.

Шаг 4: Форма HTML

Давайте создадим форму HTML (оставим метод action пока пустым, так как проверка данных на стороне сервера в этом учебнике не раскрывается):

Шаг 5: Элементы формы HTML

Для получения организованного и структурированного контента своей формы, обернем ее элементы (label, input и т.д.) в список. Так что начнем мы с создания заголовка формы и первого элемента input:

Подсказки для полей формы

Как видно из макета, мы собираемся сделать форматированные подсказки для полей ввода электронного адреса “email” и вебсайта “website”. Поэтому добавим свои подсказки под поля ввода, где это нужно, и назначим им класс, чтобы можно было позже определить им стили.

Остальные элементы input

Двигаемся дальше и создаем остальные элементы формы, не забывая о том, что нужно обернуть каждый раздел в элемент списка.

Шаг 6: Добавляем атрибут placeholder

Одно из первых усовершенствований, которые предлагает HTML5 для веб-форм (с которым вы, возможно, уже знакомы) – это способность установить текст-подсказку. Он показывается, когда поле ввода либо пустое, либо находится не в фокусе.

Давайте добавим атрибут placeholder для всех текстовых тегов input. Это поможет пользователю понять, что нужно ввести в каждое поле.

Подсказка: Назначьте placeholder’у стили

Вот вам подсказка: если нужно определить стили тексту-подсказке, к вашим услугам имеются префиксы браузеров:

В современных браузерах поддержка атрибута placeholder налажена довольно хорошо (кроме IE9, к сожалению). Если вам реально требуется поддерживать его во всех браузерах, можно посмотреть решение проблемы в javascript.

Шаг 7: Основной CSS

Чтобы создать для формы некую структуру, давайте добавим немного основного CSS. Я прокомментирую вам правила:

Удалите стиль :focus

Webkit автоматически добавляет к input-ам стили, когда те находятся в фокусе. Так как мы будем добавлять собственные стили, то стили по умолчанию нужно отменить:

Типографские стили

Давайте определим элементам своей формы типографские стили:

Стили списка

Давайте назначим стили элементам списка, чтобы придать форме структуру:

Кроме того, добавим тонкую рамку к верхнему и нижнему разделам формы. Выполнить это можно, применив селекторы :first-child и :last-child. Они выбирают, как подразумевается в их названиях, первый и последний элементы списка ul.

Так создается визуальное разделение формы. Помните, что эти селекторы CSS не поддерживаются старыми браузерами. Так как для основной функциональности это не жизненно важно, то в выгодном положении окажутся те, кто пользуется современными браузерами.

Заголовок формы

Назначим стили разделу заголовка своей формы. Он включает тэг заголовка и уведомление, которое информирует пользователей о том, что звездочка (*) обозначает поля, обязательные для заполнения.

Элементы input

Давайте назначим стили основным элементам формы, тем, которые предназначены для сбора пользовательской информации.

Теперь добавим несколько дополнительных визуальных стилей CSS. Некоторые из них видны только пользователям современных браузеров.

Шаг 8: Добавляем интерактивность с помощью CSS3

Давайте добавим немного интерактивности. Мы заставим выбранное в данный момент поле увеличиваться путем добавления отступа.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Теперь с помощью CSS3 для поддерживающих браузеров сделаем увеличение поля гладким переходом.

Шаг 9: Атрибут required в HTML5

Теперь пора заняться долгожданным: инструментами управления формой HTML5.

Добавление атрибута required в любой элемент области ввода текста скажет браузеру, что перед отправкой формы требуется ввести значение. Таким образом, форму нельзя отправить, если нужное поле осталось незаполненным.

Итак, продолжим и добавим атрибут required во все элементы своей формы (потому что нам нужно, чтобы они все были заполнены).

Шаг 10: Стили обязательных для заполнения полей

Вы, возможно, заметите, что в визуальном плане от добавления атрибута required ничего не изменилось. Мы собираемся назначить стили обязательных для заполнения полей с помощью CSS. В этом примере каждое поле в качестве фонового изображения получит красную звездочку. Чтобы это сделать, нам нужно сначала добавить padding справа input-а, где будет находиться фоновое изображение (так будет предотвращено наложение текста, если запись окажется длинной строкой):

Теперь воспользуемся псевдоселектором CSS :required для того, чтобы выбрать все элементы формы с нужным атрибутом. Я сделал в photoshop’е простую иконку с красной звездочкой размером 16×16 px, которая послужит визуальным индикатором поля, обязательного к заполнению.

Что происходит при отправке формы?

Прямо сейчас при отправке формы с использованием элементов HTML5 различные браузеры действуют по-разному. Большая часть браузеров воспрепятствует отправке и покажет пользователю подсказку, отмечающую первое обязательное к заполнению поле, в которое не введено значение. Визуальные стили и поддержка таких полей довольно широки. К счастью, в будущем такое поведение будет стандартизировано.

В quirksmode можно посмотреть поддержку текущим браузером атрибута required.

Подсказка:

На самом деле в webkit назначить стили сообщению в поле-«пузыре» можно с помощью следующего:

Шаг 11: Понимание новых атрибутов type и валидации на стороне клиента в HTML5

Валидация HTML5 работает в соответствии с атрибутом type, установленном в полях формы. Годами HTML поддерживал лишь горстку атрибутов type, таких, как type=»text», но у HTML5 имеется более дюжины новых типов ввода данных, включая электронную почту и url, которые мы и собираемся использовать в своей форме.

Сочетая атрибуты ввода type с новым атрибутом required, теперь браузер способен делать валидацию данных пользователя на клиентской стороне. Если браузер пользователя не поддерживаем новые атрибуты type, такие как type=»email», он просто по умолчанию вернется к type=»text». Действительно, это довольно забавно. По сути, у вас есть обратная совместимость со всеми браузерами в мире, ура!

Так что происходит, если браузер на самом деле поддерживает новые атрибуты type? Для браузеров десктопов визуально нет никакой разницы (кроме определенной пользовательскими правилами CSS). Поле type=»text» выглядит точно так, как поле type=»email». Однако для браузеров мобильных устройств в отношении пользовательского интерфейса разница имеется.

Пример: iPhone

iPhone от Apple’а распознает типы формы и динамично изменяет экранную клавиатуру, предоставляя требуемые по контексту символы. Например, все электронные адреса требуют следующих символов: “@” и “.” И iPhone предоставляет эти символы, когда у input-a задан соответствующий тип.

Шаг 12: Изменение атрибутов type

Поля нашей формы уже установлены по умолчанию на type=»text». Но теперь требуется изменить атрибут типа в полях, предназначенных для электронной почты и вебсайта на соответствующий тип HTML5.

HTML\PHP: технология обнаружения Flash Player

когда мы размещаем флеш файлы на наших веб-сайтах, это OFF-COURSE требует флеш-плеер на клиентских машинах и предлагает установить flash-плеер.

есть ли какой-нибудь php-код, с помощью которого я могу проверить погоду на компьютере-клиенте, а если нет, вместо размещения\вложения флеш файла я размещаю изображения там.

Потому что в моем конкретном случае вспышка не так уж важна. это просто косметика, анимация. которую я могу заменить gif или простой jpeg, не имеет значения.

но могу ли я это сделать

swfobject может помочь с этим.

Вы можете просто разместить контент, который будет отображаться, если флэш не может быть отображен в коде, где должен быть объект вспышки, и наведите на него script.

Adobe теперь отсортирована, поэтому вы можете представить альтернативный контент/прямые пользователи для установки flash/detect, какая версия флеш-пользователя имеет, а затем установить последнюю версию, если необходимо, с вашего сайта, без необходимости посещать сайт adobe.

Немного работы, чтобы получить это на месте, зависит от того, насколько важно, что пользователь использует флеш, или если альтернативный контент будет работать так же хорошо. но для доставки флеш-контента и уверенности в том, что у пользователя будет установлена ​​правильная версия, Flash Detection Kit отлично работает.

Цукерберг рекомендует:  Macos - Sublime Text 3 + View in Browser + Mac OsX не работает
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих
ActionScript 3