Программный скроллинг фона.

Аватар пользователя flahhi
flahhi
Не в сети
Регистрация: 23.08.2012
Баллы: 284
Программный скроллинг фона.

 

Вот, наконец то, допилил урок по анимации фона. На эту тему можно много найти материалов в сети и конечно же здесь и здесь. Именно на этих двух ссылках строился урок. Я решил повториться только потому, что у хитри примеры для as2, а в as3 есть несколько своих особенностей. Например отсутствие метода duplicateMovieClip и полная объектная ориентированность.

Классы для скроллинга были написаны очень давно и когда я недавно открыл их я взялся за голову и подумал, неужели это писал я. Не сомневаюсь, что когда пройдёт время и я снова открою код придётся опять всё переделывать. В общем количество классов и кода уменьшилось вдвое...Тем не менее я уверен что всё равно много чего делаю не правильно, так как as3 так досконально и не изучил по Муку. Впрочем любой код можно оптимизировать.

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

Скроллинг можно делать двумя способами. На слайде "2" описана структура клипов, которую мы должны создать и поместить в рабочее пространство присвоив им имя. Всё ненужное скрываем маской.  Пишем одну строчку кода (создаём объект класса Scrolling где первый параметр - наш созданный клип а второй - скорость смещения) и вуаля - уже имеем результат. Если фон разбить на несколько частей и присвоить им разную скорость то результат получится более красивым и реалистичным.

Второй способ чуть сложнее в реализации. Тут нам понадобится два клипа: один в библиотеке, с назначенным классом (слайд 5), а второй, с двумя моркерами (даём имена экземплярам leftMark и rightMark), добавляем на сцену и даём ему имя (слайд 6).  Пишем код (слайд 7), опять одну строчку и наслаждаемся результатом. Клип, который с маркерами, можно вертеть, отражать, масштабировать по желанию. Именно по этому я отказался от его программного создания (слайд 8 ).

По коду в этих двух классах не должно возникнуть вопросов. Всё предельно просто. Но если такие будут с удовольствием отвечу в комментариях. Сюда код не пишу, а прикрепляю классы. Простенький исходник делать не стал. Оставил на "домашнее задание" Smile

Скачать классы

П. С. Поздравляю всех с днём знаний!

Заключение.

Я знаю, что уроки у меня пока получаются коряво, но я стараюсь совершенствоваться. Все пожелания и конструктивную критику с удовольствием приму. С наступлением осени времени у меня ещё поубавиться но тем не менее мне интересно знать, - полезно ли то о чём я пишу? Стоит ли продолжать? Если да, то планирую в ближайшее время перелопатить классы по программным частицам, растеризации изображений и анимации, а также программную камеру, строение лабиринтов с box2d, искусственный интеллект и ещё много-много всего. Об этом уже много писали, так что стоит ли? Можете предложить свою тему в комментариях.

----

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

 

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

Андрей, так сильно, как вы меня радуете - никто не радует здесь:)

Спасибо вам за работу. Было бы отлично сам код выкладывать в теме. Мы решаем сейчас вопрос, как это сделать красиво, думаю, в ближайшие дни решим.

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

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

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

Oksana пишет:

Андрей, так сильно, как вы меня радуете - никто не радует здесь:)

Спасибо вам за работу. Было бы отлично сам код выкладывать в теме. Мы решаем сейчас вопрос, как это сделать красиво, думаю, в ближайшие дни решим.

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

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

Спасибо за тёплые слова. Исходник добавил.

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

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

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

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

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

Спасибо. Я сам колебался между камерой и частицами...Теперь наверное начну с камеры и сделаю всё что в моих силах. 

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

Спасибо, спасибо, спасибо. Очень очень ждем.

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

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

flahhi пишет:

Спасибо. Я сам колебался между камерой и частицами...Теперь наверное начну с камеры и сделаю всё что в моих силах.

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

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

