Использование Flash на веб-странице
Flash-приложения создаются при помощи специализированной среды разработкиAdobe Flash, которая входит в пакет программных продуктов компании Adobe. В этом пакете также находится популярное приложение для работы с графикой - Adobe Photoshop. РазработкаFlash-приложений– это отдельное направление, которое требует изучение программы Adobe Flashи технологии разработки Flash-приложений. Объем данного курса не позволяет нам охватить данное направление, поэтому мы рассмотрим только методику подключения готовогоFlash-приложения к веб-странице.
Для программированияFlash-приложений используется отдельный язык программирования ActionScript. Во многом этот язык похож на языки Java и JavaScript.Приложение Adobe Flash позволяет работать с графикой и создавать анимацию графических объектов без программирования.
Разработанное Flash-приложение компилируется в промежуточный байт-код.Получается файл с расширением SWF. Если сравнивать сJava, то это аналог файла JAR.Как и в Java для запуска промежуточного байт-кода необходима установленная виртуальная машина, для Flash–это Flash Player.
Технология Flash во многом напоминает технологию Java, а Flash-ролики похожи наJava-апплеты. ФайлSWF кроме игры или рекламного баннера может содержать обычное видео или аудио.
Flash-приложение вставляется в веб-страницу. Для этого выделяется прямоугольная область по размерам Flash-приложения. Flash-приложение может занимать всю область страницы. Но в большинстве случаев Flashявляется дополнением к веб-странице. Это может быть вставка с графическими эффектами, рекламный баннер или видеоролик.
Вместо Flashможно использовать Java-апплет, но Flash является более популярным из-за более высокой скорости загрузки.
При использованииFlash следует учитывать следующее:
Flash не поддерживается некоторыми устройствами.
Чрезмерное использование Flash при постоянном использовании веб-страницы может начать раздражать пользователя.
Страницы с большим количествомFlash-вставок будут загружаться медленнее.
Из этого следует, что масштабы использования Flashдолжны зависеть от тематики сайта.
Создание правой боковой части страницы
Задача:создать правую боковую часть страницы.Сверху должен отображаться заголовок:Работаем по всему миру, а под заголовком Flash-ролик (см. рис. 18). При переходе по разделам меню –внешний вид правой колонки должен быть неизменным.
Рис. 9.18
Скопируем файл shar.swf в папку с проектом. Разместим его в папке с главной страницей сайта index.php (см. рис.9.19).
Рис. 9.19
Перейдем в файл index.php, найдем ячейку таблицы с текстом Правая боковина. Удалим эту надпись,а вместо нее добавим код:
<div id="right_b">
<h1>Работаем по<br/>всему Миру!</h1>
<br/>
<!--Flash-->
</div>
Этот код очень похож на код в левой колонке. Тег <br/>обеспечивает перенос строки.
Вместо комментария<!--Flash-->добавим фрагмент кода из файла Flash.txt. Этот фрагмент сгенерирован автоматически средой Adobe Flash при созданииFlash-приложения с расширением SWF.
Тег objectиспользуется для подключенияFlash. Этот тег в свою очередь вложен в тег div. При помощи тегаdiv подключается фон в виде картинки, которая будет видна,если Flash не поддерживается данным устройством или не установлен/отключен Flash Player. Такая картинка называется альтернативной–это изображение пользователь увидит вместо Flash-ролика. Желательно,чтобы это изображение максимально отражало смысл Flash-ролика. Как вариант, это может быть один из кадров Flash-ролика.
В нашем случае эту функцию выполняет файл shar.png. (см. рис. 9.20).
Рис. 9.20
При открытии сайта на мобильном устройстве пользователь увидит изображение (см. рис. 20), а при открытии сайта с рабочей станции отобразится Flash-ролик. Получается,что изображение является фоном и будет находиться под Flash-роликом в случае удачной загрузкиFlash.
При использовании фрагмента кода из файла Flash.txtдля вставки других роликов потребуется ряд изменений,связанных с размерами и именами файлов.Рассмотрим эти места кода:
Изменение размеров в трех местах
…<div style="width: 150px; height: 150px;…
…width="150" height="150" id="shar"…
…width="150" height="150" wmode="opaque"…
Указание пути к изображению фона в одном месте
background: #009933 url('img/shar.png')
Изменение имени Flash-ролика в четырех местах
…id="shar"…
…value="shar.swf"…
…src="shar.swf"…
…name="shar"…
Если на компьютере пользователя не установлен Flash Player, то в браузере появится предложение установить Flash Player.
Теперь следует вставить фрагмент из файла Flash.txt.Весь блок кода для отображения правой колонки нужно поместить в пятую строку таблицы razmetka. Для этого выполним уже знакомые нам действия.1
После этого таблицаrazmetkaбудет иметь вид (см. рис. 9.21).
Рис. 9.21
В файле index.phpудалим вставленный в базу данных фрагмент кода, а вместо него добавим вставку PHPдля вывода этого фрагмента разметки из базы данных:
<?php
// Получаем и выводим правую боковую часть
getHTML(5);
?>
Обратите внимание, что при любом выбранном разделе будет использоваться один и тот же фрагмент разметки!
Проверим в браузере,справа должен появиться заголовок и под ним Flash-ролик.При переходе на любую страницу Flash-ролик будет запускаться. При этом будет происходить один полный поворот Земного шара, а дальше будет происходить остановка ролика. Это сделано для того, чтобы постоянное вращение не раздражало пользователя.Осталось несколько изменить внешний вид правой боковой части. Для этого перейдем в файл puh.css и в самом низу добавим CSS:
/*Блок правой боковой части*/
#right_b
{
padding-top: 10px;
padding-bottom: 20px;
width: 200px;
}
/*Заголовок в правой боковой части*/
#right_bh1
{
text-align: center;
white-space: nowrap;
width: 200px;
text-decoration: none;
font-size: 20px;
font-family: verdana,arial,serif;
font-style: normal;
font-weight: bold;
line-height: 30px;
color: white;
}
Все эти свойства нам уже знакомы, рассмотрим подробнее только одно:
white-space: nowrap;
Свойство white-space со значениемnowrapзапрещает перенос текста, если он не перенесен на другую строку при помощи тега <br/>.
Рис. 9.22
Посмотрим на результат в браузере, страница сайта должна выглядеть как на образце (см.рис. 9.22).
Теперь можно сказать,что левая и правая боковые части нашего сайта закончены!
Итог занятия:На этом занятии мы:• создали новую таблицу базы данных для хранения разметки;• реализовали левую и правую боковые части сайта;• поговорили о Flash;• запрограммировали переход по пунктам меню.
1 см.первый раздел данного занятия