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

Содержание:

 

 

 

 

 

 

 

 

 

 

 

Введение

 

Adobe Flash (ранее Macromedia Flash) — мультимедийная платформа компании Adobe для создания веб-приложений или мультимедийных презентаций. Широко используется для создания рекламных баннеров, анимации, игр, а также воспроизведения на веб-страницах видео - и аудиозаписей.

Первое название Flash было Future Splash. В то время это была простенькая программа для создания анимации. Macromedia купила его в 1997 году и изменила имя на Flash. Adobe же, в свою очередь, выкупил продукт у Macromedia в 2006 году. И именно Flash был тогда главной причиной этой сделки.

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

С помощью Adobe Flash создаются автономные приложения: игры, мульты, тесты, презентации, интерактивные карты.

Для своей дипломной работы я выбрал тему «Создание интерактивной карты в Adobe  Flash», так как эта тема мне интересна. Я считаю, что на данный момент интерактивные карты нужны и актуальны. У них большой диапазон применения. Интерактивные карты удобны и легки в использовании. Даже самому простому пользователю.

Флэш технологии - одно из наиболее востребованных направлений современного интернета и анимации. На сегодняшний день Flash анимация является одной из самых популярных технологий создания коммерческих мультимедийных вставок, флэш-блоков и спец. эффектов для сайта. Общеизвестно, что до 80% знаний об окружающем мире мы получаем через зрение. А при многочасовом сидении за компьютером наши глаза – практически единственный источник, через который возможна передача данных. Об этом хорошо знают разработчики дизайнов веб-страниц, которые и стремятся привлечь внимание пользователей яркими движущимися флешками. Современная технология создания флеш-анимации позволяет создавать векторные графические анимационные заставки, которые привлекают своей интерактивностью и динамичностью. Качественный Flash-ролик значительно отразится на общем впечатлении от посещения web-страницы.

 

 

1. Разработка интерактивных приложений в среде                     Adobe Flash

1. Применение Flash технологий

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

В корпоративных сайтах Flash применяется как элемент декоративного оформления, либо как альтернатива HTML варианта сайта.

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

Применение Flash в презентациях. Если вы хотите выпустить презентационный материал о своей фирме, колледже или  о товаре на каком-либо носителе цифровой информации,

Например, на DVD - ROM, то Flash очень уместен , для решения этой задачи. Вы можете поместить проигрыватель на самом диске, и у вас не будет особых проблем с просмотром презентации на любом компьютере.

Анимация. В зависимости от располагаемого времени, сюжета фильма и собственных художественных способностей вы можете выбрать один из двух способов «оживления» персонажей вашего фильма:

1.Покадровую анимацию (Frame-by-frame, «кадр за кадром»), когда каждый следующий кадр вы создаете собственными руками (либо импортируете из внешнего источника);

2.Автоматическую анимацию (tweened-анимацию), когда вы выстраиваете лишь ключевые кадры, а все промежуточные кадры Flash формирует самостоятельно.

Необходимо отметить, что оба механизма могут использоваться совместно, причем не только в рамках одного фильма, но и применительно к одному объекту. Например, более сложные в сюжетном плане фрагменты могут быть основаны на покадровой анимации, а фрагменты с «предсказуемым» развитием сюжета получены с помощью автоматической.

Такое объединение возможно благодаря использованию для каждого объекта единой оси времени, представленной в окне редактора временной диаграммой - - Time Line. Объединив на одной временной диаграмме «линии жизни» нескольких объектов, можно получить сцену, в которой участвуют несколько «персонажей».

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

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

Вы можете создать фильм, в котором в течение часа один и тот же шар будет неподвижно лежать на столе. В этом случае все кадры фильма будут похожи друг на друга, и зритель не сможет отличить ваш «мультик» от статичного изображения. С другой стороны, можно изготовить несколько замечательных кадров и... воспроизвести их в один и тот же момент времени. Результат будет прежним — зритель не сможет увидеть происходящее на сцене. Таким образом, основной принцип анимации - каждому моменту времени — свой кадр.

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

В любой Flash-фильм может быть добавлен текст. Подобно работе в обычных текстовых редакторах, для текста может быть установлен размер, шрифт, стиль, интервал, цвет и способ выравнивания. Вы можете трансформировать шрифт подобно другим объектам — поворачивать, масштабировать, наклонять. При этом сохраняется возможность редактирования его символов.

На основе фрагмента текста может быть создана гиперссылка. Flash-фильм может содержать динамические текстовые поля, а также поля, редактируемые пользователем. Редактируемые поля в Flash-фильме имеют то же предназначение, что и текстовые поля, помещаемые в форму на Web-странице: с их помощью от пользователя может быть получена та или иная информация, подлежащая обработке на сервере или клиентским сценарием. И, наконец, в Flash MX вы можете создавать прокручиваемые многострочные текстовые области.

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

Для создания покадровой анимации требуется предварительно подготовить (или, по крайней мере, продумать) каждый кадр фильма. При этом необходимо учитывать следующее обстоятельство. Плавность перехода от одного кадра к другому и, соответственно, плавность и естественность движений персонажей зависят от того, насколько отличается следующий кадр от предыдущего (а не от скорости смены кадров, как иногда полагают). Другими словами, чем больше кадров содержит «мультик», тем ближе движения персонажей к естественным. Поэтому создание покадровой анимации является весьма кропотливым делом. Ее целесообразно применять в тех случаях, если объекты видоизменяются или взаимодействуют друг с другом каким-либо сложным образом.

Кроме того, покадровая анимация используется во Flash при описании поведения интерактивных элементов фильма, например, кнопок. Каждому состоянию кнопки соответствует определенный ключевой кадр на временной диаграмме. Основное отличие описания поведения кнопки от «обычной» анимации состоит в том, что состояние кнопки зависит не от времени, а от действий пользователя. Подробнее вопросы включения в фильм элементов управления рассмотрены в главе «Создание интерактивных фильмов». 

