Мобильный LiveInternet Урок. Sothink SWF Quicker 5.0. Имитируем объемную анимацию | Та_ещё_штучка_Я

Авторизация

Дневник Та_ещё_штучка_Я Лента друзей - Дневник - Полная версия

Урок. Sothink SWF Quicker 5.0. Имитируем объемную анимацию 29-11-2011 10:08 к комментариям - к полной версии - понравилось!

Это цитата сообщения MissKcu Оригинальное сообщение

Урок. Sothink SWF Quicker 5.0

В сегодняшнем уроке мы научимся с помощью программы Sothink SWF Quicker имитировать объемную анимацию.

Для урока нам потребуются 4 изображения в формате jpg. Я использовал 4 изображения размером 250 на 150 пикселей. В конце урока приводится ссылка на скачивание файлов для загрузки.

Итак, приступим:

1. Откройте новый документ. Размеры в ширину - 400 пикселей, в высоту – 300 пикселей. Установите такой фон: #999999, и частоту кадров равную не менее 20. См рисунок ниже:

[263x133]

2. Войдите в меню файл, и с помощью команды Import to Library импортируйте в библиотеку подготовленные 4 изображения:

[219x255]

3. Нажмите Ctrl +F8 (создать новый символ), или в меню Insert выберите New Symbol. В открывшемся диалоговом окне создания символа выберите Graphics. Смотри рисунок ниже:

[271x130]

4. После нажатия кнопки ОК, Вы попадаете в окно редактирования символа, и, выбрав инструмент Rectangle (Прямоугольник) на рисунке ниже смотри поз. 1. Устанавливаете значение Draw as Shape (поз.2). На панели форм в поле Fill Style выбираете первое изображение. (в позиции 3 минирисунок выделен красной рамкой) и рисуете на холсте прямоугольник с размерами приблизительно 250 на 150 пикселей. Особой точности здесь не требуется, так как потом (предварительно выделив нарисованный прямоугольник) Вы зададите точные размеры, и отцентрируете его на панели Transform См. позицию 4 на рисунке ниже:

[323x347]

5. Затем ещё раз нажмите Ctrl + F8, и на этот раз выберите в диалоговом окне Movie Clip:

[273x132]

6. В открывшемся окне редактирования мувиклипа переместите созданный в предыдущем шаге графический символ на холст, отцентрируйте его и задайте следующие параметры:

[209x148]

То есть мы уменьшаем ширину нашей первой картинки вдвое, и при этом увеличиваем размер картинки по высоте тоже вдвое. Поэтому в полях Width и Height in Percent стоят значения соответственно 50 и 200 %. Обратите внимание, что кнопка Constrain Size, расположенная правее этих полей должна в этом случае быть отжатой.

7. Добавьте в этом же окне редактирования символа еще один слой

[207x145]

8. На панели Shape установите такие параметры:

[209x115]

То есть мы устанавливаем толщину контура в один пиксель с белым цветом и прозрачной заливкой. Когда будете устанавливать заливку в поле Alpha установите значение, равное нулю. Просто передвиньте ползунок вниз до самого конца.

7. Выбираем инструмент Rectangle, и рисуем вокруг нашего мувиклипа как бы обрамляющую рамку. Смотри рисунок ниже:

[162x313]

8. Аналогичным образом проделываем действия, описанные в пунктах 3 – 7 с оставшимися тремя изображениями.

Таким образом, после проделывания всех операций у нас будут созданы четыре мувиклипа из разных изображений.

9. Создаем еще один мувиклип. Сразу в окне редактирования символа добавляем на таймлайне четыре слоя. В нижних четырех слоях у нас будут помещаться созданные в предыдущих шагах мувиклипы, а в пятом слое мы будем писать код.

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

[227x96]

Каждый раз переходим в следующий слой и задаём новое имя square2,
square3, square4. Имена можно задать и другие, но тогда их нужно будет изменить и в коде.

