» Колонка редактора: MustLive
» Колонка редактора: Даниэль
» Новости из мира Flash
» Macromedia Flash 5
» Оптимизация флеш файлов
» Имитация трехмерных эффектов во Flash
» Софт-обзор: Andrushkas flash player
» Flash в вопросах и ответах
» Post Scriptum

Здравствуйте дорогие читатели. В этом выпуске рассылки вас как всегда ожидает много интересной информации. Из последних новостей вы узнаете о выходе бета версии программы Acrylic - нового инструмента дизайнера. В рассылке мы рассмотрим такой важный аспект разработки флешек, как оптимизация флеш файлов. Также рассмотрим имитацию трехмерных эффектов во Flash. В софт обзоре вас ожидает программа для проигрывания флешек Andrushka's flash player. А в разделе "Flash в вопросах и ответах" мы расскажем вам о том как подключить к своему сайту флеш-меню или флеш-кнопку. Начиная с этого выпуска, мы начинаем серию публикаций для новичков, эти статьи расскажут вам о принципах анимации, познакомят с ActionScript и программным управлением звуком. Сегодня это статья "Macromedia Flash 5" (начиная с версии 5 во флеше появились профессиональные возможности программирования и работы c мультимедиа).

Приветствую Вас, дорогие читатели! Как Вы уже наверно заметили, наша рассылка перешла на еженедельный режим выхода. Это конечно радует, т.к. та информация с которой я очень хочу с Вами поделиться, будет донесена до Вас гораздо быстрее! Также хочу сообщить, что в нынешней и в своих будущих статьях я буду уделять особое внимание анимации: ее созданию, принципам, трехмерной графике во Flash, иллюзии движения и тому подобное. Почему именно это? Дело в том, что Сеть полна сайтов предлагающих обучение основам Flash. Мы же делаем ставку на то, чтобы предложить Вам материал, который позволит познать как же анимировать Вашего персонажа, действие, сцену так, чтобы это здорово смотрелось. Такого в Сети Вы не найдете - это точно! Ладно, довольно лирики. В этом выпуске я предлагаю Вашему вниманию статью о том как создавать трехмерные эффекты в среде Flash. Статья носит общий, ознакомительный характер, но в следующих выпусках я буду уделять внимание конкретно созданию того или иного эффекта. Трехмерная графика во флэш-мультах очень популярна, однако ее очень немного ввиду сложности ее обработки и создания. Но все же, мы ни в коем случае обходить эту тему не будем... Далее, представляю Вам обзор одного из самых лучших флэш-плейеров, который также очень поможет Вам при изучении чужих работ. Пожалуй и все! До встречи!

Acrylic - новый инструмент дизайнера http://www.microsoft.com/products/expression На сайте Microsoft доступна бета-версия новой программы под кодовым названием "Acrylic". Это программа для работы с векторной графикой (с поддержкой растровой графики). В Acrylic гораздо больше возможностей для редактирования изображений, чем в обычных редакторах уровня Paint, в частности, присутствует поддержка слоев (растровые слои могут использоваться параллельно с векторными). По возможностям программа близка к Xara. Основный достоинством программы есть технология "skeletal strokes" (скелетных штрихов), которая приносит возможности рисования реалистичных мазков и штрихов уровня растрового редактора Corel Painter, в мир векторных редакторов. Теперь кроме рисования реалистичных мазков, вы всегда можете изменить их параметры (чего нельзя сделать в растровых редакторах). В основе новой программы приложение Expression, права на которое Microsoft купила в 2003-м году вместе с самой компанией Creature House из Гон Конга. Пока что неизвестно, какую роль будет играть программа в дальнейших планах компании. То, что она может открывать файлы PSD и PDF, а также производить экспорт в эти форматы, говорит о том, что, возможно, Microsoft намеревается сделать Acrylic конкурентом таких продуктов Adobe как Photoshop и Illustrator, и при этом будет предлагать ее по более низкой цене. Сама компания Microsoft на сайте программы Acrylic позиционирует свой продукт как "a unique graphics program aimed at the fine artist". Бета-версию программы скачать можно с сайта производителя (http://www.microsoft.com/products/expression). Это триал-версия на 180 дней. В результате развития программы Expression, Microsoft не только добавила новые возможности, но и убрала некоторые ранее существовавшие. В частности из Acrylic была убрана возможность экспорта в формат SWF Flash. Что конечно уменьшает полезность данной программы в глазах флеш разработчика (хотя как вариант можно производить экспорт в промежуточный формат, с последующим импортом в редактор Flash). При этом последняя версия программы Expression 3.3 (наследницей которой и стала Acrylic) в данное время доступна для скачивания на сайте компании. Бесплатно скачать Expression 3.3 (для Windows или MacOS) вы можете на сайте Microsoft: http://www.microsoft.com/products/expression/previous/expression3_downloadlinks.aspx

