Уроки Flash: виїжджають панелька, HTML, XML, DHTML, Інтернет-технології, статті

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

Теорія

Нам потрібно, щоб при наведенні на мувік він виїжджав. Логічно було би перемістити його анімацією. Припустимо, зробили ми це. Якщо миша знаходиться на мувіку, то програється анімація відкриття, а якщо поза мувіка – то анімація закриття. Але, о жах! Коли ви запускаєте мувік, він починає сіпатися! Щоб цьому запобігти, найкраще було б зробити змінну, яка показує, програється чи анімація, чи ні (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>

*

*