Уроки Flash: виїжджають панелька

Сенс цього уроку зробити панельку, яка виїжджає, якщо навести мишкою на її край (подивитися). Поїхали!

Теорія

Нам потрібно, щоб при наведенні на мувік він виїжджав. Логічно було б перемістити його анімацією. Припустимо, зробили ми це. Якщо миша знаходиться на мувіке, то програється анімація відкриття, а якщо поза мувіка – то анімація закриття. Але, о жах! Коли ви запускаєте мувік, він починає сіпатися! Щоб цьому запобігти, краще всього було б зробити змінну, яка показує, програється чи анімація, чи ні (animation). І, якщо анімація програється, то запускати її в зайвий раз не варто. У цьому випадку все набагато краще – панелька смикається менше, але постійно або виїжджає, або заїжджає. Анімація програється до кінця, а потім перезапускається. У чому ж причина? А причина в тому, що, як тільки анімація закінчилася, мінлива animation стала false, у нас знову появілаяь можливість програти анімацію. Для виправлення цього варто створити змінну inside, яка показує стан панельки (в'їхала або виїхала). І, якщо мишка на мувіке, inside = false і animation = false, тоді програти анімацію відкриття. Якщо ж мишка поза мувіка, inside = true і animation = false, програти анімацію закриття. В іншому випадку – не діяти (не програвати анімацію). Все, в принципі, на цьому теорія закінчується.

Практика

1.Создаем новий флеш-документ. Виставляємо frame-rate десь 50 fps (кадрів в секунду)

2.Создать новий мувік panel:


3.Создаем кнопку і поміщаємо її в мувік panel:


Просто щоб заповнити простір можна ще створити текстове поле або малюнок

4.создаем ще один мувік panel_container і в нього кладемо мувік panel


5.Для кадру 1 мувіка panel_container пишемо скрипт:


CODE

stop();

і називаємо його Hide

6.создаем ще один кіфрейм, а потім ще один десь на кадрі 12


і обзиває його Panel

12.Для фрейму 1 пишемо код:

CODE

/ / Ініціалізація панельки
  var inside = false;
  var animation = false;

/ / Налагодження FP (якщо ви будите робити exe-шник)
  fscommand(“fullscreen”, “true”);
  fscommand(“showmenu”, “false”);


13.Для фрейму 2 пишемо код:


CODE

stop();
Panel.onEnterFrame = function(){
 if((this.hitTest(_xmouse, _ymouse, true) == true)  &&  
(inside == false) &&
(animation == false)){
  inside = true;
 Panel.gotoAndPlay(“Open”);
 }else if((this.hitTest(_xmouse, _ymouse, true) == false) &&
 (inside == true) &&
 (animation == false)){
    inside = false;
 Panel.gotoAndPlay(“Close”);
 }
}

14. Все, з панелькою закінчили. Можна додати фон на шар нижче, щоб вийшло красивіше.

Комбінація теорії з практикою (коли нічого не працює, і ніхто не знає чому)

Ось сам код панельки (де вона виїжджає або заїжджає). Розбираємо його.


CODE

stop();
Panel.onEnterFrame = function(){
 if((this.hitTest(_xmouse, _ymouse, true) == true)  &&  
(inside == false) &&
(animation == false)){
  inside = true;
 Panel.gotoAndPlay(“Open”);
 }else if((this.hitTest(_xmouse, _ymouse, true) == false) &&
(inside == true) &&
(animation == false)){
            inside = false;
 Panel.gotoAndPlay(“Close”);
 }
}

stop (); – зупиняє програвання флешки. Ми ж не хочемо стрибати між першим і другим кадрами

Panel.onEnterFrame = function () {- функція, коли оновлюється влешка (50 разів на секунду, тому що у нас 50 fps)

Тут ми виправляємо баги: (Див. теорію)
if ((this.hitTest (_xmouse, _ymouse, true) == true) & & / / якщо мишка на мувіке
(Inside == false) & & / / і панелька ще не відкрилася
(Animation == false)) {/ / і анімація не Музичн

inside = true; / / мувік в'їхав
Panel.gotoAndPlay ("Open"); / / програємо анімацію

Тут ми виправляємо баги: (Див. теорію)
} Else if ((this.hitTest (_xmouse, _ymouse, true) == false) & & / / якщо мишка поза мувіка
(Inside == true) & & / / і панелька вже відкрилася
(Animation == false)) {/ / і анімація не програється

inside = false; / / мувік не в'їхав
Panel.gotoAndPlay ("Close"); / / програти анімацію закриття

Все! Решта – елементарно просто. При початку програвання анімації мувік Panel сам ставить змінну animation на true, а по закінченні – на false (див. код panel_container)

Ось що має в результаті вийти.

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*