Лабораторные работы по макромедиа флеш

Автор публикации:

Дата публикации:

Краткое описание: ...

Лаб 1. Редактирование изображений. Инструменты выделения и рисования.

Задание 1:Базовые операции при редактировании изображений

Инструменты выделения и рисования «Arrow Tool (Указатель)»

  1. Откройте приложение Macromedia Flash

  2. Создайте новый документ командой Файл ► Новый

  3. Вызовите диалоговое окно Параметры документа командой Изменить ► Документ. Установите размер документа: 400 Х 300 пикселей.
    [pic]

  4. Установите такой масштаб отображения документа, чтобы Стол целиком отображался в рабочей области.


[pic]

  1. На Панели инструментов выберите инструмент Эллипс  [pic]

6. В палитре Параметры установите:

:

Красный __

Цвет заполнения:

Зелёный __

Высота штриха:

4

Стиль штриха:

Сплошной  [pic]

  1. [pic]

  2. Создайте изображение круга

[pic]

  1. В палитре Параметры установите:

:

Синий __

Цвет заполнения:

Оранжевый __

Высота штриха:

4

Стиль штриха:

[pic]

[pic]

  1. Добавьте к рисунку изображение ещё одного круга

[pic]

  1.  На Панели инструментов выберите инструмент Указатель  [pic]
    Указателем выделите оранжевый круг. Для выделения выполните одно из действий:

    1. щелкните дважды мышью внутри объекта;

    2. установите указатель мыши за пределами объекта, и, нажав кнопку мыши, переместите указатель таким образом, чтобы весь объект оказался внутри области, ограниченной прямоугольником.

Выбранный объект отображается покрытым мелкой сеткой, а контур – более толстым по сравнению с обычным состоянием (вот оно - выделение).

[pic]

  1. Скопируйте выделенное изображение командой Редактировать ► Копировать(+), а затем вставьте командой Редактировать ► Вставить(+). Не отменяя выделения инструментом Указатель переместите вставленное изображение.

[pic]

  1. Не отменяя выделения третьего, нового круга, в палитре Параметры установите:

:

Фиолетовый __

Цвет заполнения:

Желтый __

Высота штриха:

10

Стиль штриха:

[pic]


[pic]

  1. После этого снимите выделение, щёлкнув мышью в любом свободном месте рисунка. Получим следующее изображение:

[pic]

  1. Подобным образом добавьте в рисунок изображение трёх прямоугольников. При создании прямоугольника используйте инструмент Прямоугольник  [pic] :

[pic]

  1. На Панели инструментов выберите инструмент Указатель  [pic] . Щёлкните им один раз в центре одного из кругов. В результате у Вас будет выделена только заливка этой фигуры:

[pic]

Этим же инструментом переместите выделенную заливку немного в сторону:

[pic]

На Панели инструментов выберите инструмент Ведро краски  [pic] . Установите в палитре Параметры цвет заливки - зелёный     . Залейте пустую область между контуром и заливкой:


[pic]

Снова выберите выберите инструмент Указатель  [pic] и дважды щёлкните на изображении контура. В результате окажется выделенным только контур:

[pic]

Нажмите на клавиатуре клавишу Delete. В результате выделенный контур будет удалён из рисунка:

[pic]

  1. На Панели инструментов выберите инструмент Указатель  [pic] . Щёлкните им один раз на контуре одного из кругов. В результате у Вас будет выделен только контур этой фигуры:

[pic]

Этим же инструментом переместите выделенный контур немного в сторону:

[pic]

На Панели инструментов выберите инструмент Ведро краски  [pic]  . Установите в палитре Параметры цвет заливки - Синий     . Залейте пустую область между контуром и заливкой:

[pic]

Снова выберите инструмент Указатель  [pic]  и дважды щёлкните на изображении заливки, оставшейся вне контура. В результате эта область окажется выделенной:

[pic]

Нажмите на клавиатуре клавишу Delete. В результате выделенная часть заливки будет удалена из рисунка:

[pic]

  1. На Панели инструментов вберите инструмент Указатель  [pic]  Подведите указатель мыши к границе контура одного из кругов. Рядом с указателем появится небольшая дуга, которая свидетельствует о том, что указатель находится в «горячей» зоне объекта:

[pic]

Нажмите левую клавишу мыши и, не отпуская, измените форму круга:

[pic]

Отпустите левую клавишу мыши и объект изменит форму:

[pic]

  1. На Панели инструментов выберите инструмент Указатель  [pic] . Подведите указатель мыши к углу одного из прямоугольников. Рядом с указателем появится небольшой уголок, который свидетельствует о том, что указатель находится в «горячей» зоне объекта:

[pic]

Нажмите левую клавишу мыши и, не отпуская, измените форму прямоугольника:

[pic]

Отпустите левую клавишу мыши и объект изменит форму:

[pic]

Самостоятельно измените форму объекта примерно так, как показано на рисунке:

