Тест S5 Box

Вот примерно так работает модуль в реале...

Вставка Flash ролика в шапку сайта Joomla. Программа SWFText

SWF Text logo

Прошло чуть больше 2-х недель, как данный сайт находится на виртуальном хостинге и любой имеет доступ к нему из сети интернет. Пока руки не сильно доходили до визуального изменения сайта, но вот сегодня я решил изменить шапку сайта (header). Захотелось сделать ее более привлекательной, а именно разбавить немного Flash анимацией. Главное, что требовалось, это не переборщить с анимацией, чтобы она не отвлекала посетителя от главного, чтения статей. Будем надеяться что у меня это получилось и то что Вы видите в шапке Вас не сильно отвлекает.

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

 

  • найти программу для создания flash анимации;
  • собственно создание flash анимации для Header;
  • не используя сторонние модули, в ручную подключить flash ролик в header;
  • установить модули(поиска, карта сайта, часы) в шапку поверх flash.

Наметив план я начал искать подходящую программу для создания flash ролика. Для себя я решил, что мне нужно чтобы на существующей картинке с шапки сайта появлялось имя домена Talk-IT.com.ua с каким нибудь интересным спецэффектом. Больше я ничего на данном этапе не хотел, поэтому в поиске программы для создания анимированных flash роликов я ограничился простотой программой SWFText. Скачать можно свободно например отсюда.

Установив и запустив программу видим интерфейс.

Визуальный интерфейс программы SFWText

Интерфейс у программы очень простой. Выбираем меню "Текст", вводим текст, выбираем фоном наше изображение, выбираем эффекты и эксперементируем, благо в программе предусмотрен предпросмотр flash ролика.

просмотр полученного флеш ролика SWFText

После того как Вы создали ролик необходимо его сохранить. Для этого нажимаем внизу справа кнопку "Публиковать"

Сохранение созданного флеш ролика SWFText

Сохраняем flash ролик и не забываем поставить галочку "Сгенерировать HTML для ролика". Вы получите код  для вставки в шапку(Header) сайта  flash ролика.

Получение кода флеш ролика SWFText

Теперь мы дошли до момента, когда уже можно вставить код в файл index.php. Открывать его лучше текстовым редактором в котором имеется подсветка кода, так как лично в моем случае полученный код кое где пришлось подредактировать. Редактировать пришлось не правильно поставленные кавычки ("").

Мы имеем код и сам файл flash ролика формата *.swf, теперь его необходимо вставить в шапку сайта. Для этого открываем index.php находящийся в папке с вашим шаблоном сайта, находим где выводится шапка и вставляем наш код.

Ниже в пример приведу полученный код который я немного доработал и применил в своем сайте:

пример полученного кода SWFText

Как видно из скрина, код я вставил в class="art-header-swf".  

Из опыта могу сказать, что удобней применять стиль к классу из файла описания стилей template.css. Пример настройки стиля класса "art-header-swf" на скрине:

Применяем стиль к флеш ролику

Осталось вернуться к коду flash ролика в index.php упомянуть о самых важных параметрах полученного кода и о некоторых которые добавил, которые вы обязательно будете корректировать:

  • ?width=" " - Ширина окна flash ролика;
  • height=" " - Высота flash ролика;
  • wmode="transparent" - прозрачность фона;
  • quality="high" - качество картинки выводимого ролика: high - высокое, иначе ролик будет выглядеть бледно и не четко;
  • src="/images/stories/header_flash/header.swf" - указывает путь к файлу flash ролика;
  • position: absolute - указывает тип позиции.

Параметры: width, height, position - можно указывать в template.css. Хотя в этом примере я указал их  в index.php.

Ну по поводу установки flash в шапку сайта все. У Вас будут свои настройки стилей. Поле для экспериментов намечено.


Вставка модуля в FLASH шапку сайта

О том как установить модуль в header сайта я писал в этой статье. Все осталось точно так же, то есть если в шапке у Нас flash ролик или картинка не имеет значение.

Единственное что Вы можете заметить это то, что модуль будет на заднем плане за flash анимацией и его не будет видно. решается это достаточно просто, одним параметром: в стиль модуля (Style) добавляем параметр display: block; Теперь модуль будет поверх flash ролика. Результат работы продемонстрирован на этом сайте! Удачи !

P.S."Если хотите более подробно узнать о внедрении FLASH, то можно начать с изучения этих статей"

Комментарии   

 
Koskv
0 #8 Koskv 04.03.2012 19:32
Спасибо за внимательность, справил!
 
 
admin
0 #7 admin 04.03.2012 12:39
ссылка "писал в этой статье" битая, исправьте пожалуйста, а то не найду эту статью...
 
 
stasevich
0 #6 stasevich 17.01.2012 04:16
уважаемые специалисты, просветите пожалуста чайника, как мне засунуть флеш в колонку меню вместо картинки? на моем сайте- линк ниже с лева, черное меню с картинкой, туда хочу засунуть фаил swf кого за это надо убить?
свадьба в израиле свадьба в израиле???????
 
 
Koskv
-1 #5 Koskv 03.07.2011 19:39
Всегда пожалуйста!
 
 
Dmitry
0 #4 Dmitry 03.07.2011 09:18
Большое спасибо за развёрнутый ответ по флеш-шапке.
Пол дня с этим мучался,облазил много форумов,перепро бовал кучу вариантов,вплот ь до java-script'a .
Не хотел запускаться и всё...Белый фон.
Оказалось,нужно внимательно поставить - "
Благодаря вам решил наконецто эту проблемму.
Спасибо.
 
 
Koskv
-1 #3 Koskv 13.05.2011 19:57
Цитирую faraon_x:
я по этой статье вставлял: как вставить flash в шапку joomla, я так и вставлял

Ну вариантов конечно много. Я придумал свой.
На счет вставки разных Flash шапок сайта при переходе в разные раздела сайта - я просто еще не пытался делать. Может попробую и проверю Ваш метод, но считаю, что это чересчур :-)
Но спасибо за интерес.
 
 
faraon_x
0 #2 faraon_x 13.05.2011 07:54
 
 
faraon_x
+1 #1 faraon_x 13.05.2011 07:54
я по этой статье вставлял: как вставить flash в шапку joomla, я так и вставлял
 
cs-nsk

Последние комментарии

Теги ...

Опрос: iOS или Android ?

Какой ОС вы чаще пользуетесь?

iOS - 0%
Android - 60%
Windows Mobile - 20%
Tizen - 0%
Другая. - 20%

Всего голосов: 5
Голосование в этом опросе закончено в: 01 Янв 2017 - 00:00
Яндекс.Метрика Анализ сайта Рейтинг@Mail.ru