Как вы думаете, реально ли уместить страничку, содержащую приличное количество анимации, звука и удивительных способов интерактивности в файл порядка 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 5. Программа работает под Windows 95/98/NT/2000. Установить ее очень легко - с этим справится любой, кто установил хотя бы парочку программ в Windows. После установки можете смело заходить в нее, и вот, приблизительно, то, что вы увидите: Рис. 1 - Внешний вид Flash 5 Интерфейс Flash 5 очень похож на интерфейс программ Adobe. Он весьма удобен и легок. После некоторого времени работы с программой понимаешь, как хорошо все продуманно и сколько труда разработчики Macromedia вложили в свое детище. Слева находятся панели инструментов. С помощью них можно выбирать инструменты, а также управлять рабочей областью, модифицировать объекты и выбирать простые цвета. Справа находятся диалоги настройки инструментов, цвета, текста, свойства кадров и объектов. Посередине - рабочая область, где мы будем творить, а над ней шкала времени (Timeline). Во Flash очень интересно рисовать. Этот векторный редактор не похож ни на один из существующих. К сожалению, подробное описание инструментов рисования выходит за рамки данной статьи. Впоследствии, мы можем рассмотреть эти инструменты подробнее. Самый хороший способ чему-то научится - практика при каком-то количестве теории. В качестве практики просто поэкспериментируйте с различными инструментами, а в качестве теории можете прочитать про это в книгах или в Сети. Странички (файлы, анимации - как хотите) Flash принято называть фильмами (Movie), хотя мне больше нравится слово "мультик". Наверное, это оттого, что во Flash имеется шкала времени и, хоть вы и обладаете безграничными возможностями по использованию этой шкалы, ваше творение все равно будет упорядоченно выполнятся во времени. На самом деле, вы можете останавливать, вновь запускать мультик, прыгать с одного кадра на другой, загружать другие мультики и много еще чего. Процесс создания состоит в следующем. Вы создаете так называемый "авторский файл", который имеет расширение .fla, а затем он транслируется в результирующий .swf файл, который уже может быть просмотрен в браузере, обрамлен с помощью HTML, и т.д. Кстати, Flash может записать ваше творение в отдельный исполняемый .exe файл, сгенерировать java-код. И даже сохранить в виде статического GIF изображения. Давайте попробуем нарисовать первый простой мультик. Нам понадобятся инструменты - "овал" и "выделение". Выполните следующую последовательность действий: 1. Выберите инструмент "овал" и нарисуйте с помощью него овал или круг в левой части сцены. 2. Далее выберите инструмент "выделение" и выделите весь овал вместе с кромкой. Для этого либо охватите вашу фигуру прямоугольной рамкой, держа кнопку мыши нажатой, либо два раза быстро щелкните на ней. У вас выделится весь овал. 3. Теперь войдите в меню Insert и выберите Convert to symbol (или нажмите F8). В появившемся диалоге выберите селектор Graphic и нажмите ОК: Рис. 2 - Выбор типа символа при создании 4. Теперь выберите на шкале времени вверху 25-й кадр (просто щелкните по нему мышкой), и выберите меню Insert->Keyframe (или нажмите F6). Этим вы создадите так называемый "ключевой кадр" на 25-м кадре вашей шкалы времени. У вас должно получиться нечто похожее: Рис 3. - Временная шкала 5. Выделите теперь ваш кружок (теперь вокруг него возникнет голубая рамка) и переместите его в правую часть рабочей области. 6. Вернитесь на шкале времени в 1-й кадр. (В доказательство Вы должны увидеть свою фигуру опять в левой части экрана). Из меню Insert (или из контекстного меню при нажатии правой клавиши мыши на первом кадре) выберите Create motion tween. Поздравляю! Вы только что сделали очень простой, но уже мультик, во Flash. Выберите Control->Play (или просто нажмите Enter) чтобы просмотреть результат. 7. Давайте добавим кое-что в наш мультик. Выберите опять 25-й кадр и выделите вашу фигуру. Войдите в диалог Effect. Если сложно отыскать нужную закладку в диалогах справа, выберите Window->Panels->Effect. В выпадающем списке в этом диалоге выберите Alpha (прозрачность), а появившийся параметр опустите до 0%. Рис. 4 - Установка прозрачности Попробуйте еще раз проиграть ваш фильм. Во Flash можно всего лишь задавать "ключевые точки" анимации, программа сама будет просчитывать промежуточные кадры. Хотя вполне возможна покадровая анимация. 8. Последний шаг. Нам нужно оттранслировать наше творчество в .swf файл и сгенерировать HTML файл, который загружал бы мультик в браузер. Это можно сделать, выбрав File->Publish (или нажав Shift-F12). Теперь можно открыть созданный вами HTML файл в браузере. Это можно сделать даже из Flash, выбрав File->Publish Preview->HTML (или нажав F12). При этом Flash воспользуется браузером, установленным по умолчанию. Вот, вкратце, цикл создания простой сценки во Flash. У вас должно получится приблизительно следующее: Удачи! Автор: Рубен Сардарян.