[pic]

  1. На Панели инструментов выберите инструмент Указатель  [pic] . Щёлкните один раз на правой границе одного из прямоугольников, выделив тем самым эту границу:

[pic]

Этим же инструментом переместите выделенный контур немного в сторону:

[pic]

Тоже самое проделайте с остальными границами прямоугольника:

[pic]

Самостоятельно измените форму объекта примерно так, как показано на рисунке:

[pic]

  1. Используя инструмент Указатель  [pic]  произвольно измените форму последнего из объектов, например, как показано на рисунке:

[pic]

  1. Готовое изображение сохраните в своей папке в формате *.fla

Задание 2. Инструменты выделения и рисования «Lasso (Лассо) и Line (Линия)»

  1. Откройте приложение Macromedia Flash

  2. Создайте новый документ командой Файл ► Новый

  3. Вызовите диалоговое окно Параметры документа командой Изменить ► Документ. Установите размер документа: 400 Х 300 пикселей.

4. Установите такой масштаб отображения документа, чтобы Стол целиком отображался в рабочей области.

[pic]

  1. Инструментами Эллипс  [pic]  и Прямоугольник  [pic]  нарисуйте 4 произ-вольные фигуры.

[pic]

  1. На Панели инструментов выберите инструмент Лассо  [pic]  Нажав левую клавишу мыши, очертите произвольную границу вокруг объекта:

[pic]

Отпустите левую клавишу мыши, и объект окажется выделенным:

[pic]

Инструментом Указатель  [pic]  переместите выделенный объект

[pic]

  1. На Панели инструментов выберите инструмент Лассо  [pic] . Нажав левую клавишу мыши, очертите произвольную границу внутри объекта:

[pic]

Отпустите левую клавишу мыши, и выбранная часть объекта окажется выделенной:

[pic]

Инструментом Пипетка  [pic]  выберите произвольный цвет, и выделенная область окрасится в выбранный вами цвет

[pic]

  1. На Панели инструментов выберите инструмент Линия  [pic] . Установите указатель мыши в требуемой точке (либо за пределами, либо на контуре объекта), и, нажав кнопку мыши, проведите прямую линию, отделяющую выбираемую часть от остальной части объекта:


[pic]

Включите инструмент Указатель  [pic]  и щелкните дважды для выбора заливки и контура объекта или один раз для выбора только заливки или контура:

[pic]

Инструментом Указатель  [pic]  переместите выделенную область

[pic]

  1. Инструментами Линия  [pic]  и Указатель  [pic]  разделите объект на четыре части.

[pic]

  1. Готовое изображение сохраните в своей папке в формате *.fla

Задание 3. Инструменты выделения и рисования «Свободная трансформация (Free Transform)»

  1. Откройте приложение Macromedia Flash

  2. Создайте новый документ командой Файл ► Новый

  3. Вызовите диалоговое окно Параметры документа командой Изменить ► Документ. Установите размер документа: 400 Х 300 пикселей. (см. зад1-2)

  4. Установите такой масштаб отображения документа, чтобы Стол целиком отображался в рабочей области.

[pic]

  1. Инструментом Прямоугольник  [pic]  нарисуйте 6 произвольных фигур.

[pic]

  1. На Панели инструментов выберите инструмент Свободная трансформация  [pic]  Выделите им один из объектов:

[pic]

  1. На панели Options выберите кнопку-модификатор Масштаб  [pic]


С помощью маркеров, расположенных на выделяющей рамке, измените масштаб объекта:

[pic]

  1. На Панели инструментов выберите инструмент Свободная трансформация  [pic] . Выделите им один из объектов:

[pic]

  1. На панели Options выберите кнопку-модификатор Вращение и скос  [pic]


С помощью угловых маркеров, расположенных на выделяющей рамке, поверните объект на 45°:


[pic]

  1. На Панели инструментов выберите инструмент Свободная трансформация  [pic] . Выделите им один из объектов:

[pic]

  1. На панели Options (Опции)  выберите кнопку модификатор Вращение и скос  [pic]

С помощью стороны выделяющей рамки, наклоните объект по одной из осей:

[pic]

  1. На Панели инструментов выберите инструмент Свободная трансформация  [pic] . Выделите им один из объектов:

[pic]

  1. На панели Options(Опции) выберите кнопку-модификатор Искажение  [pic]

С помощью угловых маркеров, расположенных на выделяющей рамке, исказите объект:

[pic]

  1. На Панели инструментов выберите инструмент Свободная трансформация  [pic] . Выделите им один из объектов:

[pic]

  1. На панели Options(опции) выберите кнопку-модификатор Кривая  [pic]

Маркеров кривых Безье, расположенных на выделяющей рамке, измените объект:

[pic]

  1. Используя инструмент Свободная трансформация  [pic]  и его модификаторы произвольно измените форму следующего объекта, например:


[pic]

  1. Готовое изображение сохраните в своей папке в формате *.fla

Лаб.2 Анимация. Покадровая анимация изображений. Создание анимационных фильмов

