Программа Macromedia Flash и ее использование

Программа Macromedia Flash и ее использование

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

Более полумиллиона человек по всему  миру используют Flash для создания красочных  и, в тоже время, компактных Web-ресурсов. Дизайнеров новый Macromedia Flash привлечет  улучшенными возможностями создания графики, а профессиональные разработчики смогут привнести новые идеи в свои приложения, благодаря использованию скриптов, форм и подключению серверных возможностей.

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

Имея удобную среду разработки, Macromedia Flash 5 легко интегрируется в  существующий процесс создания Web-узла, благодаря возможностям импорта из Macromedia FreeHand и Fireworks.

Macromedia Flash 5 также предоставляет  широкий набор средств разработки  насыщенных Web-приложений, включая тесную  интеграцию с Macromedia Generator.

Новые возможности:Macromedia Common User Interface - привычный пользовательский интерфейс позволяет разработчикам свободно себя чувствовать в любом приложении для Web-дизайна от Macromedia.

Macromedia FreeHand® Import - импортируйте  графику из Macromedia FreeHand для создания  законченных публикаций.

Macromedia Generator™ Developer Edition Support - автоматизируйте  процесс создания Flash-контента с  помощью Macromedia Generator Developer Edition, решения для эффективного обновления Flash-сайтов.

Bezier Tools - привычные инструменты  "Выделение" и "Перо", с поддержкой кривых Безье, предоставляют новые возможности создания иллюстраций.

Shared Symbol Libraries - библиотека используемых  в проекте символов упрощает  управление ими и минимизирует  размер конечного файла. 

Web-Native Printing - создавайте Web-приложения, с широкими возможностями высококачественной печати.

Movie Explorer - просматривайте и сортируйте  иерархическую структуру документа  для простоты анализа и редактирования  больших проектов.

ActionScript Development Tools - эффективно создавайте насыщенные Web-приложения с помощью нового языка сценариев близкого к JavaScript, редактора ActionScript и Debugger, а также фукции Smart Clips - решения для разработки часто используемых элементов.

XML Transfer Support - поддержка XML позволяет  создавать мощные приложения для электронной коммерции.

HTML Text Support - возможность включать  форматированный HTML-текст и гиперссылки  облегчает создание файлов насыщенных  текстовой информацией.

Как вы думаете, реально ли уместить страничку, содержащую приличное количество анимации, звука и удивительных способов интерактивности в файл порядка 100kb? Сделать так, чтобы эта страница работала одинаково как в Netscape Navigator (NN), так и в Internet Explorer (IE)? Компания Macromedia решила большинство проблем совместимости и производительности, выпустив Flash, который к сегодняшнему дню весьма эволюционировал и является полноценной частью инструментов / техник web-дизайна.

Коротко и ясно о том, что это  такое. Существуют plug-ins (примочки), которые  встраиваются в браузер (web browser), и служат для просмотра Flash страниц. Называются они Flash Player. Причем в последних версиях IE и NN эти примочки уже встроены (если нет, то их можно бесплатно скачать с сайта Macromedia). И существует программа Flash, с помощью которой эти страницы создаются.

В пользу Flash приведу его основные достоинства и статистку Macromedia.

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

· Устранение проблем совместимости  между браузерами. В отличие от HTML, Flash одинаково работает как в IE, так и в NN. Имеется даже специальный вариант примочки-проигрывателя для браузеров, поддерживающих Java (Flash Java Player).

· Мощный событийно-управляемый язык. В Macromedia Flash используется специальный  язык, при помощи которого можно создавать "интеллект" для своей страницы. Причем если в Flash 4 это был, скорее, некий скрипт (script), имеющий всего несколько основных функций, то в Flash 5 (несмотря на название "ActionScript") - это почти полноценный язык программирования, с поддержкой условий, циклов, массивов, функций и классов, которые можно наследовать.

· Красота. Да, да, именно! Flash имеет  автоматическую поддержку anti-aliasing (антиалайсинг, сглаживание контуров с помощью  смешения соседних цветов). В результате даже простая линия или кружочек, нарисованные во Flash, выглядят приятно для глаз. Что же тут говорить о рисунках, нарисованных профессионалами.