Размеры итоговых флеш роликов имеют важное значение и являются насущной проблемой флеш разработчика - ведь этот файл после публикации на сайте придётся скачивать посетителям и не один раз. А с учётом медленного соединения (диал-ап) и оплатой за трафик (выделенки), это становится ещё и проблемой самих пользователей. К тому же флеш ролики занимают место на жёстком диске (как на локальном, так и на веб сервере) - и чем меньше они занимают, тем больше на диске уместится полезной информации (тех же флешек). Какие именно параметры больше всего влияют на размер флешки (swf-файла), как можно оптимизировать его размер и какие для этого существуют средства. Всё это вопросы касающиеся оптимизации флеш файлов. На размер итоговой флешки влияют следующие параметры: 1) наличие аудио данных, 2) наличие видео данных, 3) количество растровых данных, 4) сложность векторных данных, 5) сложность и длительность анимации. 6) использование шрифтов. Среди средств оптимизации присутствующих в самом флеше выделим следующие: 1) Компрессия swf-файлов - наличествует во флеше начиная с версии 6 (МХ). Включить её можно в настройках Публикации (File->Publish Settings->Flash->Compress Movie). В зависимости от данных, использованных во флешке, степень сжатия может достигать 1:2 и выше. 2) Отчёт по использованию места во флеш ролике. В нём вы найдёте полную информацию о том, какие объекты сколько используют памяти. Включить данную опцию можно в настройках Публикации (File->Publish Settings->Flash->Generate size report). Среди рекомендаций по оптимизации могу выделить следующие: 1) Установите оптимальную компрессию для аудио и видео данных (устанавливается в свойствах каждого объекта в Library). 2) Рекомендую для аудио использовать компрессию в формат mp3. Задайте оптимальные параметры для аудио данных (битрейт и качество). Воспользуйтесь предварительным тестированием (кнопка Test) для оценки качества и итоговых размеров скомпрессенного файла. 3) При импорте видео, установите качество, интервалы ключевых кадров и масштаб, при этом воспользуйтесь функцией предпросмотра (Preview) для оценки качества видео. 4) Для растровых изображений рекомендую устанавливать компрессию индивидуально (в библиотеке, хотя и существуют общие установки в настройках Публикации). При этом качество можно проконтролировать предварительным тестированием. Среди поддерживаемых флешем форматов сжатия, наибольший выигрыш даёт формат JPG (c потерями качества), в сравнении с PNG/GIF (без потерь качества). Последний формат вам может пригодится в случае импорта gif анимации или png c альфа-каналом. 5) Оптимально используйте градиенты (только обосновано). В особенности сложные градиенты (с большим количеством градаций). 6) При использовании сложной анимации (особенно если она импортирована из другой программы в редактор Flash), рекомендую отдавать предпочтение встроенным возможностям анимации флеша - Motion Tween и Shape. Они серьёзно экономят размер итоговой флешки. Если это возможно - всё зависит от входных данных. Если же анимация этими средствами невозможна или слишком затруднена, то постарайтесь оптимизировать количество кадров такой (покадровой) анимации. 7) При использовании включенных во флеш файл шрифтов, можете ограничить включении лишь определённой группой символов (их можно даже перечислить) - чтобы не использовать в ролике ненужные символы.