Задание1. «Падающий шар»

  1. Откройте приложение Macromedia Flash

  2. Создайте новый документ командой Файл ► Новый

  3. Вызовите диалоговое окно Параметры документа командой Изменить ► Документ. Установите размер документа: 400 Х 300 пикселей. 
    Сохраните заготовку в своей папке в формате     *.fla

  4. Установите такой масштаб отображения документа, чтобы Стол целиком отображался в рабочей области.

  5. В верхней части стола создайте изображение шара без контура:

[pic]

при этом первый кадр на временной диаграмме будет помечен как ключевой (черной точкой):

[pic]

  1. Правой кнопкой мыши щелкните в ячейке второго кадра и в контекстном меню выберите команду Insert Keyframe (Вставить ключевой кадр):

На Монтажном столе появится второй кадр фильма:

[pic]

Теперь переместите изображение шара в нижнюю часть стола:

[pic]

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

[pic]

  1. На четвёртом ключевом кадре от шара должен отколоться ещё один кусочек:

[pic]

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

[pic]

  1. Вызовите диалоговое окно Параметры документа командой Изменить ► Документ и установите частоту кадров: 5 кадров в секунду:

[pic]

  1. Просмотрите готовый фильм, нажав сочетание клавиш +.

  2. Готовое изображение сохраните в своей папке в формате *.fla

Задание 2:«Часы. Эпизод I»

  1. Откройте приложение Macromedia Flash

  2. Создайте новый фильм размером 200 Х 200 пикселей. Сохраните заготовку в своей папке в формате *.fla

  3. На монтажном столе с помощью кнопки Вставить слой  [pic]  добавьте два слоя и переименуйте их в Циферблат, Маленькая стрелка, Большая стрелка:

[pic]

  1. В первом ключевом кадре слоя Циферблат нарисуйте циферблат будущих часов:

[pic]

  1. В первых ключевых кадрах слоёв Маленькая стрелка и Большая стрелка нарисуйте соответственно маленькую и большую стрелки часов:

[pic]

  1. Выделив во всех слоях вторые кадры, щелкните правой клавишей мыши и выполните команду Insert Keyframe (Вставить ключевой кадр):

  2. На 2-м кадре, выделив большую стрелку, выберите инструмент Свободная трансформация  [pic] . Сместите точку трансформации (transformation point) к центру циферблата и поверните стрелку на 30°.

[pic]

  1. Тоже самое проделайте на втором кадре с маленькой стрелкой, слегка сместив её к цифре 10 на 2,5°:

[pic]

  1. Создавая каждый раз новые ключевые кадры, перемещая большую и маленькую стрелку, добейтесь того, чтобы в результате большая стрелка сделала круг, а маленькая встала на 10. При этом должно получиться 13 кадров:

[pic]

  1. Установите частоту смены кадров: 1 кадр в секунду.

  2. Просмотрите готовый фильм, нажав сочетание клавиш +.

  3. Готовое изображение сохраните в своей папке в формате *.fla

