На главную

Библиотека Интернет Индустрии I2R.ru

Rambler's Top100

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

Забобрить эту страницу! Забобрить! Блог Библиотека Сайтостроительства на toodoo
  Поиск:   
Рассылки для занятых...»
I2R » Сайтостроительство » Flash

Пиксельные шрифты в Macromedia Flash

В последнее время как многие из вас заметили становится популярным и модным использование пиксельных шрифтов, о том как правильно пользоваться, и работать с ними мы и поговорим. Так как я сам долго искал инфу подобного рода вот решил написать статью.

*http://blade.net.co.nr/filez/texts/flash/pixel-fonts.rar

c0ntent:

  1. Intro aka введение
  2. Что они есть
  3. Шрифты
  4. Как работать с ними
  5. Особенности flash
  6. Links
  7. return true

--+ 0. Intro

Как было сказано выше, пиксельные шрифты с каждым днём приобретают всё большую популярность среди flash разработчиков. Они используются как популярными командами (consortium, 1unfit):


screen shot: www.consortium.ru

так и не очень (bLAde):


screen shot: blade.net.co.nr

Я думаю связано это с тем что пиксельные шрифты красиво смотрятся практически на любом дизайне, да и в последнее время приобретают популярность стили: industrial, underground, clear, sky vision. У пиксельных шрифтов есть и недостатки, при неумелом применении они затрудняют чтение (иногда очень сильно), плохо видны, не правильно отображаются в браузере или какой либо версии flash. Несмотря на это их распространение велико.

--+ 1. Что они есть

Точного определения пиксельным шрифтам я дать не могу, охарактеризую их так: это шрифты которые отображаются без сглаживания (antialiasing), они корректно отображаются при определённых размерах, они занимают мало места в памяти. Примеры таких шрифтов я приводил выше. Корректно они отображаются в большинстве (но не во всех) случаев при размере 8 пикселей или 16 пикселей. Применение скорей для дизайна, чем для вёрстки.

--+ 2. Шрифты

Напомню, что шрифты надо скопировать в папку drive:\windows_dir\fonts.

Название: Hooge les
Размер: 8px, 16px
Комментарий: Этот шрифт я использовал для своего сайта. Присутствует русская расклатка, отлично смотрится, мало весит, хорошо смотрится на всех разнирениях.
http://blade.net.co.nr/filez/stuff/fonts/hooge_les.rar
Название: SuperCar
Размер: 9px, 18px
Комментарий: Суперкар подойдёт для дизайна, но не для использования в повседневных целях (вывод новостей и.т.д.). Минус: не поддерживает русские буквы.
http://blade.net.co.nr/filez/stuff/fonts/super_car.rar

Название: Bulgaria Line
Размер: 8px, 9px, 10px, 16px, 17px, 18px
Комментарий: преимущественно этого шрифта в том, что он корректно отображается при большой амплитуде размеров.

http://blade.net.co.nr/filez/stuff/fonts/bline.rar
Название: DS OlymPix
Размер: 8px, 9px, 10px, 16px, 17px, 18px, 19px, ...
Комментарий: Неплохой шрифт, но его недостаток в том, что он слишком больной при размере 8px она как на обычном шрифте 10px.
http://blade.net.co.nr/filez/stuff/fonts/olympix.rar
Название: Dustry
Размер: 8px, 16px ...
Комментарий: Шрифт подойдёт для использования в заголовках, так как в маленьких размерах плохо читается, ещё имеет много размеров с корректным отображением.
http://blade.net.co.nr/filez/stuff/fonts/dustry.rar
Название: Pixel
Размер: 9px, 17px, 18px
Комментарий: Этот шрифт я использовал на своём сайте раньше, но потом отказался от него так как он менее удобочитаемый чем его аналоги. =)
http://blade.net.co.nr/filez/stuff/fonts/pixel.rar
Название: Micro Tech
Размер: 9px, 23px
Комментарий: Хорошо смотрится при больших размерах, часто используется в wallpapers графике.
http://blade.net.co.nr/filez/stuff/fonts/micro_tech.rar
Название: DS HiLine
Размер: 9px, 18px
Комментарий: Шрифт настолько большой, что не поместился в размеры картини =). А так очень даже ничего. )
http://blade.net.co.nr/filez/stuff/fonts/hiline.rar
Название: Bulgaria OutLine
Размер: 8px, 17px
Комментарий: Необычный шрифт, среди пиксельных такой редко встретиш =).
http://blade.net.co.nr/filez/stuff/fonts/bul_outline.rar
Название: BM Stamp
Размер: 9px, 18px
Комментарий: Шрифт подойдет для декорирования, дизайна. Хорошо смотрится на кнопках.
http://blade.net.co.nr/filez/stuff/fonts/bmstamp.rar
Название: AscArt
Размер: 8px, 18px
Комментарий: Иероглифы и значки, можно хорошо задизайнить сайт с помощью этого шрифта.
http://blade.net.co.nr/filez/stuff/fonts/ascart.rar
Название: Acis PixDemage
Размер: 8px, 16px
Комментарий: Шрифт из категории must have all. Для дизайнеров особенно.
http://blade.net.co.nr/filez/stuff/fonts/apd.rar

--+ 3. Как работать с ними

На простом примере я покажу как во flash mx 2004 (если у кого другой флеш ничем помочь не могу, обновляйтесь!) создать документ с использованием пиксельного шрифта, который будет корректно отображаться независимо от положения на координатной сетки (в flash mx пиксельный шрифт должен был стоять только на целых координатах x: 19.0 y: 23.0 иначе искажение), и наличия шрифта на машине клиента. Начнём:

  1. Создаём новый документ (Ctrl+N).
  2. Рисуем текстовое поле
  3. Ставим настройки для текстового поля:

