• Авторизация


Урок. Sothink SWF Quicker 5.0 25-10-2011 19:42 к комментариям - к полной версии - понравилось!

Это цитата сообщения MissKcu Оригинальное сообщение



 

Вращающееся меню.

На сегодняшнем уроке мы рассмотрим, как создается так называемое вращающееся меню. Итак приступим:

Открываем новый документ, и устанавливаем размеры сцены 621х256 пикселей. Вы можете задать другие размеры, но тогда пересчитайте размеры кнопок. Мы создадим  6 кнопок с размерами 100х250 пикселей с расстоянием между ними в 3 пиксела. Оставшаяся часть будет занята рамкой по периметру. Установим частоту 40 кадров в секунду, и выберите цвет фона #990000 (можно задать свои значения).Вот такая картинка должна у нас получиться к концу урока на рабочем холсте:

Создайте сразу  8 слоев, и назовите их примерно так как на следующем рисунке (не обязательно, но чтобы не запутаться):

Дальше нам необходимо создать шесть мувиклипов и шесть невидимых кнопок ( InvisibleButton). 

1. Нажимаем клавиши Ctrl +F8, или в меню Insert выбираем команду New Symbol. В появившемся окне выбираем:

Перемещаемся в окно редактирования символов.

2. Создайте три слоя. В первом слое инструментом Прямоугольник (R) нарисуйте прямоугольник с размерами 100х250 пикселей, предварительно выбрав на панели Shape  допустим ярко-зеленый цвет #00FF00.

3. Сделайте ключевым 20 кадр в первом слое.

