Статьи / Веб-Дизайн / Как добиться прозрачности в битовых картинках во Flash?

  2008-11-04 11:36

Есть три способа.




Flash поддерживает формат PNG, в котором имеется свой 8-битный альфа-канал (256 цветов). В Adobe Photoshop создается маска и сохраняется в канал. В Corel PhotoPaint при сохранении должна быть видна маска. В канал не сохраняется. (Какой бы способ сжатия Lossles (без потерь) или jpeg мы не выбирали, во Flash-е альфа-канал будет сохраняться со сжатием Lossles. Поэтому при создании картинки нужно позаботиться об уменьшении цветов в альфа канале). Например, выделить канал в отдельный файл присвоить режим Index Color (то, что вы делаете при переводе в Gif) и полученное изображение обратно вставить в канал подготавливаемого изображения.




Делаем с импортированной картинкой Break (CTRL+B). Картинка характерно окрасится. Накладываем сверху контур. Щелкаем на картинку за контуром. Выделяется лишнее. Удаляем.




Делаем с импортированной картинкой Break (CTRL+B). Выбираем инструмент "пипетка" щелкаем на картинке. Появится инструмент Fill. Заливаем нужный контур. Если картинка легла в контур не так, как нужно, редактируем заливку (Transform Fill).


Как делать анимационные gif-ы во Flash



Flash лучший инструмент для создания впечатляющих баннеров и т.д. Дело в том, что при экспорте Flash создает палитру цветов, основываясь на первом кадре ролика. Поэтому, нарисовав анимацию во Flash вам нужно сдвинуть всю анимацию на один кадр и просто покидать в первый кадр используемую графику из других кадров. Экспортировать лучше в 256 цветов со сглаживанием и без прозрачности.



При оптимизации gif-а (советую Adobe Image Ready или Macromedia Fire Works) удалите первый кадр и пустые кадры и оптимизируйте палитру. Для создания нужных пауз в клипе советую воспользоваться редактором анимационных gif-ов Gamani GIF Movie Gear.



Добавлю, что при создании анимации во Flash нельзя пользоваться анимационными клипами. При экспорте в анимационный gif анимация в клипах игнорируется.


Как делать текстуры



Делаем с импортированной картинкой Break (CTRL+B). Выбираем инструмент "пипетка" щелкаем на картинке. Появится инструмент Fill. Заливаем нужный контур. Если картинка легла в контур не так, как нужно, редактируем заливку (Transform Fill).


Как делать текстуры, которые стыкуются (Tile). Например, для html



Мы использовали такие текстуры в качестве фонов html-страниц на предыдущем сайте нашей студии.
Flash наиболее удобный и простой инструмент для решения такой задачи. Скачайте этот исходный файл. В нем вы найдете один символ, дублированный так, чтобы верхние и нижние края символов точно стыкуются. Вам нужно зайти в средний символ двойным щелчком с нажатой кнопкой Alt (Edit in Place). И рисовать. Какой простор для творчества! Вы увидите всю картину в целом, как текстура "проникает" из одного символа в другой. Потом экспортируете в gif, указав нужный размер.



Еще совет: все, что нарисовали в символе, поверните на произвольный угол - это может улучшить "совмещаемость" текстуры.



Естественно эту текстуру вы можете использовать и во Flash. Но лучше экспортировать в PNG.


Работа с символами (symbols)





Здесь я дам пару советов, которые позволят вам работать с символами более эффективно.




Для редактирования символов удобно пользоваться режимом Edit in Place. Редактирование вызывается двойным щелчком на символе с нажатой кнопкой Alt. Повтор действия с символом, внутри символа, где вы находитесь, приведет к "входу" в следующий символ. Двойной щелчок за пределами символа приведет к "выходу" на уровень выше.




Вы можете существенно сократить размер готового файла, пользуясь одним символом, но в разных режимах. Например, символ по умолчанию кнопка, но вы хотите использовать графику кнопки в другом месте клипа, но не как кнопку. Скопируйте в нужное место символ и, войдя в меню свойств символа (двойной клик) выберете нужный режим. В этом случае Graphics.


Векторная графика


Импорт векторной графики



Самый проверенный способ. Нарисовав графику в другом редакторе, экспортировать ее в Adode Illustrator. Текст лучше не переводить в кривые.


Проблемы с прозрачностью



Используемая во Flash графика может содержать прозрачность. Это может быть и битовая и векторная графика. При просмотре при 16 мил. цветов (режим видеокарты 16 бит.) иногда проявляется такая ошибка. Объекты с полной прозрачностью отображаются чуть другим цветом (dithering) чем фон, на котором они "лежат". Графика при таком режиме выглядит неряшливо и общее впечатление портится.



Лечится наложением объекта размером со всю видимую область и с полной прозрачностью.



Автор: Eвгений Потапенко