10. После того, как все четыре мувиклипа помещены один под другим на разных слоях добавим в каждом слое по два кадра (F5)

[255x76]

11. Выделяем первый кадр пятого слоя (можно предварительно переименовать его в Action Layer), переходим на панель Action, и вставляем такой код:

Stage.scaleMode = "noScale";
squares = [0, square1, square2, square3, square4];
rotNum = 5;
squares[1]._xscale = 0;
squares[2]._xscale = 0;
squares[3]._xscale = 0;
squares[4]._xscale = 100;
squares[1]._visible = 0;
squares[2]._visible = 0;
for (i = 1; i <= 4; i++)
{
squares[i].shadow._alpha = 0;
squares[i].highlight._alpha = 0;

} // end of for

12. Выделяем второй кадр в слое действий правой кнопкой мыши, и из списка выбираем вставить пустой ключевой кадр:

[168x277]

Пишем в нем такой код:

rotNum = _xmouse / 250;
squares[3]._xscale = squares[3]._xscale + rotNum * (squares[4]._xscale / 20);
squares[4]._xscale = squares[4]._xscale - rotNum * (squares[3]._xscale / 20);
if (!(squares[4]._xscale <= 0 || squares[3]._xscale > 100))
{
if (squares[3]._xscale <= 0 || squares[4]._xscale > 100)
{
tempSquare = [0, squares[1], squares[2], squares[3], squares[4]];
squares[4] = tempSquare[1];
squares[1] = tempSquare[2];
squares[2] = tempSquare[3];
squares[3] = tempSquare[4];
squares[1]._xscale = 0;
squares[2]._xscale = 0;
squares[3]._xscale = 100;
squares[4]._xscale = 0;
} // end if
}
else
{
tempSquare = new Array();
tempSquare = [0, squares[1], squares[2], squares[3], squares[4]];
squares[2] = tempSquare[1];
squares[3] = tempSquare[2];
squares[4] = tempSquare[3];
squares[1] = tempSquare[4];
squares[1]._xscale = 0;
squares[2]._xscale = 0;
squares[3]._xscale = 0;
squares[4]._xscale = 100;
} // end else if
squares[1]._visible = 0;
squares[2]._visible = 0;
squares[3]._visible = 1;
squares[4]._visible = 1;
squares[4].shadow._alpha = 100 - squares[4]._xscale;
squares[3].highlight._alpha = 100 - squares[3]._xscale;
squares[1].shadow._alpha = 0;
squares[2].highlight._alpha = 0;
totalLength = squares[3]._width + squares[4]._width;
midpoint = totalLength / 2;
midpoint = midpoint - totalLength;
squares[3]._x = midpoint + squares[3]._width / 2;

squares[4]._x = squares[3]._x + squares[3]._width / 2 + squares[4]._width / 2;

13. И наконец, в третьем кадре слоя действий вставляем аналогично тому, как это описано в предыдущем пункте следующий код:

				gotoAndPlay(2);

14. Переходим в основную сцену, и перемещаем из библиотеки на рабочий холст последний созданный нами мувиклип. Центрируем его. И если в пункте шестом мы изменяли размеры изображений в мувиклипе со 100 % по ширине до 50%, и со 100% по высоте до
200 %, то теперь мы поступим в обратном порядке. То есть увеличим ширину до 200 %, и уменьшим высоту до 50%

Нажимаем Ctrl + Enter т тестируем созданный клип.
Поперемещайте курсор влево/вправо, чтобы увидеть, как это выглядит:

вверх^ к полной версии понравилось! в evernote

Комментарии (2):

MissKcu 29-11-2011-13:36 удалить

Ждем-с твои работы...

Обратиться - Ответить - К полной версии

Та_ещё_штучка_Я 29-11-2011-17:09 удалить

Ответ на комментарий MissKcu # сама жду..когда картинки развернутся )