Задайте с помощью инструмента Paint Bucket (K)в двадцатом кадре цвет прямоугольника синим (#0000FF)

Перейдите снова на первый кадр, и на панели свойств в поле Tween, выберите Shape.


Как только вы это проделаете цвет полоски в первом слое изменится на зеленый, и от первого кадра к двадцатому появится стрелка (смотри рисунок ниже):

4. Переходим во второй слой, и выбираем инструмент «Текст» (Т).
В первом кадре пишем слово к примеру ГЛАВНАЯ. Шрифт можете выбрать любой. Я в своем примере использовал Arial с  размером 13, красного цвета. Выравниваем текст примерно посередине будующей кнопки:

Переходим на панель Transform, и в поле Skew Horizontal выставляем значение 90 градусов.

Сразу же наш текст примет вертикальное положение и сместится. Отцентрируйте его, как на рисунке ниже:

Сделайте десятый кадр второго слоя ключевым(для этого щелкните на нем левой клавишей мыши и нажмите клавишу F6), и на панели Transform измените значение в поле Skew Horizontaly на ноль. Снова наш текст примет горизонтальное положение и сместится. Проделайте то же самое, что и в предыдущем шаге:

Перейдите в первый кадр второго слоя, или на любом кадре между первым и десятым щелкните правой кнопкой мыши и из списка выберите команду Create  Motion Tween (см рисунок)

От первого кадра к десятому протянется стрелка. Затем перейдите в 20 кадр второго слоя, и сделайте его ключевым. Переместите текст выше, почти к самому верху, снова перейдите в 10 кадр (или щелкните на любом кадре между 10-м и 20-м) и примените команду Create  Motion Tween. Вот, как к этому времени должна выглядеть временная шкала:

Переходим в третий слой, и делаем в нем 20 кадр ключевым. Переключаемся на панель Action и вставляем следуюший код в этот кадр:

stop();

В программе имеется специальный мастер вставки кода простейших, наиболее часто используемых команд. Посмотрите как им воспользоваться:


На этом этап создания мувиклипа закончен, и переходим к следующему этапу.

5. Нам необходимо создать невидимую кнопку. Нажимаем клавиши Ctrl +F8, или в меню Insert выбираем команду NewSymbol. В появившемся окне выбираем на этот раз Button:

Для упрощения, и повторного использования предварительно создайте с помощью инструмента «Прямоугольник» графический символ (выбрав в этом окне Graphis) размерами 100х250 пикселей, любого цвета. Задайте ему координаты х = 0, и у =0. Я в своем примере нарисовал его светло голубого цвета. Смотри рисунок ниже:

Вот, с помощью этого графического символа, мы и будем создавать невидимые кнопки (InvisibleButton)
Итак, дважды щелените в панели библиотеки по значку созданного нами  символа кнопки: 

Откроется окно его редактирования. Создайте поочередно в кадрах UpOverDownHit четыре пустых ключевых кадра. Первые три мы так и поставим пустыми. А вот в последний кадр вставим созданный нами графический символ. Вот, как это будет  выглядеть на временной шкале:

На этом этапы создания необходимых символов завершены, и переходим в основную сцену, щелкнув вот по этому значку:

6. Зажав левую кнопку мыши, перемещаем из библиотеки на сцену, в первый слой с названием Меню, созданный нами мувиклип, который будет имитировать кнопку «ГЛАВНАЯ». Позиционируем его на панели Transforn следующим образом:

Примечание:

В конце урока я приведу координаты для всех мувиклипов в виде таблицы. Естественно, если Вы выберите другие размеры кнопок, то необходимо будет все пересчитать, с учетом Ваших размеров.

И присваиваем ему в поле Name имя button1 (смотри рисунок ниже)

 

 

 

Теперь перемещаемся во второй слой с названием InvisibleButton 1, захватываем левой кнопкой мыши созданную нами невидимую кнопку, помещаем её на сцену, и позиционируем с теми же координатами, что и мувиклип. Цвет изменится на более тёмный:

Т.е. фактически мы поместили нашу невидимую кнопку поверх мувиклипа.

Теперь необходимо, при неснятом выделении кнопки, добавить к ней на панели Action следующий код:

on (rollOver)
{
_root.mouse_over_button1 = true;
}
on (rollOut)
{
_root.mouse_over_button1 = fstartlse;
}
on (release)
{
getURL("/", "blank");
}

Я, в уроке вставил URL в виде "/", но Вы вставьте тот, который Вам будет нужен. Так же можете использовать другие значения для параметров открытия страницы.

7. Создайте аналогично шагам 2-7 остальные пять кнопок, с названиями меню, которые сочтете нужным. При помещении мувиклипов на первый слой ( а именно там все шесть мувиклипов должны располагаться), присвойте им соответственно имена button1, button2, button3, button4, button5, button6. А вот, невидимые кнопки помещайте каждую, на отдельный слой, и в коде изменяйте порядковые номера. Например для второй кнопки это будет выглядеть так:

on (rollOver)
{
_root.mouse_over_button2 = true;
}
on (rollOut)
{
_root.mouse_over_button2 = fstartlse;
}
on (release)
{
getURL("/", "blank");
}

И так для всех остальных.

8. И последний этап. Переходим в самый верхний слой, с названием Action Layer, и вставляем в первом кадре такой код:

_root.button1.onEnterFrame = function ()
{
if (!mouse_over_button1)
{
_root.button1.prevFrame();
}
else
{
_root.button1.nextFrame();
} // end else if
};
_root.button2.onEnterFrame = function ()
{
if (!mouse_over_button2)
{
_root.button2.prevFrame();
}
else
{
_root.button2.nextFrame();
} // end else if
};
_root.button3.onEnterFrame = function ()
{
if (!mouse_over_button3)
{
_root.button3.prevFrame();
}
else
{
_root.button3.nextFrame();
} // end else if
};
_root.button4.onEnterFrame = function ()
{
if (!mouse_over_button4)
{
_root.button4.prevFrame();
}
else
{
_root.button4.nextFrame();
} // end else if
};
_root.button5.onEnterFrame = function ()
{
if (!mouse_over_button5)
{
_root.button5.prevFrame();
}
else
{
_root.button5.nextFrame();
} // end else if
};
_root.button6.onEnterFrame = function ()
{
if (!mouse_over_button6)
{
_root.button6.prevFrame();
}
else
{
_root.button6.nextFrame();
} // end else if

};

Нажимаем клавишу F12 и смотрим результат.

Урок наверно получился немного большим, но я постарался изложить всё достаточно подробно. Если у кого-то остались вопросы скачайте исходник в формате sgf для просмотра и сверки. А пока смотрим, то что получилось. Наводите курсор поочередно на каждое меню.


Скачать исходник 
в архиве rar 3 kb

Таблица координат для кнопок

 

Координаты для кнопок

позиция

1

2

3

4

5

6

X

53

156

259

362

465

568

Y

127

127

127

127

127

127

 

 

вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник Урок. Sothink SWF Quicker 5.0 | Нэллочка - Дневник Нэллочка | Лента друзей Нэллочка / Полная версия Добавить в друзья Страницы: раньше»