sIFR3: The beginning (in Russian)

Думаю, многим дизайнерам приходилось сталкиваться с проблемой (или желанием) сделать некоторые заголовки на странице покрасивее, пообъемней или что-то типа этого. И многим верстальщикам после этого приходилось ломать голову (и это я знаю точно), как этот текст сделать текстом и никак не картинкой. К примеру, при мультиязычности или из-за обычного каприза заказчика. Решение проблем пришло — sIFR. Неидеальное, глючное и непредсказуемое, но это решение есть, — и альтернатив пока не видно.

Итак, sIFR (Scalable Inman Flash Replacement). Вкратце, для тех, кто не знает, о чем речь. Это динамическая замена текста на Flash-элемент при помощи javascript'a. Ну, а теперь поподробней :)

На момент написания статьи доступна версия sIFR3 beta r436. Слово beta говорит само за себя. Тем не менее, это уже на порядок лучше, чем beta r319 еще годичной давности. Многие до сих пор стараются использовать «более рабочий» sIFR2, открещиваясь от третьей версии, мол, глючная и непонятная. В общем, чем рассказывать — лучше показать.

sIFR2

Ниже показан один и тот же текст, выведенный при помощи sIFR2 и sIFR3. Что такое sIFR первой версии — не спрашивайте: сам не знаю :) Вторая версия, более стабильная, позволяет вывести нужный текст любым шрифтом… и, по сути, все. Благодаря своему скудному функционалу, багов у него также немного. В основном, все лечится магическим letter-spacing в CSS, причем чуть ли не отфонарным значением.

sIFR3

Третья версия. Тут уже все намного интересней. Повторюсь, что она до сих пор beta. Причем давно и, наверно, надолго. Уйма новых эффектов и багов — обо всех и сам разработчик вряд ли знает. Добавление теней и бордеров для текста, проблемы с линками, прозрачности, траблы на Mac'e — тут диссертацию написать можно; непонятный перенос слов, мультиколор — отдельная тема; float'ы и ширина, более подробное описание css-свойств и т.д. и т.п. И все это меняется от билда к билду. Но разница налицо. Все, что происходит в разработке sIFR'a, можно прочитать на главном сайте сего творения.

Теперь, пожалуй, стоит описать, как же начать делать sIFR. Вот все, что нужно для этого:

  • — Устанавливаем Adobe Flash CS3 Professional.
  • — Находим последнюю версию на сайте разработчика.
  • — Теперь берем нужный шрифт, устанавливаем его себе на комп. Если шрифт Mac'овский, конвертируем его прогой CrossFont
  • — Открываем Abobe Flash и загружаем в файл sifr.fla из скачанного архива.
  • — Выбираем нужный слой (он там один), выделяем текст (текст менять не надо), и ставим ему нужный шрифт.
  • — Если сифроваться будут некоторые нестандартные символы (типа датского, немецкого или китайского языка) в Adobe Flash внизу справа есть список наборов символов, добавляем нужные языки.
  • — Создаем флешку: File->ExportMovie.
  • — Загружаем куда надо все нужные js'ы sifr'a (заранее прописав путь к флешке).
  • — Теперь, собсно, оформляем сам sifr. Делаем это или так, как показано на примере в том же самом скачанном архиве.
  • — Усё :-D

Не забывайте о том, что sIFR работает на серваке, но не на локали. Это можно исправить где-то в главном js'e, но мне было легче поднять Денвер, чем вспоминать, где именно нужно убрать две строчки :) И при апгрейде js'a на новую версию чаще всего нужно переделывать и саму флешку.

Удачных research'ев! To be continued...

(Статья от 15.12.2008)