ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

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

Эффекты при подведении курсора мыши. Бегущий луч. Наложение текста

Эффекты при подведении курсора мыши

Бегущий луч

Эффект состоит в том, что при подведении курсора мыши на тексте начинает двигаться луч.

  1. Создадим новый документ text16. Напишем словосочетание Привет всем и настроим параметры текста с помощью панели Своства.
  2. Создадим на основе текста символ типа Фрагмент ролика. Делается это с помощью выделения текста и нажатия клавиши <F8>, позволяющей преобразовать объект в символ. В диалоговом окне Преобразовать в символ зададим имя луч и тип Фрагмент ролика.
  3. Двойным щелчком мыши откроем объект для редактирования и сделаем следующее:
    • создадим слой-маску для текста и маскирующий слой, по которому будет двигаться луч (маска будет ограничивать движение луча, чтобы он не вылезал за границы текста);
    • создадим обычный слой с копией надписи, которыйпозволит тексту всегда быть полностью видимым, а не только тем частям, по которым проходит луч.
  4. Нажмем клавишу <F5> на 45 кадре, удлиним ротяженность текста. Создадим еще два слоя под текстовым. На самый нижний вставим копию текста с верхнего слоя. Когда будите вставлять текст из буфера обмена, воспользуйтесь опцией Вставить на место контекстного меню сцены.

    Вставка текста из буфера обмена

  5. Теперь щелкните правой кнопкой мыши по названию верхнего слоя и в контекстном меню выберите пункт Маска.
  6. На пустом пока еще слое Маскируемый создадим с помощью инструмента Овал вытянутую окружность и нарисуем для нее пеструю градиентную заливку. Наклоним фигуру с помощью инструмента Свободное преобразование так, чтобы луч проходил под углом.

    Текст-маска и луч

  7. Создадим для настроенного объекта анимацию Движение, установив на первом ключевом кадре овал перед текстом, а на втором — после, чтобы он в промежуточных кадрах проскакивал по буквам.

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

  1. Переименуем пустой слой в кнопка и вставим из буфера обмена скопированную надпись.
  2. Выделим ее и нажмем клавишу <F8>, позволяющую преобразовать объект в символ. В диалоговом окне зададим имя бег-луч и выберим тип Кнопка.
  3. Двойным щелчком мыши по вновь созданному символу откроем режим редактирования.

    Сцена символа типа Кнопка бег-луч

  4. Обратите внимание на панель Timeline, которая поменяла свой обычный вид — в верхней ее части добавились четыре заголовка фреймов: Вверх, Прохождений, Вниз, Попаданий.
  5. Эти позиции мы рассмотрим позже, а сейчас нас будут интересовать два первых: Вверх — показывает как выглядит кнопка в состоянии покоя, и Прохождений — который определяет вид кнопки, когда к ней поднесен курсор мыши.
  6. Нажмем клавишу <F6> на фрейме, промаркированном как Прохождений, и удалим изображение текста со сцены.
  7. А теперь на это самое место перетяним из Библиотеки символ луч.

Протестируем ролик, нажав клавиши <Ctrl>+<Enter>, и поднесем мышь к надписи.

В окне веб-браузера это будет выглядеть ТАК.

Эффект наложения текста

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

  1. Создадим новый документ text17, с текстовым слоем Наложение текста и текстом Привет всем.
  2. Преобразуем текст в символ типа Кнопка и именем b_text. Двойным щелчком мыши откроем символ для редактирования.
  3. Нажмем <F6> на фрейме Прохождений. Теперь преобразуем объект в символ типа Фрагмент ролика.
  4. Выделим содержимое фрейма Прохождений и нажмем клавишу <F8>. В диалоговом окне зададим имя text и выбирем тип Фрагмент ролика.
  5. Теперь зайдем в символ text и реализуем для него анимацию Движение следующим образом. Символ содержит два слоя: на верхнем находится текст без всяких изменений — для этого просто нажимаем клавишу <F5> на 30 фрейме, чтобы продлить его.

    Панель символа text

  6. Чтобы реализовать эффект наложения — когда один текст накладывается на другой как бы выходя из него, создадим второй слой наложение и скопируем в него наш текст. С этим слоем реализуем анимацию Движение, продля второй ключевой кадр на 30 фрейм. Перейдем к изображению находящемуся на нем и с помощью инструмента Свободное преобразование увеличим размеры текста. Назначим ему параметр Альфа в первом кадре равным 60%, а во втором 0%.

Протестируем ролик. Поднесем мышь к тексту и убедимся в созданном эффекте.

В окне веб-браузера это будет выглядеть ТАК