· Удобство. Создавать страницы во Flash под силу даже ребенку, и, признаюсь, это весьма приятное занятие. А если обладать элементарными навыками дизайна и рисования, открывается весь простор для Вашей фантазии, предоставляемый Flash.

· Распространенность. Flash потихоньку становится стандартом де-факто (см. статистику ниже). В случаях, где необходима широкая интерактивность, графика, звук, и маленький размер, Flash незаменим.

На сегодняшний день Flash Player используют 222 миллиона человек, и каждый день его  скачивает еще 1.4 миллиона. По данным Macromedia это позволяет 90% пользователей  Сети просматривать страницы с Flash содержимым.

Примочки распространяются бесплатно, в то время как за программу  создания Flash файлов приходится платить. Последняя, 5-я версия продукта стоит $399. Пользователям старых версий это  удовольствие достанется за $149.

К написанию этой статьи меня привело желание осветить для достаточно широкого круга людей пятый Flash (Flash 5). Дело в том, что большинство ресурсов по Flash - на английском языке. В русскоязычной части сети эта ценная информация отсутствует. Я даже знаю пару российских сайтов, сделанных нашими же ребятами, но на английском языке. (Причем это - самое стоящее из того, что есть). Понятно, что люди делают сайты на английском, т.к. использование русского языка сильно сужает аудиторию: Тем не менее, я считаю, что есть смысл в создании ресурсов, доступных широкой публике, на русском.

Эта (первая) часть статьи - обзорная. О том, стоит ли писать продолжение, я буду судить по Вашим откликам. Я буду очень рад поделиться своим  опытом со всеми читателями и посвятить  новичков в захватывающее действо творчества с помощью Flash. К сожалению, у меня нет времени заниматься созданием полноценного ресурса (сайта по Flash, скажем). Но написание иллюстрированных обучающих статей (tutorials) в моей власти. И если интерес к этой теме будет высок, я с удовольствием продолжу цикл, раскрывая возможности Flash 5. О том, насколько Вас это заинтересовало, яростно пишите на rubo@rubo.com.

В последнее время программа Flash стала модной. Многие полагают, что Flash -- это новый продукт, однако это  не так. Еще в 1995 году появилась небольшая программа Future Splash Animator для векторной анимации Web-графики, а два года спустя, в 1997 году, компания Macromedia приобрела ее и начала развивать продукт под новым названием Flash.

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

Покадровое  формирование рисунка: на каждом кадре  происходит добавление частей к рисунку.

Выберите на панели инструментов (Tools) инструмент line tool или нажмите на клавишу N.

 

В левом нижнем углу, используя инструмент line tool, начертите  произвольную линию.     Подведите указатель мыши непосредственно к линии, кликните правой кнопкой. В выпадающем меню выберите пункт Envelope. Или в главном меню выберите Modify => Transform => Envelope.

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

 

Для преобразований линий, из которых состоит фигура, и свободных линий используйте  инструмент Subselection (частичное выделение). Быстрая клавиша A. Необходимо один раз кликнуть по линии. Теперь, передвигая узелки и меняя угол наклона осевых линий, вы сможете как угодно исказить линию.

 

 
 
После манипуляций с использованием инструментов Flash MX 2004 с линией у  меня получилась вот такая фигура.  
 
 
 
Первый кадр готов, для того, чтобы продолжить создание анимации нам необходимо добавить ещё кадры. Кликните по временной панели, следующий кадр станет синего цвета. Кликните по правой кнопке мыши и в выпадающем меню выберите Convert to Keyframes. После данных операций 2 кадр, также как и первый будет обозначаться чёрным кругом.

 

 

Продолжим дорисовку  картины. В результате получилась вот  такая кривая.   Добавлять кадр можно, используя команду Insert Keyframe.

 
 
Некоторые обозначения манипуляций  с кадрами во Flash MX 2004: Insert Frame (Вставить кадр),  Remove Frames (Удалить кадры), Insert Keyframe (Вставить ключевой кадр), Insert Blank Keyframe  (Вставить пустой ключевой кадр), Clear Keyframe (Очистить ключевой кадр), Convert to Keyframes (Преобразить в ключевые кадры), Convert to Blank Keyframes (Преобразовать в пустые ключевые кадры), Gut Frames (Вырезать кадры), Copi Frames (Копировать кадры), Paste Frames (Вставить кадры), Clear Frames (Очистить кадры) и Select All Frames (Выделить все кадры) - выполняют операции с кадрами, указанные в названиях команд.  
               После изготовления нескольких ключевых кадров мы должны получить вот такую картинку.  