Реализация трехмерной анимации во Flash не сильно отличается от реализации других визуальных технологий (видео, например): Flash просто имитирует эти эффекты. Flash, по своей сущности, является программой для создания двумерной (плоской) графики, однако трехмерные эффекты являются одной из наиболее сильных сторон. Аниматору предоставляются все инструментальные средства, необходимые для управления элементами, предназначенными для создания трехмерной анимации, таких, как построение теней, перспективы и движения. Использование Flash в сочетании с такими программами, как Swift 3D позволяет быстро и гладко создавать анимированные модели с устанавливаемые под любым углом источниками освещения и использовать получаемые файлы в среде Flash. Независимо от того, работаете ли вы с элементами интерфейса или с трехмерными техническими иллюстрациями, потенциал использования трехмерных моделей во Flash представляется достаточно весомым. Автоматическое создание источников освещения и перспективы в Swift 3D обеспечивает дополнительную функциональность и гибкость Flash. Однако иногда наличие возможности создания эффектов традиционным способом остается по-прежнему удобным и часто необходимым. Понимание того, как можно манипулировать градиентами, основываясь на расположении источников освещения, и как они связаны с перспективой и движением, всегда будет незаменимым инструментом для возврата назад при использовании Flash при создании трехмерных эффетов. Существует несколько направлений создания 3D эффектов во Flash: 1) Векторизация и освещение Вы создаете реалистичные трехмерные фоновые изображения путем векторизации (трассировки, о чем мы беседовали в предыдущих выпусках рассылки) трехмерных сцен или фотографий. Затем на полученное изображение накладываете освещение для придания картинки большей убедительности и реалистичности. 2) Создание и импортирование трехмерных эффектов с использованием специальных программ (Swift 3D). Вы импортируете файл, созданный в программе для сотворения трехмерных эффектов, во Flash в виде .swf формата. Далее, этот файл разбивается на последовательность кадров (другими словами, создается пошаговая анимация вашей трехмерной модели, которую вы можете легко редактировать) и вы осуществляете наложение освещения на полученную трехмерную модель. Поделюсь одним секретом: как известно, Flash позволяет импортировать в свою среду видео в формате QuickTime. Особенность этого заключается в том, что этот видеофрагмент также может быть разбит на последовательность кадров, которую можно легко трассировать в векторную графику! Это открывает большие возможности. В частности, владельцам цифровых фотоаппаратов, поддерживающих запись коротких видеороликов в формате QuickTime, предоставляется возможность снять предмет или его реальную модель так как нужно Вам и полученный ролик экспортировать во Flash. К примеру, Вам нужно создать следующий эффект: легковой автомобиль (вид спереди, на капот) начинает поворачиваться к камере боком, затем плавно останавливается, когда повернут к камере задней частью. Сняв такой ролик и импортировав его во Flash Вы получите готовую трехмерную модель, которую остается трассировать и отредактировать (наложить цвет и если нужно - освещение). 3) Создание трехмерных эффектов средствами Flash. Этот способ довольно сложен (при создании сложных сцен). Здесь хорошо справятся только гении, которые наяву видят модель в трехмерном пространстве. В действительности трехмерных эффектов можно достичь применяя градиенты. К примеру, в одном из прошлых номеров рассылки (статья "Градиент - венец реалистичности") я приводил скриншоты объектов, которые можно реализовать с помощью градиента. То есть создается пошаговая анимация трехмерного объекта. Напоследок предлагаю, в качестве примера, файл QuickTime, где показан вращающийся вокруг оси фантастический ховеркрафт. Это пример, какие эффекты могут быть реализованы в среде Flash. В следующей статье я расскажу как импортировать видеофрагменты QuickTime в среду Flash на примере этого ролика. Так что качайте - в следующей выпуске будем тренироваться на нашем ховеркрафте! До встречи! Ролик: hovercraft.

