Как вставить SWF на сайт

30 сентября 2009 | Опубликовано в вдохновение | 10 Комментариев »

В этой подборке вы сможете увидеть творческие и вдохновляющие Flash сайты. Такие сайты не перестают удивлять своими креативными идеями и воплощением их в реальность, так как возможности Flash практически безграничны. С его помощью вы сможете создать все что угодно – вставить action-script, анимацию, видео, создать интерактивный дизайн или даже игру. У Flash действительно огромные возможности.

Тут вы увидите 50 сайтов, дизайн которых построен на Flash. Большинство из представленных примеров завоевала награду FWA. Все они по-своему уникальны, креативны и поразительны.

1. Студия Saizen Media

Одна из их работ с восхитительными цифровыми рисунками и анимацией – сказочное зрелище!

2. Студия DrawingArt – занимаются веб-дизайном и разработкой

На их сайте огромное количество креативных анимированных работ и дизайнов.

3. Студия Section Seven

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

4. Стильный сайт студии Semisture Webdesign

Очень творческий и насыщенный анимацией дизайн, интересный прелоадер с Flash анимацией и движущиеся линии в момент загрузки разделов.

5. Сайт агентства Fl-2 Interactive

Типографика на сайте при наведении мыши меняет цвета.

6. Студия Lecaid Design

7. Сайт Esj * Com * AU

Сайт с портфолио на стикерах.

8. Сайт Recom CGI

Отличные эффекты загрузки изображений, текст и анимация при загрузке страниц – смотрятся просто отлично!

9. Сайт Millice – Cyril Louis

Элегантный и легкий сайт с стильными иллюстрациями и анимацией.

10. Студия HYPR – Interactive and Creative Design Studio

Очень интерактивный и уникальный подход создания Flash сайта.

11. Сайт TwistCube

Множество вращающихся квадратов с навигацией и аккуратный элегантный дизайн.

12. Агентство Go For Change

Интерактивный и креативный дизайн сайта, с очень необычным подходом.

13. Сайт John Wright Photo

Чистый, аккуратный и профессиональный дизайн сайта фотографии. Сайт смотрится очень гармонично и элегантно.

14. Сайт Timothy Hogan Photography

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

15. Агентство LS5 Design

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

16. Сайт SoyTuaire Labuat

Этот сайт поражает своей интерактивностью, необычным и немного чудным дизайном, а также ощущением вдохновения при его просмотре!

17. Портфолио дизайнера Matthias Dittrich

Отличная интерактивная 3D анимация, управляемая мышкой.

18. Сайт Museum of Science and Industry и его прелоадер

Забавный прелоадер на этом сайте – заставит вас улыбнуться. 🙂

А чудная и забавная игра сможет поднять настроение.

19. Сайт Parasol Island – Film Animation Interactive

Компания специализирующаяся на кино-анимации, проверила свои умения не только в веб-дизайне.

20. Сайт веб-дизайнера Unouplus

Веб-дизайнер и арт-директор и его Flash сайт с необычным дизайном и поразительной анимацией.

21. Сайт MultiAdaptor: Branding & Identify Systems

Красочный яркий сайт с легкой анимацией меняющий свои оттенки по истечению определенного времени.

22. Сайт Chemical Box

Необычные анимационные эффекты позволяющие скриншотам “оживать” при наведении на них курсора.

23. Креативный сайт Hello Monday

Этот сайт удостоен высоких наград и похвал! В 2008 году он стал одним из лучших сайтов года. При наведении курсора — скриншоты работ приобретают окраску. После клика на скриншот вы сможете передвигать его при помощи той-же мышки.

24. Сайт дизайнерского агентства Blanc Fonce

Аккуратный и элегантный Flash сайт!

25. Сайт 2Advanced Studios

На этом сайте можно увидеть огромное количество цифровой анимации. Каждый из его разделов открывает перед вами произведения искусства созданные талантливыми дизайнерами. Их талант проявляется на каждом шагу.

26. Сайт дизайнерской компании Magnetic North

Еще один сайт удостоенный наград. Рисуйте и смотрите то, что предлагает вам этот сайт.

27. Цифровое агентство In2Media

Отличные цветовые схемы, анимированный фон, типографика и прелоадер.

28. Сайт профессиональной студии дизайна Cartelle

Очень вдохновляющий и удивительный сайт! Работы представленные на сайте поражают своими креативными идеями и стилем.

29.Студия Progetty

Сумасшедший и необычный дизайн, а также множество потрясающих работ студийных дизайнеров.

30. Сайт Narrow Design

Неплохой подход для отображения навигации проектов в вертикальном положении.

31.Сайт дизайнера Yodabaz

Отличный дизайн, созданный при помощи 3D текста выполняющего навигацию на анимированном фоне, где все время передвигается сам автор, создавая эффект присутствия.

32. Сайт дизайнера и декоратора Aiala Garcia

Яркие краски и отличный эффект прокрутки, отображающий все уже созданные проекты и все остальное на одной странице.

33. Сайт PMA – Projects

Впечатляющий 3D эффект, созданный при помощи изображений готовых проектов, размещенных на фоне этого сайта. И конечно-же отличная анимация.

34. Сайт Mcinen

Чистый и элегантный сайт дизайнерской компании.