Задние 3.«Восстановление шара»

  1. Откройте приложение Macromedia Flash

  2. Откройте фильм с падающим шаром ( [link] :

[pic]

В моём примере это выглядит так:

[pic]

onClipEvent (enterFrame) {
  if (Key.isDown(Key.LEFT)) {
    gotoAndStop(3);
  } else {
    gotoAndStop(1);
  }
} 

[pic]

onClipEvent (enterFrame) {
  if (Key.isDown(Key.DOWN)) {
    gotoAndStop(3);
  } else {
    gotoAndStop(1);
  }
} 

[pic]

onClipEvent (enterFrame) {
  if (Key.isDown(Key.UP)) {
    gotoAndStop(3);
  } else {
    gotoAndStop(1);
  }
} 

[pic]

onClipEvent (enterFrame) {
  if (Key.isDown(Key.RIGHT)) {
    gotoAndStop(3);
  } else {
    gotoAndStop(1);
  }
} 

[pic]

onClipEvent (load) {
  // Объявление и установка переменной скорости
  speed = 5;
} 

onClipEvent (enterFrame) {
  // Движение влево, вправо, вперёд, назад
  if (Key.isDown(Key.LEFT) && !Key.isDown(Key.RIGHT)) {
    _x -= speed;
    _rotation = 270;
  }
  if (Key.isDown(Key.RIGHT) && !Key.isDown(Key.LEFT)) {
    _x += speed;
    _rotation = 90;
  }
  if (Key.isDown(Key.UP) && !Key.isDown(Key.DOWN)) {
    _y -= speed;
    _rotation = 0;
  }
  if (Key.isDown(Key.DOWN) && !Key.isDown(Key.UP)) {
    _y += speed;
    _rotation = 180;
  }
  //
  // Движение по диагонали
  if (Key.isDown(Key.LEFT) && Key.isDown(Key.UP) && !Key.isDown(Key.RIGHT) && !Key.isDown(Key.DOWN)) {
    _rotation = 315;
  }
  if (Key.isDown(Key.RIGHT) && Key.isDown(Key.UP) && !Key.isDown(Key.LEFT) && !Key.isDown(Key.DOWN)) {
    _rotation = 45;
  }
  if (Key.isDown(Key.LEFT) && Key.isDown(Key.DOWN) && !Key.isDown(Key.RIGHT) && !Key.isDown(Key.UP)) {
    _rotation = 225;
  }
  if (Key.isDown(Key.RIGHT) && Key.isDown(Key.DOWN) && !Key.isDown(Key.LEFT) && !Key.isDown(Key.UP)) {
    _rotation = 135;
  }
  // 
  // возвращение на противоположную сторону замаскированной области
  // когда танк уходит с экрана
  if (_y<-35) {_y = 335;}
  if (_y>335) {_y = -35;}
  if (_x<250) {_x = 655;}
  if (_x>655) {_x = 250;}
} 

  1. Для выстрела создайте ещё одну клавишу-клип, например .

[pic]

Напишите код, обрабатывающий поведение этой клавиши:

[pic]

onClipEvent (enterFrame) {
  if (Key.isDown(Key.CONTROL)) {
    gotoAndStop(3);
  } else {
    gotoAndStop(1);
  }
} 

  1. Под слоем-маской создайте новый маскируемый слой, в котором создайте клип-выстрел.

  2. Напишите код, обрабатывающий движение клипа-выстрела с помощью следующей процедуры:

onClipEvent (load) {
  _visible = false;
  speed = 15;
} 

onClipEvent (enterFrame) {
  if (Key.isDown(Key.CONTROL)) {
    //Определение координат выстрела
    _rotation = _root.Tank._rotation;
    _x = _root.Tank._x;
    _y = _root.Tank._y;
    switch (_rotation) {
      case 0:
        _y -= 35;
        break;
      case 45:
        _y -= 20;
        _x += 20;
        break;
      case 90:
        _x += 35;
        break;
      case 135:
        _x += 20;
        _y += 20;
        break;
      case 180:
        _y += 35;
        break;
      case -135:
        _y += 20;
        _x -= 20;
        break;
      case -90:
        _x -= 35;
        break;
      case -45:
        _x -= 20;
        _y -= 20;
        break;
    }
    //выстрел
    gotoAndPlay(1);
    _visible = true;
  }
  //движение выстрела
  switch (_rotation) {
    case 0:
      _y -= speed;
      break;
    case 45:
      _y -= speed;
      _x += speed;
      break;
    case 90:
      _x += speed;
      break;
    case 135:
      _x += speed;
      _y += speed;
      break;
    case 180:
      _y += speed;
      break;
    case -135:
      _y += speed;
      _x -= speed;
      break;
    case -90:
      _x -= speed;
      break;
    case -45:
      _x -= speed;
      _y -= speed;
      break;
  }
} 

  1. Готовое изображение сохраните в своей папке в формате *.fla
    Протестируйте фильм, нажав сочетание клавиш     +.

Задание 3. Создание сценария для клипа. «Звездные войны»

  1. Откройте приложение Macromedia Flash

  2. Создайте новый фильм. Установите цвет фона: чёрный; частоту смены кадров: 30 fps.

  3. В отдельном слое создайте изображение звёздного неба.

[pic]

  1. В отдельном слое создайте символ-клип с изображением летающего объекта.

[pic]

Внутри этого клипа создать дополнительный символ клип с изображением пламени от двигателя.

[pic]

В палитре Параметры присвойте имя клипу с пламенем (например fires).

[pic]

  1. В новом слое создайте рамку:


[pic]

  1. Замаскируйте слоем-маской слои со звёздным небом и летающим объектом.

[pic]

  1. Напишите код, обрабатывающий поведение клипа с летающим объектом. Для моего примера это будет выглядеть так:

onClipEvent (load) {
  // Объявление и установка начальных переменных
  // trust - начальная скорость, decay - затухание скорости,
  // maxSpeed - максимальная скорость.
  thrust = 1;
  decay = .97;
  maxSpeed = 15;
} 

onClipEvent (enterFrame) {
  // поворот вправо и влево
  if (Key.isDown(Key.RIGHT)) {_rotation += 10;}
  if (Key.isDown(Key.LEFT)) {_rotation -= 10;}
  if (Key.isDown(Key.UP)) {
    // Вычисление скорости и траектории в зависимости от
    // от угла поворота
    xSpeed += thrust*Math.sin(_rotation*(Math.PI/180));
    ySpeed += thrust*Math.cos(_rotation*(Math.PI/180));
    fires._visible = 1;
  } else {
      // «затухание» скорости после того, как клавиша UP
      // будет отжата
      xSpeed *= decay;
      ySpeed *= decay;
      fires._visible = 0;
    }
  // ограничение скорости
  speed = Math.sqrt((xSpeed*xSpeed)+(ySpeed*ySpeed));
  if (speed>maxSpeed) {
    xSpeed *= maxSpeed/speed;
    ySpeed *= maxSpeed/speed;
  }
  // Перемещение на основе вышеуказанных вычислений
  _y -= ySpeed;
  _x += xSpeed;
  // Вычисление возврата при покидании экрана
  if (_y<0) {_y = 500;}
  if (_y>500) {_y = 0;}
  if (_x<0) {_x = 500;}
  if (_x>500) {_x = 0;}
} 

  1. Готовое изображение сохраните в своей папке в формате *.fla
    Протестируйте фильм, нажав сочетание клавиш     +.

Задание 4. Создание сценария для клипа. «Раскраска»

  1. Откройте приложение Macromedia Flash

  2. Создайте новый фильм. Установите цвет фона: серый; частоту смены кадров: 30 fps.

  3. В отдельном слое создайте колёса будущей машины:

[pic]

  1. Создайте новый слой. В нём создайте кузов автомобиля с заливкой зелёного цвета:

[pic]

  1. Создайте новый слой. В него скопируйте изображение кузова, залейте синим цветом и совместите с изображением красного кузова:

[pic]

  1. Создайте новый слой. В него скопируйте изображение кузова, залейте красным цветом и совместите с предыдущими изображениями:

[pic]

  1. Расположите слои следующим образом: сверху – красный, под ним зелёный, снизу – синий.

  2. Поочерёдно в каждом из слоёв выделите кузов автомобиля и преобразуйте в символ-клип, присваивая в палитре Параметры в поле Имя копии имена red, green, blue соответственно.

[pic]

  1. Создайте новый слой под слоями с изображениями кузова, скопируйте в него из библиотеки фильма символ клип с красным кузовом.
    В палитре     Параметры этой копии символа-клипа в поле Цвет установите атрибут Tint

[pic]

При этом весь экземпляр окрасится в белый цвет. Совместите изображение кузова с предыдущими изображениями.

[pic]

  1. Создадим переключатели-«бегунки»: Создайте новый слой. Сперва создайте линии, по которым «бегунки» будут перемещаться. Длина каждой линии должна составить 80 пикселей.

[pic]

  1. Создайте символ-кнопку (например, с именем Lever) с изображением переключателя-бегунка:

[pic]

  1. Вставьте в фильм из библиотеки три образца символа-кнопки Lever и преобразуйте каждый из них в символы-клипы с помощью команды  Вставить  ►  Преобразовать в символ, присвоив им имена, например, control_red,  control_green, control_blue соответственно.

[pic]

В результате получатся символы-клипы, внутри которых будут размещаться символы-кнопки. Расставить переключатели-«бегунки» на соответствующие места:

[pic]

  1. Поочерёдно заходя в режим редактирования символа-клипа, для символов кнопок напишите коды на ActionScript, обрабатываюшие следующие символы-клипы:

[pic]

on (press) {
  startDrag("/control_red", false, 80, 343, 160, 343);
}
on (release, releaseOutside) {
  stopDrag();
} 

[pic]

on (press) {
  startDrag("/control_green", false, 234, 343, 314, 343);
}
on (release, releaseOutside) {
  stopDrag();
} 

[pic]
on (press) {
  startDrag("/control_blue", false, 388, 343, 468, 343);
}
on (release, releaseOutside) {
  stopDrag();
} 

  1. Для всей последовательности вставьте кадры во второй кадр:

[pic]

  1. В слое с красным кузовом для второго кадра напишите код ActionScript, обрабатывающий следующие события:

setProperty("/red", _alpha, (getProperty("control_red", _x)-80)*1.25);
setProperty("/green", _alpha, (getProperty("control_green", _x)-234)*1.25);
setProperty("/blue", _alpha, (getProperty("control_blue", _x)-388)*1.25);
В отдельном слое дорисуйте детали машины:

[pic]

  1. Готовое изображение сохраните в своей папке в формате *.fla
    Протестируйте фильм, нажав сочетание клавиш     +, устраните недочёты.

Задание 5. Создание сценария для клипа. «Катер»

  1. Откройте приложение Macromedia Flash

  2. Создайте новый фильм. Установите частоту смены кадров: 30 fps.

  3. Создайте зону движения катера с помощью слоя-маски.

[pic]

  1. В отдельном слое создайте символ-клип с изображением катера:

[pic]

  1. В отдельном слое создайте два переключателя-«бегунка»).

