Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 3.145.91.152
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Анимированый favico
Сообщение оставлено 19.01.2011 в 12:07:37 | Сообщение #1
Анимированный favicon (иконка для вашего сайта сайта)

Есть два способа которые используют для анимирования иконки. Я вам расскажу об обоих.

Первый (самый быстрый):

Code

<link rel="shortcut icon" id="favicon_id" href="http://logical-portal.ru/anim_icon1.gif">
<script>
setTimeout(function() {document.getElementById('favicon_id').href='Второе изображение.gif'}, 1000)
setTimeout(function() {document.getElementById('favicon_id').href='Третее изображение.gif'}, 2000)
setTimeout(function() {document.getElementById('favicon_id').href="Четвертое изображение.gif'}, 3000)
setTimeout(function() {document.getElementById('favicon_id').href='Последнее изображение.gif'}, 4000) }
</script>

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

Второй(кроссбраузерность да и больше графики чем скриптов):
Делаем не простую иконку, а… анимированную. Выглядит это уж больно эффектно как в закладках браузера, так и просто среди открытых окон с различными сайтами. Жалко вот только, что не все браузеры поддерживают такие иконки, но любимый и родной Firefox справляется на-ура!

Нам понадобится:
Для создания favicon достаточно любого графического редактора, например Photoshop, но мы пойдем другим путём. Будем делать это в пакете Macromedia Flash восьмой редакции.

Запускаем Macromedia Flash.

Создаём новый проект: Файл > Новый… >Документ flash. Теперь мы видим пока пустой "монтажный стол”, а ниже его свойства. Нам нужно поменять размеры и фон. Давайте проставим длину и ширину по 100 px, цвет фона сделаем оранжевым.

Далее с помощью инструментов в левой панельке рисуем "первый кадр” предварительно увеличив масштаб, исключительно для удобства.

Во Macromedia Flash также как и в Photoshop реализована идея слоёв, помним об этом и размещаем все элементы своей иконки правильно.
В первом слои размещаем рамочку, во втором - букву.

Далее существует 2 варианта развития событий: а) рисовать покадрово свою иконку; б) воспользоваться инструментом для создания промежуточных кадров.
Подробнее: Вы нарисовали первый кадр, скопировали содержимое первого кадра, вставили в 5ый кадр, изменили форму (например уменьшили ширину вдвое); теперь можно создать промежуточные кадры (2ой, 3ий, 4ый). Так мы и поступим.

Выбираем нужный нам слой, в данном случае сначала выбираем первый слой в первом кадре, переходим в 4ый кадр (слой тот же, первый), нажимаем F6 (Этой командой создаётся новый кадр с копией содержимого предыдущего ключевого кадра). Такую же операцию проделываем и для второго слоя.

Теперь переходим к редактированию содержимого четвёртого кадра. Выбираем первый слой, нажимаем лат.букву А или в панеле инструментов выбираем "Подвыделение”, щелкаем по нарисованной рамке и видим линии с узлами в углах, так вот, тащим эти узлы как нам нужно. Я преследовал цель сделать иконку с псевдо-трехмерной буквой и рамкой, которые вращаются.

Теперь на очереди буква из второго слоя. Букву можно редактировать также перемещением узлов как и рамку, а можно еще проще: выделяем букву, нажимаем комбинация Ctrl+B (буква из текста превратится в изображение, типа как в Photoshop’е перегон текста в растр), переходим по меню Изменить > Трансформировать >Искажения и мы увидим, что вокруг буквы появились линии с узлами по углам и по центрам линий. Тянем как нам надо. Всё, четвертый кадр готов.

Сейчас создадим недостающие кадры, заодно обеспечим плавность перехода между каждым кадром. Итак, просто щелкаем, например, по кадру 2 или 3 и в свойствах выбираем Tween-параметр "Форма”.

Подобными манипуляциями создаем все ключевые кадры для всех слоёв, а затем промежуточные.

Далее, когда уже после тысячного нажатия Enter’а глаз начинает радоваться сотворённому, переходим к экспорту сего чуда в формат gif, предварительно сохранив для потомков сам проект (формат .fla). Нажимаем Файл > Настройки публикации. В закладке "Форматы” поставьте галочку рядом с GIF Image (.gif), остальные форматы можете отключить, ибо не пригодятся. Теперь переходим в закладку "GIF” и выставляем все параметры как на картинке ниже

Нажимаем "Публиковать” и смотрим что получилось. Затем переименовываем в favicon.ico и закидываем в корень своего сайта/блога. Добавляем строчку:

Code
<link rel="icon" href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon">

или
Code
<link rel="icon" href="http://ваш-сайт.ru/ваш_анимированный_GIF.gif" type="image/gif">

Code
<link rel="shortcut icon" href="http://ваш-сайт.ru/ваш_анимированный_GIF.gif" type="image/gif">

Перезагружаем браузер и радуемся новой анимированной иконке. Если иконка не появляется, то либо неправильно указан путь её хранения, либо нужно почистить кэш браузера.

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

Удачи вам с рисованием анимированых иконок wink

Автор: Vsebudetok

 
   
Сообщение оставлено 19.01.2011 в 12:42:18 | Сообщение #2
Хороший скрипт,спасибо
 
 
   
Сообщение оставлено 19.01.2011 в 15:37:12 | Сообщение #3
Кул скрипт спасибо!
 
 
   
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика