Опубликован: 27.03.2013 | Доступ: свободный | Студентов: 1531 / 280 | Длительность: 08:07:00
Специальности: Программист
Лекция 13:

Управление кадрами

< Лекция 12 || Лекция 13 || Лекция 14 >
Аннотация: На примере создания примитивного приложения в лекции рассмотрена технология организации переходов по разделам (кнопкам) приложения.

Управление кадрами

Материалы к лекции Вы можете скачать здесь.

Для управления проигрыванием ролика (анимации), для организации перехода по кнопкам меню в приложении и для других видов влияния пользователя на процесс работы приложения, необходимо включать в приложение скрипты.

Скрипт – это набор команд на языке программирования, которые выполняет компьютер при наступлении определенного события, к которому данный скрипт "привязан".

Скрипт создает пользователь в специальном окне для набора программного кода. Это окно вызывается на экран через режим меню "Окно" - "Действия".

Окно "Действия" имеет три зоны. Набирать скрипт будем в зоне отображения программного кода – справа.

Открытое окно "действия"

Рис. 12.1. Открытое окно "действия"

Практическая работа.

  • Откройте файл с ранее созданным проектом "Полет бабочки".
  • Добавьте в него слой, в котором создайте пустой ключевой кадр примерно в середине анимационного процесса полета бабочки.
  • Выберите режим "Окно" – "Действия". Откроется окно для набора программного кода.
  • Выделите первый ключевой кадр. В окне программного кода введите команду Stop();
  • Обратите внимание на изменение отображения ключевого кадра - появилась маленькая буква "а", обозначающая о наличие в данном кадре команд ActionScript. Запустите фильм. Он остановится на том кадре, где Вы установили команду Stop().
  • Далее. Выделите первый ключевой кадр, в окне "Действия" удалите команду Stop().
  • Выделите ключевой кадр, созданный в середине анимации. В окне программного кода введите команду Stop();
  • Запустите фильм. Он остановится на том кадре, где Вы установили команду Stop().
  • Создавая фильмы, Вы не могли не обратить внимание на то, что происходит непрерывное проигрывание фильма - закольцовка. Такое поведение иногда противоречит замыслу. Давайте заставим наш фильм остановиться на последнем кадре – к последнему ключевому кадру привяжите команду Stop(); (удалив ее с остальных ключевых кадров).

Теперь попробуем запрограммировать кнопки на переходы к определенным ключевым кадрам ролика.

Практическая работа "Геометрические фигуры"

  1. Создадим все элементы ролика в разных слоях:

    -в слое "Меню" расположим кнопки "Круг", "Квадрат", "Линия". Вставим четвертый кадр (через контекстное меню 4-ого кадра данного слоя). Выделите кнопку "Круг", на панели свойств в поле ввода имени экземпляра кнопки ("Назначить имя экземпляру") введем имя кнопки (допустим, "but1"). Соответственно, кнопке "Квадрат" дадим имя "but2", кнопке "Линия" - "but3".

    Объекты слоя "Меню" разрабатываемого приложения "Геометрические фигуры"

    Рис. 12.2. Объекты слоя "Меню" разрабатываемого приложения "Геометрические фигуры"

    -в слое "Фигуры" создадим четыре пустых ключевых кадра. На втором ключевом кадре в рабочей зоне расположим изображение круга, на третьем ключевом кадре – изображение квадрата, на четвертом – линии.

    Объекты слоя "Меню" разрабатываемого приложения "Геометрические фигуры"

    Рис. 12.3. Объекты слоя "Меню" разрабатываемого приложения "Геометрические фигуры"

  2. Каждая кнопка имеет свое уникальное назначение, поэтому к каждой кнопке должен быть привязан скрипт, который и будет реализовывать это назначение. Выделим первую кнопку для привязки к ней скрипта – пусть это будет кнопка "Круг". Откроем панель "Действия", нем выберем вкладку "Фрагменты кода":
    Открытое окно "Действия" при выделенной кнопке

    Рис. 12.4. Открытое окно "Действия" при выделенной кнопке
  3. Как видно из появившегося списка папок с фрагментами кодов – многие действия уже запрограммированы, достаточно выбрать необходимое и внести некоторые поправки в программный код. В перечне выбираем "Навигация по временной шкале" (ведь нам необходимо по нажатию кнопки перейти на определенный ключевой кадр шкалы). Из перечня команд выберем команду "Нажмите для перехода к кадру и остановке"
    Окно "Фрагменты кода"

    Рис. 12.5. Окно "Фрагменты кода"
  4. "Вставить"
  5. В окне "Действия" вставился скрипт ( рис. 12.6)
    Окно "Действия" со скриптом

    Рис. 12.6. Окно "Действия" со скриптом

    Все, что заключено между символами /*......*/ является комментарием к программному коду и при желании безболезненно для скрипта удаляется. Попытаемся понять, что означает данный скрипт:

    but1.addEventListener (MouseEvent.CLICK, KRUG);
    function KRUG (event:MouseEvent):void
    {
    gotoAndStop(2);
    }
    

    Этот код выполняет две функции:

    Во-первых, определяется источник события (объект, запускающий событие), событие (действие, связанное с источником события, на которое необходимо ответить) и функция, которую необходимо выполнить в ответ на происшедшее событие:

  6. От источника событий - кнопки (but1.addEventListener (MouseEvent.CLICK, KRUG)) ожидается событие, связанное с мышью (but1.addEventListener (MouseEvent.CLICK, KRUG)), в частности, с кликом по ней (but1.addEventListener (MouseEvent.CLICK, KRUG)). Кроме "клика" существуют еще такие типы событий мыши, как doubleClick, mouseDown и mouseUp.
  7. Определяется метод, (but1.addEventListener (MouseEvent.CLICK, KRUG)) который будет прослушивать события, связанные с кнопкой, и запускать функцию (определенные действия), назначенную этим событиям. Функции дается имя (but1.addEventListener (MouseEvent.CLICK, KRUG)). Имя функции задает пользователь.

