Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


Выезжающая панель


Нам нужно, чтобы при наведении на мувик он выезжал. Логичнее всего было бы переместить его анимацией. Допустим, сделали мы это. Если мышь находится на мувике, то проигрывается анимация открытия, а если вне мувика - то анимация закрытия. Но, о ужас! Когда вы запускаете мувик, он начинает дергаться! Чтобы это предотвратить, лучше всего было бы сделать переменную, которая показывает, проигрывается ли анимация, или нет (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 пишем скрипт:

stop();


и называем его Hide

6.создаем еще один кифрейм, а затем еще один где-то на кадре 12

alt



7.перемещаем panel влево (или куда она будет вывезжать), возвращаемся к кадру два, в панельке Properties выставляем Tween на Motion, Ease на 100:

alt



8. Для кадра 2 пишем код:

_root.animation = true


и называем его Open

9. Для кажда 12 пишем код:

stop();<br /> _root.animation = false;


Переменная animation показывает, что панелька в процессе движения. Зачем это, поймете позже

10. По тому же принципу создаем анимацию закрытия:

Создаем еще кифреймы на кадрах 13 и 23.
(лучше просто скопировать фрейм Hide и заменить скрипты и убрать имя)
Кадр 13 обзываем Close
Пишем ему код:

_root.animation = true;


Идем в кадр 23, пишем код:

_root.animation = false;<br />   gotoAndStop("Hide");


перемещаем панельку назад (если в не скопировали фрейм Hide)
Возвращаемся к кадру Close
Выставляем Tween на Motion и Ease на 100

11.Выходим из мувика panel_container, создаем еще один кифрейм и размещаем мувик так:

alt



и обзываем его Panel

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

//Инициализация панельки<br />  var inside = false;<br />  var animation = false;<br /><br />  //Настройка FP  (если вы будите делать exe-шник)<br />  fscommand("fullscreen", "true");<br />  fscommand("showmenu", "false");


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

stop();<br />Panel.onEnterFrame = function(){<br /> if((this.hitTest(_xmouse, _ymouse, true) == true)  &&  <br />(inside == false) &&<br />(animation == false)){<br />  inside = true;<br /> Panel.gotoAndPlay("Open");<br /> }else if((this.hitTest(_xmouse, _ymouse, true) == false) && <br /> (inside == true) &&<br /> (animation == false)){<br />    inside = false;<br /> Panel.gotoAndPlay("Close");<br /> }<br />}


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

Вот сам код панельки (где она выезжает или заезжает). Разбираем его.

stop();<br />Panel.onEnterFrame = function(){<br /> if((this.hitTest(_xmouse, _ymouse, true) == true)  &&  <br />(inside == false) &&<br />(animation == false)){<br />  inside = true;<br /> Panel.gotoAndPlay("Open");<br /> }else if((this.hitTest(_xmouse, _ymouse, true) == false) && <br />(inside == true) &&<br />(animation == false)){<br />            inside = false;<br /> Panel.gotoAndPlay("Close");<br /> }<br />}


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)

Здесь исходники:

Нажмите для скачивания tutor.rar!
Название: tutor.rar
Размер: 14.43 Kb


Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.