Уроки Flash: Інтерфейс таб-меню вебсайта, Програми для роботи з графікою, Програмні керівництва, статті

У цьому уроці ви навчитеся, як створити один з найбільш широко використовуваних інтерфейсів навігації сайту – таб-меню.
На початку проектування клікніть по табам меню в двох прикладах, наведених нижче, щоб подивитися, в якому напрямку ви будете працювати.



 



Отрісовка основи шейп таба

1 Відкрийте новий flash документ (сподіваюся, це звучить для вас зараз звично. Якщо ви працюєте в Flash MX 2004 або Flash 8, виберіть File> Publish Settings. Клацніть по вкладці Flash, і виберіть Flash Player 8 в меню версій, потім виберіть ActionScript 2.0 в меню версій ActionScript. Клацніть OK.

2 Виберіть Rectangle tool ®. Заблокуйте колір Stroke на панелі інструментів для Color, якшо за середньою маленькій іконі внизу.


55 Поверніться на основну сцену. В панелі Properties, введіть інстанси ім’я для цього муві кліпу: contents. Перевірте, чи правильно ви ввели це ім’я: contens, не content! Ви можете взяти будь-яке інше ім’я, але це ім’я ми будемо використовувати в коді ActionScript. Заблокуйте цей шар.

Створення роботи меню засобами ActionScript

56 Створіть новий шар і назвіть його Actions. Клацніть в першому кадрі цього шару, щоб виділити його, та натисніть F9 для відкриття панелі Actions.

Введіть наступний код ActionScript в панелі Actions:







Code



contents.stop();
numberOfTabs = 4;
for (i=1; i<=numberOfTabs; i++) {
line = eval(“tab”+i);
line.onRelease = function() {
for (i=1; i<=numberOfTabs; i++) {
otherTabs = eval(“this._parent.tab”+i);
otherTabs.bottomLine._visible = true;
}
this.bottomLine._visible = false;
contentFrame = Number(this._name.substr(3, 1));
this._parent.contents.gotoAndStop(contentFrame);
}
}
tab1.bottomLine._visible = false;


Протестуйте ваш мувік (Ctrl + Enter) і клікайте по табам! При кліці по них, вони будуть показувати різне вміст сайту!

Подальше пояснення коду ActionScript для меню

Тепер дозвольте мені пояснити вам, як працює в дійсності це стильне таб-меню!

Перший рядок зупиняє муві кліп site content і не дає йому програватися.
 







Code



contents.stop();

 

Потім у вас є змінна, названа numberOfTabs, яка містить інформацію про кількість табів у вашому меню. Ця інформація буде використовуватися моментально.







Code



numberOfTabs = 4;

 

Тепер йдемо в основний цикл. Цей цикл повторюється стільки разів, скільки є табів. Це робиться для того, щоб привласнити дії кожного табу, яке він повинен виконувати.


Ця частина коду i <= numberOfTabs означає, що цикл буде повторюватися кілька разів, в залежності від i, яка стартує зі значення 1, вона повинна бути менше або дорівнює кількості табів. Отже, коли i доходить до 4 (тут 4 - у цьому прикладі, я маю на увазі, що це значення може бути будь-яким числом, який ви йому присвоїти - залежно від кількості табів, які у вас є у вашому меню), воно дорівнює значенням numberOfTabs і це число повторів в циклі. i + + - це оператор для збільшення (increase - на жаргоні програмування) i збільшується на 1 для кожної ітерації (повторення).







Code


for (i=1; i<=numberOfTabs; i++) {


Добре, що всередині цього циклу? Перший рядок коду написана, щоб полегшити деякі речі. Тут зберігається значення в змінну line. Це значення – інстанси ім’я кожного муві кліпу – таба у вашому меню.
 







Code


line = eval(“tab”+i);



 

Отже, коли, скажімо, цикл повторюється вдруге, результатом маленької операції у круглих дужках (“tab” + i) буде tab2. Функція eval тут – щоб Flash знав, що ви посилаєтеся на інстанси ім’я муві кліпу, а не на просту частину тексту.

Таким чином, звідси випливає, що змінна line є посиланням на мувік-таб для поточної ітерації основного циклу.

Отже, наступна рядок,







Code



line.onRelease = function() {


буде прочитана Flash як tab3.onRelease … і т.д. Це в тому випадку, коли i досягає 3. Це буде tab4.onRelease … коли i досягає 4, звичайно.

Оператор line.onRelease = function () означає, що функція, яка написана між фігурних дужок {} присвоюється події onRelease для табів. Це означає, що те, що знаходиться між фігурних дужок, буде виконуватися, коли миша натискається і відпускається поверх таба (це стандартний клік миші).

Якщо ви хочете, щоб таб відгукувався негайно, ви повинні брати onPress замість onRelease. Проте, в цьому немає необхідності. Користувачі клацають звичайним чином по табам. Вони не тягнуть миша з них і не роблять ніяких дивних дій з табами. Це друга відмінність між onRelease і onPress не означає багато чого, за винятком Flash-ігор.

Отже, між фігурними дужками – це те, що трапляється, коли клацають таб в меню. І тут другий цикл. Він в точності як перший. Він тут для того, щоб перевірити, що це відбувається для всіх табів.







Code



for (i=1; i<=numberOfTabs; i++) {

Знову у вас змінна (otherTabs), в якій зберігається для кожної ітерації циклу інстанси ім’я кожного відповідного таба.







Code



otherTabs = eval(“this._parent.tab”+i);

 

Цього разу, однак, є відмінність. Інстанси ім’я – результат операції всередині круглих дужок-має інший путь.Скажем, наприклад, що цикл проходить для першого разу. Тому ми отримаємо this._parent.tab1 як результат.


Чому це необхідно? Так як цей цикл – частина події onRelease для табів, це означає, що цей код відноситься до табу. Отже, сказавши this._parent.tab1, ви реально скажете Flash, що батько цього муві-кліпу (This)-це муві-кліп (_parent – в даному випадку – це основна тимчасова шкала або root), має мувік, названий як tab1, розташовується в ньому. Таким чином, звідси, мінлива otherTabs вказує на кожен таб в циклі.

Потім ви говорите, що мувік bottomLine (згадаємо, що це горизонтальна лінія, яку ви конвертували в мувік в кроці 29) буде зроблений видимим. Це зроблено за допомогою встановлення значення властивості _visible для мувіка bottomLine в true.







Code



otherTabs.bottomLine._visible = true;


Що насправді відбувається? Це те, що нижня лінія кожного таба робиться видимою. Чому? Тому що користувач натискає на таб, він виділяється, так що інші лінії табів стають видимими, візуально “посилка” табів до заднього фону.

Тепер лінія таба, який був клацають, робиться невидимою. Це зроблено так, що цей таб виділяється на передній план, приєднуючись до кольорового прямокутнику нижче меню.







Code


this.bottomLine._visible = false;


 

Тепер переходимо до частини, яка створює поява секції сайту, яка асоційована з кликнути табом (home, links, about, і т.д). Це знову запам’ятовується в змінну (contentFrame), це пишемо в наступному коді.







Code


contentFrame = Number(this._name.substr(3, 1));


Але що це за ActionScript після знака присвоєння? Це маленький жахливий монстрик?)) Ні! Насправді все дуже просто.

Частина коду, укладена в кругдих дужках, витягує число з інстанси імені поточного мувіка-таба. Шматок коду this._name означає: інстанси ім’я від this, this – це мувік, до якого цей код застосовується (поточний таб для кожного повторення в циклі). Отже в циклі, наприклад, в його 4-ой ітерації, this._name означатиме tab4.

Після імені переходимо до команди substr. Ця команда витягує частина тексту. Перший номер в круглих дужках – це позиція в тексті, звідки починається витяг. Друга цифра – це кількість символів (букв, цифр, і т.д), які команда повинна витягти.

Отже, це схоже на: давайте візьмемо, скажімо, ім’я tab4. Команда substr починає свій рахунок з 0. Тому третій символ в імені tab4 є останнім – 4. Це той символ, який нам потрібен, тож номер 1 скаже, що тільки один символ буде витягнуто. Іншими словами, немає ніяких символів, які слідують за ним, але добре знати, як функціонує ця команда ActionScript, чи не так?

Далі результат (1, 2, 3 або 4, залежить від ітерації циклу) трансформується командою в число.







Code



Number(this._name.substr(3, 1));


Чому ви повинні зробити його номером? Це вже номер? Зовсім ні. Команда substr витягує текст. А при використанні команди Number ви конвертуєте його в числове значення.

І цей номер потрібен в наступному рядку, де ви скажете мувік contents перестрибнути на кадр його тимчасової шкали. Чи пам’ятаєте ви вміст, який ви створили раніше? Це тут ви змушуєте сайт функціонувати.

Шлях this._parent.contents вказує на мувік contents, який знаходиться на основній тимчасовій шкалі, яка є батьківським мувік для кожного таба (this._parent).







Code



this._parent.contents.gotoAndStop(contentFrame);

Остаточно останній рядок змушує нижню лінію першого таба зникати, виводить його на передній план, у той час як всі інші таби залишаються на задньому плані. Так відбувається тому, що коли користувач відвідує ваш сайт, логічно, що перша секція (home, start або яка інша) висвічується спочатку.







Code



tab1.bottomLine._visible = false;

На додаток скажу, щоб зробити ефектний інтерфейс для вашого сайту, ви вивчили досить багато ActionScript!

 

 

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


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

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

Ваш отзыв

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

*

*