Основным инструментом при создании покадровой анимации является панель временной диаграммы. С ее помощью вы можете создавать, удалять и перемещать кадры анимации, изменять режимы просмотра отдельных кадров и всей сцены, выполнять другие операции.

Flash занял одно из лидирующих  мест в web-технологиях. Все дело в его векторном движке, как известно для задания вектора достаточно указать лишь направление и модуль и пусть все не так просто в возможностях Flash но это главное его преимущество перед пиксельными картинками, где каждую точку нужно описать драгоценными битами информации. Flash катастрофически экономит объемы передаваемой по сети информации, к тому же умеет работать со звуком и пиксельными картинками. Кроме того Flash поддерживает почти полноценный язык программирования Action Script, позволяющий творить чудеса интерактивности. Отсюда растут ноги флеш мультиков, флеш игр и интерактивных приложений. Наконец компания Macromedia, а позже и компания Adobe, постарались в позиционировании своего продукта и его интеграции с другими своими приложениями. Flash в будущем уже давно занял свое место во многих нишах анимации и web-пространства.

 

2. Понятие интерактивности

 

Flash – это интегрированная среда разработки для создания флеш-фильмов, анимации, интерактивных карт и так далее. при помощи языка Action Script. В простом анимированном фильме Flash воспроизводит кадры временной диаграммы в определенной последовательности, которая остается неизменной, сколько бы раз вы не просматривали фильм. В интерактивном фильме зритель имеет возможность использовать клавиатуру, мышь или то и другое, чтобы перейти к некоторому фрагменту или сцене фильма, переместить объекты, ввести информацию, а также выполнить многие другие интерактивные операции.

Интерактивность Flash-фильма обеспечивается за счет включения в него так называемых сценариев, которые представляют собой набор инструкций на языке Action Script. Каждая инструкция инициируется при наступлении определенного связанного с ней события. События могут быть самые разнообразные: достижение считывающей головкой определенного кадра, нажатие пользователем клавиши на клавиатуре, щелчок кнопкой мыши и так далее.

 

 

 

 

3. Язык сценариев Action Script

 

 

Подобно другим современным языкам сценариев (типа JavaScript или VBScript), Action Script - это объектно-ориентированный язык программирования,   обработку данных и многое другое в содержимое Flash-приложений. Action Script исполняется виртуальной машиной (Action Script Virtual Machine), которая является составной частью Flash Player. Action Script компилируется в байт-код, который включается в SWF-файл. SWF-файлы исполняются Flash Player-ом.

Объекты в Action Script могут содержать данные или их графическое представление в виде символа определенного типа. Для создания сложных сценариев или новых типов объектов нужно иметь некоторые навыки в программировании. Вместе с тем, для создания несложных интерактивных фильмов совсем необязательно изучать язык Action Script, поскольку события и процедуры могут быть назначены элементам фильма с помощью диалоговых окон и панелей свойств. ActionScript позволяет создавать сценарий для клипа, кнопки или кадра. Каждый такой сценарий, т.е программа на языке Action Script жестко связан с соответствующим элементом фильма. При публикации фильма текст сценария, как и другие элементы фильма, экспортируется в SWF-файл, как я описывал ранее. При желании можно сохранить его в отдельном файле с расширением .as (обычный текстовый файл), чтобы впоследствии использовать в каком-либо другом фильме. Из сценария можно обратиться к любому другому объекту фильма (из числа кнопок, клипов и кадров) или же к другому фильму, какому-либо внешнему сетевому ресурсу.

Объектная модель Action Script – это совокупность типов объектов, которые могут использоваться в сценарии, и отношения подчиненности между ними. Как известно в языках программирования объект описывается набором атрибутов (свойств) и перечнем методов (процедур), которые могут быть применены, к этому объекту. Для каждого класса объектов определен свой набор атрибутов и методов. Например, для объекта «Кнопка» в качестве атрибутов могут использоваться метка, геометрические размеры, координаты, а в качестве метода — реакция на нажатие кнопки. Конкретный объект — это экземпляр соответствующего класса. Два экземпляра одного и того же класса могут отличаться один от другого значениями атрибутов.

Для описания действий над объектами, а также для указания подчиненности объекта обычно применяется так называемая «точечная нотация». Например, чтобы указать, что к кнопке Button_l следует применить метод onPress(), используется конструкция

Button_1. onPress().

Если же требуется указать на принадлежность кнопки Button_1 клипу Сliр_2, то запись будет выглядеть так:

Clip_2. Button_1.

 Объектная модель, применяемая  в Action Script, во многом аналогична  объектным моделям других сценарных  языков (например, Java Script). Вместе с  тем, существуют и определенные  различия. Основное из них состоит  в том, что в Action Script иерархия объектов  строится относительно Flash-плеера, а  не относительно HTML-документа, отображаемого  в окне Web-браузера.

Как было описано выше, корневым объектом, неявно присутствующим в любом сценарии, является Flash-плеер. На следующем уровне располагаются четыре класса объектов:

• Movie (Объекты фильма);
• Core (Объекты ядра);
• Client/Server (Объекты клиент-серверной среды исполнения);
• Authoring (Объекты среды разработки).

 

В своей дипломной работе я буду в основном использовать объекты класса Movie.

Объекты класса Movie позволяют представить в сценарии взаимоотношения между элементами фильма (то есть структуру фильма), а также управлять параметрами и поведением элементов фильма. К этому классу относятся, в частности, следующие объекты:

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

MovieClip (Клип) - объект, представляющий в  сценарии клип; для него может  динамически изменяться, например, число вложенных клипов;

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 на одного работающего.