Flash урок: Эффект печатной машинки

И вот свежая статья для тебя мой любимый читатель. Решил начать цикл уроков про Flash. Задача не из легких, но я постараюсь вас не подвести. Программа Flash достойна больших похвал. На Flash'e можно делать что угодно для своего проекта, от простеньких мультимедийных реклам, до здоровенных сложных программ.В общем все красивые слова о Flash давно сказаны и растирать эту вязкую массу по рукаву я больше не стану и перейду непосредственно к уроку.
Урок будет заключаться в создании мультимедийного ролика, который будет демонстрировать "печать текста на клавиатуре". Мы с тобой сделаем мигающий курсор, который и будет печатать наш с тобой текст.

Готовый Flash файл будет выглядеть так:


Если не успели посмотреть эффект Flash при загрузке страницы, то нажмите правую кнопку мыши на флешь ролике и выбирите "play".

Теперь разберем как это у меня получилось на практике. Сразу оговорюсь, что дело будем иметь с английской версией Flash редактора, так как пути русификации программы неисповедимы и не существует одних стандартов перевода. =(

1. Создаем новый Flash документ. Для быстрого создания можно воспользоваться комбинацией клавиш Ctrl + J. Установите параметры документа так, как показано на рисунке.
 
2.  Нарисуйте на слое, который называется у нас по умолчанию Layer 1, черный прямоугольник, с размерами 300x200. Он будет в точности соответствовать размеру нашего фона. Для этого выберите инструмент Rectangle Tool или нажмите на клавиатуре клавишу R. Нарисуйте прямоугольник 300x200 и задайте ему черный цвет используя нижнюю вкладку Properties.

3. Теперь выровняем наш созданный прямоугольник с фоном. Для этого воспользуемся инструментами выравнивания. Нажимаем на комбинацию клавишь Ctrl + K для появления панели выравнивания. Посмотрите чтобы в появившемся меню, кнопка "to
 stage" была нажата. Щелкните по кнопкам показанным на рисунке.

 
4. Необходимо создать из нашего прямоугольника Movie объект. Для этого убедитесь что прямоугольник выделен и нажмите клавишу F8. В появившемся окне сделайте так, как показано на рисунке. Имя можете задать какое пожелаете.

 
5. Теперь в слое Layer1 выделите 60 кадр и нажмите F5
6. Создайте новый слой, который будет выше слоя Layer1 и назовите его "текст"
7. Выделите теперь 30 кадр слоя "текст" и нажмите  клавишу F6

8. Находясь на том же 30 кадре слоя "текст", выберите инструмент Text Tool или нажмите T на клавиатуре. Напечатайте текст нужной величины, выбрав при этом белый цвет заливки.
 
9. Создай новый слой, выше слоя "Текст". Назовём ег например "печатаем".
10. Выдели 50 кадр слоя "печатаем" и нажми клавишу F6.

11. Так же сделайте с 15 и 30 кадром в этом слое.

12. После последнего действия, ты остался на 30 кадре. Нажми теперь на инструмент Rectangle Tool или клавишу R на клавиатуре. В цветах Stroke, которая ниже инструментов (около неё нарисован карандаш, а справа цвет), нажми и заблакируй использование цветов. Это иконка перечеркнутая красной линией. Ниже, для цвета заливки выбери черный цвет. Нарисуй прямоугольник, который должен полностью покрывать написанную тобой надпись.

 
13. Опять выберите  Rectangle Tool (R) и опять отмените цвета Stroke нажав на перечеркнутую  красной линией иконку. Для заливки выберите белый цвет. Нарисуйте прямоугольник как показано на рисунке.
 
14. Выделите получившийся прямоугольник и нажмите F8, чтобы преобразовать его в Movie Clip.

 
 
15. Теперь выделите 50 кадр слоя "печатать" и нажмите на клавиатуре клавишу F9. После этого переместите наш слой так, как показано на рисунке.
 
16. Теперь зафиксируем наш ролик в конце, что бы он у нас не повторялся. Для этого выдели  50 кадр, нажми F9 и введи в появившееся поле код:
Stop ();

17. Щелкните правой кнопкой на серой области между границами 30 и 50, на временной шкале слоёв и выберите Create Motion Tween.
 
18. Вернись на 30 кадр и нажми CTR+C (функция копирования).
19. Затем выбери 15 кадр и нажми Ctrl + Shift + V (вставка скопированного ранее в буфер).

Для полной ясности размещаю исходный код эффекта "печатной машинки" на Flash.


Качественная и креативная разработка фирменного стиля вашей компании. Современные методы для достижения желаемого результата.