Создание интеркативной карты своей страны в Adobe Flash 3

Mouse (Мышь) — объект, представляющий в сценарии  указатель мыши; он позволяет  управлять видимостью и стилем  указателя;

Key (Клавиатура) — объект, представляющий в сценарии  клавиши, используемые для управления  фильмом;

Color (Цвет) — объект, представляющий в сценарии  палитру клипа и, соответственно, позволяющий изменять эту палитру;

Sound (Звук) - объект, представляющий -в сценарии  звуковой символ, связанный с  кнопкой или клипом;

Stage (Стол) — объект, предназначенный для  управления некоторыми параметрами  стола (в частности, масштабом изображения);

TextField (Текстовое поле) - объект, представляющий  в сценарии динамическое текстовое  поле или поле редактирования;

TextFormat (Формат текста) - объект, позволяющий  управлять из сценария параметрами  шрифта текстового поля.

Между объектами классов Button и MovieClip в ActionScript весьма сложно определить отношения подчиненности: они могут изменяться от одного фильма к другому и даже от одной сцены к другой. Например, i одной сцене кнопка может входить в состав клипа, а в другой — клип может использоваться для «оживления» изображения кнопки, остальные же объекты класса Movie (за исключением Text Field ) можно считать подчиненными по отношению к объектам Button и MovieClip, поскольку могут входить в их состав.

 

 

 

 

4. Панель Actions. Встроенный редактор

 

Панель Actions обеспечивает два режима работы. В обычном режиме (Normal Mode) описание действий выполняется путем заполнения соответствующих полей параметров. В экспертном режиме (Expert Mode) вы можете записывать и корректировать действия непосредственно в окне сценария, работая в нем как в обычном текстовом редакторе. По умолчанию при первом обращении к панели установлен режим Normal Mode. Для того что бы вызвать панель Actions нужно нажать клавишу F9,либой пройти в Windows – Actions.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

5. Интерактивные карты как Flash-приложение

 

«Что такое Интерактивная карта?»

Интерактивная карта - это карта, обладающая функцией взаимодействия с пользователем. Интерактивные карты бывают разных видов.

Развитие технологий за последние 10 лет открыло много путей для создания таких масштабных проектов, предоставляющих очень большой объём информации о нашем мире.

Особенность интерактивных карт в том, что есть возможность управлять всеми данными и влиять на изображение. Это и является их основным преимуществом перед обычными картами.

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

Три самые основные задачи таких карт:

1. Навигация  и направление

2. Показ  отношения и тенденции с географической  стороны

3. Показ  достопримечательностей.

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

Карты на сайте National Geographic могут быть использованы, чтобы показать всему миру тенденции собранных данных. Они включают в себя широкий диапазон информации, например: такой как численность населения, потребление мяса и вырубка лесов.

В будущем интерактивные карты будут отображать ещё и людей, они являются более мобильными, чем кирпич и дорого, в связи с этим разработки ещё не закончены до конца.

Многие программисты ведущих компаний уверены, что карты действительно очень актуальны в нашем современном мире. В связи с этим они ускоренно проводят свои разработки, чтобы включить данные о местоположении. Это должно привести к созданию сайтов, на которых можно будет видеть все движения и перемещения современного мира.

 

 

 

 

 

 

 

 

 

2. Создание интерактивной карты Узбекистана

 

Подготовительный этап.

В соответствии с заданием на проект мною была проделана по подбору нужных иллюстраций, фотографий центральных городов областей Узбекистана.

    

1. Создаю новый документ, размер 1024х742 и 30 кадров в секунду (framerate).
2. Называю единственный слой «Map» и импортирую (Frame>Import>Import to Stage) изображение карты.

 

 

 

3. Используя режим калькирования, обвожу каждую область отдельно, при этом выбираю различные по цвету заливки, чтобы обозначить области.

 

 

 

 

 

4. Затем использую инструмент Text Tool (T), для того, что бы обозначить области и центральные города. Получаем такую карту.

Создание кнопок-городов

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

1. Создаю новый слой и называю его «Buttons». Я использую этот слой для создания первой кнопки и затем копирую её для остальных городов.
2. Беру инструмент Oval Tool и рисую круг в любом месте нашей сцены. Диаметр равен примерно 25px. Пока круг выделен, нажимаю F8 (Convert to Symbol), преобразую в button символ и называю myButton, с точкой регистрации в центре.

 

 

 

 

 

 

 

 

 

 

 

 

3. Создаем кнопку из четырех кадров

 

4. Из библиотеки фильма перетаскиваем на карту и располагаем символ кнопку, создавая при этом экземпляры символа.

 

 

 

 

 

 

 

 

 

 

 

Создание указателя.

1. Проверив, что все существующие слои были закрыты, я создаю новый слой и называю его Marker. Создаю указатель с помощью инструмента Перо и конвертирую его в Movie Clip, и называю myMarker.Точку регистрации устанавливаю на кончик указателя, для того что бы кончик указателя считался опорной точкой. Двойной щелчек на объекте, чтоб войти в режим редактирования. Я подвинул указатель так, что бы кончик его касался знака +. Готово, блокирую слой.

 

 

2. Остаюсь в режиме редактирования, называю единственный слой Marker, и добавляю 4 дополнительных frames (нажимая 4 раза F5). Создаю новый слой и называю его Cities. Добавляю 4 keyframes (пока слой выделен, нажимаю 4 раза F6).

Теперь я импортирую миниатюры для каждого города. Проверяю, чтобы был выделен слой Cities, нажимаю на второй кадр и иду Frame>Import>Import to Stage, выбираю изображение Bukhara. Помещаю миниатюру сверху указателя.