Без проблем, всё взял на заметку. О перетаскивании мышкой сделаю - там всё очень просто. Салют и эффекты будут сразу после камеры, обещаю. А потом и с игровыми баннерами что-то придумаем. В камере ничего сложного нету, а получается эфект просто обалдезный. Если тяжело разобраться как она работает, можно просто принять всё как есть... В общем скоро всё сами увидите)))

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

Я камерой пользуюсь "как есть" )))
Для меня это просто рамка. Которую таскаю по сцене и за ней. А эффект действительно классный.
Но вот если бы она у меня в третьем скрипте была ...мммм. было бы супер. ))))

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

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

flahhi пишет:

 О перетаскивании мышкой сделаю - там всё очень просто.

ну  я имела ввиду не простой drag and drop, а чтобы персонаж прилепился к стрелочке, как будто мы его за шкирку подняли:) хотя урок по drag and drop, например, создания пазла, был бы очень полезеен.

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

Oksana пишет:

ну  я имела ввиду не простой drag and drop, а чтобы персонаж прилепился к стрелочке, как будто мы его за шкирку подняли:) хотя урок по drag and drop, например, создания пазла, был бы очень полезеен.

Не совсем понимаю, чем это не drag and drop... Может какой-то пример есть?

LeeTovetz пишет:

Но вот если бы она у меня в третьем скрипте была ...мммм. было бы супер. ))))

Всмысле в as3? Если да, то будет))

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

as3. да. да.

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

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

flahhi пишет:

Не совсем понимаю, чем это не drag and drop... Может какой-то пример есть?

 

да, наверное это  drag and drop, но более сложный. Живой пример не покажу, например: сидит персонаж, мы наводим на него мышком(возможно какое-то действие, он как-то реагирует), кликаем мышкой и удерживаем - он висит в воздухе барахтается, отпускам мышку- он падает с воздуха на землю (отдельно рисуем для него анимацию падения), приземляется (тоже анмиация отдельная,как он соприкасается с землей), поднимается  и садится  в исходную позицию.ну как-то так я себе это представляю:)

Аватар пользователя Anyoneelselikeyou
Anyoneelselikeyou
Не в сети
Регистрация: 05.08.2012
Баллы: 74

а у меня есть в as3 камера... это я не хвастаюсь, а предлагаю потерпеть деньков 6 (работа...)- напишу урок по анимации при помощи этой самой камеры и добавлю исходник. А ссылку на неё я давала в коменте по теме про плагины, правда не знаю работает или нет (это я про ссылку).

А урок хороший, особенно 2 способ (ценен для практики). Плюс за третью версию AS. Програмист из меня начинающий (как сказал бы мастер Шифу, - да, с этого момента существует нулевой уровень), очень люблю делать всякие магические штуковины с кодом, но больше уклон делаю на то, чтобы этот код нужен был мне как аниматору. Поэтому предлагаю не уходить далеко за рамки анимации во флэш в дебри искусственного интелекта. Приоритет оставить за скриптами которые нужны аниматорам, а не програмистам-любителям.

 

Что бы вы сделали, если бы точно знали что всё получится?...

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

Anyoneelselikeyou пишет:

а у меня есть в as3 камера... это я не хвастаюсь, а предлагаю потерпеть деньков 6 (работа...)- напишу урок по анимации при помощи этой самой камеры и добавлю исходник. А ссылку на неё я давала в коменте по теме про плагины, правда не знаю работает или нет (это я про ссылку).

о, было бы отлично) до сих пор не протестировала эту камеру, хотя многие ее хвалят.

и продублируйте здесь ссылку на нее, пож-та)

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

Oksana пишет:

да, наверное это  drag and drop, но более сложный. Живой пример не покажу, например: сидит персонаж, мы наводим на него мышком(возможно какое-то действие, он как-то реагирует), кликаем мышкой и удерживаем - он висит в воздухе барахтается, отпускам мышку- он падает с воздуха на землю (отдельно рисуем для него анимацию падения), приземляется (тоже анмиация отдельная,как он соприкасается с землей), поднимается  и садится  в исходную позицию.ну как-то так я себе это представляю:)

