Главная   Разработки   Галерея   Портфолио   Обо мне    

  Методические разработки

Flash технологии (Macromedia Flash 8)
Основной курс по ИКТ
 

 
III МОДУЛЬ

I МОДУЛЬ

II МОДУЛЬ

 

 

 

  Красноярский край  
     
  Карта Красноярского края  
 
Flash-технологии - 3 модуль
I МОДУЛЬ II МОДУЛЬ III МОДУЛЬ
  Создание интерактивных фильмов Терминология Action Script Создание сценария для кадра Переменные, операторы, функции ... Конфиденциальность. Паролирование доступа Случайное числовое значение Дублирование Drag Movie Clip - перетаскивание клипов Drag Movie Clip - перетаскивание клипов Выявление коллизий Дополнительные возможности
 

Drag Movie Clip - перетаскивание клипов

Сейчас мы займемся переноской тяжестей, а конкретно будем брать то, что плохо лежит, и нести туда, где это будет лежать хорошо, т.е. делать - Drag and Drop. Практическое применение подобный прием находит в различных играх, которые на Flash сделать значительно быстрее и проще, чем другими средствами.

Что Вы делаете, если Вам нужно перенести иконку на рабочем столе компьютера из одного угла в другой? Берем иконку нажатием левой кнопки мышки и не отпуская кнопку перемещаем на необходимое расстояние, ставим иконку простым отпусканием кнопки. Таким образом, выполняется целый ряд операций над объектом (иконкой): выбор объекта, его фиксация относительно курсора мыши, перемещение и установка объекта при отпускании кнопки. За все эти операции отвечает действие Drag Movie Clip.

Drag Movie Clip - перетаскивание клипов
Данное действие имеет целый ряд настроечных параметров, используя которые, можно создавать самые разнообразные проекты.

Start Drop Operation - начать перетаскивание. Включив этот пункт, мы должны указать какой объект будет выступать в качестве груза для переноски.

Target - имя целевого объекта, или говоря проще имя экземпляра клипа который мы станем перемещать.

Constrain to rectangle - включив этот пункт, мы можем указать размеры области для перетаскивания. Размеры задаются в полях: Left, Top, Right и Bottom, значения указываются в пикселях Влево, Верх, Вправо и Вниз от центра того объекта в котором находится перетаскиваемый клип. Таким образом, можно ограничить возможные перемещения внутри определенной части проекта.

Lock Mouse to Center - центровка перетаскиваемого клипа относительно курсора мыши. Этот параметр удобно включать, если перетаскиваемые клипы небольшого размера.

Stop Drag Operation - отключение режима переноски клипа.

Использование действия Drag Movie Clip, поначалу может вызвать некоторое затруднение. Рассмотрим его применение на конкретных примерах. Для начала создадим проект, в котором вместе с указателем мыши будет неотступно перемещаться экземпляр клипа.

 

  1. Создайте какой-то красивый элемент и превратите его в символ типа Movie Clip.
  2. Перенесите его на рабочее поле.
  3. Укажите в Properties имя клипа, например, Baloon.
  4. В первом кадре проекта разместите скрипт следования клипа за курсором мыши, для этого после выбора действия Drag Movie Clip, введите имя клипа (в нашем случае Baloon) и отметьте Lock Mouse to Center.

В результате мы получим:

startDrag("_root.Baloon", true);

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

Следует уточнить, что Lock Mouse to Center позиционирует клип относительно его реального центра. Поэтому, если в самом клипе рисунок находится не точно по центру, то и при перемещении будет создаваться ощущение, что рисунок находится в стороне.

После того, как Вы поняли принцип работы действия Drag Movie Clip, научимся не только перемещать клип, но и предварительно его брать и ставить. Получается, что нам необходимо контролировать кнопку мыши, как Вы помните, для этого служит действие On Mouse Event, которое появляется только на кнопках.

Здесь приходится применять следующую хитрость:

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

Т.е. сначала мы создаем символ типа кнопка, конвертируем его в клип (правой кнопкой мыши выделяем созданную кнопку, в контекстном меню пункт - Convert to Simbol - тип Movie Clip).