[pic]

  1. В палитре Параметры в поле Имя копии присвойте символам-клипам «бегунков» имена (например, horizFader и vertFader):

[pic]

  1. Напишите код ActionScript, в котором будут присваиваться значения переменным при загрузке клипов horizFader и vertFader:

[pic]

onClipEvent (load) {
  inity=_y;
  left = _x;
  right = _x;
  top = _y-67;
  bottom = _y+67;
} 

[pic]

onClipEvent (load) {
  initx=_x;
  left = _x-67;
  right = _x+67;
  top = _y;
  bottom = _y;
} 

  1. Поочерёдно заходя в режим редактирования символа-клипа, для символов кнопок напишите код ActionScript, который будет обрабатывать следующие события:

[pic]

on (press) {
  startDrag("", false, left, top, right, bottom);
}
on (release) {
  stopDrag();
} 

[pic]

on (press) {
  startDrag("", false, left, top, right, bottom);
}
on (release) {
  stopDrag();
} 

  1. Для символа-клипа с катером напишите код ActionScript, обрабатывающий следующие события:

onClipEvent (enterFrame) {
  // вычисление угла поворота и координат в зависимости
  //от положения «бегунков»
  xspeed = (_root.horizFader._x-_root.horizFader.initx)/5;
  yspeed = (_root.vertFader._y-_root.vertFader.inity)/5;
  _rotation = Math.atan2(yspeed, xspeed)/(Math.PI/180)+90;
  //движение катера на основе вычислений
  _x += xspeed;
  _y += yspeed;
  // возвращение на противоположную сторону замаскированной
  //области, когда катер уходит с экрана
  if (_y < -28) {_y = 473;}
  if (_y > 473) {_y = -28;}
  if (_x < 25) {_x = 527;}
  if (_x &g t; 527) {_x = 25;}
} 

  1. Замаскируйте слой с катером.

  2. Готовое изображение сохраните в своей папке в формате *.fla
    Протестируйте фильм, нажав сочетание клавиш     +, устраните недочёты.

