Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


Бросаем тень на плетень


Солнце на фоне неба перемещается за мышью, а тень от текстового меню соответственно изменяется в зависимости от солнца.
Ну что ж... Начнем!

Естественно начинаем с подготовки исходного материала.
Покопавшись в нете я нашел картинку с песком и небом, как мне хотелось, и немного подправил ее в Фотошопе:
Бросаем тень на плетень
Соответственно для урока делаем размер сцены 720 х 352 и скорость я обычно устанавливаю в 30 кадров в секунду.

Импортируем бекграунд на пока единственный имеющийся у нас слой:
[Ctrl] + [R]
или
File > Import > Import to Stage

Теперь САМОЕ ВАЖНОЕ! :)
Чтобы впредь не путаться в созданных самими же собой делах, приучаем себя к порядку и именуем слои (а так же любые только что созданные объекты). Так что не поленимся и назовем наш слой с картинкой “background image”.

Добаляем новый слой, называем его “text layer” и добавляем на него произвольный статический текст с произвольным оформлением. Выравниваем текст по центру сцены. Для эффектности можете добавить к нему фильтр Glow:
Бросаем тень на плетень
Теперь между слоями “background image” и “text layer” создаем еще один слой и называем его “shadow layer”. В него просто копируем текстовое поле из слоя “text layer” (фильтр Glow с этого текста можно удалить). Это и будет тенью нашего текста.
Преобразуем текст в графический объект (2 раза [Ctrl] + [B]), и с помощью инструмента “Free Transform Tool” отражаем текст вниз (при этом удлините его раза в три), а затем правой клавишей мыши > выбираем Distort, и удерживая [Shift] тянем за нижний левый (или правый) угол объекта, чтобы придать перспективу нашей тени:
Бросаем тень на плетень
Теперь самое время можно изменить цвет нашей тени. Это зависит от вашего восприятия. Не забывайте, что на фоне песка цвет должен быть немного коричневатый.
После чего преобразуем нашу тень в мувиклип ([F8]). И опять же, чтоб не путаться впредь сразу называем его “shadowMC” (как в библиотеке, так и в сцене).
Не забудте выровнять тень по центру сцены, и подровнять с текстом, чтоб они соприкасались.

Теперь займемся реалистичностью :)
К тени добавим фильтр Blur с небольшим размытием (4 будет достаточно).
Над слоем “shadow layer” создаем слой и называем его “shadow mask layer”. На этом слое рисуем прямоугольник, который по ширине должен быть не меньше сцены, а по высоте полностью накрывать нашу тень. Линии не нужны – только заливка. И заливку меняем на градиент от черного к черному, только прозрачность вверху ставим 60% а внизу 10% (естессно все эти параметры мы сможем поменять в любое удобное для нас время):
Бросаем тень на плетень
Это будет маска прозрачности для тени. Для этого преобразовываем маску в мувиклип ([F8]) и называем его “shadowMaskMC” (как в библиотеке так и в сцене). Но как маску мы добавим этот слой к тени уже програмным путем.

Да будет свет!
Создаем над слоем “shadow mask layer” новый слой и называем его “sun layer”. На этом слое рисуем кружок и всеми подручными средствами добиваемся его «фамильного» сходства с Солнцем. После чего преобразовываем его в мувиклип ([F8]) и называем sunMC (как в библиотеке, так и на сцене). После преобразования, центр координат нашего мувиклипа оказался в верхнем левом углу, о чем свидетельствует черный крестик в указанном углу. Чтобы избежать ошибок в вычислениях и упростить себе жизнь, давайте разместим начало координат по центру нашего импровизированного солнца. Для этого заходим «внутрь» мувиклипа (двойной клик на нем), выделяем «солнце» и выравниваем его по центру относительно начала координат:
Бросаем тень на плетень
Положение мувиклипа sunMC по высоте устанавливайте как вам это нравится, а по горизонтали - отцентрируйте его по центру сцены.

Вот и всё. Что касается объектов - мы всё сделали. Теперь добавляем выше всех новый слой, называем его “actions” и в нем будем вводить свой код (я всегда отвожу для кода отдельный слой, в котором отсутствуют объекты; в таком случае я меньше боюсь запутаться в объектах-кодах-слоях-кадрах).

Для искажения… мммм… точнее «скашивания» нашей тени мы применим матрицу преобразований. И код будет такой:

CODE

// импортируем необходимые модули для работы с матрицей и трансформацией
import flash.geom.Matrix;
import flash.geom.Transform;

//объявляем объект трансформации связанный с объектом тени
var myTrans:Transform = new Transform(shadowMC);

//объявляем матрицу преобразований и заполняем ее начальными значениями
var myMatrix:Matrix = new Matrix();
myMatrix = myTrans.matrix;

// а тут как мы и обещали – накладываем слой с маской на объект с тенью
shadowMC.cacheAsBitmap = true;
shadowMaskMC.cacheAsBitmap = true;
shadowMC.setMask(shadowMaskMC);

onEnterFrame = function() {
    //  и тепер в каждом кадре двигаем «солнце»
    sunMC._x += (_xmouse - sunMC._x) / 16;
    // А вот тут хотелось бы остановиться. Это должно заинтересовать новичков.
    // Ибо тут мы используем формулу «плавного» движения, которую можно описать так:
    // новая_координата += (куда_надо_попасть – где_мы_сейчас) / коэффициент_скорости
    // регулируя коэффициент скорости мы регулируем скорость реакции объекта на движение мыши
    // эту формулу желательно запомнить, если вы всерьез собираетесь заняться флешем :)

    // вычисляем коэффициент «с» матрицы преобразований, который отвечает именно за скос по горизонтали.
    // Его значение должно быть равно тангенсу угла на который мы хотим «скосить» нашу тень.
    // Знак минус говорит, что тень должна «уходить» от солнца в противоположном направлении.
    // В скобках вычисляем положение солнца относительно центра сцены.
    // А число в знаменателе я находил уже опытным путем.
    // Мне не хватает сил описать, почему именно эта формула выглядит именно так, скажу лишь,
    // что вам достаточно вспомнить - что такое тангенс угла в прямоугольном треугольнике
    myMatrix.c =  - (sunMC._x - 360) / 230;

    // И теперь применяем нашу матрицу трансформации
    myTrans.matrix = myMatrix;
}


Вот и всё что я хотел рассказать.
Как применить этот эффект, и как его доработать – я полностью полагаюсь на вашу фантазию. И думаю не стоит говорить, что если немного поработать над этим флешем, увеличить количество скрипта в несколько раз, можно добиться усиления визуального эффекта на порядок ;)
Так что – дерзайте!
Исходник берём здесь:
Нажмите для скачивания shadowtext.rar!
Название: shadowtext.rar
Размер: 23.17 Kb


Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.