Варианты подключения flash(из серии как не надо делать, но если очень хочется, то ...)

Редактировалось: 4 раза — последний 30 августа 2014
Просмотров: 591
Настроение: нормуль, как с добрым утром...
Играет: радио "Серебрянный дождь"
+4
: 4
Ниже написанное посвящено способу подключения flash файлов на сайте. Вообще вариантов, как таковых тьма тьмущая, я же остановлюсь на варианте опробованном, так сказать, применении которого не сколько не ухудшит ваш код HTML, а сайт дополнится украшением (и не только!)

Если вы заметили, практически все плагины галерей, слайдеров и т.д. и т.п, имеют в своем арсенале предустановленные возможности подключения adobe flash, но (не знаю, как вам) лично для меня их способы несколько настораживают тем, что в их составе:
1. Избыточный HTML код. ( при чем не всегда валидный и корректный)
2. Появление лишних запросов к базам данных.
3. Подключение дополнительно файлов css.
4. Лишние запросы к сторонним ресурсам.
Вот вкратце я описал некоторые причины, которые меня натолкнули на поиск несколько иных вариантов, нежели предлагает программа Artisteer и различные галереи. Хотя в последней версии Artisteer 4-1 вариант несколько улучшился, но совершенству нет предела( или простых путей мы не ищем.). Наверно знаете такого , можно сказать гениального программиста - Сатаи..., он предложил, путем изысканий по данному вопросу, самый демократичный (причем корректный и валидный) способ подключения. Логика и код очень просты всего пять строк:

Код PHP:
  1. <object data="/путь к вашему файлу/flash.swf" type="application/x-shockwave-flash" height="100" width="350">
  2. <param name="quality" value="high" />
  3. <param name="wmode" value="transparent" />
  4. <param name="movie" value="/путь к вашему файлу/flash.swf" />
  5. <div><a href="/любая ссылка/"><img src="дополнительное статическое изображение/ваш файл.jpg" alt="noy_flash"/></a></div></object>
Строка 1: <object data="/путь к вашему файлу/flash.swf"- ваш файл и путь к нему, height="100" width="350" - высота и ширина вашего файла.
Строка 4: value="/путь к вашему файлу/flash.swf" - ваш файл и путь к нему.
Строка 5:<div><a href="/любая ссылка/"><img src="дополнительное статическое изображение/ваш файл.jpg" alt="noy_flash"/></a></div>- это альтернативное изображение, которое выдается в web, если у пользователя нет предустановленного плагина adobe flash плеер. Теперь можно поправить css файл, выкинуть, так сказать "не нужное".
Было в css:

Код PHP:
  1.  
  2. #flash-area
  3. {
  4. position: absolute;
  5. top: 0;
  6. left: 0;
  7. width: 100%;
  8. height: 100px;
  9. overflow: hidden;
  10. }
  11. #flash-container
  12. {
  13. height: 100px;
  14. top: 0;
  15. position: absolute;
  16. width: 350px;
  17. left: 0;
  18. }
  19. #flash-container .flash-alt
  20. {
  21. position: relative;
  22. width: 100px;
  23. height: 350px;
  24. margin: 0 auto;
  25. top: 0;
  26. }
  27.  
Нам необходимы только следующие правила:
Код PHP:
  1.  
  2. .flash object{
  3. display:inline-block;
  4. min-width:50px;
  5. max-width:100%;
  6. }
  7. .flash{
  8. text-align:center;
  9. overflow:hidden;
  10. position:relative;
  11. height:350px;
  12. min-width:50px;
  13. }
  14.  