Во-вторых, определяется функция - указываются те действия, которые будут выполняться в ответ на ожидаемое событие:

  • Создается строка заголовка функции: после ключевого слова function идет имя функции KRUG (оно должно совпадать с именем функции, заданном выше). В скобках указаны передаваемые функции параметры (параметры для обработки события описывают событие, вызвавшее функцию). После скобок ставится двоеточие, а за ним — возвращаемый функцией тип данных. В данном случае void (пусто) означает, что функция не возвращает данных
  • После заголовка функции в фигурных скобках идет тело функции – набор команд, которые выполняясь и задают поведение объекта (кнопки) в ответ на происшедшее с ним событие. В приведенном выше скрипте в теле функции стоит команда gotoAndStop (2), организующая переход (и остановку) ко 2-ому кадру временной шкалы.
  • Скопируем созданный для кнопки "Квадрат" скрипт и вставим еще 2 раза (для программирования кнопок "Квадрат" и "Линия") в конец скрипта с внесением необходимых поправок (они выделены красным цветом – это изменения в именах кнопок, именах функций, номерах кадров):
    but1.addEventListener(MouseEvent.CLICK, KRUG);
    function KRUG(event:MouseEvent):void
    {
    gotoAndStop(2);
    }
    
    but2.addEventListener(MouseEvent.CLICK, KVADRAT);
    function KVADRAT(event:MouseEvent):void
    {
    gotoAndStop(3);
    }
    
    but3.addEventListener(MouseEvent.CLICK, LINE); 
    function LINE(event:MouseEvent):void
    {
    gotoAndStop(4);
    }
    
    Окно "Действия" со скриптом

    Рис. 12.7. Окно "Действия" со скриптом
  • Проиграйте ролик.

Метки кадров

Имя может быть не только у слоя, символа, но и у кадра, называется оно - меткой.

Метки - предназначены для удобства программирования и служат своеобразными точками вызова, т.е. идентификаторами кадра.

В созданном выше проекте "Геометрические фигуры" дайте метки 2, 3 и 4-ому ключевым кадрам (на слое "Фигуры"):

  • Выделите 2-ой ключевой кадр.
  • На панели свойств кадра в поле имени кадра "Имя" введите имя кадра, например, KRUG.
  • Нажмите ОК.
  • Аналогично дайте имена 3-ему и 4-ому ключевым кадрам.

Красный флажок на кадре говорит о том, что у кадра есть имя (метка).

Практическая работа

Откройте проект "Геометрические фигуры". Дайте метки ключевым кадрам, на которые осуществляется переход по нажатию кнопок "Круг", "Квадрат", "Линия". Измените скрипт для каждой кнопки (организуйте переход на ключевой кадр не по номеру кадра, а по метке. В отличие от номера кадра, метка кадра, используемая в команде заключается в двойные кавычки).

Краткие итоги лекции:

Для управления проигрыванием ролика (анимации), для организации перехода по кнопкам меню в приложении и для других видов влияния пользователя на процесс работы приложения, необходимо включать в приложение скрипты.

Скрипт – это набор команд на языке программирования, которые выполняет компьютер при наступлении определенного события, к которому данный скрипт "привязан".

Скрипт создает пользователь в специальном окне для набора программного кода. Это окно вызывается на экран через режим меню "Окно" - "Действия".

Скрипты, как правило, выполняются в ответ на определенные события. Обработка событий состоит из трех важных этапов: определяется источник события (объект, запускающий событие), событие (действие, связанное с источником события, на которое необходимо ответить) и функция, которую необходимо выполнить в ответ на происшедшее событие.

Для удобства программирования кадрам дают имена (метки) – они служат своеобразными точками вызова, т.е. идентификаторами кадра. Красный флажок на кадре говорит о том, что у кадра есть имя (метка).

Ключевые термины

  • Скрипт
  • Источник событий
  • Событие
  • Функция
  • Заголовок функции
  • Тело функции
  • Свойства объектов
  • Методы объектов
  • Метка кадра

Набор для практики:

Вопросы

  • Как узнать о наличии скрипта на кадре?
  • Можно ли привязать скрипт к не ключевому кадру?
  • Какое действие выполняет команда Stop() на кадре?
  • Каким образом можно вставлять комментарий в скрипт?
  • Назовите метод, обучающий объект-источник события "слушать и реагировать на события"
  • Перечислите события мыши
  • Что выполняется в ответ на ожидаемое событие?
  • Какая команда организует переход к определенному ключевому кадру?
  • Что может служить в качестве идентификатора кадра?
  • Чем на временной диаграмме отличаются кадры, имеющие номера от кадров с метками?

Упражнения

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

< Лекция 12 || Лекция 13 || Лекция 14 >
Яна Борисова
Яна Борисова

В тестах есть вопросы, детали которых в тестах не рассматриваются. Ест ли возможность рассмотреть материал в лекциях более подробно и в деталях?

Александра Замбровская
Александра Замбровская

Я прохожу бесплатное (самостоятельное) изучение курса Создание интерактивных приложений в Adobe Flash Могу ли я (имея высшее образование) заказать официальное удостоверение по программе повышения квалификации? Сколько это будет стоить и где можно заказать (если можно, то ссылку на страничку)?