Создание панорамы на флеш.

Понедельник, 24 Ноября 2014 г. 16:25 + в цитатник

Цитата сообщения здесь_нет_никого

Прочитать целиком В свой цитатник или сообщество!

Создание панорамы на флеш.

Создание горизонтальной панорамы на AS2 в Adobe Flash CS6.

Создаем ActionScript 2,выставляем нужные размеры,у меня например 600х450.
Создаем новый слой,называем его окно(window)
Рисуем прямоугольную область,я делала без обводки,выставляем размеры и выравниваем,выделяем и преобразовываем в мувик с точкой привязки в левом верхнем углу.В свойствах прописываем имя window.

Выделив на сцене наше окно,открываем действия и прописываем скрипт:

onClipEvent (mouseMove)
{
if (!_root.bMouseAction)
{
return;
} // end if
mouse_x = this._xmouse;
mouse_y = this._ymouse;
if (getProperty(this, _height) < mouse_y || getProperty(this, _width) < mouse_x || mouse_y < 0 || mouse_x < 0)
{
_root.bMoveV = false;
_root.bMoveSpeedH = _root.bNormalMoveSpeedH;
_root.bMoveSpeedV = _root.bNormalMoveSpeedV;
return;
} // end if
_root.bMoveH = true;
center_x = getProperty(this, _width) / 2;
if (mouse_x < center_x)
{
_root.bRight = true;
_root.bMoveSpeedH = _root.bMaxMoveSpeedH * (center_x - mouse_x) / center_x;
}
else
{
_root.bRight = false;
_root.bMoveSpeedH = _root.bMaxMoveSpeedH * (mouse_x - center_x) / center_x;
} // end else if
center_y = getProperty(this, _height) / 2;
if (mouse_y < center_y)
{
_root.bDown = true;
_root.bMoveSpeedV = _root.bMaxMoveSpeedV * (center_y - mouse_y) / center_y;
}
else
{
_root.bDown = false;
_root.bMoveSpeedV = _root.bMaxMoveSpeedV * (mouse_y - center_y) / center_y;
} // end else if
}

Далее создаем два слоя -картинка 1 и картинка 2, картинка 1 должна стоять над слоем картинка 2(смотрим скрин)

Помещаем на сцену заготовленную панораму,в сети полно,но учитывайте,чтоб края совпадали,иначе будет виден стык,я предварительно подготовила в фотошопе.
Итак картинку выравниваем по центру,выделив, преобразовываем в мувик(имя любое,но чтоб не путаться назовите картинка 1),'точка привязки левый верхний угол',прописываем в свойствах photo1
Далее переходим на слой картинка 2 и на сцену переносим символ картинка 1(в любое место кидаем за сцену и в свойствах прописываем имя photo2 (см.скрины)

Далее дублируем слой окно(window),переносим его выше над картинками и переименовываем в маска,вот такой получается вид сцены.

Кликаем правой кнопой по слою маска и ставим галочку 'маска',затем слой картинка 2 тоже переносим под слойкартинка 1 с маской,см.скрин.

Переходим к слою AS,выделив первый кадр открываем действия и прописываем скрипт:

_root.bMoveH = true;
_root.bRight = true;
_root.bMaxMoveSpeedH = 15;
_root.bNormalMoveSpeedH = 5;
_root.bMoveSpeedH = bNormalMoveSpeedH;
_root.bMoveV = false;
_root.bDown = false;
_root.bMaxMoveSpeedV = 2;
_root.bNormalMoveSpeedV = 1;
_root.bMoveSpeedH = bNormalMoveSpeedV;
_root.photo_left = "photo1";
_root.photo_right = "photo2";
_root.bMouseAction = true;
photo1_x = getProperty("photo1", _x);
photo1_width = getProperty("photo1", _width);
photo1_height = getProperty("photo1", _height);
photo1_y = getProperty("photo1", _y);
win_x = getProperty("window", _x);
win_width = getProperty("window", _width);
win_y = getProperty("window", _y);
win_height = getProperty("window", _height);
if (win_width < photo1_width)
{
setProperty("photo2", _x, photo1_x + photo1_width);
}
else
{
_root.bMoveH = false;
setProperty("photo1", _x, win_x + win_width / 2 - photo1_width / 2);
_root.bMouseAction = false;
} // end else if
setProperty("photo1", _y, win_y + win_height / 2 - photo1_height / 2);
setProperty("photo2", _y, win_y + win_height / 2 - photo1_height / 2);

Затем переходим на кадр 3,вставляем пустой ключевой кадр и выделив его прописываем в действиях скрипт :

Продляем ниже лежащие слои до третьего кадра нажав F5
Временная шкала должна выглядеть,как на скрине .

Все,тестируем ролик.

Удачи в творчестве.

Светлана

Серия сообщений "флеш разные уроки и анимация":
Часть 1 - Делаем эффект "Боке" в Adobe Flash.
Часть 2 - Анимация дождя.Озвучивание.Урок 4
...
Часть 8 - Движение фона.Adobe Flash.
Часть 9 - Флеш эффект движения картинок. Флеш галерея «Photo Stack Gallery»
Часть 10 - Создание панорамы на флеш.
Часть 11 - Снежок «funkSnow». Урок для Adobe Flash CS6.
Часть 12 - "Золотая рыбка". Отрисовка и анимация во флеш.
...
Часть 48 - флеш "Ночь любви"
Часть 49 - флеш "Старый Новый год"
Часть 50 - Флеш "Моя правнученька"