Тема: Управление проигрыванием флеша. Встраивание ролика в веб-страницу

Отчет: Файлы с выполненными заданиями.

Методы управления проигрыванием флеша

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

Методы клипа (movie clip), позволяющие управлять проигрыванием его анимации:

play() — начинает или возобновляет воспроизведение анимации клипа;

stop() — останавливает воспроизведение анимации клипа;

gotoAndPlay() — переходит на определенный кадр и продолжает воспроизведение;

gotoAndStop() — переходит на определенный кадр и останавливает воспроизведение;

nextFrame() — переходит на следующий кадр и останавливает воспроизведение;

prevFrame() — переходит на предыдущий кадр и останавливает воспроизведение.

Задание №1

1. Создать новый документ и в нем анимацию падения листа по заданной траектории.

2. Создать новый слой ”Actions”. Остановить автоматическое проигрывание анимации. Для этого создать сценарий первого кадра слоя ”Actions”. В сценарии всего одна команда — stop();

Для размещения кода создать новый слой "Actions", выделить его первый кадр и записать в поле кода панели Action комманду. Слой "Actions" должен быть самым первым.

2. Чтобы анимация проигрывалась, надо создать кнопку, запускающую проигрывание. В общей библиотеке кнопок Flash в папке Playback есть кнопки, имеющие стандартные обозначения. Имена кнопок говорят о их назначении.

Последние две кнопки осуществляют переход на один кадр вперед и назад.

Кнопки предлагаются без кода, т.е. их действие не запрограммировано!

Создайте новый слой "Кнопки". Разместите кнопки в рабочей области нового слоя. Т.к. кнопки, "болтающиеся" в пространстве не очень хорошо выглядят, подложите под них "пульт" — прямоугольник.

3. Теперь надо кнопки запрограммировать. При их освобождении должны выполняться простые комманды:

play();

stop();

gotoAndPlay(1);

nextFrame();

prevFrame();

4. Можно дорисовать осенний пейзаж, сделав сероватый фон, коричневую землю и дерево на заднем плане (на каком слое его надо рисовать?).

5. Протестируйте флеш.

6. Обозначения на кнопках стандартные, но, возможно, не все их знают. Поэтому сделайте всплывающие подсказки.

При наведении курсора мышки на кноки рядом с ними должны появляться надписи "Play", "Stop", "Rewind", "Next frame", "Prev frame".

Для создания всплывающей подсказки:

· двойным щелчком левой кнопкой мышки на кнопке войдите в режим редактирования,

· в кадре "Over" добавьте надпись в нужном месте,

· выйти из режима редактирования.

7. Протестируйте флеш.

Встраивание ролика в html-страницу

В меню File выберите пункт Publish Settings…

В окне Publish Settings отметьте флажки Flash и HTML.

а) Нажмите кнопку Publish. б) Закройте окно Publish Settings. в) Просмотрите созданную html-страницу.

9. Откройте созданную html-страницу в любом простом текстовом редакторе (Блокнот, Far или др.).

<HTML>

<HEAD>

<meta http-equiv=Content-Type content="text/html; charset=">

<TITLE>Lab7_4</TITLE>

</HEAD>

<BODY bgcolor="#FFFFFF">





<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"

HEIGHT="400" id="Lab7_4" ALIGN="">

<PARAM NAME=movie VALUE="Lab7_4.swf"> <PARAM NAME=quality VALUE=high>

<PARAM NAME=bgcolor VALUE=#FFFFFF>

<EMBED src="Lab7_4.swf" quality=high bgcolor=#FFFFFF HEIGHT="400" NAME="Lab7_4" ALIGN=""

TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>

</OBJECT>

</BODY> </HTML>

Изучите, как флеш вставляется в веб-страницу.

Задание №2

1. Вставьте флеш задания №1 в html-страницу.

2. Вставьте на страничке перед флешем несколько строчек, например:

<H1>Управление выполнением флеша </H1> <br>

<H3> Выполнил студент(ы) Фамилия Имя </H3>

