50880

Интерактивные элементы. Action Script

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

Информатика, кибернетика и программирование

Кнопки Основное отличие кнопок состоит в том что они предназначены для реагирования на действия пользователя например нажатия на саму кнопку ее клавишный аналог или активную область в фильме. Timeline кнопки содержит всего четыре кадра: Up – обычное состояние кнопки. Over– изменение кнопки при нахождении над ней мыши. Если у вас будет несколько одинаковых кнопок достаточно создать только один образец кнопки накладывая на него необходимые надписи меняя цвет или размер экземпляров.

Русский

2014-02-01

365 KB

1 чел.

Лабораторная работа №2. Интерактивные элементы. Action Script

Актуализация. Создавая анимацию, нам нужно не только трансформировать, перемещать объект или символ, в зависимости от типа самой анимации, но и следить за его ориентацией. Зачастую необходимо, что бы при анимации по заданной траектории, символ изменял угол вращения в соответствии с направлением движения. Добиться этого очень легко. Напомним, что достаточно в ключевом кадре задающим анимацию движения - Tweening Motion, установить галочку Orient to path direction (ориентация по направляющей). В этом случае, при движении символа по траектории заданной в направляющем слое - Guide Layer, будет происходить поворот символа в соответствии с траекторией движения (см. упражнение 3 лабораторной работы №1).

Практическая часть

I. Кнопки

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

Timeline кнопки содержит всего четыре кадра:

Up – обычное состояние кнопки.

Over– изменение кнопки при нахождении над ней мыши.

Down – нажатая кнопка.

Hit – задание области реагирования.

При создании кнопок Вам доступны все инструменты и их режимы, как и при работе с обычными символами.

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

Упражнение 1. Создайте кнопку, изменяющую свой вид.

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

1 шаг. Создайте графический объект, выделите его и преобразуйте в клип (через клавишу F8 или команду Insert/Convert to Symbol)

2 шаг. Установите переключатель в пункт Button, задайте имя кнопки.

Двойным щелчком войдите в режим редактирования кнопки, проследите за изменениями на хронометрической линейке.

Программа Flash отображает специальную временную шкалу для кнопок, состоящую из четырех кадров: Up (Отпущено), Over (Позиционированно), Down (Нажато) и Hit (Активная зона), как показано на рисунке.

3 шаг. Создайте ключевые кадры в положениях Over, Down и Hit. (Если вы хотите, чтобы изображение кнопки в четырех состояниях находилось в одном месте - выделите нарисованную Вами кнопку, а затем переходя в оставшиеся три состояния нажимайте F6)

4 шаг. Измените вид кнопки в состояниях Over, Down.  Можно переместить изображение, изменить его цвет и форму или же удалить изображение и поместить на его место новое.

5 шаг. На кадре Hit создайте форму, которая определяет активную область кнопки. Форма должна полностью закрывать все графические изображения для других состояний. Как правило, используется форма прямоугольника или окружности (если для кнопки используется текст, вокруг которого не создается прямоугольник, то при щелчке пользователи должны попасть точно на символы).

7 шаг. Для того чтобы вернуться к обычной временной шкале и выйти из режима редактирования символов, щелкните на названии сцены, расположенном в левом верхнем углу над списком слоев, или выберите команду Edit/Edit Movie.

Проверьте, что при наведении и нажатии на кнопку она меняет свой вид.

Упражнение 2. Создайте кнопку для перехода на второй кадр.

Первое, что хочется, когда начинаешь изучать интерактивность Flash - сделать что-нибудь,  что бы откликалось на действия пользователя, "оживить" ваше творение, добавить обратную связь. Кнопки в Macromedia Flash обладают обширным списком событий,  на которые мы можем реагировать:

  •  press - клавиша мышки нажата,  когда курсор находится в пределах кнопки;
  •  release - клавиша мышки отжата,  когда курсор находится в пределах кнопки;
  •  releaseOutside - клавиша мышки отжата,  когда курсор находится вне пределов кнопки;
  •  rollOver - курсор мыши входит в пределы кнопки;
  •  rollOut - курсор выходит за пределы кнопки;
  •  dragOver - курсор входит в пределы кнопки,  при этом была нажата кнопка,  и нажата клавиша мыши;
  •  dragOut - курсор выходит за пределы кнопки,  при этом была нажата кнопка,  и нажата клавиша мыши;
  •  keyPress ("клавиша ") - была нажата "клавиша ".