И в header.php надо будет поменять( по умолчанию я рассматриваю flash файл в шапке сайта):
Код PHP:
  1. <div id="flash-area">
  2. <div id="flash-container">
  3. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="350" height="100" id="flash-object">
  4. <param name="movie" value="<?php bloginfo('template_url'); ?>/images/flash.swf">
  5. <param name="quality" value="high">
  6. <param name="scale" value="exactfit">
  7. <param name="wmode" value="transparent">
  8. <param name="flashvars" value="color1=0xFFFFFF&amp;alpha1=.0&amp;framerate1=12&amp;loop=true&amp;wmode=transparent">
  9. <param name="swfliveconnect" value="true">
  10. <!--[if !IE]>-->
  11. <object type="application/x-shockwave-flash" data="<?php bloginfo('template_url'); ?>/images/flash.swf" width="350" height="100">
  12. <param name="quality" value="high">
  13. <param name="scale" value="exactfit">
  14. <param name="wmode" value="transparent">
  15. <param name="flashvars" value="color1=0xFFFFFF&amp;alpha1=.0&amp;framerate1=12&amp;loop=true&amp;wmode=transparent">
  16. <param name="swfliveconnect" value="true">
  17. <!--<![endif]-->
  18. <div class="flash-alt"><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"></a></div>
  19. <!--[if !IE]>-->
  20. </object>
  21. <!--<![endif]-->
  22. </object>
  23. </div>
  24. </div>
на следующее:

Код PHP:
  1.  
  2. <div class="flash">
  3. <object data="/путь к вашему файлу/flash.swf" type="application/x-shockwave-flash" height="100" width="350">
  4. <param name="quality" value="high" />
  5. <param name="wmode" value="transparent" />
  6. <param name="movie" value="/путь к вашему файлу/flash.swf" />
  7. <div><a href="/любая ссылка/"><img src="дополнительное статичесое изображение/ваш файл.jpg" alt="noy_flash"/></a></div></object>
  8. </div>
  9.  
Сколько в интернете не опробовал- не нашел разницы в проигрывании flash файлов, если мы удаляем файлы ( контейнер swf, и т.д.) и соответственно меняем способ проигрывания. А если нет разницы, или она не заметна, то зачем нам лишний код???
Кстати можно этими пятью строками и в сайд бары помещать небольшие ролики, естественно помещая его в <p></p>... .
Это основа, теперь давайте рассмотрим дополнительные параметры, которые можно использовать, если в css это ни как не получается.
<param name="salign" value="r b c" /> - это параметр местоположение файла swf на сайте, где параметр 'value="r b c"' соответственно подразумевает:
r (right) - правый, b (bottom) - верхний, c (center) - центральный. Это можно подобрать путем "научного тыка". Применимы параметры: l,b,t,c,r, что соответствует обычным правилам css, при чем в любых сочетаниях.
Можно еще добавить строку, прозрачный фон, хотя практически все flash выполнены прозрачными(в этом и суть):
<param name="flashvars" value="color1=0xFFFFFF&amp;alpha1=.0&amp;framerate1=12&amp;loop=true&amp">
С последней строкой могут быть проблемы с Валидатором, врятли от сочтет валидной последнюю строку, ведь мы не используем способ вложения объектов в <object></object> в <object></object>. Вот такой не хитрый и достаточно экономичный в плане HTML, способ вставки файлов flash.swf , хотя способ, который использует Artisteer не так уж и плох, но вот излишнее беспокойство по поводу навязывания установки флеш плеера несколько утомляет, тем более с появление и продвижением HTML-5, файлы swf, несколько перестают быть актуальными.
Здесь на сайте описан еще один из способов проигрывания flash и видео:Способ подключения видео
Комментарии (10)
gradus #
: 0
1. Избыточный HTML код. ( при чем не всегда валидный и корректный)
Вот это ВЫ хорошо подметили ! у меня от стандартной галереи ( фанси бокс ) 62 ошибки появилось в коде scratch
Установлю себе на комп ..денвер скапирую базу данных своего сайта ( перенесу полностью )и буду пробовать улучшать сайт glasses
п.с давно уже хочу перенести сайт ( дублировать )для экспериментов бо уже были приколы ( раза 4ре переделывал все заново со своими ..экспериментами.. smile ) hoho love
gradus #
: 0
Добрый вечер smile а вы можете уточнить где именно на сайте находится :самый верхний код ( который тут на самом верху ) smile не очень понятно либо его вписать надо где-то либо поправить
artnikov #
: +1
Если используете WP, то флеш находится в файле header.php... темы. В плагинах может по разному, в зависимости от плагина. Код поключается <div class="flash"> пять строк </div>. Для наглядности дайте ссылку на ваш файл, я пропишу и скину, так проще понять - что и куда... .
gradus #
: 0
Доброго дня smile а в чем предпочтительней прописывать в хедере либо в плагине .. (у меня плагин фансибокс фор вордпресс если я конечно правильно вас понял )
вот код хедера
Скрытый текст виден только зарегистрированным пользователям
smile
п.с в принципе я понял как это сделать докинуть контейнер smile но лучше все же покажите ВЫ как правильно бо я его сейчас воткну куда-то не так stuk smile
artnikov #
: +1
Доброго здоровья, вот в архиве, я "по колдовал" над вашим дизайном, если понравится, то просто скопируйте файлы из папки images в папку images вашей темы. Скопируйте файл css в вашу тему, переименовав его в style_1.css и в файле header.php измените подключение css(в вашем случае это style_1.css). И вставьте в header.php флеш: строки у меня отмечены: от <div class="flash"> до </div> (включительно) Вот архив:gipau
По изображениям: они оптимизированы (минимальный трафик)
gradus #
: 0
Спасибо за проделанную работу ! сейчас буду пробовать smile
1)родную папку images удалил поставил вашу smile ( резервную сохранил на компе )( надеюсь я правильно понял что нужно именно удалить и добавить новые картинки ) scratch
2)style_1.css добавил в тему и переименовал в style_1.css smile