<br> <br> <br>

3. Чтобы вокруг флеша была рамка, после <OBJECT > вставьте

border = 1

4. Сохраните страничку и просмотрите ее.

Пояснение

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

Задание № 3

1. Создайте новый документ и назовите его слой "Небо". Сделайте фон документа синим.

2. Создайте символ "звезду".

3. Анимируйте звезду. Она должна пульсировать и менять цвет.

4. Разместите звезды на слое. Сделайте их разного размера и поворота.

5. Нажмите Ctrl + Enter и посмотрите на свое небо.

6. Звезды пульсируют синхронно, что не совсем естественно выглядит. Чтобы заставить их начинать проигрывать свою анимацию с разных кадров, необходимо написать соответствующий код.

Чтобы можно было программно управлять звездами, надо дать им имена. Выделите их по очереди и на панели Свойств (PROPERTIES) внесите имя в поле, располагающееся под типом.

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

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

Для перехода в окно сценария кадра надо на временной оси выделить нужный ключевой кадр и нажать клавишу F9.

Контрольные вопросы к лабораторной работе №2

1. Методы клипа (movie clip), позволяющие управлять проигрыванием его анимации.

2. Создание всплывающихъ подсказок.

3. Как встроить флеш в html-страничку?

4. Управление проигрыванием основного ролика.

5. Управление проигрыванием анимации символа типа MovieClip.

6. Создание сценария кадра.

7. Вопросы по коду заданий.

Лабораторная работа №3

Тема: Cвойства клипов. Сценарии кнопок и клипов

Отчет: Файлы с выполненными заданиями.

Обработка событий MovieClip в стиле ActionScript 1.0

ActionScript 2.0 поддерживает создание сценариев клипов и кнопок (стиль ActionScript 1.0).

Сценарии кнопок

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

При обращении к свойствам основного ролика (_root), в сценарии кнопки, расположенной непосредственно в _root, имя объекта можно опускать

on(press){

_xscale+=10; //эквивалентно _root._xscale

}

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

on(press){

_xscale+=10; //эквивалентно _parent._xscale

}

Указатель this является указателем на родительский объект.

При ссылке на объекты можно опускать имя родительского объекта, общего для кнопки со сценарием и этого объекта. Например, объект clip и кнопка b_btn находятся внутри клипа m_mc. В обработчике кнопки b_btn к объекту clip можно обратиться m_mc.clip и просто clip.

Сценарии клипов

Код сценария клипа размещается в самом клипе и имеет вид

onClipEvent(событие){

действия

}

Для открытия окна сценария клипа надо выделить клип и открыть окно Actions.

}

В его заголовке появится Actions — Movie Clip.

Кроме этого можно применять обработчики событий on, которые применяются для кнопок.

on(событие){

действия

}

При обращении к свойствам фрагмента ролика, для которого пишется сценарий, имя объекта можно опускать.

onClipEvent (mouseDown) {

_х+=10 //”хозяин” сценария перемещается вправо

}

Указатель this является указателем на фрагмента ролика, для которого пишется сценарий.

При ссылке на вложенные объекты надо опускать имя родительского объекта или использовать указатель this. Например, фрагмента ролика clip_mc находится внутри фрагмента ролика m_mc.

В сценарии фрагмента ролика m_mc к объекту clip_mc можно обратиться this.clip_mc, _root.m_mc.clip_mc или просто clip. При обращении m_mc.clip_mc на самом деле будет подразумеваться объект m_mc.m_mc.clip_mc.

События мыши

Событие press наступает при нажатии кнопки мыши над объектом, а событие mouseDown — при нажатии кнопки мышки в любом месте.

Событие release наступает при отпускании кнопки мышки над объектом, releaseOutside — при отпускании кнопки мышки вне объекта, а mouseUp — при отпускании кнопки мышки в любом месте. Событие rollOver наступает при вхождении указателя мышки в область объекта, rollOut — когда указатель мышки выходит за пределы объекта.

Событие rollOver наступает при вхождении указателя мышки в область объекта, rollOut — когда указатель мышки выходит за пределы объекта.