35. Сайт Nvidia Speak Visual

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

36. Портфолио дизайнера Okay Dave – Dave Werner

Уникальный сайт на главной странице которого расположена карта выполняющая навигационную функцию.

37. Сайт фотографа Michael Kelley

Простой и аккуратный сайт с портфолио фотографа.

38. Сайт Maven Interactive

Отличная страница с портфолио, но и сам сайт заслуживает внимания.

39. Сайт Unit 9 – The Creative Mind

Просто потрясающий иллюстрированный сайт с огромным количеством анимации!

40. Сайт CreakTif!

Сайт построен на изображении необычного дома, каждое из анимированных окон которого ведет к разделам.

41. Сайт Experience 159 – Alfa Romeo

Креативный Flash сайт созданный для Alfa Romeo.

42. Flash сайт NikeLab

Практически у каждой крупной компании есть отличный и запоминающийся сайт, Nike — не исключение.

43. Сайт Morris Code

Необычный сайт созданный из элементов бумаги, текстов и зарисовок.

44. Сайт CocaCola Zero

Кока-кола возможно и не самый любимый всеми напиток, но их сайты завораживают. Этот потрясающий сайт, безусловно достоен внимания каждого их нас!

45. Еще один сайт CocaCola Hapiness Factory

Вы наверняка видели креативную видео-рекламу с этими забавными монстрами. Этот оригинальный сайт создан как интерактивная игра с ними.

46.Сайт Living Sasquatch

Необычный анимированный прелоадер.

47. Сайт Comcast Town

Этот сайт — потрясающее 3D вдохновение для иллюстратора. Для его создания была проделана огромнейшая работа.

48. Сайт MadeForEachOther

Интерактивные иллюстрации а анимационный дизайн.

49. Сайт Feed Your Ego

На этом сайте вы увидите стильные и интересные игры, настроить которые сможете самостоятельно.

50. Стильный сайт BePop Jeans

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

Всем добрый день! Сегодня поговорим с вами о том, как вставить flash на сайт. Казалось бы, вопрос пустяковый. Если это баннер, то просто скопировать предложенный код и разместить в шаблоне, виджете или на странице через редактор. Если это flash анимация для сайта, то вставить при помощи того же кода, но прописанного самостоятельно. Однако и в этом несложном процессе есть свои тонкости, о которых мы сейчас поговорим.

Flash анимация для сайта

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

<object classid=»clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=»http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0″ width=»190″ height=»65″> <param name=»movie» value=»» /> <param name=»quality» value=»high» /> <param name=»menu» value=»false» /> <embed src=»АДРЕС ВАШЕГО ФЛЕШ РОЛИКА» quality=»high» menu=»false» pluginspage=»http://www.macromedia.com/go/getflashplayer» type=»application/x-shockwave-flash» width=»190″ height=»65″> </embed> </object>

На первый взгляд все правильно и ничто не предвещает проблем. Однако, если вы прокрутите страницу вверх, то увидите такую особенность, что размещенная таким образом flash анимация будет перекрывать админский тулбар — верхнюю черную панельку админа WordPress.

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

Это происходит оттого, что flash всегда по глубине находится впереди блоков div. Чтобы этого избежать, нужно добавить всего лишь один дополнительный параметр в наш код:

<param name=»wmode» value=»opaque» />

В этом случае ролик flash ведет себя как обычное изображение. Также можно воспользоваться аналогичным параметром value=»transparent», но это создаст дополнительную нагрузку ни замедлит загрузку страницы. В конечном результате на код вставки флеш на сайт будет выглядеть так:

<object classid=»clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=»http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0″ width=»190″ height=»65″> <param name=»movie» value=»» /> <param name=»quality» value=»high» /> <param name=»menu» value=»false» /> <param name=»wmode» value=»opaque» /> <embed src=»АДРЕС ВАШЕГО ФЛЕШ РОЛИКА» wmode=»opaque» quality=»high» menu=»false» pluginspage=»http://www.macromedia.com/go/getflashplayer» type=»application/x-shockwave-flash» width=»190″ height=»65″> </embed> </object>

Плагин для размещения flash анимации на сайте

Если Вам приходится часто вставлять разные ролики или просто боитесь что-то неправильно написать в этом длинном коде, то можно воспользоваться плагином, который вставляет флеш на сайт автоматически — от вас требуется лишь указать адрес его расположения. Называется он WP-SWFObject. Как обычно, скачиваем и устанавливаем его, затем заходим в «Параметры > WP-SWFObject» и выполняем необходимые настройки. Здесь можно все оставить по умолчанию, кроме одного — пункта «Window Mode». Для того, чтобы вставить swf на сайт с учетом тех параметров, которые нам нужны, выберите здесь из выпадающего списка «OPAQUE» и сохраните настройки.

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

В действии выглядеть будет так:

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

<?php wp_swfobject_echo(«ролик.swf», «ширина», «высота»); ?>

Также при помощи данного плагина можно >>поместить видео из Youtube — вместо адреса ролика подставьте адрес видео вида «http://www.youtube.com/v/xCbCmmipqgM». Получить его можно, взяв из кода для встраивания старого типа — Поделиться > Сгенерировать html код > флажок на Использовать старый код встраивания.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *