Как создать флэш сайт?

Елена:

Создание flash-сайта ndash; дело достаточно сложное. Для этого нужны знания во многих областях: программировании, компьютерной графике, основах оптимизации и продвижения сайтов, нужно хорошо знать сам flash в конце концов, причем как на уровне знания среды разработки, так и языка программирования action script 2.0. или action script 3.0, что в настоящее время является более приоритетным.
Разрабатываются флеш-приложения в Adobe Flash Professional ndash; это мультимедийная программа , которая используется для создания такого контента как веб-приложения, фильмы, игры, приложения для мобильных и других встроенных устройств.
Flash ndash; уникальное явление. Ранее этот продукт назывался «Macromedia Flash», после приобретения компанией Adobe эта программа стала называться «Adobe Flash» с 2005 года. Flash-анимация используется для потоковых веб-страниц. Иногда флеш ndash; это часть страницы html, а бывает, что вся страницу целиком выполнена на Flash или же весь сайт создан с его помощью. Flash-файлы, которые получаются в результате — это специальные в swf («ShockWave Flash») формате файлы, которые требуют для просмотра содержимого специальные бесплатные плагины для браузера, их можно легко и быстро скачать и установить с официального сайта Adobe. Преимуществом флеш-роликов стала очень быстрая загрузка и работа с векторной анимацией с интерактивностью. Флеш может быть загружен до показа на экране всего ролика, то есть можно реализовать вариант, когда вы начинаете смотреть анимацию, а остальные «потоки» на экран загружаются в фоновом режиме.
Используемая флеш-графика в векторе плюс программный код позволяют сделать полнофункциональное приложения, способное заменить некоторые растровые, видео фрагменты, программные коды, но сделать это намного оптимальнее, для потоков используется меньшая пропускная способность, потребляется меньше мощности процессора. В дополнение к вектор-рендерингу Flash Player (плеер, необходимый для просмотра флеш-роликов) включает в себя виртуальную машину (ActionScript Virtual (AVM)) для поддержки сценариев взаимодействия во время выполнения, а также поддерживает видео, mp3.
Рассмотрим существующие типы графики и выделим преимущества векторной, с которой непосредственно работает Flash.
Всю графику можно поделить на три типа: растровая, векторная, 3Д. В растровой графике, как и на мониторе телевизора, каждое изображение состоит из набора мелких элементов ndash; пикселов ndash; это аббревиатура от picture element.
Принцип точечной графики очень прост: как рисует ребенок в школе по клеточкам, только здесь эти клетки намного меньшего размера. Такой вид графики прост как в реализации, так и обработке и представлении, технически удобно реализовать, автоматизировать ввод или оцифровку изобразительной информации.
Но растровой графике присущи недостатки: она объемна, вес файла в результате получает большой, при уменьшении или увеличении изображения теряется качество рисунка.
Кодирование графической информации в векторной графике другой: все изображения задаются в виде контуров ndash; математических объектов. Эти контуры представляет собой независимый объект, который можно перемещать, изменять размеры, масштаб, причем сколько угодно раз. Линии задаются начальными точками, формулами, указывающими сами линии. Благодаря этому при изменении рисунка пропорции всегда точно выдерживаются. Векторную графику также объектно-ориентированная графика, потому что рисунок состоит из отдельных объектов — прямых и кривых линий, эллипсов, прямоугольников, замкнутых и разомкнутых фигур, и т.д., которые имеют свои характеристики толщины контура, цвета, стиля линии и т.д.
Векторная графика экономна в плане ресурсов, о ней сохраняется информация в виде формул, а не информации по каждой точке, описания цвета не увеличивает значительно размера файла. Рисунки векторной графики легко изменяются, практически при этом не теряется качество изображения. Есть области графики, где сохранение четких контуров принципиальное, например, в создании логотипов, в шрифтах и др.
Вектор использует все достоинства разрешающей способности всех выводных устройств, к примеру, принтера. Изображение всегда выглядит качественно, четко, все будет зависеть уже только от самого принтера.
Также плюсом векторной графики можно назвать то, что она легко трансформируется в растровую, но не наоборот! И включать в себя объекты растровой графики может, хотя обрабатывать такими же средствами ее не получится.
Серьезным преимуществом векторной графики считается средство интеграции текста и изображений, один подход к ним, соответственно, возможность создать конечный продукт. Самые популярные редакторы векторной графики: CorelDRAW, Adobe Illustrator и конечно же, Adobe Flash.
Вектор ограничен при создании реалистичных изображений: четкие и мультяшные ndash; да, а вот как задать формулой сосну или облако. Также возникает проблема при вводе графической информации: к примеру, сканер передает информацию об изображении по пиксельно: расположение и цвет каждой точки в зависимости от реакции светового луча. Охватывать пообъектно он не может, да и не все изображения, как я уже писала выше, можно формализировать.

