Здесь вы изучите технологию создания сложной анмации, включая то, как дублировать муви клипы, такие, которые вы можете создать, подобно реалистичным анимированным следам, которые уменьшаются в размере и исчезают по траекториям вращения электронов вокруг атомных ядер. Имейте в виду, что вы должны использовать ваш видение и креативное искусство, чтобы установить размеры ваших клипов. Проследите за анимацией, чтобы проверить все самим.
Шаг 1: Настройка окружения
1. Создайте новый мувик: File - New 2. Откройте панель Property: Window - Properties (Ctrl F3) 3. В панели Property установите размер: 550 x 400 4. Установите Frame Rate = 48fps
Замечание: Не устанавливайте цвет фона в черный до тех пор, пока я не скажу, поскольку легче работать на белом. Мы установим черный фон в конце. ------------------------ Шаг 2: Создание муви клипов Electron и Rings
Эллипс
1. Выберите ellipse tool из панели инструментов: 2. На основной сцене нарисуйте эллипс 3. Кликните один раз по центру эллипса: удалите заливку 4. Если панель Property закрыта, откройте ее: Window - Properties (Ctrl F3) 5. Кликните по обводке (outline) эллипса и установите размер: ширина - 192 , высота - 61 6. Для толщины обводки выберите: Hairline 7. Выберите ластик - Eraser tool 8. Сделайте очень маленькую щелку сверху:
9. Возвратитесь к Selection tool: 10. Правой кнопкой мыши кликните по эллипсу и выберите: Convert to Symbol 11. Введите имя: Electron Ring 12. Выберите тип: Movie Clip 13. Точку регистрации выберите в центре вверху: 14. Кликните: OK 15. Кликните правой кнопкой мыши по новому муви клипу и выберите: Edit
Замечание: после этого вы окажетесь внутри муви клипа, который вы только что создали. Если панель редактирования закрыта, откройте ее (Window-> Toolbars -> Edit Bar) и вы увидите имя нового муви клипа: Electron Ring
16. Создайте два дополнительных слоя, кликнув по кнопке Insert Layer на временной шкале: (или Insert -> Timeline => Layer) 17. Назовите слои следующим образом:
Имена слоев внутри символа: Electron Ring
18. Правой кнопкой кликните по слою guide и выберите : Guide
Заметьте, что иконка слоя Guide изменилась
19. Присоединим слой Electron к слою Guide, потащив за слой Electron, пока он не окажется под слоем guide.
Иконка слоя Guide снова изменилась
Замечание: если вы все еще не сумели сделать это, можно сделать это хитрее. Смиритесь с тем, чтобы двигать слой electron целиком. Только подвиньте его слегка вверх и влево. Слой Electron присоединится сам к слою Guide. Когда вы отпустите мышь после перетаскивания слоя Electron, если иконка на Guide изменилась и появилась прерывистая линия под слоем guide, а слой Electron стал иметь выступ, то все сделано правильно! Теперь эллипс, который вы нарисовали, нужно скопировать в слой: Guide
20. Выделите эллипс 21. Сделайте: Edit - Copy (Ctrl C) 22. Выделите кадр 1 в слое Guide 23. Сделайте: Edit - Place in Place (Ctrl Shift V)
Вы должны теперь увидеть черную точку - Keyframe в кадре 1 в слое Guide.
24. На временной шкале отключите видимость слоя Guide:
Видимость слоя Guide отключена.
25. Выделите эллипс в слое Ring 26. В панели Properties измените линию на Solid 27. Установите толщину 3 пиксела 28. Не снимая выделения с эллипса, сделайте: Modify - Shape - Convert Lines to Fills (Изменить - Форма - Преобразовать линии в заливку) 29. Откройте панель Color Mixer : Window - Design Panels - Color Mixer (Shift F9) 30. Выберите зелено- черный градиент: радиальную заливку
Радиальная заливка будет иметь 3 цвета. 1 - ый цвет зеленый : R = 0, G = 255, B = 0, Alpha = 90% 2 - ой цвет черный : R = 0, G = 0, B = 0, Alpha = 0% 3 - ий цвет черный : R = 0, G = 0, B = 0, Alpha = 0% 31. Выберите Fill Transform Tool: 32. Кликните по эллипсу 33. Перетащите маленький кружок в центре так, чтобы он сравнялся с передним краем эллипса по центру:
Центральный кружок - на линии с передним краем эллипса.
34. Растяние квадрат с правой стороны до левой:
Квадрат растянут с правой до левой стороны.
Ваш эллипс окончательно должен выглядеть следующим образом. -------------------------------- Шаг 3: Создание муви клипа Electron - Circle
Вы все еще находитесь внутри мувика Electron Ring, а не на основной сцене.
Edit Bar показывает, что вы находитесь в режиме редактирования внутри мувика Electron Ring.
Замечание: если вы находитесь не внутри муви клипа, откройте библиотеку (F11) и правой кнопкой мыши кликните по мувику Electron Ring и выберите: Edit
1. Выделите кадр 1 в слое Electron 2. Выберите Ellipse tool: 3. Нарисуйте круг 4. Выберите Selection tool: 5. В панели Property измените его размер на 15 x 15 пикселей 6. Установите ширину обводки (outline) равной 3 пиксела 7. Измените цвет обводки на желтый 8. Измените заливку на зеленую, так, чтобы это было похоже на : 9. Дважды кликните в центре круга, чтобы выделить как заливку, так и обводку одновременно: выделите круг 10. По правой кнопке мыши выберите: Convert to Symbol 11. Введите имя Circle 12. Выберите тип Movie Clip 13. Точку регистрациии выберите в центре: 14. Кликните: OK ------------------------------- Шаг 4: Создание муви клипа Electron - Polygon - многоугольника
Вы все еще находитесь внутри муви клипа Electron Ring в первом выделенном кадре слоя Electron .
1. Выберите PolyStar tool:
Замечание: Инструмент PolyStar tool можно найти, если вы кликните и удержите клавишу мыши на инструменте Rectangle tool и потянете, чтобы выделить PolyStar tool из всплывающего меню.
2. В панели Property кликните по кнопке Options: 3. Установите опции подобные этим:
Опции PolyStar tool.
4. Возвратитесь на главную сцену, кликнув OK 5. Около круга нарисуйте многоугольник 6. Выделите центр многоугольника и удалите центр - заливку 7. Сделайте обводку - Green 8. В панели Property установите размер: 25.6 x 24.4 (ширина x высота)
Ваш Polygon должен выглядеть подобным образом:
9. Кликните правой кнопкой мыши по многоугольнику и выберите: Convert to Symbol 10. Введите имя: Polygon 11. Выберите тип: Movie Clip 12. Точка регистрации - центр 13. Кликните: OK
------------------- Шаг 5: Создание мувика Electron - комбинация Circle и Polygon
Вы должны все еще находиться внутри муви клипа Electron Ring в 1-ом выделенном фрейме слоя Electron.
1. Перетащите круг на верх многоугольника, как здесь: 2. Выделите обе формы: Circle и Polygon 3. По правой кнопке выберите: Convert to Symbol 4. Введите имя: Electron 5. Тип: Movie Clip 6. Точка регистрации - центр 7. Кликните: OK 8. Если панель Property закрыта,откройте ее: Window - Properties (Ctrl F3) 9. Дайте новому муви клипу Electron инстанс имя: myElectron
Instance Name: myElectron
----------------- Шаг 6: Создание мувика Electron - анимация электрона Вы должны все еще находиться внутри мувика Electron Ring.
1. В кадре 70 с клавишей Shift кликните по трем слоям, чтобы подсветить их
Все три слоя выделены в кадре 70.
2. Правой кнопкой мыши кликните в одном из синих кадров и выберите: Insert Frame
Слой пробегает теперь весь путь до фрейма 70.
3. По правой кнопке мыши в кадре 1 слоя Electron выберите: Create Motion Tween 4. Поправой кнопке мыши в кадре 35 слоя Electron выберите: Insert Keyframe 5. Сделайте то же самое для кадра 70 слоя Electron и выберите: Insert Keyframe
Ваша временная шкала должна выглядеть так.
6. Если видимость слоя Guide отключена, включите ее: Show Layer 7. Выключите видимость слоя Ring : 8. Заблокируйте слой Guide:
Видимость слоя Ring выключена, а другого включена. Слой Guide заблокирован.
9. Выделите кадр 1 слоя Electron 10. Захватите за центр вашего мувика Electron и привяжите его к эллипсу Guide так, чтобы он был слева от дырки
Мувик Electron привязан слева от дырки в эллипсе.
Замечание: По мере того как вы тащили мувик Electron из его центральной точки, вы должны были видеть, как он прыгнул или приклеился к направляющей линии эллипса, как только он стал очень близко к ней. Если этого не случилось, проверьте, тащите ли вы Electron правильно с перекрестьем в центре муви клипа. Если вы все еще имеете проблемы, постарайтесь изменить ваши опции привязки: View - Snapping
11. Откройте панель Transform : Window - Design Panels - Transform 12. Измените размер мувика Electron на: 15%
Замечание: После того как вы ввели размер, вам необходимо нажать Enter для активации нового размера.
13. В панели Property установите уровень прозрачности такой: Color - Alpha - 20% 14. Выделите кадр 35 в слое Electron 15. Привяжите мувик Electron на направлящей эллипса внизу в центре
В кадре 35 мувик привязан к нижнему центру.
16. Поверните мувик Electron : 180°
17. Выделите кадр 70 в слое Electron 18. Привяжите ваш мувик Electron так, чтобы он был справа от дырки. 19. В панели Inspector установите уровень прозрачности : Color - Alpha - 20% 20. Измените размер мувика Electron на: 15% 21. Выключите видимость вашего слоя guide: 22. Включите видимость вашего слоя Ring 23. Нажмите Enter чтобы увидеть анимацию
Ваша анимация должна выглядеть таким образом.
Замечение: Если у вас есть проблемы, то они возможно из-за того, что Electron не был привязан корректно к направляющей или не привязался к правильной точке на направляющей.
24. Возвратитесь на основную сцену, кликнув по вкладке Scene 1: 25. Сохраните Flash Movie. 26. Выделите мувик Electron Ring и нажмите Delete
Замечание: Electronic Ring будет находиться в библиотеке.
---------------------------------- Шаг 7: Создание Atom
1. Сделайте Insert - New Symbol 2. Напишите имя: Atom Altogether 3. Тип: Movie Clip 4. Кликните: OK 5. Переименуйте ваш единственный слой в Rings 6. Если библиотека закрыта, откройте ее: Window - Library (F11) 7. Перетащите на сцену мувик : Electron Ring 8. Сцентрируйте мувик Electron Ring на сцене: в центре 9. В панели Property дайте мувику Electron Ring инстанс имя: myRing1 10. Перетащите другую копию мувика Electron Ring на сцену и назовите ее: myRing2 11. Перетащите другую копию мувика Electron Ring на сцену и назовите ее: myRing3 12. Поверните и отцентрируйте центры myRing2 и myRing3 так, чтобы они выглядели подобно этому:
Расположение колец на сцене.
Замечание: Не пишите myRing1 и т.д. на сцене (как показано выше), введите инстанс имена в панели Property!
13. Используйте кнопку Insert Layer на временной шкале Timeline , чтобы создать другой слой 14. Назовите новый слой: Nucleus Spinners 15. Создайте другой слой 16. Назовите новый слой: Nucleus 17. Перетащите ваши слои так, чтобы порядок был такой:
Слой Rings - наверху.
18. В слое Nucleus нарисуйте круг. Расположите и дайте ему размер такой, чтобы он был подогнан близко внутри колец: измените размер и подвиньте круг. Заполните круг следующей градиентной заливкой:
Вы должны находиться все еще внутри мувика Atom Altogether.
1. Заблокируйте слой Rings: 2. В слое Nucleus Spinners нарисуйте круг 3. Выберите обводку и нажмите Delete 4. Выберите радиальную заливку и размер круга: 40 x 40 5. Сделайте радиальную заливку со следующими свойствами:
6. По правой кнопке на круге выберите Convert to Symbol 7. Назовите: Spinner 8. Тип: Movie Clip 9. Точка регистрации - нижний левый угол 10. Кликните: OK 11. Скопируйте и вставьте муви клип дважды так, чтобы вы имели три экземпляра 12. Сдвиньте муви клипы так, чтобы они были в таком положении, как показано ниже:
Nuclear Spinners на месте.
Теперь нам нужно создать их вращение !! Чтобы быть уверенным в том, что они не будут вращаться в параллели, нам нужно повернуть два из них вокруг.
13. Если панель Transform закрыта, откройте ее: Window - Design Panel - Transform (Ctrl T) 14. Выделите левый верхний Spinner 15. В панели Transform для Rotation напишите: -120
Верхний левый spinner повернулся вокруг.
16. Выделите нижний правый Spinner 17. В панели Transform для Rotation напишите: 120
Окончательно вы должны получить подобное этому.
18. Выделите верхний правый Spinner 19. Правой кнопкой мыши кликните и выберите: Edit 20. Выделите круг, который вы рисовали раньше 21. Правой кнопкой мыши выберите : Convert to Symbol 22. Назовите: Inner Glow 23. Тип: Movie Clip 24. Точка регистрации: нижний левый угол 25. Кликните: OK 26. Выберите Free Transform Tool: 27. Сдвиньте точку поворота из центра в левый нижний угол:
сюда
Двигаем точку поворота из центра в левый нижний угол.
28. Вернемся к Selection tool: 29. В Timeline выделите кадр 1 30. В панели Property выберите: Tween -Motion 31. Выберите Ease: 100 32. Для Rotate выберите: CW x 2
Свойства Timeline для кадра 1.
33. В Timeline правой кнопкой мыши кликните по кадру 100 и выберите: Insert keyframe 34. В панели Property выберите Ease: -50 35. Для Rotate выберите: CW x 2
Свойства Timeline для Frame 100.
36. В Timeline правой кнопкой мыши кликните по кадру 200 и выберите: Insert keyframe 37. В кадре 200 выделите мувик Inner Glow 38. Если панель Transform закрыта, откройте ее: Window - Design Panels - Transform (Ctrl T) 39. Установите размер для ширины и высоты: 5% 40. В панели Property установите цвет: Alpha 0% 41. Вернитесь в кадр 100 42. Установите цвет: Alpha 90% 43. Возвратитесь в кадр 1 44. Выделите мувик Inner Glow 45. Установите размер для ширины и высоты: 5% 46. В панели Property установите цвет: Alpha 0% 47. Нажмите: Enter
Вы должны увидеть анимацию подобную этой
48. Возвратитесь в основную сцену, кликнув по вкладке Scene 1: 49. Сделайте Modify - Document 50. Установите цвет фона в черный 51. Если библиотека закрыта, откройте ее: Window Library (F11) 52. Перетащите Atom Altogether на сцену 53. Протестируйте ваш мувик: Control - Test Movie (Ctrl Enter)
Вы должны теперь увидеть такую анимацию
----------------------- Шаг 9: ActionScript
ActionScript выполняет две вещи.
1. Он поворачивает атом Atom. 2. Он создает следы электронов.
Мы почти закончили! Теперь нам нужно добавить Actionscript для мувика, чтобы создать следы электрона!
Замечание: этот ActionScript не будет работать в Flash 5.
1. Проверьте, что вы находитесь на основной сцене, а не внутри одного из муви клипов. Если вы не уверены, кликните по вкладке Scene 1, чтобы вернуться на основную сцену: 2. Выделите муви клип Atom Altogether 3. В панели Property дайте ему инстанс имя: atom 4. В Timeline выделите кадр 1 5. Если панель Actions закрыта, откройте ее: Window - Actions (F9) 6. Поместите следующий код в кадр 1.
CODE
// Если вы желаете, пропустите комментарии серого цвета. /* Всегда действие stop до тех пор, пока не появится причина разрешить проигрывание следующих кадров. */ stop(); j=0;
// Эта функция будет выполняться внутри клипа с именем "atom", чтобы поворачивать его на 1 градус в каждом кадре. _root.atom.onEnterFrame=function() { this._rotation += 1; }
/* Нам нужно разнести начальные кадры для старта для ring2 и ring3, чтобы быть уверенным, что столкновений электронов не случится! Так как приблизительно общее количество кадров в мувике Electron Ring равно 70, и я хочу разнести 3 клипа по именам ring1, ring2 и ring3 равнозначно, я установлю, чтобы ring2 стартовал с 1/3-ей от его общего цикла анимации, а ring3 стартовал с 2/3-ей от его общего цикла анимации. */ _root.atom.myRing2.gotoAndPlay(Math.floor(70/3)); _root.atom.myRing3.gotoAndPlay(Math.floor(2*70/3));
// используя цикл 'for' который будет выполняться 3 раза, мы... for (i=1; i<4; i++) {
/* ... установим вспомогательную переменную по имени _root.atom.ring1, затем _root.atom.ring2 и затем _root.atom.ring3, чтобы мы могли позже добавить функцию onEnterFrame и затем продублировать муви клипы внутри каждого ring1, ring2 и ring3 клипа. */ sploosh = eval("_root.atom.myRing" + i);
/* ... установим функцию onEnterFrame для дублирования мувика electron внутри каждого муви клипа ring. То есть, ссылаясь на вспомогательную переменную, "sploosh", мы сформируем 3 функции onEnterFrame _root.atom.ring1.onEnterFrame, _root.atom.ring2.onEnterFrame и _root.atom.ring3.onEnterFrame. */ sploosh.onEnterFrame = function() {
/* Здесь, "this" ссылается на _root.atom.ring1, _root.atom.ring2 или _root.atom.ring3 в зависимости от того, какую итерацию "i" мы имеем текущей. Мы дублируем муви клип "myElectron" с помощью предложения this.myElectron, называем каждую копию-дубликат pent1, pent2, pent3, pent4, pent5, и т.д. так как "j" увеличивается в каждом фрейме. */ duplicateMovieClip(this.myElectron,"pent" + j, j);
/* Снова, чтобы рассматривать имена муви клипов программно, мы используем вспомогательную переменную "foosh". Здесь "this" ссылается на _root.atom.ringX.pentY, где X - это 1, 2 или 3, а Y -это 0, 1, 2, 3... Другими словами каждый ring будет содержать копии-дубликаты для "pent". Я имею ввиду, что ring1 будет иметь pent0, pent1 до pent? и ring2 & 3 будут иметь pent0, pent1 до pent?. */ foosh = eval(this+".pent" + j);
/* Для каждого pent?, мы определяем его собственную функцию "onEnterFrame" , чтобы заставить каждый pent делать то же самое, чтобы они анимировали внутри мувика "electron" внутри ring1, ring2 и ring3. */ foosh.onEnterFrame = function() {
/* Каждый pent? будет уменьшаться в масштабе по x и y на 10%, в каждом кадре. */ this._xscale = this._yscale -= 10;
// Каждый pent? будет уменьшать альфу на 5%, в каждом кадре. this._alpha -= 5;
/* Если альфа в каком-либо из данных дубликатов pent? опускается ниже 36%, удаляем клип: a) Удаляем его со сцены и ... b) одновременно удаляем функцию onEnterFrame для каждого pent? . освобождаем ресурсы процессора , так как у нас нет больше необходимости в pent?. */ if (this._alpha < 36) { removeMovieClip(this); }
// конец функции foosh.onEnterFrame }
/* В заключение в каждом кадре увеличиваем j на 1 чтобы мы могли сделать больше мувиков pent? и разместить их каждый в разном уровне внутри основного мувика. */ j += 1;
// конец функции sploosh.onEnterFrame }
// конец цикла 'for' }
Это все!
Поиграйте со значениями, с помощью которых вы уменьшаете масштаб и альфа каждого клипа pent? , а также со значением, когда каждый клип pent? удаляется. Или измените frame rate основного мувика. Изменение каждого из этих значений принесет разный эффект, окончательно муви клип будет выглядеть по-разному.
Замечание: Если вы должны включить этот мувик в мувик, который выполняется с 12 или 24 кадрами в секунду, прежде чем использовать onEnterFrame для дублирования мувиков и уменьшения их масштаба и альфы, примите во внимание использование функции setinterval в тандеме с командой updateAfterEvent(). Вы сможете добиться плавной анимации , несмотря на более медленную frame rate.
Как всегда, спасибо за время, проведенное со мной!
Все права принадлежат PainKiller.Net.Ru 2009-2010. Дизайн сайта разработан - PainKiller.Net.Ru
Внимание! Рип шаблона запрещен "Нарушение авторского права"!
Design bY PainKiller.Net.Ru
сюда