Перехватываются эти события с помощью директивы on (). Синтаксис ее таков:

on (событие )

{

... // действия

}

Примечание: Основные функции клипов (movie clip), которые можно вызывать:

  •  play() - начинает или возобновляет воспроизведение клипа;
  •  stop() - останавливает воспроизведение клипа;
  •  gotoAndPlay() - переходит на определенный кадр (сцену) и продолжает воспроизведение;
  •  gotoAndStop() - переходит на определенный кадр (сцену) и останавливает воспроизведение.

Свойства (параметры) клипов,  которые можно считывать /изменять:

  •  _x, _y - координаты клипа (в пикселях);
  •  _xscale, _yscale - масштаб клипа (в процентах), соответственно по горизонтали и по вертикали;
  •  _width, _height - ширина и высота клипа (в пикселях);
  •  _rotation - угол поворота клипа (в градусах);
  •  _alpha - прозрачность клипа (в процентах);
  •  _visible - видимость.

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

Выделите первый кадр, разверните панель Actions и введите команду Stop();

Шаг 2. Создайте во втором кадре произвольное изображение и проверьте, что при воспроизведении фильм «стоит» на первом кадре.

Шаг 3. Выделите кнопку на первом кадре и задайте действие при нажатии кнопки перейти ко второму кадру

on (release) {

 gotoAndPlay(2);

}

Протестируйте программу.

На втором кадре добавьте кнопку перехода на первый кадр.

Создайте первый кадр с надписью «Восточный гороскоп». Вызовите контекстное меню первого кадра, команда Actions. Щелкните +, выберите Actions, Movie Control, Stop. Теперь при воспроизведении мультика произойдет останов на первом кадре.

Создайте надпись «Год кабана», добавьте картинку (см. приложение), преобразуйте ее в кнопку, задайте все ее состояния.

Создайте второй ключевой кадр, разместите там текстовую информацию о тех, кто родился в год кабана (см. приложение). Задайте для этого кадра останов.

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

Протестируйте программу.

На втором кадре добавьте кнопку перехода на первый кадр.

Используя полученные навыки доделайте все остальные кнопки (используйте информацию из приложения).

Упражнение 3. Создайте пульт управления движения автомобилем.

1 шаг. Создайте приложение, моделирующие движение автомобиля по кривой (не забывайте использовать направление движения и установить галочку Orient to path direction).

2 шаг. Добавьте в приложение слой, в котором нарисуйте пульт с двумя кнопками – «старт» и «стоп».

3 шаг. Выделите кнопку «старт» (саму кнопку, а не её название). В контекстном меню, после нажатия правой кнопки мыши, выберите Actions. Появится окно Сценариев (Action Script).

4 шаг. Выберите из функций Movie Clip Control функцию – on. Затем добавляется команда on (release). После в фигурных скобках идет код, который должен выполняться при наступлении события. В нашем случаеэто функция Play: Global FunctionsTimeline ControlPlay.

5 шаг. Самостоятельно напишите код для кнопки «стоп».

II. Работа с текстовыми полями

Инструмент ТЕКСТ позволяет вводить текст, аналогично любому текстовому редактору. Дополнительные опции позволяют изменять шрифт и его размер, выделять жирным или курсивом, выравнивать по центру, справа, слева и по ширине страницы. Создает поле ввода, куда можно вводить текст.

На панели Properties устанавливаются основные свойства текста, такие как шрифт, размер, расстояние между символами.

Статические текстовые поля