Получилось несколько запутанно, но надеюсь, дальше все станет на свои места.

Задание

  1. Создайте новую кнопку, оформите соответствующим образом, также можно разместить на соответствующих кадрах изменение вида кнопки в зависимости от действия.
  2. Перенесите кнопку на рабочее поле.
  3. Преобразуйте данную кнопку в симол типа Movie Clip (правой кнопкой мыши выделяем созданную кнопку, в контекстном меню пункт - Convert to Simbol - тип Movie Clip).
  4. Укажите для клипа в панели Properties имя указанное в скрипте (в данном примере Hat2).
  5. Задайте для кнопки (для этого войдите в режим редактирования клипа со сцены - дважды щелкните на клипе) следующий скрипт, где Hat2 имя клипа: 

on (press) {
startDrag (_root.Hat2");
}
on (release) {
stopDrag ();
}

Как видите ничего сложного :)

Курсор мыши

Для создания такого курсора создайте клип, нарисуйте в нем объект, или импортируйте какое-то изображение.

Создайте новый клип и переместите в него ранее созданный клип. На этом клипе (который только что переместили) напишите скрипт.

onClipEvent (enterFrame) {
_rotation = _rotation+((_x ^ _xmouse))/5;
}

 Далее переместите на сцену второй созданный клип. И разместите на нем вот этот скрипт

onClipEvent (enterFrame) {
_x = _x+_xmouse/8;
_y = _y+_ymouse/8;
}

Можете проверить что получилось.

Прикольно будет, если этот флеш-ролик запихнуть в html-ку и сделать фоновым рисунком рабочего стола (подожжем, подожжем :)

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

Нарисуйте круг

  • размером 20,5 на 20,5 (размеры укажите в панели Properties,
  • с градиентной заливкой (Левый цвет должен быть белый, а второй тоже белый, но при этом бесцветный - выделив второй цвет поставьте значение Alpha 0%.),
  • и без контура ).

2. Создайте новый символ типа Move Clip

  • В него на первый кадр поместите ваш символ типа  Graphic.
  • Создадим Анимацию (на первом кадре в контекстном меню Creat Motion Tween).
  • Выделите символ, в панели Properties в разделе Color - Tint. Поставим цвет чисто желтый.
  • На 7 кадре сделаем ключевой кадр. Переместим наш символ вверх (координаты по оси x = -18.9, по оси y= -62.8. Поменяем цвет на оранжевый R=255, G=194 в панели Tint. И увеличим объект до 38,5.
  • На 13 кадре сделаем аналогично. Изменим цвет на R=210, G=81. И размер 66,4. Переместим наш символ вверх (координаты по оси x = -32.8, по оси y= -119.1
  • И на 20 кадре переместим наш символ вверх (координаты по оси x = -44.1, по оси y= - -193.7. Увеличиваем до 89,2. И на панели Effect меняем значение Alpha=0%.

 3. Переместите созданный клип в сцену, назовите fire и переместите за рабочее поле.

 4. Сделайте ключевым второй и третий кадры .

5. На первом кадре разместите скрипт:

n = 1;
m = 30;

6. На втором кадре разместите скрипт:

if (n<=m) {
duplicateMovieClip("fire", "fire"+n, n);
setProperty("fire"+n, _x, random(30)+_xmouse-1);
setProperty("fire"+n, _y, _ymouse);
setProperty("fire"+n, _rotation, 20-random(30));
} else {
removeMovieClip("fire"+(n-m));
n = "1";
}

7. На третьем кадре разместите скрипт:

n = Number(n)+1;
gotoAndPlay(2);

А если добавите вот этот скрипт на первый фрейм, то курсор мыши исчезнет.

Mouse.hide();

Но применение действия Drag Movie Clip можно найти не только для перетаскивания объектов. Бывают случаи, когда нужно узнать координаты курсора мыши. В этом случае необходимо создать "приклеенный" к курсору пустой символ и определять именно его координаты. Хотя об этом позже.

 

 




   Главная   Разработки   Галерея   Портфолио   Обо мне    

Красноярский краевой Дворец пионеров и Школьников ©2005-2008