Если нажать кнопку мышки в области объекта и вывести указатель мышки за пределы объекта, то наступает событие dragOut. Если после этого ввести указатель в область объекта (не отпуская кнопку мышки), то для объекта наступит событие dragOver.

Свойства объектов MovieClip

Свойства _x и _y определяют координаты объекта в системе координат родительского клипа.

Ось X клипа направлена вправо, а ось Y — вниз. Первоначально направление осей вложенного и родительского клипов совпадают. При повороте клипа поворачиваются оси его локальной системы координат относительно осей координатной системы родительского клипа. Угол поворота определяется свойством клипа _rotation.

Размеры символов определяются значениями свойств _height (высота) и _width (ширина) в пикселах. Следующий код сделает размеры символа m_mc 100х200 пикселов

m_mc._ height =100;

m_mc._ width =200;

Размеры символов определяются в системе координат самого символа.

Изменение размера можно задавать и в процентах к первоначальному значению. Чтобы увеличить высоту на 20% и ширину на 10%, надо выполнить следующий код

m_mc._ xscale =110;

m_mc._ yscale +=20;

Задание №1

1. Cоздайте два символа типа MovieClip в виде квадрата с стороной 50 пикселов и треугольника с нижним основанием 50 и высотой 75. Точка регистрации обоих символов в центре.

2. Затем создайте новый символ, содержащий экземпляр квадрата с именем rec_mc и экземпляр треугольника с именем tri_mc. Координата _y внутренних объектов rec_mc и tri_mc должна равняться нулю. Координата _x у квадрата равна -30, а у треугольника +30.

Cоздайте экземпляр нового символа с координатами (300;200) и назовите outer_mc.

3. Создайте кнопку, при нажатии которой выполняются следующие действия:

¨ вывод координаты клипа outer_mc и вложенного в него rec_mc;

¨ перемещение outer_mc на 50 пикселов по горизонтали и по вертикали;

¨ вывод координаты клипов outer_mc и rec_mc после перемещения;

// вывод координат родительского outer_mc и

//дочернего rec_mc клипов

trace("Начальные координаты");

trace("_root.outer_mc._x=" + _root.outer_mc._x +

" _root.outer_mc._y=" + _root.outer_mc._y);

trace("_root.outer_mc.rec_mc._x="+_root.outer_mc.rec_mc._x + " _root.outer_mc.rec_mc._y=" + _root.outer_mc.rec_mc._y);

// перемещение клипа outer_mc

_root.outer_mc._x+=50;

_root.outer_mc._y+=50;

//вывод координат клипов после перемещения

trace("Координаты после перемещения outer_mc");

trace("_root.outer_mc._x=" + _root.outer_mc._x +

" _root.outer_mc._y=" + _root.outer_mc._y);

trace("outer_mc.rec_mc._x=" + outer_mc.rec_mc._x +

" _root.outer_mc.rec_mc._y=" + _root.outer_mc.rec_mc._y);

4. При тестировании флеша, в окне Output появится:

Начальные координаты

_root.outer_mc._x=300 _root.outer_mc._y=200

_root.outer_mc.rec_mc._x=-30 _root.outer_mc.rec_mc._y=0

Координаты после перемещения outer_mc

_root.outer_mc._x=350 _root.outer_mc._y=250

_root.outer_mc.rec_mc._x=-30 _root.outer_mc.rec_mc._y=0

Координаты внешнего объекта outer_mc задаются относительно основного клипа _root, поэтому при перемещении outer_mc его свойства _x и _y изменились. Расположение внутренних объектов outer_mc относительно его точки регистрации при перемещении всего outer_mc не изменилось, следовательно локальные координаты внутреннего клипа rec_mc не должны измениться.

Задание №2

1. К заданию №1 добавьте кнопку, нажатие которой вызывает перемещение внутреннего объекта rec_mc по горизонтали вправо на 50 пикселов и вывод координаты.

_root.outer_mc.rec_mc._x+=50;