Static Text – самый простой из всех. Установлен по умолчанию, и новое текстовое поле всегда имеет этот тип. Применяется для создания блоков текста, которые не подлежат изменению во время воспроизведения фильма. Это заголовки и информационные блоки. Данный тип текстовых блоков наиболее устойчив к различным преобразованиям и трансформациям. Здесь не встречаются побочные эффекты, характерные для динамических текстовых полей. При редактировании статического текстового блока он отображается в редакторе прямоугольником с квадратиком в правом верхнем углу.

Этот квадратик используется для настройки размеров текстового блока. Если активизирован флажок Use Device Fonts, то проигрыватель Flash будет использовать шрифты доступные, на компьютере пользователя. Это дает экономию в размерах файла, но накладывает серьезные ограничения на виды используемых шрифтов и качество их отображения. При этом шрифты будут подбираться максимально близко по очертаниям шрифта.

Опция Selectable позволяет разрешить выделение текста при проигрывании фильма. Это позволяет копировать текст через буфер.

Динамические текстовые поля

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

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

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

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

Динамическое текстовое поле может быть однострочным или многострочным. Это выбирается в списковом меню, режимы SingleLine и MultiLine.

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

Если включена опция НТМL, то текст будет сохраняться с тэгами форматирования, соответствующими примененным к нему модификаторам.

Для динамического текстового поля может быть определен параметр Border/Bg, который определяет рисование фона и рамки. Его можно включать для более четкого отрыва области текстового поля от фона.

Для автоматического переноса слов на новую строку при достижении правого края можно включать опцию Word wrap.

Поля ввода

Это то же самое динамическое текстовое поле, но с возможностью ввода текста пользователем. Соответственно, оно имеет все те же самые свойства, что и обычное динамическое поле, за исключением того, что вместо бессмысленной здесь опции Selectable (ведь текстовое поле для ввода данных подразумевает выделение по определению) введена опция для ограничения максимального числа символов, которое может быть введено. Это очень полезно в некоторых случаях, когда общее число символов, которое можно передать серверу, ограничивается настройками браузера или самим сервером. Даже если такого ограничения нет, это может защитить вас от попыток некоторых шутников попытаться послать в вашу гостевую книгу кусок текста, сравнимый с главой из романа Льва Толстого.

У поля типа InputText есть еще дополнительный режим Password, в котором можно вводить пароль, и он будет отображаться в поле ввода звездочками. Это стандартная возможность для полей ввода и разработчикам Интернет-приложений она хорошо знакома.

Упражнение 4. Создание простейшего теста с использованием динамических текстовых полей.

  1.  Назовите слой, например, Интерфейс и создайте в нем оболочку для вашего теста, состоящую из динамического текстового поля (в поле Var занесите значение Text) и двух кнопок «Да» и «Нет».
  2.  Задайте для кнопок действия. 
    •  Если в вашем тесте при нажатии кнопки «Да» всегда будет прибавляться 1, то определите, сколько вопросов будет в вашем тесте и создайте ключевой фрейм в соответствующей позиции. Удалите из этого фрейма кнопки.
    •  Если баллы будут прибавляться по другому правилу, то нужно добавить соответствующее количество ключевых фреймов и в каждом фрейме нужно прописывать действие для кнопок отдельно.

Да - кнопка

on (release) {

   score = score+1;

   play ();

}

Нет - кнопка

on (release) {

   play ();

}

  1.  Создайте новый слой, назвав его, например, Вопросы.

  1.  Для первого фрейма этого слоя задайте следующие действия

score = 0;

text = "1-й вопрос…";

stop ();

  1.  Для остальных слоев задайте следующие действия

text = "n-й вопрос…";

stop ();

  1.  Для последнего слоя необходимо подвести итоги

if (score= =4) {

   text = "Excellent";

} else {

   text = "Poor";

}

stop ();

  1.  Вот и все. Тестируйте мультик и тестируйтесь сами!

Задание 1. Создайте кнопку, которая при наведении указателя мыши начинает вращаться, а при нажатии – меняет форму.

