SWFAddress — это библиотека Javascript / ActionScript, которая дает вам возможность изменять URL-адрес браузера, добавлять записи в его список истории и запускать события ActionScript при изменении URL-адреса. Это также позволяет поисковым системам находить определенный контент на вашем сайте. Это все функциональные возможности, которые, по словам его создателей, отсутствуют в современных богатых веб-технологиях.
Давайте взглянем..
Фон
Прежде чем мы перейдем непосредственно к коду, мы рассмотрим, что такое SWFAddress и как нам нужно настроить наш рабочий процесс для его использования. По сути, SWFAddress — это библиотека javascript / ActionScript, которая дает вам возможность изменять URL-адрес браузера, добавлять записи в его список истории и запускать события ActionScript, когда браузер меняет свой URL-адрес. SWFAddress будет прослушивать определенные события браузера (изменения URL) и сигнализировать своему аналогу ActionScript, чтобы инициировать определенные события. Класс ActionScript также предоставляет нам простой в использовании API для управления различными действиями браузера (т. Е. Изменение URL-адреса, изменение заголовка страницы).
Сайты адресов SWFA отличаются от некоторых традиционных сайтов тем, что логика навигации должна основываться на строках и иметь центральное соединение. Для многих сайтов на основе флеш-памяти характерна уникальная функция, прикрепленная к каждому элементу навигации. Например, первая кнопка может вызвать функцию showPage1 (), а вторая — функцию showPage2 () и т. Д. На странице SWFAddress каждый элемент навигации будет вызывать одну и ту же функцию, а именно ту, которая инструктирует SWFAddress изменить URL-адрес.
SWFAddress также будет одновременно запускать событие изменения, после чего вам нужно будет оценить текущий URL и решить, какое действие предпринять. Как только вы освоитесь с этим различием, вы обнаружите, что SWFAddress создает небольшое сопротивление вашему обычному рабочему процессу. Фактически, многие разработчики уже используют подобную навигационную архитектуру на своих сайтах, не относящихся к SWFA.
Этот урок начнется с создания базовой страницы с 4 элементами навигации. Затем мы добавим SWFAddress в микс, чтобы дать нам поддержку с глубокими ссылками. Наконец, для опытных пользователей мы поменяем наше статическое меню / текст и используем внешний XML-файл для предоставления контента.
Шаг 1: Настройка рабочего пространства
Наш веб-сайт с поддержкой SWFAddress будет состоять из нескольких ключевых файлов. Нам понадобится наш основной FLA, SWF-файл, который он компилирует, HTML-страница, библиотеки SWFAddress .as, библиотеки SWFAddress .js и библиотеки SWFObject (библиотеки javascript находятся в папках swfaddress и swfobject).
Шаг 2: HTML-файл
Наша HTML-страница является базовой динамической вставкой SWFObject со строкой SWFAddress. Мы не будем углубляться в это, так как HTML и js выходят за рамки этого руководства. Достаточно сказать, что единственная разница между типичным HTML-шаблоном SWFObject и HTML-кодом в строке № 7 (см. Строку, выделенную синим цветом).
Шаг 3: Базовая настройка FLA
Теперь, когда исходные файлы готовы, мы начнем создавать наш FLA. Создайте новый документ AS3, установите его размеры 600 х 400 пикселей, затем сохраните его в каталоге проекта как «tutorial.fla». Мы также установим цвет фона на # 999999, чтобы он выглядел менее скучным.
Шаг 4: Массив пунктов меню
Для этого урока мы собираемся создать массив для хранения пунктов нашего меню. Это облегчит включение меню на основе XML на более поздний срок, если вы хотите. Мы начнем с создания нового слоя на временной шкале, который мы назовем «действия». Затем мы откроем панель действий (с выбранным слоем) и используем следующий код:
|
1
|
var menuArray:Array = new Array(«Home», «About Us», «Services», «Contact Us»);
|
Это должно выглядеть примерно так:
Шаг 5: Рисование держателя меню
Теперь мы собираемся начать делать меню. Мы создадим новый слой (назовем его «меню») и начнем с рисования простого прямоугольника размером 400 х 50 пикселей с радиусом угла 2 пикселя на новом слое. Цвет не важен, потому что мы настроим его позже.
Шаг 6: Преобразование меню в мувиклип
Теперь мы выберем меню и нажмем F8, чтобы преобразовать его в мувиклип. Мы дадим ему библиотечный идентификатор «menu» и имя экземпляра «menuHolder».
Шаг 7: Создание фона меню
Дважды щелкните по вновь созданному мувиклипу меню, чтобы войти в режим редактирования. Мы выберем фигуру внутри и снова конвертируем ее в видеоклип (F8). Однако на этот раз мы будем применять к нему сетку масштабирования с 9 срезами. Мы делаем это, чтобы у нас был фон для меню, которое мы можем масштабировать без необходимости масштабировать само меню. Мы дадим ему библиотеку и имя экземпляра «menubg».
Я также добавил немного синего свечения в меню, используя фильтр свечения с размытостью и размытием, установленными на 6, силой, установленной на 50%, и цветом, установленным на # 32CCFF.
Шаг 8: Рисование пунктов меню
Теперь вернемся к основному документу и начнем создавать фактические пункты меню (т. Е. «Ссылки», которые будут заполнять меню). Хотя мы рисуем их в основном документе, мы можем нарисовать их где угодно, так как они будут динамически добавлены на сцену позже. Сначала мы создадим текстовое поле, зададим его динамическим и дадим ему имя экземпляра «txt». Мы установим шрифт Arial, размер — 22 пункта, а цвет — белый #ffffff. Убедитесь, что текстовое поле недоступно для выбора (первая кнопка под выпадающим меню сглаживания). Наконец, мы вставим шрифт. Вы можете использовать любой шрифт, который вам нравится, но вам нужно помнить, чтобы настроить размер шрифта так, чтобы он соответствовал высоте меню.
Шаг 9: Экспорт пунктов меню для ActionScript
Теперь мы преобразуем пункты меню в фрагменты ролика, но нам нужно будет сделать дополнительный шаг, поскольку мы снова будем использовать этот фрагмент ролика в нашем ActionScript. Выберите текстовое поле и нажмите F8, чтобы открыть диалоговое окно мувиклипа, введите «menuItem» в поле имени, затем установите флажок «Экспорт для ActionScript». Когда закончите, нажмите OK, затем снова нажмите OK в следующем диалоговом окне подтверждения (оно может не отображаться в зависимости от ваших настроек).
Шаг 10: Создание пунктов меню (ActionScript)
Мы будем использовать следующий код для заполнения меню соответствующими пунктами меню:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
var xval = 20;
for (var i:int = 0; i<menuArray.length; i++){
var clip = new menuItem
clip.txt.autoSize = ‘left’
clip.txt.text = menuArray[i]
clip.x = xval
clip.y = (menuHolder.height/2) — (clip.height/2)
xval += clip.width + 30
menuHolder.addChild(clip);
}
menuHolder.menubg.width = menuHolder.width + 20;
menuHolder.x = (stage.stageWidth/2) — (menuHolder.width/2)
|
По сути, мы перебираем элементы нашего массива и для каждого элемента создаем новый экземпляр menuItem. Затем мы устанавливаем текстовое поле внутри пункта меню на «autoSize = left», чтобы оно расширялось, чтобы соответствовать тексту, который находится внутри него. Следующая строка устанавливает текст внутри текстового поля в соответствии с элементом массива, который соответствует текущей итерации цикла. xval — переменная, которую мы используем, которая хранит положение пункта меню, чтобы мы могли разместить их рядом друг с другом. Затем мы центрируем пункт меню в меню и, наконец, добавляем ширину пункта меню и значение отступа в xval. Далее мы добавляем пункт меню в menuHolder. Последние 2 строки кода заставляют фон menuHolder растягиваться, чтобы заполнить держатель меню (мы добавляем 20px для заполнения) и центрировать меню на сцене.
Шаг 11: Создание области содержимого
Прежде чем мы перейдем к назначению действий для пунктов меню и настройке SWFAddress, нам нужно создать некоторый контент для отображения. Для простоты мы будем использовать стандартный движок анимации вспышки. Создайте новый слой с именем content. На этом слое создайте прямоугольник размером 500 x 250 пикселей и преобразуйте его в мувиклип с именем экземпляра «content».
Шаг 12: Добавление текстового поля в область содержимого
Теперь, когда мы создали область содержимого, мы дважды щелкнем по ней, чтобы войти в режим редактирования и поместить в нее динамическое текстовое поле. Это текстовое поле должно быть почти таким же большим, как фрагмент контента. Мы будем использовать те же настройки текста, что и в меню (arial 22pt, белый) со встроенными шрифтами. Мы дадим ему имя экземпляра txt и изменим поведение (в настройках абзаца) на многострочное.
Шаг 13: Создание контента
Теперь давайте создадим некоторый контент, которым мы можем заполнить область контента при выборе пунктов меню. Для простоты мы просто создадим 4 разные строковые переменные, но на более продвинутом сайте вы, вероятно, замените это каким-нибудь внешним источником данных. Добавьте следующие 4 переменные в наш код ActionScript:
|
1
2
3
4
|
var text1:String = «This is the text for the Home page»
var text2:String = «Here is the text that you would see on the About Us page»
var text3:String = «This page would feature the various services we provide»
var text4:String = «These are the various methods you can get in contact with us. You will also find a map here»
|
Вы можете разместить их в верхней части кода.
Шаг 14: Создание функции изменения текстового поля
Теперь мы создадим простую функцию, которая изменяет содержимое текстового поля и анимирует переход. Вставьте следующий код, и мы будем исследовать его построчно:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
import fl.transitions.Tween;
import fl.transitions.easing.*;
var cTween:Tween = new Tween(content, «x», Regular.easeOut, 50, 50, .1,true);
var mainText:String
function textChange(){
cTween.continueTo(-800, .4);
cTween.addEventListener(«motionFinish», setText)
}
function setText(e:Event){
content.txt.text = mainText
cTween.continueTo(50,.4)
}
|
Первые 2 строки просто импортируют класс анимации и функции замедления. Следующая строка инициализирует анимацию движения, чтобы нам было проще манипулировать ею с помощью функции continueTo. 4-я строка создает переменную, которая содержит текущую строку, эта переменная будет установлена SWFAddress, и область содержимого будет загружать эту переменную в свое текстовое поле всякий раз, когда она возвращается в положение. Функция textChange смещает область содержимого в сторону и устанавливает прослушиватель событий для запуска функции setText по завершении. Функция setText перестраивает область содержимого обратно на сцену и устанавливает в ее текстовое поле значение mainText, установленное SWFAddress.
Шаг 15: Инициализация SWFAddress
Чтобы инициализировать SWFAddress, нам просто нужно добавить его событие CHANGE и создать обработчик этого события. Эти несколько строк кода сделают это;
|
1
2
3
4
5
|
SWFAddress.addEventListener(SWFAddressEvent.CHANGE, addressChange)
function addressChange(e:Event){
//stuff to do when address changes
}
|
Функция addressChange будет запускаться каждый раз, когда браузер изменяет URL-адрес (с помощью кнопок «назад» / «вперед», перезаписывает URL-адрес адресной строки или любым другим способом) или вы изменяете URL-адрес (с помощью функции SWFAddress.setValue).
Шаг 16: Добавление действий в пункты меню
Наш следующий шаг — добавить некоторое поведение к кнопкам меню, которые мы создали ранее. Мы сделаем это, вернувшись к циклу создания меню, который мы создали ранее.
|
01
02
03
04
05
06
07
08
09
10
11
12
|
var xval = 20
for (var i:int = 0; i<menuArray.length; i++){
var clip = new menuItem
clip.txt.autoSize = ‘left’
clip.txt.text = menuArray[i]
clip.x = xval
clip.y = (menuHolder.height/2) — (clip.height/2)
xval += clip.width + 30
menuHolder.addChild(clip);
clip.addEventListener(‘click’, menuClicked)
}
|
Последняя строка перед закрывающей скобкой — это та, которую мы должны добавить. Он создает событие в элементах меню, которое срабатывает при нажатии на элемент меню. Теперь нам нужно добавить соответствующий обработчик событий.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
var xval = 20;
for (var i:int = 0; i<menuArray.length; i++){
var clip = new menuItem
clip.txt.autoSize = ‘left’
clip.txt.text = menuArray[i]
clip.x = xval
clip.y = (menuHolder.height/2) — (clip.height/2)
xval += clip.width + 30
menuHolder.addChild(clip);
clip.addEventListener(‘click’, menuClicked)
}
function menuClicked(e:Event){
SWFAddress.setValue(e.currentTarget.txt.text)
}
|
Последние три строки кода, которые мы добавили, выполняются каждый раз при нажатии на пункт меню. Он инструктирует SWFAddress выполнить функцию setValue, которая изменяет страницу и запускает обработчик события CHANGE. Параметр, который мы передаем в функцию setValue, представляет собой текст пункта меню, по которому щелкнул пользователь.
На этом этапе, если мы загрузим файлы на наш веб-сервер и протестируем файл HTML, при нажатии кнопок будет изменяться URL-адрес, но файл ничего не будет делать, поскольку мы не сказали SWFAddress, что делать, когда адрес меняется.
Шаг 17: Действия SWFAddress
Теперь у нас настроено меню, и кнопки меню правильно запускают SWFAddress. Последняя часть уравнения — сообщить SWFAddress, что делать, когда он срабатывает. Ранее в руководстве (шаг 15) мы создали прослушиватель и обработчик событий SWFAddress. Мы вернемся к этому блоку кода и добавим следующее:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
SWFAddress.addEventListener(SWFAddressEvent.CHANGE, addressChange)
function addressChange(e:Event){
if(SWFAddress.getValue() == «/Home»){
mainText = text1
textChange()
}
if(SWFAddress.getValue() == «/About Us»){
mainText = text2
textChange()
}
if(SWFAddress.getValue() == «/Services»){
mainText = text3
textChange()
}
if(SWFAddress.getValue() == «/Contact Us»){
mainText = text4
textChange()
}
SWFAddress.setTitle(SWFAddress.getValue());
}
|
Основным отличием является весь код внутри функции addressChange. Мы создали несколько условных операторов, которые проверяют текущую страницу, задали для «mainText» соответствующий текст, а затем запустили функцию «textChange», которая отвечает за анимацию перехода и настройку текста области содержимого. Последняя строка устанавливает HTML-заголовок страницы для текущей страницы. Эту функцию можно очистить с помощью переключателя, но для простоты мы оставим все как есть.
Шаг 18: Все готово
Теперь ваши файлы должны совпадать с файлами в исходных файлах . Опубликуйте FLA, загрузите файлы на свой сервер, и теперь у вас будет полнофункциональная страница.
Вывод
Мы завершили нашу простую страницу с поддержкой SWFAddress. Этот файл должен служить подходящей базой для любого сайта SWFAddress и может быть легко расширен динамическим контентом с минимальным дополнительным кодом. Я надеюсь, вам понравилось следовать за ним!