Drag&Drop или тянем-потянем

Аватар пользователя flahhi
flahhi
Не в сети
Регистрация: 23.08.2012
Баллы: 284
Drag&Drop или тянем-потянем


Недавно меня спросили:

- Зачем тебе математика, физика?

И я ответил:

- Чтобы лучше узнать мир.

- Тогда зачем же тебе анимация и программирование? Разве они тебе не помогают в этом?

- Не совсем... С помощью анимации и программирования я могу создать свой неповторимый мир.

Итак, наконец то делюсь новой частичкой своего мира и обнародую последние наработки. Смотрим презентацию:


Теперь конкретно по слайдам и по классам. На слайде 2 кружочки двигаются благодаря классу SimpleDrag. Это самый простой класс, который позволяет просто перемещать объекты. На его основе был создан класс DragAndHit (я не буду здесь рассказывать о ООП и вытекающем из него наследовании, инкапсуляции и т.д., потому что я более чем уверен, что это мало кому здесь интересно). Демонстрация работы данного класса представлена на слайдах 3-4. На 5-м слайде демонстрируется возможность привязки объекта к прямоугольнику (это всё простой класс SimpleDrag). Делается это так:

var a:SimpleDrag = new SimpleDrag(stage, clip);
a.setRect(rect);

Где clip и rect - клипы, заранее созданные и поименованные. Далее идёт повествование о создании анимации простого конуса слепленного с треугольника и круга. Важно то, что центральная точка клипа должна находится внизу по центру (на шестом слайде это видно). Теперь обращаю внимание на 8-й слайд. Клип с такой структурой нужен для самого продвинутого на сегодняшний день класса из данного урока. Ещё раз словани: внутри clip находятся c_drRect. и c_cone. внутри последнего хранится анимация конуса и маркер c_drMark за который мы будем тягать объект. Маркер продлевается на столько же кадров, сколько требует анимация (если что внизу исходник с этим примером). На 9-м слайде приведён пример с использованием данного клипа и класса Drag. Этот клас был написан первым и может немного не до конца продуманный, но я открою вам секрет... готовы? :) Это ещё не всё, что я вам хотел поведать о drag&drop и, надеюсь, что будет этому всему продолжение.

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

var d:Drag = new Drag(stage, clip);
d.mg = 15;

С помощью метода

d.showGuides();

Можно отобразить прямоугольник и клип за который тащим.

Ну и последний слайд Оксане посвящается :) надеюсь, это именно то, что требовалось. Здесь можно поиграться с котёнком и потаскать его по экрану за шкирку. Только будьте нежными и аккуратными, а то он будет часто падать. Структура клипа у котэ такая же, как и у конуса. И название клипов тоже сохраняется пока. Так что получился кот - c_cone :) Особенный только в данном случае первый кадр. Здесь отдельные клипы с анимацией морды и хвоста.

Планы на будущее:

Дальше планирую заняться эффектами, обязательно что нибудь подпалим и взорвём, пустим пузыри и еще много чего. Выход этого затянулся, так как у меня не было соответственных наработок, да и время чем дальше, тем больше поджимает. Много рутинной работы. По эффектам у меня кое-что припрятано, но всё надо привести в божеский вид и доработать ещё кучу всего. Ну и продолжу этот урок, правда он будет уже немного о другом: о привязке к мышке, раскачивании, ну и ещё о том о сём :)

Да, хочу опять напроситься на конструктивную критику, ведь есть чего критиковать. Например, в предыдущем уроке съехала шкурка с панельки навигации. Так никто и не заметил. Наверное панелька слишком мрачненькая...

Да, никак не добавлюсь к вам в вк, а чувствую что там много интересного. Я не очень любитель соц сетей, но в ближайшее время добавлюсь)

Всем спасибо за внимание!

Скачать исходник.

Аватар пользователя LeeTovetz
LeeTovetz
Не в сети
Регистрация: 24.08.2012
Баллы: 401

Ура новый уроооокккк!!!

моя радость тут ))) http://leetovetz.deviantart.com/gallery/

Аватар пользователя Oksana
Oksana
Не в сети
Админ
Регистрация: 02.06.2011
Баллы: 500

Андрей, спасибо большое за урок! Олень-фараон это просто фантастика))

А можете выложить еще отдельно исходник пазла с оленем. ну и если не жалко, то и котенка? не нашла их в исходнике

котенка я почему-то не смогла поймать за шкирку, хотя старалась( не реагирует он на меня совсем.

До сих по моей виде проблемы с отображением кода, все слиплось в кучу( Я это поправлю.

Аватар пользователя flahhi
flahhi
Не в сети
Регистрация: 23.08.2012
Баллы: 284

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

Аватар пользователя Oksana
Oksana
Не в сети
Админ
Регистрация: 02.06.2011
Баллы: 500

а еще лучше исходник вот этой флешки целиком)

котика поймала наконец)

Аватар пользователя flahhi
flahhi
Не в сети
Регистрация: 23.08.2012
Баллы: 284

Oksana пишет:

а еще лучше исходник вот этой флешки целиком)

котика поймала наконец)

Только ради вас, Оксана и только для ознакомления Smile

https://dl.dropbox.com/u/46575335/Drag_and_drop_lesson.rar

Почему то ссылки по нормальному не добавляются)

Аватар пользователя Oksana
Oksana
Не в сети
Админ
Регистрация: 02.06.2011
Баллы: 500

Спасибо большое, еще написала вам в почту)

Аватар пользователя LeeTovetz
LeeTovetz
Не в сети
Регистрация: 24.08.2012
Баллы: 401

В ВКОНТАКТЕ добавляется много чего что тут не добавляется. В основном красивая графика. Так что не нужно отставать. Обязательно нужно быть вконтакте. Плюс там тоже видео есть мульты разные. Не давно был на тренинге про мульты и это благодаря тому что Оксана нашла ссылку и у себя разместила. Так что так.

моя радость тут ))) http://leetovetz.deviantart.com/gallery/

Аватар пользователя flahhi
flahhi
Не в сети
Регистрация: 23.08.2012
Баллы: 284

Да ещё забыл извениться за непоименованые слои и плохо структурированую библиотеку в исходнике презентации. Много чего складывал с кусков, переделывал правил. Менялось количество кадров и т. д.Так что не серчайте, и если что спрашивайте Smile

Аватар пользователя Oksana
Oksana
Не в сети
Админ
Регистрация: 02.06.2011
Баллы: 500

Андрей, я добавила заглавную картинку в пост, она видна при публикации в сообщество вконтакте, флешки контакт не видит, а пост без картинки плохо читается(

за библиотеку не переживайте)

Аватар пользователя flahhi
flahhi
Не в сети
Регистрация: 23.08.2012
Баллы: 284

О, спасибо, теперь выглядит на много лучше!)

Аватар пользователя Renderdoll
Renderdoll
Не в сети
Регистрация: 24.08.2012
Баллы: 43

О, flahhi, большое спасибо за стольпознавательный урок!Все-все понравилась и по вечерам буду разбирать. особенно про конус понравилось! Smile Все получилось и пазл собрать и котенка потягать. )))

Аватар пользователя flahhi
flahhi
Не в сети
Регистрация: 23.08.2012
Баллы: 284

Всегда пожалуйста! Вот как хорошо, теперь вам тоже есть чем заняться по вечерам, пока я смотрю The Secret of Kells Smile

Аватар пользователя djz
djz
Не в сети
Регистрация: 23.08.2012
Баллы: 22

Хороший урок, спасибо

Пожалуйста, оставьте ваш комментарий. Спасибо!

Для комментирования войдите или зарегистрируйтесь