Флеш стал повсеместно популярен ndash; почти на каждой Web-странице появляются мультипликационные картинки — баннеры. Они интерактивны, проигрывают анимацию и немного занимают места на диске, что важно при работе в сети.
Анимация создается за счет отображения каждого флеш-кадра в течение определенного промежутка времени. Когда кадров много, создается иллюзия движения. Ранее флеш-технологии появились GIF-анимации, но возможности Flash намного шире. Так с ее помощью можно создавать элементы навигации, озвученные мультфильмы, анимированные логотипы, калькуляторы, целые сайты с набором разнообразных интерактивных элементов, а уж какие чудеса анимации можно сотворить на флеше: выглядят они очень эффектно и другие технологии для веб не могут похвастаться такими возможностями.
Анимационные ролики, создаваемые флеш, называются фильмами. Анимационные возможности не ограничены мультипликацией, анимируются разнообразные объекты: меню, рисунки, ссылки, тексты.
При запуске программы открывается окно с рабочей областью и панелью инструментов, а также дополнительными окнами, которые можно подключить в процессе работы. Также отображены вкладки работы с временной шкалой, настройками проверкой на ошибки и т.д. В программе фильмы создаются рисуя или импортируя готовые рисунки, размещаются они в специальной области рабочего окна ndash; сцене (Stage), а кадры создаются с помощью Timeline (шкала времени).
Сцен в фильме может быть несколько сцен, при запуске ролика они воспроизводятся в том порядке, как были созданы, если этот порядок не изменили специально. Это позволяет удобно и быстро изменять отдельные эпизоды, менять их порядок.
Сама анимация делается путем изменения следующих один за другим кадров, изменения их содержания, то есть в кадре добавляются объекты с нужными параметрами. Объекты на сцене можно вращать, изменять положение, цвет, устанавливать прозрачность, их форму, размер, тоже самое можно делать с любыми другими объектами.
Анимацию можно создавать путями:
покадрово (Frame-by-frame Animation) ndash; рисунок в каждом кадре делается руками и кадры идут подряд;
расчетно (Tweened Animation) ndash; делаются только начальный, а также конечный кадры (называются ключевыми), а между ними программа сама строит кадры; два вида такой анимации: движения (Motion Tweening, когда меняются параметры движения поворот, размер, положение), формы (Shape Tweening);
программно ndash; когда параметры изменения объекта задаются с помощью команд языка программирования Action Script.
В процессе работы над фильмом исходные данные сохраняются в специальном файле с расширением .fla. Сюда входят сцена со всеми объектами, также, дополнительные параметры об объектах, которые не были включены в фильм, но создавались в нем, также вариантах звуков, комментариях, кодах-скриптах, настройках программы и т.д. После создания такого исходника, необходимо перевести его в формат, пригодный для интернет ndash; а именно SWF, таким образом мы производим публикацию фильма или компиляцию кода. При этом из файла будет удалена информация, которая не нужна для воспроизведения в нужном виде фильма. Таким образом размер файла становится минимальным и быстро загружается у пользователя. Такой файл можно открывать отдельно ndash; плеер его проиграет, а можно подключать на любую html-страницу как объект.

