 |
На заметку |
| Установите на своем сайте нашу кнопку: |
|
Перетаскивание свободно позиционируемого элемента ( Drag Layer )
Мы уже говорили об анимированных элементах страницы. Однако вы можете предоставить возможность пользователю самому перетаскивать свободно позиционируемые элементы по странице. Это может быть полезно, если вы делаете интерактивную игру, наподобие головоломки, учебное пособие или полноценную программу в виде Web -страницы.
Поведение Drag Layer , реализующее перетаскивание свободных элементов, привязывается к событию onLoad тега < body >. Выберите одноименный пункт меню поведений; на экране появится диалоговое окно Drag Layer .
В раскрывающемся списке Layer выбирается свободный элемент, который вы хотите позволить посетителю перемещать.
Вы можете выбрать офаниченное или неофаниченное движение выбранного свободного элемента. Это делается с помощью раскрывающегося списка Movement . Пункт Unconstrained задает неофаниченное движение; в этом случае свободный элемент может перемещаться посетителем куда угодно. Пункт Constrained списка задает офаниченное движение; в этом случае свободный элемент может двигаться в пределах прямоугольной области, чьи размеры задаются с помощью набора полей ввода, которые в этом случае появятся правее списка Movement :
Up — задает вертикальную координату верхней фаницы области в пикселах;
Down — вертикальную координату нижней фаницы;
Left — горизонтальную координату левой фаницы;
Right — горизонтальную координату правой фаницы.
Вы также можете предусмотреть некую точку на странице, куда будет "стремиться" перемещаемый свободный элемент. Координаты этой точки задаются в пикселах в полях ввода фуппы Drop Target : Left (горизонтальная) и Тор (вертикальная). Нажатие кнопки Get Current Position позволит вам поместить в эти поля ввода текущие координаты свободного элемента. В поле ввода Snap if Within ... Pixels of Drop Target задается расстояние в пикселах
до вышеуказанной точки, при достижении которого перемещаемый элемент сам "приклеивается" к ней. Выше мы рассмотрели элементы управления, находящиеся на вкладке Basic диалогового окна Drag Layer . Если вы делаете простейшую головоломку, их вам будет достаточно. Если же хотите большего, переключитесь на вкладку Advanced .По умолчанию, чтобы перетащить свободный элемент на другое место, посетитель должен "ухватиться" мышью за любое его место. С помощью раскрывающегося списка Drag Handle и набора полей ввода правее его вы можете задать ограниченную прямоугольную область внутри этого элемента, за которую его можно будет таскать. Для этого выберите в данном списке пункт Area Within Layer и введите в поля ввода соответствующие координаты:
в поле ввода L — горизонтальную координату левой границы области в пикселах;
Т — вертикальную координату верхней границы;
W — ширину области;
Н — высоту области.
Чтобы задать поведение по умолчанию, выберите пункт Entire Layer раскрывающегося списка Drag Handle .
С помощью флажка While Dragging и раскрывающегося списка Bring Layer to Front , then вы можете задать поведение свободного элемента при перетаскивании. Если включен флажок While Dragging , перетаскиваемый элемент будет находиться над всеми остальными свободными элементами, имеющимися на странице. При этом если в раскрывающемся списке Bring Layer to Front , then выбран пункт Leave on Top , то этот элемент так и останется "наверху" после отпускания, а если выбран пункт Restore z - index , то он будет помещен на ту же позицию в порядке перекрытия, на которой находился до начала перетаскивания.
В поле ввода Call JavaScript вы можете ввести строку JavaScript -кода, например вызов написанной ранее функции, которая будет вызываться периодически во время перетаскивания элемента по странице. Этот код может, например, показывать координаты элемента в строке статуса окна Web -обозревателя.
В поле ввода When Dropped : Call JavaScript вы можете ввести строку JavaScript -кода, которая будет вызвана после отпускания элемента. При этом если включен флажок Only if snapped , этот код будет вызван только тогда, когда перетаскиваемый элемент "приклеится" к конечной точке, чьи координаты были заданы на вкладке Basic диалогового окна Drag Layer .
Задав нужные параметры, нажмите кнопку ОК.
Переход на заданный кадр анимации ( Go To Timeline Frame )
При создании анимации на Web -страницах иногда бывает очень полезно "перескочить" на заданный кадр анимационной дорожки. Например, вы можете создать гиперссылку или кнопку, позволяющую посетителю сайта "перемотать" анимацию в начало. Или ваша анимация может состоять из нескольких фрагментов, и вы хотите дать посетителю возможность просмотреть каждый из этих фрагментов отдельно, для чего также предусмотрели несколько кнопок. Да и мало ли может быть случаев, когда такое может понадобиться!
Для таких случаев Dreamweaver предусматривает поведение go to Timeline Frame . Выберите одноименный пункт в подменю Timeline меню поведений. На экране появится диалоговое окно Go To Timeline Frame .
Прежде чем задать кадр анимации, нужно выбрать саму анимацию. Это делается в раскрывающемся списке Timeline . Номер же кадра вводится в поле ввода Go to Frame . После этого остается только нажать кнопку ОК.
Вы, наверно, удивились, почему мы не рассмотрели поле ввода Loop . . . times . Потерпите, о нем еще будет рассказано, когда мы будем рассматривать специальные случаи создания поведений. Это будет ближе к концу главы.
Переход на другую Web - страницу ( Go to URL )
Иногда бывает нужно загрузить в текущем окне Web -обозревателя другую страницу, не дожидаясь, пока это сделает посетитель. Для таких случаев Dreamweaver предлагает поведение go to Url . Выберите в меню поведений соответствующий пункт; на экране появится диалоговое окно Go To UR . Сам интернет-адрес задается в поле ввода URL . Вы также можете нажать кнопку Browse и выбрать нужную страницу в диалоговом окне Select File .
В списке Open In задается фрейм, в котором будет открыта новая страница. Если ваша страница не представляет собой набор фреймов, в этом списке будет присутствовать единственный пункт Main Window (все окно), как в нашем случае.
Задав нужные параметры, нажмите кнопку ОК.
Скрытие меню гиперссылок ( Hide Pop - Up Menu )
Это поведение скрывает выведенное ранее на экран меню гиперссылок (о создании меню гиперссылок см. ниже). Как правило, Dreamweaver создает его сам, но иногда вам придется делать это самим.
После выбора в меню поведений пункта Hide Pop - Up Menu на экране появится небольшое окно-предупреждение. Закройте его, нажав кнопку ОК. На этом создание поведения Hide Pop - Up Menu закончено. Никаких параметров оно не имеет.
Нажатие кнопки Cancel вышеупомянутого окна-предупреждения позволит вам отказаться от создания поведения Hide Pop - up Menu .
Открытие нового окна Web - обозревателя ( Open Browser Window )
Это поведение аналогично поведению go to url за тем исключением, что оно открывает новую страницу в новом окне Web -обозревателя. При этом оно позволяет задать различные параметры нового окна: размеры, наличие инструментария и строки статуса и т. п.
Выберите в меню поведений пункт Open Browser Window . На экране появится диалоговое окно Open Browser Window . В поле ввода URL to Display задается интернет-адрес страницы, которая будет показана в новом окне. Вы можете нажать кнопку Browse и выбрать нужную страницу в диалоговом окне Select File .
В полях ввода Window Width и Window Height задаются соответственно ширина и высота нового окна. Заметьте, что координатами окна управлять вы не можете.
С помощью группы флажков Attributes задаются дополнительные параметры нового окна:
Navigation Toolbar — включает или отключает наличие у нового окна главного инструментария с кнопками Вперед ( Forward ), Назад ( Back ),Остановить ( Stop ) и Обновить ( Reload );
Location Toolbar — включает или отключает наличие у нового окна инструментария с полем ввода интернет-адреса;
Status Bar — включает или отключает наличие у нового окна строки статуса;
Menu Bar — включает или отключает наличие у нового окна системного меню;
Scrollbars as Needed — разрешает или запрещает появление у нового окна полос прокрутки, если его содержимое в нем не помещается;
Resize Handles — разрешает или запрещает пользователю изменять размеры нового окна.
Имейте в виду, что если вы не задали размеров окна, то новое окно будя иметь случайные размеры и полный набор параметров, перечисленных ше (т. е. оба инструментария, строку статуса и т. д.). Если же вы зададите размеры, то новое окно, наоборот, не будет иметь ни одного из этих атрибутов, поэтому вам самим придется задавать нужные параметры, включая соответствующие флажки группы Attributes .
В поле ввода Window Name задается имя создаваемого окна. Впоследствии вы можете использовать это имя, например, при создании поведения go to Url для вывода в нем новой Web -страницы.
Кнопка ОК диалогового окна сохраняет сделанные вами установки, а кнопка Cancel — отменяет их.
Проигрывание аудиоклипа ( Play Sound )
В свете последних тенденций к наполнению Интернета мультимедийной информацией Dreamweaver предоставляет вам возможность в ответ на какое-либо событие проиграть аудиоклип с помощью поведения Play Sound . Для этого выберите пункт Play Sound меню поведений. После этого на экране появится диалоговое окно Play Sound .
Это диалоговое окно содержит одно-единственное поле ввода Play Sound , предназначенное для ввода имени аудиофайла, который будет проигран. Вы также можете нажать кнопку Browse и выбрать нужный файл в диалоговом окне Select File . После этого нажмите кнопку ОК.
Запуск проигрывания анимации ( Play Timeline
Конечно же, Dreamweaver предоставляет специальные поведения для управления проигрыванием анимации в ответ на какое-либо событие. Это реализуется с помощью поведения Play Timeline . Одноименный пункт для создания этого поведения находится в подменю Timeline меню поведений.
Оно содержит один-единственный раскрывающийся список, называющийся Play Timeline . В нем выбирается анимация, которую нужно проиграть, после чего нажимается кнопка ОК. Как видите, все очень просто.
|
