Векторная и растровая графика для web

Векторная и растровая графика Для веб-дизайнера важно знать, что графика в интернете бывает двух типов: растровая и векторная. Она создается с помощью разных программ, иногда даже с помощью скриптов, но по своей сути изображение состоит либо из цветных точек, либо является совокупностью кривых линий.

Нет идеального графического формата. В то же время важно научиться использовать преимущества того или иного формата для конкретной задачи, минимизируя влияние его недостатков.

Растровые (точечные) изображения

К растровой графике, которой гораздо больше, чем векторной, относятся все картинки форматов JPEG, GIF, PNG, ICO, BMP. Это привычные нам фотографии, иконки и рисунки, которые состоят из точек (пикселей, растров).

Преимуществом растровой графики является то, что с ее помощью можно создать любой по сложности рисунок. При этом применять огромное количество фильтров и плагинов. Основным недостатком – растровую графику нельзя растягивать без потери качества. Большие рисунки нужно изначально рисовать большими, а фотографии делать с большим разрешением.

При увеличении размера файлов растровой графики теряется четкость изображения, становятся заметными отдельные пиксели, из которых состоит картинка. Самым популярным пакетом для обработки растровой графики является, конечно же, Adobe Photoshop (PSD).

Растровый формат GIF, позволяет создавать анимацию. Правда, она проще и дольше загружается, чем flash, зато сделать gif-анимацию, как правило, намного легче.

(далее…)

Код для вставки Flash в текст или шаблон блога

HTML код для вставки flash Казалось бы, тривиальная задача вставки flash-баннера или ролика в HTML-код своего сайта не заслуживает того, чтобы писать на эту тему целую статью. К сожалению, не все так просто. Существует множество вариантов кода для публикации Flash, при чем единственно правильного, однозначно понимаемого всеми браузерами и удовлетворяющего стандарты W3C, нет. И дело не только в том, что существует огромное количество вариантов того, в какой версии Flash создавался баннер, какие при этом использовались команды ActionScript, какой версией flash-плеера и в каком браузере будет просматриваться flash-анимация. Проблема еще и в том, что компания Microsoft при создании своего браузера Internet Explorer запретила реализовывать взаимодействие с интерактивным контентом, пока пользователь не активирует его сам. Примерно так же поступила и Opera. В результате появилось несколько десятков вариантов HTML-кода для вставки flash-роликов, у каждого из которого есть свои преимущества и недостатки.

Самым популярным и наиболее адекватным кодом для публикации flash на своем сайте является код, одновременно использующий элементы object и embed. В таком HTML-коде используется дублирующая запись вызова flash-ролика, зато вероятность правильной загрузки вашей анимации почти стопроцентная:

1
2
3
4
5
6
<object width="240" height="350"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="quality" value="high" /><param name="src" value="banner_name.swf" />
<embed type="application/x-shockwave-flash" width="240" height="350" src="banner_name.swf" quality="high"/>

</object>

Этот код HTML позволяет вставить на свою страницу баннер с именем banner_name.swf размером 240х350 и при этом достаточно flash-плеера 8й версии. Такой код генерировался средой разработки Macromedia Flash до выхода Adobe Flash 8.

(далее…)

Silverlight 2: альтернатива Flash от Microsoft

Microsoft Silverlight 2.0 Logo

Microsoft Silverlight 2.0 является конкурентом мощной и популярной технологии Adobe Flash. Компания Microsoft, по словам ее бывшего директора Била Гейтса, недооценила возможности интернета с точки зрения заработка денег. И теперь ей приходится догонять лидеров очень денежной сферы по продаже программного обеспечения. А сделать это будет не так чтоб просто – лидерам ведь тоже деньги нужны и останавливаться они не собираются.

Долгое время Flash был единственным решением для создания качественной сложной анимации. Флэшевые баннеры практически вытеснили своих gif-конкурентов, а скриптовая анимация была как раз тем исключением, которое только подтверждает правило. Гениальная разработка компании Macromedia приступила к завоеванию интернета еще во времена диал-апа, когда скорость загрузки сайта была гораздо важнее мигающей после загрузки анимации.
(далее…)

Как flash-баннер сделать ссылкой

вебмастер

После того, как вы сделали flash-баннер, нужно сделать его кликабельным. Вставить flash-ролик в код страницы и сделать его ссылкой с помощью HTML-кода, как это делается с gif-баннером, не получится. Но при нажатии на баннер должна открываться веб-страница, которую он рекламирует. Смысл создания любого баннера в осуществлении перехода на рекламируемый веб-сайт.

Задача легко решаема. Для этого мы создадим отдельный слой в баннере и добавим в него кнопку с кодом перехода на встроенном во Flash языке программирования Action Script. Эта статья-урок подробно описывает, как именно добавить ссылку во flash-баннер:

1
2
3
on (release) {
getURL("https://www.web-article.com.ua", _blank);
}

Для того, чтобы сделать flash-баннер кнопкой, нам понадобится программа Adobe Flash, в которой и создается сам баннер. В уроке использовалась версия Adobe Flash CS3 Professional, но все файлы сохранены для Flash 8. Для других версий Flash действия по созданию ссылки в баннере аналогичны. Итак, начнем работу.
(далее…)