3) изменил подключение
если я правильно понял то это в вот этих строках
<!--[if IE 6]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie6.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie7.css" type="text/css" media="screen" /><![endif]-->

то есть style.ie6.css и style.ie7.css заменить на style_1.css scratch smile
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
если я все правильно понял то я сделал как я выше описал smile

но вот с флеш возникли проблемы scratch не знаю что тут писать (/путь к вашему файлу/)и дальше тоже zst
<object data="/путь к вашему файлу/flash.swf" type="application/x-shockwave-flash" height="100" width="350">

пока что сайт имеет немного не корректный( поскольку кой чо не подключено ) вид но то нечего страшного ( я знаю как назад поправить если что v )
artnikov #
: +1
НЕ НАДО удалять папку, надо скопировать туда изображения из моей папки.
Этот код вставляйте в header.php. Сам файл не меняйте.(только вставьте код) После значения:<div class="art-header">
Код PHP:
  1.  
  2. <div class="flash">
  3. <object data="http://gipau.com/wp-content/themes/proe/images/showe.swf" type="application/x-shockwave-flash" height="300px" width="900px">
  4. <param name="quality" value="high" />
  5. <param name="wmode" value="transparent" />
  6. <param name="salign" value="t b" />
  7. <param name="movie" value="http://gipau.com/wp-content/themes/proe/images/showe.swf" />
  8. </object></div>
gradus #
: 0
Спасибо теперь я все понял joke
gradus #
: 0
там чо то с заменой возникают проблемы smile типа пишет фаил с таким именем уже существует ( но то дело такое я понял как это поправить сделаю joke smile ) от себя отмечу открыл для себя кучу нового smile

это получается я сейчас установил флеш в картинку хедера да ? smile
artnikov #
: +1
Да именно так.Все работает. А как подключить css- я написал вам в сообщении.

Случайное из блогов

skaz
Решил написать эту статью в связи с тем, что некоторые пользователи программы пасуют перед редактированием...
8 - +6
artnikov
Доброго всем здоровья! С наступившим ВАС и с наступающими... При переводе файлов админки WP, я как-то...
4 - +13
artnikov
Доброго всем здоровья! что единственное самое главное, а остальное, как нибудь получится. После...
13 - +6
artnikov
Пока "есть еще" время, продолжу, с вашего разрешения... Данная тема посвещена-измененнию логина ADMIN,...
1 - +6
samson
Всем известны сервисы по сбору статистики от Google, Яндекс и Liveinternet. Предлагаю свой альтернативный...
6 - +9