Нажимаю на второй кадр в слое Cities, в Properties Inspector пишу имя bukhara для Frame.

Далее один за одним импортирую изображения городов каждое на следующий кадр слоя Cities, и ставлю миниатюры на место, сверху указателя, как описывалось выше. Затем прописываю имя для каждого кадра соответственно (к примеру: tashkent navoi, nukus и так далее.)

Теперь пишу stop(); для первого кадра. Выделяю первый кадр, открываю панель Action Script (F9) и пишем stop(); Возвращаюсь на основную сцену. Прописываю instance name marker_mc , для movie clip указатель(marker).

Идея интерактивной карты состоит в том, что при наведении указателя на кнопку города всплывает фотография, перенос указателя на следующий город, дает возможность увидеть фотографию следующего города. Это достигается путем написания кода AS.

Создаю новый слой, захожу в панель Action Script (F9). И пишу вот этот код:

CODE

import mx.transitions.Tween; 
import mx.transitions.easing.*;  
 
var cities:Array = ["nukus","bukhara","navoi","fergana","urgench","samarkand","djizak","andijan","gulistan","termez","karshi","namangan","tashkent"] 
 
 
function mover (targetX, targetY){ 
currentX = marker_mc._x; 
currentY = marker_mc._y; 
var xTween:Tween = new Tween(marker_mc, "_x", Strong.easeOut, currentX, targetX, .5, true); 
var yTween:Tween = new Tween(marker_mc, "_y", Back.easeOut, currentY, targetY, 1.5, true);  
}  
 
for (var i = 0; i<cities.length; i++){  
var my_btn = this[cities[i]+"_btn"]; 
my_btn.myCity = cities[i]; 
my_btn.onRollOver = function() { 
mover( this._x, this._y);  
marker_mc.gotoAndStop(this.myCity); 
} 
}

 

Объяснение к коду.

Первые две линии кода просто импортируют Tween and Easing classes, требуемых для использования Tween эффекта.

CODE

import mx.transitions.Tween; 
import mx.transitions.easing.*;

Вторая часть (одна строка) - Array, которая содержит названия городов, названия здесь должны соответствовать первой части названия кнопки. Это - также те же самые названия, которые мы использовали как ярлыки кадра.

CODE

var cities:Array = ["nukus","bukhara","navoi","fergana","urgench","samarkand","djizak","andijan","gulistan","termez","karshi","namangan","tashkent"]

 

Третья кодовая часть создает Function, которая использует Tween class , чтобы переместить указатель от его текущего положения до положения кнопки, которая называет эту функцию. Мы создали два tween objects переместить объект горизонтально и вертикально.

CODE

function mover (targetX, targetY){ 
currentX = marker_mc._x; 
currentY = marker_mc._y; 
var xTween:Tween = new Tween(marker_mc, "_x", Strong.easeOut, currentX, targetX, .5, true); 
var yTween:Tween = new Tween(marker_mc, "_y", Back.easeOut, currentY, targetY, 1.5, true);  
}

Заключительная часть кода создаёт instance names для кнопок, и затем двигает указатель и останавливает на изображении выбранного города.

CODE

for (var i = 0; i<cities.length; i++){  
var my_btn = this[cities[i]+"_btn"]; 
my_btn.myCity = cities[i]; 
my_btn.onRollOver = function() { 
mover( this._x, this._y);  
marker_mc.gotoAndStop(this.myCity); 
} 
}

 

Выполняем тестирование ролика.

 

 

 

 

 

 

 

Теперь публикую свою работу в двух форматах : .swf и .exe (для автономного использования, для тех персональных компьютеров, где не установлен Flash Player)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3. Оснащение проекта

 

Программа Adobe Flash имеет следующие системные требования:

• Intel® Pentium® 4, Intel Centrino®, Intel Xeon®, or Intel Core™ Duo процессор
• 512Мб ОЗУ (1Гб рекомендуется)
• 2.5Гб необходимое место на жестком диске (дополнительное свободное место рекомендованное в процессе инсталляции)
• 1024x768 монитор с разрешением и 16-битная видео карта.
• DVD-ROM оснащение

Конфигурация персонального компьютера, на котором выполнена настоящая дипломная работа:

• Монитор – LG Flatron W2242S (17 дюйм) с разрешением 1280х1024
• Мышь – LX Series Optical Mouse (LX-303)
• Процессор – Pentium(R) D CPU 3.40 Гц
• Видеокарта – nVidia GT9600 (1024 Мб\128 бит)
• ОЗУ – DDR3 (4.00 Гб)

 

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

• Операционная система Windows XP (Service Pack 3/32 bit)
• Adobe Flash CS3 Professional
• Adobe Photoshop CS3
• Microsoft Office Word 2007
• Microsoft Office PowerPoint 2007
• Web-браузер Google Chrome

 

 

 

 

 

 

4. Техника безопасности

 

При работе за компьютером необходимо помнить: к каждому рабочему месту подведено опасное для жизни напряжение. Поэтому во время работы надо быть предельно внимательным и соблюдать все требования техники безопасности.

Чтобы работа за компьютером не оказалась вредной для здоровья, необходимо предпринимать меры предосторожности и следить за правильной организацией своего рабочего места.

Требования к технике электробезопасности:

• к работе на ПЭВМ допускаются лица, прошедшие инструкцию по технике безопасности.
• запрещается работа на ПЭВМ при отсутствии заземляющего устройства.
• запрещается работа на ПЭВМ при снятой задней крышки монитора и системного блока.

Требования по промышленной санитарии:

• освещенность рабочего места оператора должна составлять не менее180-230 лк при искусственном освещении;
• уровень шума в помещении не должен превышать 90дБ.
• площадь помещения должна выбираться из расчета 4м2 на одного работающего.