установка параметров текстового поля

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

  1. Ставим тип текста в dynamic text


    выбираем тип текстового поля
  2. Нажимаем на появившуюся кнопку Format

  3. Ставим embed font outlines for: specify renges.

    В списке выбираем те символы которые будут присутствовать в тексте. Так как наш текст будет не динамическим а статическим то выбираем пункты Lowercase [a-z] (27 glyphs) и Punctuation [!@#%...] (33 glyphs)

    [чтобы выделить два или более пункта списка зажми клавишу Ctrl она же Control на клавиатуре и выделяй сколько хочешь =)]

    Почему и для чего мы это сделали, читай в разделе "Особенности flash".


меню кнопки Format
  1. Экспортируем фильм. Ctrl+F12. Смотрим результаты.

Протестируем нашу свфку. Переместите файл шрифта используемый во флэшке из C:\Windows\Fonts в какую ни будь другую папку (разумеется вместо диска С подставить свой =)). Это делается для создания случая, когда на машине клиента (клиент - тот, кто просматривает файл) этого файла шрифта нет. Запустите нашу swf'ку. И о чудо шрифт отлично отображается без файла шрифта! =) Скопируйте шрифт обратно.

--+ 4. Особенности flash

В ранних версиях flash работа с пиксельными шрифтам была очень осложнена. Так как раньше WinAPI и другие графические подсистемы ОС вындос допускали (и сейчас допускают =)) большие погрешности, недочёты, багги в расчётах, выводе, прорисовке токних линий, пикселей, и другой сложной для программирования графики; пиксельные шрифты некорректно, некрасиво отображались во flash (с 1 по 5 версии). Но время идёт, мелкомягкие латают дыры, ребята из Макромедии (респект им !) трудятся не покладая рук и с каждой новой версией флеш всё больше начинает приспосабливаться к пиксельным шрифтам. Вот, например во flash mx доработали поддержку инклуда шрифтов (флеш включает в конечный файл, символы шрифта), и aliasing fade. В flash mx 2004 сделали возможным любой шрифт отображать без сглаживания, ещё лучше сделали инклудинг (включения сделали с возможность выбора нужных символов что позволило существенно уменьшить размеры получаемых файлов + придало гибкость разработчикам многоязыкового флеша), исправили множества ошибок прорисовки.

Из вышеописанного примера видно, что в mx 2004 особых проблем с пиксельными шрифтами нет. Рассмотрим по подробней какие настройки мы ставили для включения символов в файл. Мы сначала поставили тип текстового поля (text type) в динамический (dynamic), это сделано потому что когда текстовое поле имеет тип static (статический) опция включения символов не работает, а способов включения символов шрифта для статического типа Я не знаю, да и думаю более гибким и правильным решением является выбор только нужных символов а не всего шрифта, что существенно (иногда на 400 - 500 кб) снижает размер конечного файла(что очень важно при работе на низкой скорости в интернет). Далее мы, нажав кнопку Format выбираем, какие символы включить в файл, если ты используешь текстовое поле в качестве контейнера, в который будит загружена инфа из xml, as, или ещё каким ни будь способом то там в большинстве случаев предугадать будет ли использоваться кириллический шрифт и ещё какой ни будь или только английские символы и символы пунктуации нельзя, и по этому включаются опции Uppercase [A-Z], Lowercase [a-z], Numerals [0-9], Punctuation [!@#%...], Cyrillic, чтобы избежать проблем с отображением и кодировками.

Ещё во flash mx было такое условие корректного отображения пиксельных шрифтов: все они должны были находиться на целых координатах, например _x: 23.0 но не _x: 23.2. В 2004 же эту проблему решили.

Когда ставишь тип текст. поля в динамическое то его цвет становится одинаковым для всех букв. Например если 5 букв текста были красными а остальные 7 синими то после установки типа со статического в динамический текст окрасится в красный цвет. Это легко исправить если опцые Render as html включена, не составит труда присвоить текстовому полю переменную и написать что-то типа такого экшена:

mytextvar = "<FONT COLOR=\"#FFFFFF\" SIZE=\"12\">ha ha ha</FONT>
<FONT COLOR=\"#FF0000\" SIZE=\"20\">!</FONT>";

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

--+ 5. Links

--+ 6. return true

Ну что же вот наверное и всё, если что-то не будет получаться или возникнут вопросы, то в заголовке статьи написано, где меня можно найти. Flash в умелых руках это мощнейший инструмент для разработки. Творите, сочиняйте, программируйте, изучайте, читайте, учитесь, живите, бывайте. Ваш bLAde.

  1. Intro aka введение
  2. Что они есть
  3. Шрифты
  4. Как работать с ними
  5. Особенности flash
  6. Links
  7. return true

Автор: bLAde.lab(), 2004
Источник: http://blade.net.co.nr/

Спонсор раздела

Рассылки Subscribe.ru:

Библиотека сайтостроительства - новости, статьи, обзоры
Дискуссионный лист для web-разработчиков
Подписка на MailList.Ru
Автор: NunDesign
Другие разделы
Оптимизация сайтов
Web-студии
» Новое в разделе
Web-дизайн
Web-программирование
Интернет-реклама
Раскрутка сайта
Web-графика
Flash
Adobe Photoshop
Рассылка
Инструменты вебмастера
Контент для сайта
HTML/DHTML
Управление web-проектами
CSS
I2R-Журналы
I2R Business
I2R Web Creation
I2R Computer
рассылки библиотеки +
И2Р Программы
Всё о Windows
Программирование
Софт
Мир Linux
Галерея Попова
Каталог I2R
Партнеры
Amicus Studio
NunDesign
Горящие путевки, идеи путешествийMegaTIS.Ru

2000-2008 г.   
Все авторские права соблюдены.
Rambler's Top100