Что нибудь придумаем! Вернее я уже всё придумал... Теперь пашу в свободное время над реализацией)))

Anyoneelselikeyou пишет:

А урок хороший, особенно 2 способ (ценен для практики). Плюс за третью версию AS. Програмист из меня начинающий (как сказал бы мастер Шифу, - да, с этого момента существует нулевой уровень), очень люблю делать всякие магические штуковины с кодом, но больше уклон делаю на то, чтобы этот код нужен был мне как аниматору. Поэтому предлагаю не уходить далеко за рамки анимации во флэш в дебри искусственного интелекта. Приоритет оставить за скриптами которые нужны аниматорам, а не програмистам-любителям.

Спасибо! Буду стараться делать только те уроки, которые интересны и полезны, вы направляйте меня в нужное русло, а то меня временами заносит Smile

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

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

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

вобщем, сами смотрите, пишите, что и вам интересно:)

Аватар пользователя Anyoneelselikeyou
Anyoneelselikeyou
Не в сети
Регистрация: 05.08.2012
Баллы: 74

http://dl.dropbox.com/u/102421182/%D0%B2%D0%B8%D1%80%D1%82%D1%83%D0%B0%D0%BB%D1%8C%D0%BD%D0%B0%D1%8F%20%D0%BA%D0%B0%D0%BC%D0%B5%D1%80%D0%B0%20%D0%B4%D0%BB%D1%8F%20flash%20as3.zip та самая камера на AS3. Скачивала у автора вот отсюда http://bryanheisey.com (не знаю существует ли этот блог, раньше работал). Урок будет как освобожусь от работы, но в принципе можете поискать на ютьюб. Говорят, её можно как то усовершенствовать, но мне и так норм

Что бы вы сделали, если бы точно знали что всё получится?...

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

спасибо!

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

Ой, как "красиво" ссылка съехала... Оксана, надо бы поправить чтобы такого небыло ни с ссылками ни с контентом.

И до это та самая vcam о которой писал в своё время хитри и ешё много кто. С нетерпением буду ждать вашего урока и свой тоже вскоре закончу ещё в дополнение поведав о 3D камере, если всё получится))

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

Ух ты. 3D камера. во флеше? Прикольно. Я такого не слышал. Уже слюньки тикут. ААААА. Хочу хочу хочу. Хоть я и отговаривал форум создавать. Но  я признаю свою ошибку. Тут действительно живое общение и интересности начинаются. Спасибо за форум.

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

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

flahhi пишет:

Ой, как "красиво" ссылка съехала... Оксана, надо бы поправить чтобы такого небыло ни с ссылками ни с контентом.

да-да, непорядок, исправим

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

LeeTovetz пишет:

Ух ты. 3D камера. во флеше? Прикольно. Я такого не слышал. Уже слюньки тикут. ААААА. Хочу хочу хочу. Хоть я и отговаривал форум создавать. Но  я признаю свою ошибку. Тут действительно живое общение и интересности начинаются. Спасибо за форум.

Пожалуйста) теперь у меня сверх-задание - не бросить это все на полпути)

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

большое спасибо за полезный урок, всегда нравились такие «подвижные» фоны! Урок, кстати, вышел довольно понятным и интересным, понравилось графическое оформление, молодец! Буду ждать следующих уроков, про камеру в особенности, так как вообще двоечник - так и не разобралась толком как с ней работать...

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

Renderdoll пишет:

большое спасибо за полезный урок, всегда нравились такие «подвижные» фоны! Урок, кстати, вышел довольно понятным и интересным, понравилось графическое оформление, молодец! Буду ждать следующих уроков, про камеру в особенности, так как вообще двоечник - так и не разобралась толком как с ней работать...

Спасибо! Рад что понравилось.

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

Да. да. нравится. Но не останавливайтесь. В мире еще много чего интересного )))

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

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

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