Задание 6. Создание сценария для клипа. «Танк. Эпизод II»

  1. Откройте приложение Macromedia Flash

  2. Создайте новый фильм. Установите частоту смены кадров: 30 fps.

  3. Создайте зону движения танка с помощью слоя-маски.

[pic]

  1. Создайте символ-клип с изображением танка.

[pic]

Присвойте копии символа имя (например Tank).


[pic]

  1. Создайте кнопки для движения танка вперёд, назад, вправо, влево.

[pic]

  1. Создайте кнопку, при нажатии на которую, танк будет разворачиваться по окружности:

[pic]

  1. Над кнопкой разместите символ-клип в виде стрелки (он будет появляться при нажатии на кнопку):

[pic]

Присвойте копии символа имя (например curve):

[pic]

  1. Напишите код ActionScript поведения кнопки со стрелкой:

[pic]

on (press, dragOver) {_root.curve._y += 2;}
on (release) {_root.tank.mode=!_root.tank.mode;}
on (release, dragOut) {_root.curve._y -= 2;} 

  1. Напишите код ActionScript для управляющих кнопок:

Вверх:

on (press) {_root.tank.up=true;}
on (release, releaseOutside) {_root.tank.up=false;} 

Вниз:

on (press) {_root.tank.down=true;}
on (release, releaseOutside) {_root.tank.down=false;} 

Влево:

on (press) {_root.tank.left=true;}
on (release, releaseOutside) {_root.tank.left=false;} 

Вправо:

on (press) {_root.tank.right=true;}
on (release, releaseOutside) {_root.tank.right=false;} 

  1. Для символа-клипа с танком напишите код ActionScript, обрабатывающий следующие события:

onClipEvent (load) {
  //объявление и установка начальных
  //переменной(скорость) и свойства(способ)
  mode = true;
  speed = 7;
  //описание функции, используемой
  //при значении свойства mode = false
  function go (degree) {
    _y -= speed*Math.cos(_rotation*(Math.PI/180));
    _x += speed*Math.sin(_rotation*(Math.PI/180));
    if (_rotation += 10;}
    if (_rotation>degree) {_rotation -= 10;}
  }
} 

onClipEvent (enterFrame) {
  //видимость стрелки curve в зависимости от 
  //значения способа mode
  _root.curve._visible = !mode;
  //если значение способа mode=true, то танк едет по прямой
  if (mode) {
    if (up) {
      _y -= speed;
      _rotation = 0;
    }
    if (down) {
      _y += speed;
      _rotation = 180;
    }
    if (right) {
      _x += speed;
      _rotation = 90;
    }
    if (left) {
      _x -= speed;
      _rotation = 270;
    }
  } else {
  //если значение способа mode=false, то танк
  //поворачивает по окружности, описанной в функции go()
    if (up) {go(0);}
    if (down) {
      if (_rotation >= 0) {go(180);}
      if (_rotation < 0) {go(-180);}
    }
    if (right) {
      if (_rotation >= 0) {go(90);}
      if (_rotation < 0) {go(-270);}
    }
    if (left) {
      if (_rotation > 0) {go(270);}
      if (_rotation >= 0) {go(-90);}
    }
  }
  //возврат в маскируемую зону при покидании её
  if (_y < -35) {_y = 435;}
  if (_y > 435) {_y = -35;}
  if (_x < 140) {_x = 595;}
  if (_x > 595) {_x = 140;}
} 

  1. Замаскируйте слой с танком.

  2. Готовое изображение сохраните в своей папке в формате *.fla

  3. Протестируйте фильм, нажав сочетание клавиш +, устраните недочёты.

