Анимация и интерактивность Drawing API

Покадровая анимация

Это небольшое упражнение, в котором мы будем использовать рисунки API, генерируемые celMaker.swf для создания анимации, в данном случае - грубо анимированного бегущего человечка. Мы будем использовать рисование API для моделирования обыкновенной покадровой анимации. Откройте API_animation.swf (на компакт-диске), чтобы увидеть результат работы кода.

1. Откройте новый фильм с именем API_animation.fla и введите этот код в кадр 1 слоя по умолчанию:

   shapes  = [];
   shapeNum = 0;
   drawShapes = function () {
     _root[shapes[shapeNum]]();
     shapeNum = shapeNum+1>shapes.length-1 ? 0 : shapeNum+1;
   };
   setInterval(drawShapes, 100);

   Это практически весь код, который нужно ввести в наш новый фильм. Мы инициализируем две переменные (и будем сохранять имена наших функций в массиве, сразу после определения их количества) и создаем функцию для смены кодированных изображений. drawShapes будет просто обрабатывать циклически массив и переходить к следующему изображению. Скорость, с которой будет выполняться это действие, указывается выражением setInterval в следующей строке. Здесь я указал вхождение функции через каждую десятую долу секунды. Изменяя это число можно быстро изменять частоты кадров вашего фильма.

   Вторая строка в функции drawShapes является примером использования условного оператора. По большому счету, это то же самое, что и выражение if...else. Строка начинается с переменной, в данном случае - shapeNum. Мы будем присваивать значение переменной shapeNum в зависимости от обстоятельств. Далее будет проверяться условие. В нашем случае мы проверяем, является ли shapeNum+1 большим по значению, чем полное число индексов в массиве shapes. Если это выражение принимает значение "истина", то все, что стоит после знака "?", приписывается переменной shapeNum (в нашем примере - 0). Если условие возвращает значение "ложь", тогда переменной shapeNum (в примере выше - shapeNum+1 ) присваивается все, что стоит после двоеточия. Вся строка тогда сводится к увеличению shapeNum до тех пор, пока она не достигнет конца массива shapes, в случае чего будет осуществлен переход на первый индекс.
2. Вернитесь к файлу celMaker.fla, над которым вы работали в последнем упражнении, и запустите фильм заново. Создайте несколько кадров анимации, нажимая на любую клавишу перед каждой новой сценой для создания новой сцены/слоя. Мы будем анимировать эти кадры, поэтому нарисуйте что-нибудь, что движется от кадра к кадру. Я нарисовал в каждом кадре бегущего человечка, который будет "бежать" при циклическом проигрывании фильма.
   

   
   

   Не закрывайте окно Output при его появлении - оно нам понадобится. При рисовании не следует слишком долго рисовать карандашом, несмотря на то, что движение будет минимально. Чем быстрее вы рисуете, тем меньше кода впоследствии будет использоваться.

   Ах уж это рисование мышью! Будь у нас время, мы бы реализовали нечто более интересное, например, традиционные кривые Безье и средства для рисования фигур - окружностей и многоугольников.
3. Завершив создание анимационного цикла, нажмите любую клавишу, чтобы вывести последнюю сцену. Окно Output теперь будет содержать многие строки кода, который вам нужно будет выделить и скопировать. Все эти строки форматируются и выводятся в функции listVars. Убедитесь, что вы скопировали весь код.
4. Вернитесь в главную точку временной шкалы API_animation.fla и вставьте содержимое буфера обмена под первой строкой shapes = []; кода в панели Actions. Осталось вставить имена сцен в массив в нижней части кода. Наши сцены названы именами shape1, shape2 и т.д. в коде, скопированном из окна Output. Обновите массив соответствующим числом сцен. У меня их было четыре, поэтому мой обновленный код выглядит так.

   shapes = [];
   
   shape1 = function() { 
     this.clear(); 
     this.lineStyle(2, 0, 100);
   
     [Lots of additional function information]
   
     this.lineTo(256, 269);
     this.lineTo(255, 269);
     this.lineTo(254, 269);
     this.lineTo(253, 269);
   }
   shapes.push("shape4");
   drawShapes = function() {
     _root [shapes[shapeNum]] ();
     shapeNum = shapeNum+1 > shapes.length-1 ? 0 : shapeNum+1;
   }
   setInterval(drawShapes, 100);

   Если у вас больше сцен, добавьте нужное их количество в массив. Убедитесь, что вы вводите в массив лишь строки, а не сами функции.
5. Запустите фильм, чтобы посмотреть покадровую анимацию в действии.
   

   
   

Программирование промежуточных кадров

Мы наблюдаем результат программирования покадровой анимации с использованием рисования API (хотя в нашем примере используется очень примитивный рисунок). Так как насчет промежуточных кадров? При работе исключительно с числами это проще простого.

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