Во время преобразования прямой вам, возможно, потребуется не только изгибать прямую, но и изменять в размерах, то есть свободно трансформировать. Во Flash MX 2004 это можно сделать вот так.  
                  Подведите указатель мыши непосредственно к линии, кликните правой кнопкой. В выпадающем меню выберите пункт Free Transform. Или в главном меню выберите Modify => Transform => Free Transform. Теперь вы можете изгибать линию и получить любую форму этой фигуры.

Для изготовления тучки на небе, мы будем использовать инструмент Rectangle Tool.   Flash MX 2004 предоставляет возможность рисования прямоугольника с закруглёнными краями, для этого нужно дважды кликнуть по прямоугольнику, на панели Tools. В диалоговом окне Rectangle Settings нужно указать радиус окружности, которая будет сглаживать края прямоугольника.

 
 

После выполнения всех действий, в правом углу холста начертите прямоугольник, прямоугольник  получится залитым. Так как нам  не нужна эта заливка, то нужно  её удалить.

 

Для удаления цветной  области нам необходимо выбрать  инструмент Selection Tool и кликнуть по области  заливки. Далее кликнуть правой кнопкой и в выпадающем меню выбрать Cut, либо после выделения щёлкнуть по клавише Delete.

 

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

 

Подведите указатель  мыши непосредственно к линии, кликните правой кнопкой. В выпадающем меню выберите пункт Envelope. Или в главном меню выберите Modify => Transform => Envelope.

 
 
Солнышко и лучики сделать гораздо проще, поэтому для самопроверки я предлагаю вам сделать это самим.  
 

Для наложения  цветного рисунка во Flash MX 2004 есть инструмент Brush Tool, на панели инструментов Tools. После  выбора инструмента Brush Tool ниже панели инструментов появляется раздел Options. В выпадающих списках можно выбрать  размер и тип линии. В первом выпадающем списке мы выбираем размер линии, а во втором соответственно тип линии.   Далее на каждом кадре добавляем по одному движению кисти, чтобы создать эффект постепенной прорисовки картинки.

 

Несколько произвольных штрихов нанесём и на тучку, но чтобы закрасить всю поверхность  данной фигуры неудобно использовать кисть. Для этого мы будем использовать заливку. Во Flash MX 2004 есть инструмент Paint Bucket tool на панели инструментов Tools.   После выбора данного инструмента необходимо кликнуть по области заливки.

 

 
 
Теперь нам необходимо сделать  зелёным цветом крону дерева. Сделать  заливку, как облако, у нас не получится, так как оно было сформировано из замкнутой фигуры. А крону дерева ограничивает несколько линий. Возможно закрасить кистью, но это будет не очень удобно.  
Flash MX 2004 предоставляет возможность создания нескольких слоев. Поэтому на задний план добавим новый слой и закрасим его в области кроны дерева.  
 
Создание нового слоя  
Для создания нового слоя выполните следующие действия:  
1. Выделите тот слой сцены документа, непосредственно перед которым должен находиться новый слой.  
2. Если создаётся слой обычного типа, выполните одно из следующих действий:  
- щёлкните на кнопке Insert Layer (Вставить слой), первой слева внизу диспетчера слоёв;  
- выполните команду Insert =>Timeline => Layer (Вставить =>Временная диаграмма =>Слой) основного меню;  
- выполните команду Insert Layer контекстного меню выделенного слоя.  
 
Перетаскивание слоя мышью  
Для перетаскивания слоя мышью выполните следующие действия:  
1. Поместите указатель в свободное место строки перемещаемого слоя и нажмите кнопку мыши.  
2. Перетащите указатель в то место диспетчера слоёв, где должен находиться данный слой (между другими слоями документа или в некоторую папку слоёв). Это место индицируется двойной разделительной линией, появляющейся между слоями, или затемнением значка папки в строке папки слоёв. Как только такая линия или затенение папки появится в нужном месте диспетчера, отпустите кнопку мыши. Если отображалась двойная линия, то выбранный слой будет вставлен в место её расположения, а если произошло затенение папки, то слой переместится в данную папку и разместится в самом её верху.