| ||
Жизнь - в движении!Андрей Головных Web-страницы перестали быть статичными уже довольно давно. Однако по-настоящему они ожили с появлением Flash-анимации. Причем, вопреки распространенному заблуждению, создать Flash-ролик не так уж сложно. Если вы хотите придать своему Web-сайту некоторую экстравагантность и динамизм, то HTML и Java-Script вряд ли смогут вам помочь. А вот пакет создания Web-анимации Flash 5 компании Macromedia - именно то, что нужно. Flash 5 имеет функциональные возможности, способные удовлетворить любого профессионала. В то же время очень многое в ней можно сделать, не написав ни единой строчки кода. Симпатичные мультипликационные персонажи, динамические эффекты, вращающиеся логотипы, сложные пользовательские интерфейсы - все это доступно тому, кто познакомится с Flash 5. Более того, Flash поможет вам не только вдохнуть жизнь в домашнюю страничку, но и сделать ее по-настоящему интерактивной. Посетитель вашего Web-сайта больше не будет пассивно сидеть перед компьютером, он сможет сам вмешиваться в происходящее на экране действо. Можно создать, например, музыкальные кнопки, которые не только ведут посетителя по Web-сайту, но и приветливо попискивают при контакте с указателем мыши. Можно предложить компактные игры вроде Тетриса. А если создаваемая Flash-программа достаточно сложна и интерактивна (скажем, это online-магазин или трехмерная игра), можно воспользоваться языком программирования Actionscript. Компактно и доступноОгромный успех Flash в Internet связан с двумя основными факторами. Во-первых, Flash ориентирован на работу с векторной графикой, причем изображения в нем можно не только создавать, но и импортировать их из графических редакторов Freehand, Fireworks, Corel Draw! или Adobe Illustrator. Характерная для векторной графики компактность очень важна для Internet, ведь она прямо влияет на время загрузки страниц. Второй фактор, способствовавший успеху Flash, - это независимость от типа платформы и операционной системы. Если при создании HTML-файлов приходится учитывать особенности различных браузеров, то с Flash-файлами все куда проще. Безразлично, в какой системе создана и с помощью какого браузера просматривается ролик - изображение повсюду выглядит совершенно одинаково. Более того, в современных версиях браузеров поддержка Flash-анимации встроена изначально. Приведенные ниже примеры создания Flash-роликов составлены таким образом, чтобы вы могли обучиться принципам работы с Flash 5. Одновременно вы сможете составить первое впечатление о возможностях этого пакета. Как заставить мышку бегатьВ первом примере этого практикума мы заставим графический объект перемещаться по экрану. Во Flash этот метод анимации объекта называется Motion Tweening. Все, что от вас требуется при применении этой техники, - задать по одному ключевому изображению для начального и конечного состояния временной линейки, а Flash автоматически рассчитает все промежуточные ключевые изображения. Объект анимации можно взять из библиотеки, а можно создать самостоятельно как средствами Flash, так и во внешнем редакторе. Причем он не обязательно должен быть векторным. Импорт растровых и векторных изображений осуществляется с помощью команды File| Import; размещаются они в библиотеке символов (Window|Library). В нашем примере в качестве подвижного объекта будет использовано взятое из общей библиотеки Flash изображение мышки, которая должна будет ожить и пробежать через весь экран. Запустите Flash 5 и последовательностью команд Modify (Модифицировать) и Movie (Фильм) откройте диалоговое окно Movie Properties (Свойства фильма). В окне свойств укажите ширину и высоту рабочего поля (можно оставить параметры по умолчанию - 550 и 400). Соответствующий фон для ролика можно просто выбрать из цветовой палитры, щелкнув по пиктограмме фона. Пометьте первое изображение во временной линейке и откройте библиотеку графики, воспользовавшись командами Window|Common Libraries|Graphics. Выберите символ Mouse и, нажав клавишу мыши, перетащите экземпляр символа на рабочую поверхность. В результате вы получите первое ключевое изображение и зададите начальную точку своей анимации. В целом вся анимация должна состоять из десяти отдельных изображений. Щелкните на десятом изображении во временной линейке этого же самого слоя. Теперь с помощью команд Insert|Keyframe вставьте второе ключевое изображение. Мышка из первого ключевого изображения автоматически скопируется во второе. Затем переместите вашу мышку в любое другое место рабочего поля. Теперь нужно показать движение объекта - для этого используется операция Tweening. Снова пометьте первое изображение на временной шкале и вызовите окно Frame с помощью команд Window|Panels|Frame. Откройте вкладку Frame и под записью Tweening выберите строку Motion. После этого Flash самостоятельно рассчитает отсутствующие промежуточные изображения и создаст соответствующие кадры на временной шкале, отметив их фиолетовым цветом. Теперь можно посмотреть ваш первый Flash-фильм, используя для этого команды Control|Test Movie. Вы увидите ролик в таком виде, в каком он будет представлен в браузере. Определение свойств фильма:В Свойствах фильма задаются установки, которые влияют на внешний вид Flash-фильма в Internet, например, размеры рабочей области, цвет фона или скорость воспроизведения (количество кадров в секунду). Определение символов:Символы - это элементы Flash, которые можно использовать снова и снова (созданная во Flash или импортированная графика, а также звуковые файлы). Символы хранятся в библиотеке. Для использования символа в фильме его необходимо перетащить мышью из библиотеки в рабочую область. Когда символы появляются в рабочей области, они становятся Экземплярами. Одному символу может соответствовать любое количество экземпляров. Внешний вид экземпляра зависит от соответствующего ему символа. Если изменить символ, то эти изменения автоматически отразятся на всех принадлежащих ему экземплярах. В отдельном экземпляре можно изменять только цвет и размеры; это никак не влияет на свойства других таких же экземпляров или соответствующий символ в библиотеке. Создание анимации:Анимация управляется так называемыми ключевыми изображениями, которые определяют начало и конец анимации. Ввод действия:Действие - это команда или оператор, с помощью которой можно управлять процессом воспроизведения Flash-фильма. Публикация Flash-фильма:Для просмотра Flash-фильма на Web-браузере его необходимо опубликовать. При этом Flash создает из DFA-файла (то есть редактируемого исходного Flash-файла) Shockwave-файл (SWF), который браузер уже может интерпретировать и воспроизводить. До сих пор мышка во Flash-фильме двигалась исключительно по прямым линиям. Долго смотреть на такое слишком скучно. Поэтому во Flash существует возможность задавать в анимации любую траекторию движения объекта. Щелкните правой кнопкой по единственному слою вашего ролика и дайте ему имя, скажем, Mouse, вызвав свойства слоя (Properties). Далее добавьте для слоя Mouse слой маршрута: опять же щелкните правой клавишей мыши на слое Mouse и воспользуйтесь командой Add Motion Guide (либо щелкните на миниатюрной пиктограмме Add Guide Layer под панелью слоев). Новый слой будет называться Guide: Mouse. Пометьте первый кадр на временной шкале для этого слоя и с помощью "карандаша" (инструмент Pencil Tool в панели Tools) нарисуйте на рабочей поверхности любой маршрут. Для того чтобы мышка побежала именно по нему, пометьте в слое Mouse первый ключевой кадр и с помощью инструмента Arrow Tool (черная стрелка в панели Tools) протащите мышку за ее центр к началу пути. При этом должна быть включена опция привязки к объектам - View|Snap to Objects. Центр объекта Mouse "прилипнет" к линии пути, и вам останется лишь переместить объект в начальную точку. Точно так же следует поступить с мышкой в конечном ключевом изображении анимации, расположив мышку в последней точке ее маршрута. После этого просмотрите результаты: мышка бегает по дорожке, которую вы ей указали! Буквы разные нужныТексты вашей домашней страницы не обязательно должны быть статичными. С помощью Flash вы можете заставить текст (как любой другой объект) двигаться по экрану, менять яркость, размеры и цвет. При этом следует помнить, что при работе с Tweening-движением нужно использовать текст в виде символа (Symbol), в противном случае ничего не выйдет. В этом примере сделанная вами надпись должна будет стать ярче, увеличиться и изменить цвет. Этого можно добиться изменением так называемых свойств экземпляра, поскольку во Flash анимационные эффекты можно вызвать изменением не только позиции, но и свойств экземпляра. Поведение каждого экземпляра, как то: вращение, изменение масштаба, цветовые эффекты и прозрачность, можно задать и анимировать отдельно. Выберите в панели Tools инструмент Text и напишите в рабочем поле любой текст. Если вы хотите изменить атрибуты своего текста, например, его цвет или размеры, пометьте текст и с помощью правой кнопки мыши вызовите меню Panels|Text Options и откройте вкладку Character. Для того чтобы анимировать текст, его нужно сначала конвертировать в символ. Для этого выберите инструментом Arrow Tool и используйте команду Insert|Convert to Symbol. В диалоговом окне Window|Library выберите вновь созданный символ и щелкните на пункте меню Options| Properties - здесь можно переименовать символ и выбрать его тип - Graphics. Тип символа определяет его "поведение на сцене". Для оживления текста вам необходим второй ключевой кадр. Щелкните на двадцатом кадре на временной шкале и с помощью команды Insert|Keyframe вставьте там второй ключевой кадр - последний кадр будущего ролика. Итак, меняем прозрачность и цвет текста. Для этого выберите первый кадр во временной линейке, затем выберите текст с помощью Arrow Tool (появится синяя рамка) и вызовите команду Window|Panels|Effects. Из списка во вкладке Effects выберите пункт Alpha (Прозрачность) и вместо 100 % введите значение 20 %. Тем самым вы увеличите прозрачность экземпляра (текста). Во втором ключевом кадре установите для данного экземпляра нулевую прозрачность (Alpha 100 %). С помощью этого же приема можно менять не только прозрачность текста, но и его цвет и размеры. Отметьте последний ключевой кадр во временной шкале, и во вкладке Effects из списка эффектов выберите пункт Color, а затем воспользуйтесь палитрой для выбора конечного цвета текста. Для того чтобы к концу анимации текст прибавил в размерах, в соответствующем ключевом кадре просто щелкните на объекте с помощью Action Tool, а затем с помощью правой клавиши мыши выберите команду Scale (Изменить масштаб). Дальнейшие действия ничем не отличаются от масштабирования объектов в программах векторной графики. В конце заново пометьте первое ключевое изображение во временной линейке и во вкладке Frame из списка Tweening выберите пункт Motion. Выполните команду Insert|Create Motion Tween и просмотрите полученный ролик. Оживление кнопкиТочно так же, как обычные программы или Web-страницы, Flash-ролик может (а иногда и должен) иметь пользовательский интерфейс. Во Flash применяются кнопки или поля переключения, позволяющие, например, внутри вашего Flash-ролика целенаправленно попасть в любое нужное место. Для усиления эффекта щелчка можно оснастить кнопки анимационными эффектами. В приведенном примере мы создадим одну простую кнопку, с помощью которой можно открыть новое окно браузера. Во Flash кнопки также относятся к категории символов. Для создания кнопки используйте команду создания нового символа Insert|New Symbol. Присвойте символу выразительное имя и выберите в качестве типа символа Button (Кнопка). Щелкнув на OK, вы попадете в режим обработки кнопки. Там же можно заняться ее оформлением. Временная шкала для символов типа "Кнопка" состоит из четырех отдельных кадров. Они определяют возможные состояния кнопки - прежде всего маркируется состояние "Включено" (Down). По умолчанию кнопка находится в состоянии "Выключено" (Up). Выберите из панели инструментов Rectangle Tool (прямоугольник) и укажите в настройках радиус скругления углов 30 пунктов. Таким образом, получится прямоугольник с закругленными углами - такие вы уже видели во многих Web-страницах. Теперь снабдите кнопку надписью. Если кнопка должна изменять свой облик при прохождении над ней мыши, например менять цвет или размер, определите ее состояние как Over (т. е. "мышь над кнопкой"). Для этого нужно щелкнуть на соответствующем кадре и с помощью команд Insert Keyframe создать новый ключевой кадр. Это необходимо делать для всех состояний, обрабатываемых кнопкой. При этом Flash автоматически копирует содержание первого фрейма во второй. Теперь можно изменить внешний вид кнопки, например ее размеры или окраску. Точно таким же образом следует поступить с третьим и четвертым состояниями под названием Down ("Нажата" - внешний вид кнопки, когда на ней щелкают указателем мыши) и Hit ("Активна" - состояние кнопки после нажатия). После этого можно вернуться в создаваемый ролик (Edit|Edit Movie) и открыть окно библиотеки с вновь созданной кнопкой (Window|Library). Теперь перетащите экземпляр кнопки-символа из библиотеки в рабочую область. Теперь у вас есть кнопка с Rollover-эффектом. Результат проверьте с помощью команды Control|Test Movie. Пусть поработает зрительПросто смотреть - слишком скучное занятие. Если добавить во Flash-фильм функцию Action (Действие), то зритель сможет вмешиваться в процесс отображения. Действия представляют собой команды на Flash-языке программирования Actionscript, который по синтаксису и принципу действия очень похож на JavaScript. Если у вас уже есть опыт в работе с JavaScript, то здесь вы найдете много знакомого. Во Flash различаются действия кадров и действия экземпляров. Действия кадров связаны с конкретным кадром и говорят, что Flash-плейер должен делать по достижении определенного изображения во временной линейке. С помощью действий экземпляров можно, например, "привязать" к кнопкам действия, которые выполняются при наступлении какого-то события, например, щелчка мыши пользователя. С помощью действий можно, например, остановить Flash-фильм или перейти на другое место внутри анимации. Однако вернемся к кнопкам, описанным в примере: пусть при щелчке кнопки будет открываться новое окно браузера. Для этого пометьте кнопку на рабочей поверхности и вызовите окно Window|Actions, в котором откройте вкладку Object Actions. В левой части окна находятся команды на языке Actionscript, разделенные на несколько категорий. В правой части в списке действий находятся команды Actionscript, выбранные вами ранее. Щелкните на категории Basic Actions и при нажатой клавише мыши перетащите действие экземпляра OnMouseEvent в список действий. Тем самым вы зададите событие, связанное с мышью. Пометьте запись On (release). В нижней части диалогового окна Object Actions можно выбрать различные события, связанные с мышью. Отметьте событие Press (Нажать) и отключите запись Release (Отпустить). Для того чтобы новое окно браузера можно было открыть простым нажатием кнопки, Flash предоставляет в распоряжение пользователя команду get URL. Таким образом, вам нужно щелкнуть на категории Basic Actions и при нажатой клавише мыши перетащить действие get URL в список действий справа. В нижней части диалогового окна Object Actions, так называемой области параметров, под записью URL теперь следует указать Internet-адрес страницы, которая должна загружаться в новое окно браузера, например www.chip.com.ua. Если под Window установить опцию _blank, то автоматически откроется новое окно браузера. Теперь необходимо проверить интерактивную кнопку с помощью команды Control|Test Movie. Если вы находитесь в режиме online, то после щелчка на кнопке в новое окно браузера будет загружен указанный вами URL. Представление начинаетсяЧтобы поделиться своими достижениями, необходимо опубликовать созданный ролик. При этом Flash конвертирует *.FLA-файл в пригодный для Internet Shockwave-файл с расширением *.SWF и одновременно осуществляет его сжатие. SWF-файлы можно просматривать либо во Flash-плейере, либо в браузере. Правда, необходимо встроить SWF-файл в HTML-страницу, но это сделает Flash, причем почти автоматически: вызовите File|Publish Settings, откройте вкладку Formats и выберите опцию Flash (.swf). Если же вы отметите еще и опцию HTML, то Flash сразу же создаст HTML-файл, который будет содержать HTML-код для открытия Flash-ролика. Теперь щелкните на Publish. Flash создаст SWF-файл там, где уже находится соответствующий FLA-файл. Итак, вы знаете достаточно, чтобы начать использовать Flash в своих Web-страницах. Стоит иметь в виду две вещи: во-первых, Flash может гораздо больше, чем описано в этой статье, и позволяет делать это гораздо быстрее и эффективнее. Не пожалейте времени на знакомство с одной из книг по данной теме. И во-вторых, само по себе применение Flash не гарантирует создания привлекательной Web-страницы или программы. Как любой другой инструмент или технология, Flash требует от разработчика наличия базовых знаний по дизайну и графике, художественного вкуса и, конечно же, чувства меры. Источник: http://www.chip.com.ua/articles/
| ||
Copyright © "Internet Zone", http://www.izcity.com/, info@izcity.com |