Задание 7. Создание сценария для клипа. «Часы»

  1. Откройте приложение Macromedia Flash

  2. Создайте новый фильм.

  3. В отдельном слое создайте циферблат:

[pic]

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

[pic]

  1. Преобразуйте изображения стрелок в символы-клипы с точкой регистрации в нижней части стрелки:

[pic]

  1. Присвойте копиям символов имена (например SecStr, MinStr, ChasStr):

[pic]

  1. Создайте новый слой, в нём будет размещаться код движения стрелок:

_root.onEnterFrame = function() {
  //создание объекта с датой
  myDate = new Date();
  //вращение стрелок
  ChasStr._rotation = myDate.getHours()*30+(myDate.getMinutes()/2);
  MinStr._rotation = myDate.getMinutes()*6+(myDate.getSeconds()/10);
  SecStr._rotation = myDate.getSeconds()*6;
} 

  1. Готовое изображение сохраните в своей папке в формате *.fla
    Протестируйте фильм, нажав сочетание клавиш     +, устраните недочёты.

  2. Самостоятельно попытайтесь создать часы.

В этом примере код ActionScriptдолжен выглядеть примерно вот так:

_root.onEnterFrame = function() {
  //создание объекта с датой
  myDate = new Date();
  //вращение стрелок
  ChasStr._rotation = myDate.getHours()*30+(myDate.getMinutes()/2);
  MinStr._rotation = myDate.getMinutes()*6+(myDate.getSeconds()/10);
  SecStr._rotation = (myDate.getSeconds()+myDate.getMilliseconds()/1000)*6;
} 

Лаб 17. Создание интерактивных фильмов. Интерактивная игра «Морской бой»

Задание 1. Игра «Морской бой»

  1. Откройте приложение Macromedia Flash

  2. Создайте новый фильм. Сперва необходимо подготовить объекты, которые будут участвовать в игре.

  3. В нижнем слое создайте фон сцены, по желанию изображение фона можно сгруппировать или преобразовать в символ клип.

[pic]

  1. В новом слое создайте изображение орудия. Преобразуйте орудие в символ-клип. Так как башня орудия будет вращаться вокруг своей оси, то точка регистрации должна находиться в центре башни:

[pic]

Присвойте имя копии символа с изображением орудия (например Gun):

[pic]

Разместите орудие в нужном месте (в нашем примере – в центре экрана с точкой регистрации чуть ниже нижней границы рабочей области).

  1. В новом слое разместите надписи со статическим текстом с пояснениями и с динамическим текстом для вывода результатов на экран. В нашем примере 7 надписей с динамичным текстом:

[pic]

В палитре Параметры присвойте этим 7-ми надписям имена переменных, значения которых будут выводиться на экран. В нашем примере это:

  1. В отдельном пустом слое создайте изображение самолёта. Преобразуйте изображение самолёта в символ-клип, присвоив ему имя (например, Plane):

[pic]

Удалите из фильма клип с самолётом. Откройте библиотеку фильма, найдите в библиотеке клип Plane, щёлкнув правой клавишей на названии клипа, выберите пункт контекстного меню Связи...

В открывшемся окне присвойте связи Название: Plane и установите галки  [pic]  в полях Экспорт для ActionScript и Экспорт в первый кадр.

[pic]

  1. Создайте символ-клип с анимацией разрушающегося самолёта (название клипа PlaneDistr).

В последнем кадре с обломками установите alpha-прозрачность = 0 и установите действие stop(); (т. е. обломки должны исчезнуть и клип на этом остановится).
Удалите из фильма клип и в библиотеке фильма установить для него связь (см. пункт 5).

  1. Подобным образом создайте символы клипы с изображениями плывущих объектов (в нашем примере изображение корабля и девушки):

[pic]

а так же клипов с анимацией их разрушения.

Присвойте клипам имена (в нашем примере Ship1, Ship1Distr, Ship2, Ship2Distr), удалите клипы из фильма и установите для символов-клипов связи (см. п. п. 5, 6).

  1. Создайте символ-клип с анимацией выстрела (название клипа Fire):

В последнем кадре анимационной последовательности установить alpha-прозрачность = 0 и установите действие stop(); (т. е. выстрел должен исчезнуть и клип на этом остановится).
Удалите из фильма клип и в библиотеке фильма установить для него связь.

  1. Создайте символ-клип с надписью «Игра окончена» (название клипа, например GameOver) и установить для него связь:

[pic]

  1. Создайте символ-клип с изображением прицела (название клипа, например Target) и установить для него связь.

[pic]

  1. Создайте новый слой, в нём будет размещаться код ActionScript происходящего на экране:

//описание переменны  defeat - попадание в цель
var defeat = false;
var P1Distr = 0;
var P1 = 0;
var s1Distr = 0;
var s1 = 0;
var s2Distr = 0;
var s2 = 0;
var patron = 30; 

