В качестве новогодней поздравительной открытки в этом году мне довелось создать чудо-конструктор на радость офисным работникам. Конструируем снежинки, распечатываем выкройку и режем-режем-режем! Ну или не режем, а пишем всяческие позравления и отправляем другу!
Старый, но приятный трюк: анимация изометрического изображения.
Такая штуковина очень проста в изготовлении.
Надо только сообразить, что мувиклипы с двойным дном таят в себе скрытые возможности ))
Если к примеру клип, который вращается вокруг своей оси, поместить в клип, который сжат по вертикали (_yscale = 75) то мы получим имитацию вращения изометрического изображения.
А если несколько изображений положить друг на другом как блины – получится объемное изометрическое изображение которое можно крутить, как душе угодно )
Самое забавное в этом методе – это моделирование модели.
Делается это на таймлайне. 1 кадр – это дно, последний кадр – вершина нашей блинной скульптуры.
Вот, к примеру – как выглядит клип из которого нарезается приведенная выше анимация:
Алгоритм построения прост:
Создать общий контейнер для всей фигуры;
Создать в нем N пустых контейнеров(N=_totalframes клипа, составляющего фигуру) с _yscale = 75 (варируется) ;
В пустой контейнер N аттачится клип-фигура и останавливается на кадре N+1;
А вот собственно совершенно простой код:
// на сцену нужно в нужном месте положить клип под именем holdervar distance:Number = 1; // дистанция между "кусками"var speed:Number = 5; // скорость вращенияvar scaleFactor:Number = 75; // масштабирование по Yvar slices:Number; // количество кусков (определим позже)// функция, создает контейнер для куска, и вставляет в него// клип-фигуру с установкой нужного кадра.// n = порядковый номер кускаfunction attachSlice(n:Number):Void{varslice:MovieClip = holder.createEmptyMovieClip("slice"+n,n);
// в библиотеке символ, из которого делим фигуру снабдить linkage=sculptureslice.attachMovie("sculpture","gfx",0);
slice.gfx.gotoAndStop(n+1);
slice._yscale = scaleFactor;
slice._y = -n*distance;
}// В начале, создадим первый кусок (дно) и заодно узнаем,// сколько в нем кадров, чтобы установить значение slices
attachSlice(0);
slices = holder.slice0.gfx._totalframes;
// выкладываем все остальные кускиfor(var i=1; i < slices; i++){
attachSlice(i);
}// вращение фигуры// (тут можно определить и другое поведение - вращение от клавиатуры, мыши и т.д.)
holder.onEnterFrame = function():Void{for(var i=0; i < slices; i++){this["slice"+i].gfx._rotation += speed;
}}
Набор графических инструментов Flash скуден, как небезосновательно считает огромное число дизайнеров, привыкших к Corel, Illustrator и FireWorks.
Да скуден. Но нам дан таймлайн и мозг. Сегодня мы сымитируем известный эффект (даже не знаю как он правильно называется)) Вот такой.
Все это нарисовано исключительно на flash. Никаких импортов и копипейстов. Ни один редактор векторной графики, кроме Flash, использован не был.
1. Рисуем кривую с помощью PenTool (P).Рисуем аккуратно, чтобы не было ни одной лишней опорной точки.
2. Ставим ключевой кадр (в моем примере 20) и задаем между первым и последним Shape Tween (можно с easing для пущего эффекта).
3. Включаем режим OnionSkinOutlines, выделяем все 20 кадров и переходим на 20 кадр. Выбираем Subselection Tool (A) и начинаем двигать наши опорные точки. Преимущество метода на лицо – редактируя положение точек мы сразу видим конечный результат – это очень удобно. Если где то что то перекутили не так – сразу видно, что шейптвин сбивается.
4. Теперь Разбиваем анимацию на ключевые кадры. Включаем режим EditMultipleFrame, вырезаем всю графику (сначала выделить все control+A, потом вырезать cоntrоl+X), удаляем кадры анимации и вставляем вырезанное на место.
Можно было, кстати, к шейпу формы применить и шейп цвета. Но мы раскрасим нашу абстракцию по другому.
5. Положите под кривые полностью прозрачный прямоугольник и сконвертируйте все это в MovieClip. На панели PropertyInspector назначьте BlendMode = alpha.
6. Нарисуйте прямоугольник с потрясающей воображение градиентной заливкой и также сконвертируйте ее в MovieClip, но положите этот клип под клип с линиями.
7. Теперь выделите оба клипа – и снова – в муви клип. Этому мувиклипу задайте режим blend Mode = Layer (или любой другой режим, если хотите. В самой первой картинке статьи, к примеру, использован Add).
8. Вернувшись на сцену вы увидите результат. Осталось навести под этой красотой тематический восторг и вы – народный умелец, доказавший, что классические дизайнерские абстракции можно с легкостью творить и в Flash IDE.