Предлагаю Вашему вниманию один из лучших флэш-плейеров, которые вообще существуют. Программист-энтузиаст понял что нужно для полного счастья любителю флэша и собравшись силами, создал эту простую и как следствие - гениальную программу для просмотра флэшек. Помимо простого воспроизведения программа содержит ряд дополнительных фишек. Начнем по порядку. Интерфейс программы выглядит следующим образом: В центре окна мы видим ползунок, отображающий ход воспроизведения ролика. С виду привычная вещь, однако она весьма полезна когда Вы хотите посмотреть (к примеру) мультфильм с середины или какую-то сценку в конце мультфильма. Таким образом сходит на нет основной минус стандартного плейера - невозможность "перемотки" воспроизводимого ролика. Также тут присутствуют регулятор громкости и кнопки управления воспроизведением. Далее, плейер предоставляет уйму полезных данных - слева под ползунком вы можете увидеть из скольки кадров состоит воспроизводимый flash-фильм и сколько кадров воспроизведено на данную секунду. Справа под ползунком отображается фреймрейт (количество кадров в секунду, с которым создан данный фильм). Именно данные о фреймрейте представляют большую ценность для тех кто учится флэш-делу. Поясню. Просматривая какой-либо фильм вы можете проследить зависимость плавности анимации от фреймрейта. Теперь вы будете представлять сколько же кадров в секунду могут дать плавную анимацию, именно ту, которую Вы хотите реализовать в своем проекте! И наконец, еще одна полезная функция - Play Geine. Включение этой опции позволяет программе самой определять, когда мультфильм просит нажать на кнопку и нажимать ее. Например мультфильм просит нажать кнопку "Смотреть" для старта воспроизведения - программа сама нажимает ее. Итак, перед нами очень полезная программка, очень компактная, нересурсоемкая - наш выбор! Оценка: 8,5/10

Вопрос: Назовите то из-за чего во Flash происходит критическая загрузка процессора компьютера? Ответ от Даниэля: Как известно, Flash - векторный редактор, а векторная графика, помимо многих своих преимуществ имеет и серьезный недостаток с которым надо считаться - довольно высокая загрузка центрального процессора компьютера (CPU). В программе Flash есть несколько ситуаций, приводящих к повышению нагрузки на CPU. Это: Чрезмерное использование motion tween; Использование прозрачности (alpha); Маскирование; Градиенты; Любое из вышеперечисленного в сочетании с растровыми изображениями. Мы еще будем обсуждать ситуацию с загрузкой CPU и о том как нужно оптимизировать ролик и удерживать загрузку процессора на приемлемом уровне... Оставайтесь с нами! Вопрос: Как подключить к моему сайту флеш-меню или флеш-кнопку? Ответ от MustLive: Если вы уже умеете разрабатывать кнопки на флеше, и желаете сделать интерфейс на флеше для своего сайта, будь-то целое меню или одна кнопка, то воспользуйтесь следующими методами. После создания меню или кнопки на флеше сохраните swf-файл при этом в настройках Публикации (File->Publish Settings) укажите HTML. Не забудьте только указать событие при нажатии на созданную вами кнопку (переход на указанный веб-адрес - метод getURL). В итоговой хтмл-ке скопируйте весь код находящийся в тегах <object> ... </object>. И вставьте в хтмл файле своего сайта (в месте предполагаемого меню или кнопки). Для этого конечно понадобятся знания HTML. Другим способом может быть визуальный HTML редактор, например Dreamweaver. В нём можно открыть созданную хтмл страницу, скопировать код флешки и вставить в свой сайт. При этом всё наглядно, быстро и не требует дополнительных знаний HTML. Также в Dreamweaver вы можете импортировать созданную флешку (swf-файл), при этом тогда не нужно при публикации в редакторе Flash указывать экспорт HTML кода. Просто сохраняете итоговый swf-файл в папку своего сайта, а дальше уже в Дримвивере импортируете его в свой проект. Кроме этого Дримвивер имеет встроенные средства для создания флеш кнопок (без необходимости использовать редактор Флеш). Вопрос можно задать на форуме в отдельном разделе или по e-mail: subscribe@flashzone.ru.

Все материалы этого выпуска авторские. Новость "Acrylic - новый инструмент дизайнера" и статью "Оптимизация флеш файлов" написал MustLive, статью "Имитация трехмерных эффектов во Flash" и софт-обзор "Andrushkas flash player" написал Даниэль. Задать вопрос в раздел "Flash в вопросах и ответах" можно на форуме, либо по e-mail subscribe@flashzone.ru. По вопросам сотрудничества обращаться на e-mail max@flashzone.ru. Принимаем заявки на обмен обзорами, текстовыми рекламными блоками, простыми текстовыми ссылками с сайтами flash тематик. Перепечатка разрешается только со ссылкой на автора и flashzone.ru. Сайт рассылки: flashzone.ru. Сайты авторов: danimult.net.ru (Даниэль), mlfun.org.ua (MustLive).