Задание 2: Создайте электронный «Восточный гороскоп», включив всю информацию из приложения.

Задание 3. Создайте свой тест, используя динамическое текстовое поле. Предусмотрите вывод не менее трех вариантов результатов теста.

Приложение

ГОД ОБЕЗЬЯНЫ. Это самые ненадежные и противоречивые люди. Умны, ловки, изобретательны, оригинальны и легко решают самые Сложные проблемы. Почти нет поля деятельности, где бы они не смогли развернуться. Однако их легко отвлечь и переубедить. Они хотят все совершить тут же, сию минуту. Самое легкое препятствие способно испортить им настроение, сбить их планы. Многие из них отличаются нерешительностью. Это темпераментные и своевольные люди, вспыльчивые, но отходчивые. Умеют принимать решения, обладают здравым смыслом. Многие из них могут добиться славы, если им в этом не мешают.

ГОД ПЕТУХА. Глубокие мыслители и одаренные личности. Любят труд и преданы своей работе. Стараются выполнить любое обязательство, которое им даже не под силу, и очень огорчаются при неудаче. Порой несколько эксцентричны, не сразу находят контакт с другими. Всегда уверены в своей правоте, и порой действительно бывают правы. Часто эти люди одиноки и замкнуты. Хотя они и могут производить впечатление решительных, но по натуре робки. Планы, которые они вынашивают, никогда не реализуются. У них бывают резкие подъемы и также резкие спады чувств. В жизни полосы удач чередуются с полосами неудач. Они могут быть эгоистичными, но чересчур прямодушны и способны на отчаянные и смелые действия. Всегда интересны.

ГОД СОБАКИ. Эти люди обладают лучшими человеческими чертами — верны, честны, внушают доверие тем, что могут хранить тайны. Однако несколько эгоистичны, эксцентричны и невероятно упрямы. К богатству не стремятся, но деньги у них всегда водятся. Могут быть эмоционально холодными малообщительными. Смотрят немного критически, славясь острым языком. Знают, за что борются, стоят всегда за справедливость. Доводят дело до конца и обычно побеждают. Из них получаются прекрасные руководители.

ГОД КАБАНА. Этих людей отличают храбрость и способность к самопожертвованию, Все, за что берутся, делают с полной отдачей сил. Признают только прямой путь, не зная отступлений. Очень честные и мужественные люди. С другими людьми сходятся с трудом, но своим немногочисленным друзьям верны до конца жизни, не оставляют друзей в беде. Немногословны, но очень любознательны, много читают, хорошо информированы. Бывают вспыльчивы, но не любят ссор и пререканий. Добры и внимательны к любимым и знакомым, хотя их семейные дела и не всегда идут гладко. Стремятся ликвидировать все конфликты и не допускать длительных размолвок. Какие бы сложные проблемы перед ними не вставали — они никогда не опускают рук, хотя и действуют под влиянием сиюминутного порыва.

ГОД КРЫСЫ. Рожденные под этим знаком обладают приятной внешностью, привлекательны, целеустремленны, трудолюбивы, стремятся к приобретению богатств. Бережливы, любят экономить деньги. Забыть о бережливости они могут лишь при увлеченности или большом чувстве. Щедры только с тем, кого любят. Аккуратны до педантичности. Во многом нелогичны. Честолюбивы. Как правило, преуспевают и добиваются своего. Не умеют сохранять внешнее самообладание, легко впадают в гнев. Обычно честны и открыты, но многие из них не прочь посплетничать.

ГОД ВОЛА. Эти люди терпеливы, немногословны, внушают доверие. Однако порой они могут быть и эксцентричными, легко выходят из себя. В эти моменты их стоит остерегаться — ярость Вола не знает границ. Обычно неразговорчивые, в момент увлечений бывают красноречивы. Обладают превосходными умственными и физическими данными. Слывут людьми легкого характера, но при этом часто проявляют упрямство — не любят противоречий. Некоторые из них смотрят на любовь как на спорт, что ведет к недоразумениям с близкими.