trace("Коорд. после перемещения внутрен. объекта rec_mc")

trace("_root.outer_mc._x=" + _root.outer_mc._x +

" _root.outer_mc._y=" + _root.outer_mc._y);

trace("_root.outer_mc.rec_mc._x="+_root.outer_mc.rec_mc._x +" _root.outer_mc.rec_mc._y=" + _root.outer_mc.rec_mc._y);

5. После тестирования увидим в окне Output следующее:

Координаты после перемещения внутренего объекта rec_mc

_root.outer_mc._x=300 _root.outer_mc._y=200

_root.outer_mc.rec_mc._x=20 _root.outer_mc.rec_mc._y=0

Так как точка регистрации outer_mc не изменилась, координаты родительского объекта остались прежними. Смещение внутреннего объекта привело к изменению его локальных координат.

Задание №3

Посмотрим, что происходит с координатами при повороте (свойство _rotation).

Добавим кнопку, нажатие которой вызывает поворот внешнего объекта outer_mc на 45^о и вывод координат outer_mc и rec_mc.

_root.outer_mc._rotation+=45;// поворот по часовой стрелке

trace("Координаты после поворота outer_mc");

trace("_root.outer_mc._x=" + _root.outer_mc._x +

" _root.outer_mc._y=" + _root.outer_mc._y);

trace("_root.outer_mc.rec_mc._x=" + _root.outer_mc.rec_mc._x +

" _root.outer_mc.rec_mc._y=" + _root.outer_mc.rec_mc._y);

В окне Output увидим, что не изменились координаты ни outer_mc, ни rec_mc.

Координаты после поворота outer_mc

_root.outer_mc._x=300 _root.outer_mc._y=200

_root.outer_mc.rec_mc._x=20 _root.outer_mc.rec_mc._y=0

Задание №4

Добавим кнопку для поворота квадрата rec_mc на 45^о. Вывести координаты outer_mc и rec_mc до и после поворота.

Координатами объекта являются координаты его точки регистрации. Поворот осуществляется вокруг точки регистрации, она же является и началом координат. Поэтому координаты объектов не изменяются при повороте.

Размеры клипа. Свойства _height, _width, _xscale, _yscale

Высота клипа определяется его свойством _height, а ширина — _width. Значения этих свойств определяются в системе координат родительского клипа и зависят от масштаба ее осей.

Узнать или изменить масштаб координатных осей клипа можно с помощью свойств _xscale и _yscale. Измеряются значения этих свойств в процентах по отношению к масштабу осей недеформированного клипа.

Ширина и высота клипа не могут принимать отрицательные значения.

Масштаб _xscale и _yscale может быть и отрицательным! При отрицательном масштабе происходит изменение направления соответствующих осей на противоположное.

Задание №5

1. Создать символ clip, который содержит два внутренних символа: круг с именем circle и квадрат с именем square. Начало его системы координат расположить в центре круга.

2. Создать кнопку, нажатие которой выводит в Output координаты и размеры родительского клипа clip и дочернего sguare. Затем в два раза растягиваем родительский клип по оси X и повторяется вывод.

3. Создать дубликат символа clip. Сместить круг и квадрат таким образом, чтобы координата х круга была равна 100.

Разместить экземпляры символов clip и его отредактированного дубликата друг над другом. Провести через центры кругов линию.

Создать кнопки, нажатие которых сжимает оба экземпляра по горизонтали в два раза, растягивает в два раза и восстанавливает первоначальные размеры.

Почему после сжатия или растяжения один сместился относительно второго. Изменились ли координаты?

азные

Задание №6

1. Создать новый документ Flash.

2. Назвать его слой "Клип".

3. Создать любой символ и назвать его экземпляр clip_mc.

4. В сценарии клипа запрограммировать следующее его поведение:

· при щелчке мышкой clip_mc растягивается по оси Х на 10%;

· при нажатии кнопки мышки clip_mc поворачивается на 15^о, при отпускании — возвращается в прежнее положение;

