Преглед на урок

Сливащи се топки -  Flash

Сливащи се топки - Flash




Ами хайде и аз да се включа към споделянето на знания :) :
Преди да започнете урока, а и за да избегнем повечето въпроси, се уверете че имате поне Macromedia Flash 8, защото ефекта няма да се получи при по-стари версии.

Малко уводни думи - "metaballs" е термин за обекти, които в 3-измерната анимация симулират поведението на капки течности. Когато топките се приближат на определено разстояние, се сливат и сформират нова по-голяма топка.



*Означения които се използват по-надолу са следните:
  • "Меню/Подменю/Подподменю (Хоткей ако има такъв)"
  • "Меню..." или "Меню/Подменю..." ако се очаква диалогов прозорец (програмата ще ви пита нещо ;) )
  • (Име на инструмент - "Хоткей")
  • [color=#FF0000]Важни работи, на които поставям акцент, но излизат от темата на конкретната стъпка

  • Ами да почвам стъпка по стъпка и мноооого детайлно. Целта ми е да ви запозная с някои особености и странична информация за да е по-интересно ;) :

    1) Стартирате флаш-а и създавате нов документ -> File/New (Ctrl+N)
    Оставете настройките за размер на сцената по подразбиране (550х400) ,а за "кадри в секунда" (fps) нагласете 30fps.

    По стандарт на флаш тази настройка е 12fps. Лично мое мнение е, че при 30fps филмчетата изглеждат най-добре. Ако се опасявате, че сцената може да затормозява така някои по-стари компове може да нагласите кадрите на 24fps - това е стандарта в кино индустрията, при който теоретично окото не различава смяната на кадрите. 25fps при PAL ситемите (европейска телевизия), 30(29.97)fps NTSC системите (американска и японска телевизия)

    За цвят на фона използвайте тъмен цвят, да кажем този #000028

    Цветът, както забелязвате е в широко приетия шестнадесетичен формат, а именно:
    червено = 0-255 или 00-FF \
    синьо = 0-255 или 00-FF --> 000000 - FFFFFF
    зелено = 0-255 или 00-FF /

    Във Action Script-a на флаш шестнадесетичния цвят се бележи по този начин: 0x000000, а в полетата за избиране на цвят и във Фотошоп ето така : #000000

    [newpage]

    2) Изберете цвят за запълване и отворете Color Mixer panel -> Window/Color Mixer (Shift+F9).
    От падащото меню "type" изберете "Radial" за цвета най-вляво изберете #00FFFF
    . Припълзете маркера на този цвят около една трета от скалата надясно. За цвета най-вдясно изберете черно - #000000, но нагласете прозрачността на 0% (Това е стойността срещу параметъра "Alpha").



    Избирате инструмента за елипси (Oval Tool - "O") и създавате правилна окръжност като задържите "Shift" докато влачите. Кликнете на новосъздадената окръжност и нагласете разнерите и разположението й така:



    3) Ако не сте избрали окръжността я изберете и я превърнете в символ -> Modify/Convert to Symbol (F8)
    с име "ballFX_mc" и тип "Movie Clip".

    Писането на код с Action Script във Флаш се улеснява значително, ако му "подсказвате" типа на обекта, с който работите - в случая Movie Clip и за това прилепваме "_mc" след името на символа. Името на символа в библиотеката (Library) не е това на обекта, който е на сцената (Instance name), но е добра практика да спазвате някакъва логика при наименуването за да не се объркате при по-сложни проекти. Друг пример е ако добавите "_btn" след името на бутон. Реалната полза от това наименуване е, че улеснявате "auto complete" на Action Script. Ако не ви е ясно пробвайте и ще разберете какво имам предвид :).

    4) Ето сега ще използваме Новите Възможности™ на Флаш:
    Ако случайно не сте избрали току-що създадения символ го изберете и в панела Properties -> Window/Properties/Properties (Ctrl+F3) изберете за параметъра "Blend" стойност "Add"



    5) Нагласете X и Y координатите на -100 (и двата).

    6) Изберете така позиционираната "топка" и отново създайте символ, като този път го кръстете "mainball_mc" и отново от тип "Movie Clip".

    7) Позиционирайте новия символ с координати X и Y -25 (пак и двата), направете ширината и височината на по 50 и сложете Instance Name на обекта "mainball_mc".



    [color=#FF0000]Не се обърквайте от цялото това играене с координатите - целта му е да имаме обекти подравнени с върха на показателя на мишката, т.к. ще привържа "топките" за него.

    8) Както сте си избрали новия символ натиснете отново (F8) за да направите нов символ - последен обещавам ;) - и го кръстете "ballMoving_mc" с тип "Movie Clip". Кликнете два пъти върху този символ за да влезнете в режим "Edit in place" или "Промяна на място".


    Удобството на типа "Movie Clip" е, че можете да добавяте нови слоеве и действия/програмен код (Actions) вътре в самия символ. А т.к. според мен е по лесно първо да се създаде символ и след това да се добавят в него елементи, за това първо създаваме символ веднага след като направихме предния.

    Направете нов слой, заключете го и го преименувайте на "actions" и създайте Keyframes на 4, 11 и 15 кадри на същия слой -> десен бутон на мишката на съответния кадър в реда на слоя и "Insert Keyframe". Създайте Keyframe на 15 кадър и за слоя с "топката". Изберете Keyframe-овете с номер 15 и на двата слоя и ги премахнете -> десен бутон на мишката и "Remove frames" или Shift+F5.



    9) Хайде сега на скриптирането -> Window/Actions (F9)
    Изберете кадър 1 в слоя "actions" и добавете следния код в Acrions Panel-а:

    Код
    import mx.transitions.Tween;
    var wide:Number = mainball_mc._width;
    var high:Number = mainball_mc._height;
    var tween1:Tween = new Tween(mainball_mc, "_width", None, wide, 30 + random(20), 4 + random(7), false);

    [newpage]

    Изберете кадър 4 в слоя "actions" и добавете следния код в Acrions Panel-а:

    Код
    
    import mx.transitions.Tween;
    var tween2:Tween = new Tween(mainball_mc, "_height", None, high, 30 + random(20), 4 + random(7), false);
    

    Изберете кадър 11 в слоя "actions" и добавете следния код в Acrions Panel-а:

    Код
    
    import mx.transitions.Tween;
    var tween1:Tween = new Tween(mainball_mc, "_width", None, mainball_mc._width, wide, 4, false);
    var tween2:Tween = new Tween(mainball_mc, "_height", None, mainball_mc._height, high, 4, false);
    



    Класовете за анимиране чрез функции (mx.transitions.Tween) са интегрирани само във flash player 8, но са външни и затова трябва да се включват при всяко използване (със запазената дума "import"). За улеснение може да се включат веднъж в рамките на един кадър, като това позволява да ползваме краткото наименование, а не цялата пътека). С този код карам Action Script да сменя произволно ширината и височината на "топките" за да има повече движение във сцената.

    10) Излезте от режима за редактиране на място -> Edit/Edit Document (Ctrl+E).
    Изберете единствения символ на сцената и във Actions Panel-a вкарайте следния код:

    Код
    
    onClipEvent (load) { 
    	var xp:Number = 0;
    	var yp:Number = 0;
    
    	var inertia:Number = .9;
    	var k:Number = .1;
    }
    onClipEvent (enterFrame) {
    	var dx:Number = _root._xmouse - this._x;
    	var dy:Number = _root._ymouse - this._y;
    
    	xp = xp*inertia + dx*k;
    	yp = this.yp*inertia + dy*k;
    
    	_x += xp;
    	_y += yp;
    }
    
    



    Сега, тук стават две неща едновременно:
    а) Привързвам символа на сцената за показателя на мишката;
    б) Добавям вторично движение на обекта;

    Вторичното движение на обекта е по закона на Хук за пружина и ефекта е еластично джабуркане на топката около мишката при всяко размърдване. Променливaтa "inertia" отговаря на инертността на обекта, а "k" е коефициента на пружината. Нямам намерение да навлизам по-надълбоко във физиката. Който е заинтересуван нека да се пообразова от Wikipedia.

    11) В библиотеката -> Window/Library (Ctrl+L), имате символ на име "ballMoving_mc" - с влачене поставете още 2-3 копия на сцената, като добавите кода от стъпка 10) на всяко копие по отделно. Сменете променливите "inertia" и "k" с различни за всяка "топка" и намалете размера на всяка от последно добавените "топки" за да има видима разлика. Съветвам ви да използвате по-голяма инерция за по-големите "топки" и по-млаки за по-малките, а "k" да е обратно - по-малка стойност за по-големите "топки".
    Аз използвах тези:
    топка 1 ->100px X 100px ; inertia = .9; k = .1
    топка 2 ->80px X 80px ; inertia = .8; k = .2
    топка 3 ->40px X 40px ; inertia = .7; k = .3

    12) Последно за да скрием оригиналния показател на мишката ще добавим в главната времева линия (Main Timeline) нов слой, ще го преименуваме на "actions", ще го заключим и на първия кадър в Actions Panel-a ще добавя следния код:

    Код
    
    _root.onEnterFrame = function() {
    	Mouse.hide();
    }
    

    [newpage]

    Прави ми впечатление пропуска на много хора, да вземат предвид, че flash player има заложен метод да покаже курсора (срещан по-горе като "показател") на мишката (Mouse.show()) при натискане на десен бутон по време на възпроизвеждане на сцената. Аз решавам този проблем като слагам event handler-a onEnterFrame - той изпълнява кода в скобите {} при всяко опресняване на кадрите.

    След толкова много мъки вече сме готови!!! :D Ето и моят резултат:



    Поиграйте си и ми кажете ако ви е харесал урока. Ще се радвам да видя и ваши интерпретации!

    Автор: lix40


    Ако урокът ви допада, споделете го в Twitter и Facebook или го запазете в Delicious.




    Урокът е добавен от: Красимир!

    Добави коментар

    Трябва да сте регистиран потребител за може да оставяте коментари! Направете своята безплатна регистрация още сега.