Как вставить флеш объект в html
Вставка Flash-ролика в HTML-документ
Вставка Flash-ролика в Web-страницу
Так называемый Flash-ролик содержится в SFW-файле (т.е. в файле с расширением swf, который создается в пакете Macromedia Flash). Чтобы вставить его в Web-страницу, в ее HTML-документ, надо написать несколько строк HTML-кода. А именно, нужно вставить объект, который будет проигрывать (показывать) Flash-файл. Flash-файл может содержать в себе мультимедийный документ (анимацию, векторную и растровую графику, звук, элементы управления, поддерживающие интерактивность). В частности, вы можете создать статическую картинку, содержащую много элементов (например, большой чертеж). Для этого сохраните ее в векторном экономном SWF-формате и втавьте в свой HTML-документ. Более того, Flash-ролик может почти полностью определять и представлять содержание вашей web-страницы, оставляя HTML-документу лишь роль контейнера.
Те, кто знаком с пакетом Macromedia Flash, хорошо знают, как вставлять Flash-ролики в HTML-документ. Однако существуют и такие Web-строители, которые сами не создают, но которым необходимо просто вставлять заимствованные Flash-ролики в свои HTML-документы. Для них я рассказываю, как это сделать.
Чтобы вставить Flash-ролик в HTML-документ, необходимо написать в этом документе несколько строк, задающих объект, который будет его проигрывать (показывать). Это — тэг c соответствующими параметрами. Тэг является контейнером, т.е. тэгом, который содержит другие тэги. В нем есть тэги, задающие параметры.
Главный параметр тэга — classid. Он указывает на Flash-проигрыватель (элемент управления ActiveX).
Параметр codebase указывает, где в сети взять Flash-проигрыватель, если он у вас не установлен. Тэг вставлен ради Netscape-браузера.
Параметры объекта записываются в тэге . Отмечу лишь некоторые из них.
Параметр указывает на имя swf-файла с Flash-роликом.
Параметры WIDTH и HEIGHT (ширина и высота) определяют размеры прямоугольника, в котором будет размещаться ваш Flash-ролик. Имейте в виду, что ролик может обрезан, а также ему может быть отведено слишком много места на странице.
Параметр определяет, каким будет фон вашего ролика. В частности, значение transparent задает прозрачность фона.
Все возможные значения параметров лучше всего изучить по книгам или справкам к пакету Flash. В частности, в своей книге, «Сам себе Web-дизайнер» я об этом расказвал.
Для точного позиционирования Flash-ролика на своей странице можно воспользоваться контейнером с заданием координат в атрибуте STYLE. Например, в Internet Explorer для этого подходит контейнерный тэг .
В качестве примера я привожу вставку Flash-ролика, представляющего собой калькулятор. Файл этого ролика, calculator.swf, был взят из коллекции примеров пакета Flash 5.0. Обратите внимание, что он занимает всего 5K! Сначала приводится HTML-код, а затем собственно Flash-ролик. Этот калькулятор вполне работоспособен.
Калькулятор — пример Flash-ролика
Как вставить SWF-файл в HTML?
1. Для начала создаём flash-ролик, например, в программе Adobe Flash.
2. После этого сохраняем получившийся файл. Выбираем Export Movie Файл (File)-Экспорт(Export)-Экспорт видео (Export Movie) в удобном для Вас месте, желательно в той же папке, что и html-файл, который вызывает ролик. Название на Ваш вкус, например, primer.swf.
3. Теперь открываем код Вашей html-страницы вставляем в него следующий фрагмент:
4. Остаётся только сохранить html-файл.
Вот и всё!
Как вставить Flash в HTML с помощью iSpring
Если вы хотите украсить сайт Flash-анимацией или добавить рекламный баннер, то iSpring — это оптимальное решение, позволяющее создавать профессинальные Flash-ролики в PowerPoint.
С iSpring создание Flash-файлов, готовых для публикации в сети, удивительно просто и не требует навыков программирования на Flash. Вам достаточно создать презентацию в привычной среде PowerPoint и сконвертировать ее с помощью iSpring Pro в формат Flash. Так вы сохраните оригинальные анимации, эффекты переходов, внедренные аудио и видео во Flash-файле. Также iSpring сгенерирует HTML-код, готовый для вставки на вашу веб-страницу.
В инструкции ниже показано, как вставить Flash-анимацию на страницу сайта.
1. Преобразуйте вашу презентацию PowerPoint в формат Flash с помощью iSpring. Убедитесь, что в настройках Публикация -> Главная выбрана опция Создать HTML.
Конвертируя презентацию в режиме Один Flash-файл, вы получаете единый Flash-файл (.SWF) для всей презентации со встроенными мультимедиа-ресурсами.
Отключив опцию Один Flash-файл, вы получите отдельные Flash-файлы, соответствующие слайдам исходной PowerPoint-презентации.
2. Итог конвертации с включенной опцией Один Flash-файл.
- файл с расширением SWF – это ваш Flash-ролик;
- файл с расширением HTML – представляет собой HTML-страницу с вашим роликом;
- файл с расширением JS – файл, который не дает службе безопасности Internet Explorer заблокировать ваш Flash-ролик. Он обязательно должен располагаться в той же папке, что и HTML-страница с Flash-файлом.
Итог конвертации с выключенной опцией Один Flash-файл:
- папка Data – в ней хранится содержимое вашего Flash-ролика;
- файл с расширением SWF – это Flash-файл, содержащий плейер для просмотра ролика;
- файл с расширением HTML – представляет собой HTML-страницу с вашим Flash-роликом;
- файл с расширением JS — это файл, который не дает службе безопасности Internet Explorer заблокировать ваш Flash-ролик. Он обязательно должен располагаться в той же папке, что и страница с Flash-роликом;
- файл с расширением XML – связывает содержимое папки data и Flash-файла.
Не забудьте, что для корректного проигрывания Flash-ролика на сайте, необходимо скопировать все полученные файлы и папку data на сайт.
3. Для проигрывания Flash-ролика на странице сайта необходимо отредактировать ее HTML-код, добавив к нему часть кода, сгенерированного iSpring. Просмотреть HTML-код страницы вы можете прямо в окне браузера, выбрав опцию Просмотр HTML-кода, или открыв ее в простом текстовом редакторе, не позволяющем изменять стиль текста, например в Блокноте. НЕ используйте Microsoft Word, OpenOfficeWriter, WordPad, и т.д.
Щелкните правой кнопкой мыши по файлу HTML и выберите в контекстном меню Открыть с помощью->Блокнот.
4. В открывшемся окне вы увидите HTML-код страницы. Код вашего Flash-ролика находится в теге object:
Пример HTML-кода страницы с Flash-роликом
5. Теперь осталось только скопировать содержимое тега object и вставитьего в код HTML-страницы.
Также вы можете настроить расположение и вид Flash-ролика с помощью параметров и атрибутов тега object и дублирующих их атрибутов тега embed.
- quality («low/autolow/autohigh/high/medium/best») – задает качество сглаживания контуров
- bgcolor – определяет цвет фона кадров
- align («right/left/middle») – задает положение Flash-ролика внутри HTML-страницы
- src (параметр movie) – показывает адрес расположения Flash-ролика
- width, hight – задают размеры Flash-ролика в пикселях
- allowFullScreen – дает поддержку полноэкранного режима (только с 9й версии FlashPlayer).
В теге script атрибут src указывает путь к .js файлу, который обязательно должен располагаться в той же папке, что и HTML-страница с Flash-файлом.
Также помните, что страницу и все файлы с Flash-роликом следует хранить в одной папке, чтобы обеспечить корректное проигрывание.
Надеемся, что наши советы помогут вам оживить и украсить ваш сайт Flash-анимацией!
- Как создать портфолио курсов с iSpring Page
- Настройка правил тестирования и работа с результатами теста
- Системные требования при конвертации в видео
Как вставить флеш-объект в 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)Установить какой-либо флеш-плеер, игрушку или просто флеш-банер, то в этом случае вам дадут только код нужного объекта, который вам нужно просто разместить на сайте. С плеерами немного сложнее но о них поговорим в следующей главе.