Фильм создается из готовых элементов ndash; эталонов (Symbols) или символов. Эталон — это изображение, кнопка, анимация, мувиклип, которые многократно используются в ролике. Их можно создать, можно импортировать. После создания символы хранятся в специальном хранилище ndash; библиотеке (Library). В процессе сборки фильма в тех местах, где необходимо, вставляются именно экземпляры (Instance) эталонов (которые хранятся в библиотеке), а не они полностью каждый раз. И их вставлять можно сколько угодно раз и где угодно. Параметры экземпляра при этом вы можете изменять как угодно: местоположение, размер, масштаб, поворот, изгиб, прозрачность, тон и т.д., а сами символы-эталоны при этом не меняются. Это очень удобно ndash; вам не нужно создавать каждый раз заново элемент или копировать его, элемент один, а его модификаций сколько угодно много. А при процессе публикации файл окончательного ролика, который создается в формате swf, собирается так, что в одном месте будет непосредственно эталон объекта, а во всех остальных ndash; только указатели на него. Представьте, на сколько таким образом уменьшается вес ролика по сравнению с копированием почти одинаковых элементов.
Эталоны бывают:
bull; Movie Clip (мувиклип) ndash; включает звук, графику, анимацию, может быть управляемым скриптом программно;
bull; Graphic (Графический) ndash; рисунки в статике, анимация, звук, но не управляемый программно;
bull; Button (кнопка) — включает рисунки, звук; по сравнению с эталонами-символами других типов включает только четыре кадра, в которых отображаются изменения состояния кнопки, когда происходят различных события мыши.
Перед непосредственным созданием символа-эталона нужно задать его тип, позже его можно будет сменить.
Кроме символов-эталонов, их экземпляров, ролик может вмещать изображения из внешних файлов, шрифты.
Весь ролик в Adobe Flash ndash; это последовательность кадров (Frames), они показываются по очереди с указанной скоростью. Работа с ними происходит с помощью шкалы времени (Timeline). Слева на шкале расположены слои, имена которых нужно задавать, справа ndash; набор пустых кадров, которые заполняются по мере создания объектов и размещении их на сцене. Как только кадр стал заполненным объектами, он изменяет цвет на серый. Ключевые кадры обозначаются черной точкой. На шкале времени текущий кадр отмечается красным маркером ndash; проигрывающая головка, через которую проходит тоненькая красная линия по вертикали, которая пересекает все слои и laquo;видитraquo; текущий кадр в каждом из них. Вот эти-то кадры, то есть их содержимое в виде мувиклипов и отображается на экране.

Для реализации интерактивности и возможности создавать полноценные сайты, в Adobe Flash используется язык программирования Action Script.
Чтобы сделать фильм интерактивным, во Flash используются программы- сценарии-скрипты (script -сценарий), они вмещают набор инструкций (actions) на ActionScript, а выполняются, когда наступают определенные события: нажатие пользователем кнопки, достижение какого-то кадра фильма, реакции на движение мыши, ее колесика, установка указателя над определенной областью и многие другие. Команды скрипта определяют реакцию Flash на возникновение события.

Команды скрипта, которые делается при реализации того или иного события, указываются для клипа, кадра, кнопки, а длелается это на специальной вкладке внизу экрана Actions (Команды) (Actions Frame, Actions Movie Clip), Actions Button.
Возможные события:
Нажатие клавиши (Key Press) ndash; когда пользователь нажимает клавиши клавиатуры, параметром функции выступает имя клавиши.
Наведение (Roll Over) ndash; когда над объектом находится указатель мыши, но мышь не нажата;
Отпускание (Release) ndash; если происходит отпускание кнопки мыши, когда указатель над кнопкой, которую запрограммировали, то есть если пользователь щелкает манипулятором laquo;мышьraquo;;
Нажатие (Press) ndash; если происходит нажатие кнопки мыши (левой), во то время, когда указатель находится над кнопкой, которую запрограммировали. При этом учитывается область срабатывания, а не ее видимое изображение, определяется это в кадре Область (Hit);
Удаление (Roll Out) ndash; над кнопкой был указатель мыши, его не нажимали и уводят мышь с программируемой кнопки;
Сдвигание (Drag Out) — клавиша мыши устанавливается над объектом, нажимается и уводится;
Отпускание за пределами (Release Outside) ndash; если была нажата кнопка мыши на объекте, а потом ее отпустил пользователь вне объекта;
Возврат (Drag Over) ndash; на объекте установлен указатель, левая кнопка мыши нажимается и не отпускается, но указатель ведут за объект, потом снова возвращают.