· при движении мышки над клипом он "бледнеет" на 10%, при уходе мышки из области клипа — восстанавливает свой цвет.

5. Протестировать флеш.

Контрольные вопросы к лабораторной работе №3

1. Как интерпретируется ссылка this в сценарии кнопки?

2. Как интерпретируется ссылка this в сценарии символа MovieClip?

3. Как интерпретируется ссылка this в сценарии кадра?

4. Если перед именем свойства не указано имя объекта, то к какому объекту будет относится это свойство в сценарии символа MovieClip?

5. Если перед именем свойства не указано имя объекта, то к какому объекту будет относится это свойство в сценарии кнопки?

6. Если перед именем свойства не указано имя объекта, то к какому объекту будет относится это свойство в сценарии кадра?

7. Когда для объекта наступает событие press и когда событие mouseDown?

8. Изменяются ли координаты родительского объекта при изменении координат дочернего объекта?

9. Изменяются ли координаты дочернего объекта при изменении родительского координат объекта?

10. Изменяется ли свойство _rotation родительского объекта при изменении его у дочернего объекта?

11. Изменяется ли свойство _rotation дочернего объекта при изменении его у родительского объекта?

12. Изменяются ли размеры родительского объекта при изменении размера дочернего объекта?

13. Изменяются ли размеры дочернего объекта при изменении размера родительского объекта?

14. Вопросы по коду задания.

Лабораторная работа №4

Тема: Сценарии клипа и кадра

Отчет: Файлы с выполненными заданиями.

Использование абсолютной и относительной адресации в сценариях клипов и кнопок

Абсолютную адресацию можно использовать всегда, но она может оказаться довольно длинной. Относительная адресация в разных местах кода используется по разному.

Сценарии кнопок

on(press){

_xscale+=10; // эквивалентно _root._xscale

}

on(press){

_xscale+=10; //эквивалентно _parent._xscale

}

Указатель this является указателем на родительский объект.

Сценарии клипов

Код сценария клипа размещается в самом клипе и имеет вид:

onClipEvent(событие){

действия

}

Для открытия окна сценария клипа надо выделить клип и открыть окно Actions. В его заголовке появится Actions-Movie Clip.

Кроме этого можно применять обработчики событий on, которые применяются для кнопок.

on(событие){

действия

}

При обращении к свойствам фрагмента ролика, для которого пишется сценарий, имя объекта можно опускать.

onClipEvent (mouseDown) {

_х+=10 // ”хозяин” сценария перемещается вправо

}

Указатель this является указателем на фрагмента ролика, для которого пишется сценарий.

Задание №1

1.1 В новом флеш-документе создать два символа типа MovieClip в виде прямоугольника и треугольника. Разместить их в виде стрелки и дать имена tri_mc и rec_mc. Выделить оба символа и создать новый символ outer. Дать его экземпляру имя outetr_mc.

Выделить outer_mc и написать для него сценарий клипа, содержащий следующие действия:

¨ при нажатии кнопки мышки tri_mc перемещается вправо на 10 пикселов;

¨ при отпускании кнопки мышки rec_mc также перемещается вправо на 10 пикселов;

¨ при щелчке мышкой по outer_mc он поворачивается по часовой стрелке на 15 градусов;

Надо использовать обработчики onClipEvent(mouseDown), onClipEvent(mouseUp), on(press).

Протестируйте флеш, щелкая мышкой в разных местах рабочего поля окна флеша. Когда для клипа наступают события mouseDown, mouseUp и press.

1.2 В символе outer для символа tri_mc напишите следующий сценарий: при нажатии треугольник растягивается по оси х на 20%

Создать еще один экземпляр символа outer, у которого нет сценариев.

Методы обработки событий ActionScript 2.0

Хотя ActionScript 2.0 и поддерживает сценарии клипов и кнопок, но предпочтительнее создавать сценарии кадров, которые помогают централизовать код. Можно собрать весь код обработчиков событий кнопок и клипов в одном сценарии ключевого кадра. Обработчики событий объекта в сценарии кадра создаются как метобы объекта.