//установка курсора мыши
Mouse.hide();
attachMovie("target", "target", 1000);
//функция загрузки клипа в зависимости от значения переменной marker
function loadObject(mark){
  switch (mark){
    case 1:
      attachMovie("ship1", "ship1", 999);
      speed = 5;
      ship1._y = 170;
      ship1._x = -75;
      s1 += 1;
      break;
    case 2:
      attachMovie("ship2", "ship2", 998);
      speed = 3;
      ship2._y = 225;
      ship2._x = 635;
      s2 += 1;
      break;
    case 3:
      attachMovie("Plane", "Plane", 997);
      speed = 9;
      Plane._y = 70;
      Plane._x = -52;
      pl += 1;
      break;
    case 4:
      attachMovie("GameOver", "GameOver", 1001);
      GameOver._x = 275;
      GameOver._y = 160;
      target.removeMovieClip();
      ship1.removeMovieClip();
      ship2.removeMovieClip();
      plane.removeMovieClip();
      Mouse.show();
      break;
  }
} 

//Функция загрузки клипа с разрушающимся объектом
function loadObjectDis(mark){
  switch (mark){
    case 1:
      xMov = Ship1._x;
      yMov = Ship1._y;
      ship1.removeMovieClip();
      attachMovie("ship1Distr", "ship1Distr", 995);
      ship1Distr._x = xMov;
      ship1Distr._y = yMov;
      s1Distr += 1;
      patron += 2;
      break;
    case 2:
      xMov = Ship2._x;
      yMov = Ship2._y;
      ship2.removeMovieClip();
      attachMovie("ship2Distr", "ship2Distr", 994);
      ship2Distr._x = xMov;
      ship2Distr._y = yMov;
      s2Distr += 1;
      break;
    case 3:
      xMov = Plane._x;
      yMov = Plane._y;
      plane.removeMovieClip();
      attachMovie("planeDistr", "planeDistr", 993);
      planeDistr._x = xMov;
      planeDistr._y = yMov;
      PlDistr += 1;
      patron += 3;
      break;
  }
  defeat = false;
} 

//поведение мыши
_root.onMouseMove = function (){
  if(marker < 4){
    target._x = _xmouse;
    target._y = _ymouse;
    _root.Gun._rotation =
    (Math.atan((_xmouse-275)/(415-_ymouse))*180)/Math.PI;
  }
} 

//первоначальная загрузка клипа первого клипа
marker=Math.ceil((Math.random()*3));
loadObject(marker); 

//поведение объектов в зависимости от значения defeat = попал/не попал
_root.onEnterFrame = function() {
  //не попал
  if (!defeat){
    switch (marker){
      case 1:
      //корабль
        if (ship1._x < 625){ship1._x += speed;}
        else {
          ship1.removeMovieClip();
          marker = Math.ceil((Math.random()*3));
          loadObject(marker);
        }
        break;
      case 2:
      //Девушка
        if (ship2._x > -85){ship2._x -= speed;}
        else {
          ship2.removeMovieClip();
          marker = Math.ceil((Math.random()*3));
          loadObject(marker);
        }
        break;
      case 3:
      //Самолёт
        if (Plane._x < 602){Plane._x += speed;}
        else {
          Plane.removeMovieClip();
          marker = Math.ceil((Math.random()*3));
          loadObject(marker);
        }
        break;
      case 4:
      //игра окончена
        loadObject(marker);
        break;
    }
  }
  //не попал
  else {
    loadObjectDis(marker);
    marker = Math.ceil((Math.random()*3));
    loadObject(marker);
  }
  //если закончились патроны - выход из игры
  if (patron < 1) {marker = 4;}
} 

//действия при нажатии на левую клавишу мыши
_root.onMouseDown = function(){
  if (marker < 4) {
    attachMovie("fire", "fire", 996);
    fire._x = gun._x+Math.sin(gun._rotation*(Math.PI/180))*120;
    fire._y = gun._y-Math.cos(gun._rotation*(Math.PI/180))*120;
    patron -= 1;
  }
  switch(marker){
    case 1:
      if (_xmouse > ship1._x-10 && _xmouse < ship1._x+10
         && _ymouse > (ship1._y-10) && _ymouse < ship1._y+10)
       {defeat = true;}
      break;
    case 2:
      if (_xmouse > ship2._x-10 && _xmouse < ship2._x+10
         && _ymouse > ship2._y-10 && _ymouse < ship2._y+10)
       {defeat = true;}
      break;
    case 3:
      if (_xmouse > plane._x-10 && _xmouse < plane._x+10
         && _ymouse > plane._y-10 && _ymouse 
       {defeat = true;}
      break;
  }
} 

  1. Готовое изображение сохраните в своей папке в формате *.fla
    Протестируйте фильм, нажав сочетание клавиш     +, устраните недочёты.
Читать полностью »