Прежде всего хочу сказать, что аниматор GIFAnimator в наборе своих инструментов имеет и инструмент позволяющий вносить текст с эффектами во все картинки одновременно. Этот инструмент специально создан для создания анимированных баннеров. С ним мы ознакомимся в другом уроке а сегодня рассмотрим пример добавления текста в уже готовую аним. картинку. Вопрос в клубе задавался “Как добавить свой текст в уже готовую аним. аватарку?”. Аватарки под рукой у меня не оказалось. Выдернул из инета анимашку имеющую место для текста.
Правда анимашка не лучшего качества: при сборке не контролировались координаты и картинка прыгает.
Но нам это не помеха. Наша задача показать сам принцип как ввести в анимашку свой текст. Наша анимашка:
[html]<img src="https://forumupload.ru/uploads/0002/c7/21/2/620570.gif" alt="Анимированная картинка для вставки текста" title=" Заготовка анимированная "></a> [/html]
1. [html]<img src="http://s5.uploads.ru/zSuL0.jpg" alt="Ввод картинки в Ulead Gif Animator" title=" Анимация в редакторе "></a> [/html]
В GIF Animator-е откроем нашу картинку. В полосе прокрутки 5 кадров.
Значит наша картинка состоит из 5-и разных картинок. Наша задача написать текст на каждой.
2. [html]<img src="https://forumupload.ru/uploads/0002/c7/21/2/112092.gif" alt="Активируем первую картинку анимации" title=" Картинка первая "></a> [/html]
Кликнем по первой и она в нашем просмотровом окне. Включаем инструмент для работы с текстом,
затем наводим курсор на нашу картинку в просмотровом окне и щёлкнем левой мышкой.
3. [html]<img src="https://forumupload.ru/uploads/0002/c7/21/2/661889.gif" alt="Открываем текстовое окно" title=" Текстовое окно "></a> [/html]
Открылось текстовое окно. По умолчанию стоит "текст по центру".
Устанавливаем настройки шрифта и пишем текст.
4. [html]<img src="http://s5.uploads.ru/Hf0e6.gif" alt="Настройки шрифта" title=" Выбираем шрифт и размеры "></a> [/html]
Жмём О.К. и наш текст появился на первой картинке.
5. [html]<img src="https://forumupload.ru/uploads/0002/c7/21/2/825994.gif" alt="Текст в первой картинке" title=" ввод текста "></a> [/html]
И здесь начинается главное. После того как мы мышкой сдвинули текст и расположили его там где он нам нужен,
щёлкнем по нему дважды левой мышкой. В открывшемся маленьком окошке жмём "настройки объекта" (пока мы не сохраним,
наш текст является тоже объектом). В настройках нужно запомнить размеры и позицию текста в картинке. Размеры если вы
не писали других текстов обычно не меняются а вот позицию нужно запомнить так как мы её будем выставлять на всех картинках.
Иначе текст будет скакать по картинке. В данном примере 26 пикселей от левого края картинки и 11 пикселей от верхнего.
6. [html]<img src="https://forumupload.ru/uploads/0002/c7/21/2/359906.gif" alt="Позиционирование текста" title=" Размещаем текст "></a> [/html]
Теперь щёлкнем по второй картинке анимации в ленте прокрутки. В просмотровом окне второй кадр.
Повторим всё тоже со вторым кадром.
7. [html]<img src="https://forumupload.ru/uploads/0002/c7/21/2/206931.jpg" alt="Вводим текст в следующую картинку" title=" Текст во второй картинке "></a> [/html]
Только не забываем про позиции текста. Выставляем те, которые были в первом кадре 26 и 11.
8. [html]<img src="https://forumupload.ru/uploads/0002/c7/21/2/428832.jpg" alt="Позиционируем текст" title=" Установка позиции "></a> [/html]
Так по очереди заносим текст во все кадры анимашки. Не забывая каждый раз корректировать позицию.
9. [html]<img src="https://forumupload.ru/uploads/0002/c7/21/2/114721.gif" alt="Продолжаем ввод текста в последующие картинки" title=" Текст в остальных картинках "></a> [/html]
И в результате получим текст в анимашке
[html]<img src="https://forumupload.ru/uploads/0002/c7/21/2/588582.gif" alt="Готовая анимация с текстом" title=" Результат работы "></a> [/html]
Урок в формате PDF можно забрать с облака для занятия дома offline.