ГОД ТИГРА. Люди этого знака чувствительны, склонны к размышлениям, но бывают раздражительны. Обычно пользуются уважением, но часто вступают в конфликты со старшими или начальством. Нередко принимают опрометчивые решения или приходят к правильным решениям слишком поздно. В целом это мужественные и сильные люди и их, как правило, оценивают по достоинству.

ГОД КРОЛИКА. Он обладает яркой индивидуальностью, талантлив и честолюбив. Добродетелен, сдержан, отличается безукоризненным вкусом. Вызывает общее восхищение и доверие. Материальное состояние складывается удачно. Эти люди любят иногда посплетничать, но при этом тактичны и не злы. Нежны к тем, кого любят, но к ближайшим родственникам редко привязаны. Почти никогда не выходят из себя, обладают прекрасными деловыми качествами. Добросовестный обязательны, хотя иногда бывают педантичны, иногда проявляют склонность к меланхолии. Из них могли бы выйти отличные игроки, но они играют редко, будучи людьми консервативными, осмотрительными.

ГОД ДРАКОНА. Люди этого знака обладают прекрасным здоровьем, энергичны, легко возбудимы, иногда упрямы и резки. Честны, эмоциональны, решительны, на них можно положиться. Отличаются своеволием. Откровенны и их мнение всегда обосновано. Они способны, не любят занимать деньги и произносить речи. Склонны к мягкосердечию и часто позволяют другим взять над собой верх, но только ненадолго. Они быстро избавляются от своих заблуждений. Женятся или выходят замуж в ранней молодости или не делают этого вообще. Пользуются любовью окружающих.

ГОД ЗМЕИ. Это люди сложные, от рождения наделены мудростью, неразговорчивы. Их дела всегда идут прекрасно, но они часто скуповаты. Иногда эгоистичны и тщеславны. Однако могут проявлять активное участие в своих менее удачливых собратьях. Часто перегибают палку, не веря суждениям других, полагаясь только на себя. Решительные и целеустремленные характеры, остро переживающие свои неудачи. Внешне спокойные, но страстные натуры. Обычно отличаются привлекательностью внешней и внутренней, что при некоторой их ветрености ведет к семейным осложнениям.

ГОД ЛОШАДИ. Эти люди очень популярны. Обладают веселым характером, умеют обращаться с деньгами. Умны, проницательны, хотя иногда и много говорят. Талантливы, все у них ладится, обращают на себя внимание броской одеждой или непринужденным поведением. Самоуверенны, знают себе цену и неравнодушны (мужчины) к женщинам. Способны забыть обо всем, когда затронуты их чувства. Во всем, что их касается, вкладывают максимум силы и страсти, за исключением служебных обязанностей. Любят развлечения и большие сборища, обожают быть в центре событий. Очень независимы и редко прислушиваются к советам, поступая при этом по собственному усмотрению.

ГОД ОВЦЫ. Люди этого знака наделены способностями в области изящных искусств. На первый взгляд, у них все оказывается  удачнее, чем у других. Но часто бывают беспомощны перед жизнью, так как застенчивы и склонны к пессимизму, нерешительны, затрудняются в принятии самостоятельных решений. Обычно они религиозны. Вожди из них выходят редко. Они не отличаются красноречием, но убеждения свои отстаивают и любят свое дело. Денег обычно имеют достаточно, ценят удобства, с ними связанные. Рассудительны, мягки, доброжелательны, обладают хорошим вкусом.


     


 

А также другие работы, которые могут Вас заинтересовать

60829. МОДЕЛЮЄМО ШКОЛУ ТОЛЕРАНТНОСТІ 453.5 KB
  На сучасному етапі розвитку суспільства все більшої актуальності та визнання набуває ідея толерантної педагогіки. Тому зовсім не випадково ідеї толерантної педагогіки лягають в основу багатьох експериментальних досліджень сучасності...