Предлагаем уроки как Ñ Ð¸Ñпользованием ActionScript 3.0 так и проÑтые анимационные Ñффекты.
ИÑточник: http://tutorials.flashmymind.com/2009/02/a…-3-drawing-api/
Ð’ Ñтом уроке Ð’Ñ‹ научитеÑÑŒ Ñ Ð¿Ð¾Ð¼Ð¾Ñ‰ÑŒÑŽ ActionScript 3.0 Ñоздавать анимацию риÑÐ¾Ð²Ð°Ð½Ð¸Ñ Ð»Ð¸Ð½Ð¸Ð¸, окружноÑти и волны.
Ðачнем Ñ ÐºÐ¾Ð´Ð° Ð´Ð»Ñ Ð°Ð½Ð¸Ð¼Ð°Ñ†Ð¸Ð¸ риÑÐ¾Ð²Ð°Ð½Ð¸Ñ Ð¿Ñ€Ð¾Ñтой линии. Создаем новый *.fla документ и в первом кадре пишем Ñледующий
Код:
 //СкороÑти анимации по оÑÑм Ñ… и у. var xspeed:Number = 2; var yspeed:Number = -2; //Координаты покадрового риÑованиÑ. var xpos:Number = 0; var ypos:Number = stage.stageHeight; //Задаем Ñтиль линии: толщина 2 пикÑелÑ, цвет "краÑный". graphics.lineStyle(2, 0xff0000); //Задаем начальную позицию риÑованиÑ.; graphics.moveTo(0, stage.stageHeight); //Ðазначаем Ñлушатель на Ñобытие Ñмены кадра.; addEventListener(Event.ENTER_FRAME, onEnterFrame); //Ðта Ñ„ÑƒÐ½ÐºÑ†Ð¸Ñ Ð²Ñ‹Ð¿Ð¾Ð»Ð½ÑетÑÑ ÐºÐ°Ð¶Ð´Ñ‹Ð¹ кадр и риÑует линию. function onEnterFrame(event:Event):void { //Задаем координаты Ñледующей точки. xpos += xspeed; ypos += yspeed; //РиÑуем линию до Ñледующей точки. graphics.lineTo(xpos, ypos); }
ПротеÑтируем наш ролик. Мы Ñразу же видим, что перед нами риÑуетÑÑ Ð»Ð¸Ð½Ð¸Ñ.
По такому же принципу Ñоздадим анимацию риÑÐ¾Ð²Ð°Ð½Ð¸Ñ Ð¾ÐºÑ€ÑƒÐ¶Ð½Ð¾Ñти. Сотрём предыдущий код Ð´Ð»Ñ Ð°Ð½Ð¸Ð¼Ð°Ñ†Ð¸Ð¸ линии и напишем код
Ð”Ð»Ñ Ð°Ð½Ð¸Ð¼Ð°Ñ†Ð¸Ð¸ окружноÑти:
 //СкороÑть анимации. var speed:Number = 0.05; //Ð Ð°Ð´Ð¸ÑƒÑ Ð¾ÐºÑ€ÑƒÐ¶Ð½Ð¾Ñти. var radius:Number = 50; //Угол покадрового риÑÐ¾Ð²Ð°Ð½Ð¸Ñ Ð² радианах. var angle:Number = 0; //Координаты покадрового риÑованиÑ. var xpos:Number; var ypos:Number; //Координаты центра окружноÑти. var centerX:Number = stage.stageWidth / 2; var centerY:Number = stage.stageHeight / 2; //Задаем Ñтиль линии: толщина 2 пикÑелÑ, цвет "краÑный". graphics.lineStyle(2, 0xff0000); //Задаем начальную позицию риÑованиÑ.; graphics.moveTo(centerX + radius, centerY); //Ðазначаем Ñлушатель на Ñобытие Ñмены кадра.; addEventListener(Event.ENTER_FRAME, onEnterFrame); //Ðта Ñ„ÑƒÐ½ÐºÑ†Ð¸Ñ Ð²Ñ‹Ð¿Ð¾Ð»Ð½ÑетÑÑ ÐºÐ°Ð¶Ð´Ñ‹Ð¹ кадр и риÑует окружноÑть. function onEnterFrame(event:Event):void { //Задаем координаты Ñледующей точки. xpos = centerX + Math.cos(angle) * radius; ypos = centerY + Math.sin(angle) * radius; //Задаем угол в Ñледующем кадре. angle += speed; //РиÑуем окружноÑть до Ñледующей точки. graphics.lineTo(xpos,ypos); }
ПротеÑтируем ролик. Мы видим что теперь перед нами риÑуетÑÑ Ð¾ÐºÑ€ÑƒÐ¶Ð½Ð¾Ñть.
Теперь заанимируем риÑование волны. Сотрём предыдущий код и напишем Ñледующий:
 //СкороÑть анимации по оÑи Ñ…. var speedX:Number = 1; //СкороÑть анимации по оÑи у. var speedAngle:Number = 0.1; //Ðмплитуда волны. var range:Number = 100; //МатематичеÑкий угол. var angle:Number = 0; //Координаты покадрового риÑованиÑ. var xpos:Number = 0; var ypos:Number = 0; //Координата начальной точки волны по оÑи у. var centerY:Number = stage.stageHeight / 2; //Задаем Ñтиль линии: толщина 2 пикÑелÑ, цвет "краÑный". graphics.lineStyle(2, 0xff0000); //Задаем начальную позицию риÑованиÑ.; graphics.moveTo(0, centerY); //Ðазначаем Ñлушатель на Ñобытие Ñмены кадра.; addEventListener(Event.ENTER_FRAME, onEnterFrame); //Ðта Ñ„ÑƒÐ½ÐºÑ†Ð¸Ñ Ð²Ñ‹Ð¿Ð¾Ð»Ð½ÑетÑÑ ÐºÐ°Ð¶Ð´Ñ‹Ð¹ кадр и риÑует окружноÑть. function onEnterFrame(event:Event):void { //Задаем координаты Ñледующей точки. xpos += speedX; ypos = centerY + Math.sin(angle) * range; //Задаем угол в Ñледующем кадре. angle += speedAngle; //РиÑуем окружноÑть до Ñледующей точки. graphics.lineTo(xpos,ypos); }
ТеÑтируем и видим, как перед нами возникает волна.
Урок окончен. Ð’Ñем ÑпаÑибо, вÑе Ñвободны. 🙂
ИÑходник: urok8.rar [34 Kb] (cкачиваний: 124)
Да, пожайлуÑта. ЗдеÑÑŒ будут еще другие интереÑные уроки.
Привет!
Познавательно напиÑано, а можно перепоÑтить ваш поÑÑ‚ в моем лунном блоге?
Удачи!
Скажите, а у Ð²Ð°Ñ ÐµÑть RSS поток в Ñтом блоге?
Ðеплохой поÑÑ‚, очень интереÑно было почитать