Язык ActionScript 3.0, если его сравнивать с ActionScript 2.0, более современный в том плане, что базируется на основах объектно-ориентированного программирования. Где основными понятиями выступают класс, объект, его атрибуты или свойства, а также методы, присущие данному объекту.
ActionScript выполняется при помощи виртуальной машины (Virtual Machine ActionScript), она является частью Flash Player.
Основой любого программного кода есть переменная, которая в ActionScript задается так: var ndash; специальная команда Flash, означающая, что в данном разделе происходит обозначение переменной и определение ее типа; name ndash; имя переменной, задается в текстово-цифровом формате, но не начинается с цифры; type ndash; указание типа переменной (числовой — Number, логический ndash; Boolean, текстовый — String и т.д.). то есть вы будете указывать: Var x: String;
После имени переменной не забудьте указать двоеточие, а в конце строки точку с запятой. В ходе выполнения кода, значение, а соответственно тип переменной можно изменять.
Переменная, которая вмещает в себе большое количество данных, называется массив. В АС 3.0. он задается с типом Array: Var Mas: Array.
Все элементы массива нумеруются, начиная с 0, поэтому для обращения, например, к первому элементу, вам нужно указать Mas[0]. То есть в квадратных скобках вы указываете позицию нужного элемента в массиве.
Сам код будет состоять из функций, которые описывают последовательность команд, которые происходят при том или ином событии ndash; клик мышкой, нажатие клавиши, достижении какого-то значения и т.д.
Задается функция с помощью зарезервированного слова function, далее вы указываете ее имя — name — любое текстово-числовое название, но не начинается с цифры, далее в круглых скобках () можно указать параметры функции ndash; что подается ей на вход, они могут отсутствовать, далее двоеточие и тип данных, которые функция возвращает или void ndash; когда функция ничего не возвращает. После этого весь код функции заключаете в фигурные скобки { }. А обращаетесь к функции, указав ее имя и параметры при необходимости: name().»Условия в АС 3.0. задаются через оператор if: if(х==у), то есть в скобках круглых нужно указать само условие сравнения. Циклы задаются через for(), где в круглых скобках задаются его параметры: переменная-счетчик, шаг ее изменения.
Каждый объект характеризуется своими параметрами или свойствами, к объектам во флеш можно прикреплять слушателей событий функцией addEventListener. Этот слушатель будет обрабатывать события, происходящие с объектом и если реакции на них описаны в функции программистом, программа будет соответствующе реагировать.

Это лишь малая часть того, что нужно знать, приступая к созданию флеш-сайта. Сайт можно не создавать с 0. Есть специальные шаблоны-заготовки, которые можно купить и модифицировать под ваши нужды (например, сайт templatemonsters). Там уже полностью разработан дизайн, вам нужно изменить контент и в программной реализации все что будет необходимо можно перепрограммировать. Затем вам нужно купить домен и хостинг, разместить html-файл, в котором подключается swf.
Читайте книги (мне, например, для работы и статьи в том числе помогла книга laquo;100% самоучитель M.Flash MXraquo;), учитесь у коллег на форумах (демиарт, флешер.ру), а еще, что должно стать вашим самым первым помощником — это помощь на официальном сайте Adobe. очень детализированно и подробно опсиан язык ActionScript, показаны примеры, причем материал подан и на русском языке в том числе.
После создания ролика, его нужно опубликовать. Параметры публикации программы можно установить в пункте меню Файл Параметры публикации. Там указывается в какие форматы делать выгрузку ролика, каковы настройки качества графики и звука и многие другие. Получив swf-файл, можно использовать его как полноценное готовое приложение. Для изменения, обновления созданного ролика нужно отредактировать исходник ndash; fla- файл и снова опубликовать.