Создание флешек и анимации в программе SWF Text. Передовой опыт — руководство по созданию SWF-приложений В чем создать файл swf

Пару раз уже приходится потеть над не совсем стандартной задачей: есть флеш-баннер (файл в формате.swf), который нужно сделать ссылкой... Вообще по феншую подобные вещи делаются в самом флеше еще во время разработки баннера, и ссылкой выступает непосредственно баннер без никакого оборачивания его в тег . Но, видимо, часто флешеры забывают спросить заказчика, куда должен вести баннер, и сиё дело перекладывается на плечи верстальщика. И вот здесь возникает проблема.

Вариант 1 (нерабочий) . С ходу приходит идея тупо обернуть баннер ссылкой. Но если просто обернуть код самого флеш-баннера в тег ссылки код флеш-баннера , то, как это ни странно, ничего у вас не выйдет: при наведении на баннер курсора ссылка в строке состояния будет не видна, и клик по баннеру ничего не даст.

Вариант 2 (нерабочий) . Изощренный верстальщик пойдет дальше и попробует сделать ссылку блочной и спозиционировать её абсолютно прямо поверх баннера, задав её z-index побольше. Но, как ни странно, и это ничего не даст. Самое время очертить проблему : flash-объекты по-умолчанию обладают бесконечным z-index"ом, перекрывая любой, даже абсолютно позиционированный над ними объект.

Вариант 3 (частично рабочий) . Чтобы избавить flash от бесконечного z-index"a, разработчики flash"a дали нам удобный параметр: Или же просто wmode="opaque" , если встраиваете flash через .

Здесь у нас получается следующий вариант:

Но и это еще не все! Ведь данный вариант, если в ссылке нет никакого текста, странным образом отказывается работать в IE 6-9 (если в ссылке все же будет текст, то этот текст поверх flash-баннера будет вполне кликабельным в IE), и как обычно для осла нам потребуется специальный костыль...

Вариант 4 (100% рабочий)

Чтобы вариант 3 работал и в IE, необходим уникальный костыль — задать для ссылки прозрачный бэкграунд при помощи однопиксельной прозрачной картинки (в данном случае s.gif):

Данный вариант работает во всех популярных браузерах. Я лично проверил на IE7-9, актуальных на сегодня версиях FF, Safari, Opera.

Уясните основные структуры кода, написанного на AS3. Есть три основные части любого AS3 кода:

Создайте объекты, с которыми будет взаимодействовать игрок. К объектам можно отнести спрайты, персонажей или видеоклипы. В нашем примере простой игры вы будете создавать прямоугольник.

Задайте свойства объекта. Для этого откройте меню «Изменить» и выберите пункт «Преобразовать в символ» (или нажмите F8). В окне «Преобразовать в символ» присвойте объекту легко узнаваемое имя, например, «враг» (enemy).

  • Найдите окно «Свойства». В верхней части окна расположено пустое текстовое поле, помеченное как «Имя образца» (если навести на это поле курсор). Введите то же имя, которое вы вводили при преобразовании объекта в символ (в нашем примере «враг»). Это приведет к созданию уникального имени, которое можно использовать в AS3 коде.
  • Каждый «образец» является отдельным объектом, который зависит от кода. Вы можете скопировать уже созданные «образцы»; для этого несколько раз нажмите «Библиотека» и перетащите «образец» на «сцену». При каждом добавлении «образца» его имя будет меняться («враг», «враг1», «враг2» и так далее).
  • Когда вы обращаетесь к объекту в коде, просто используйте имя «образца» (в нашем примере «враг»).

  • Изменение свойств образца. После создания образца вы можете изменить его свойства, например, изменить размер. Для этого введите имя образца, затем «.», затем название свойства, а затем значение:

    • enemy.x = 150; Задает положение объекта «враг» по оси Х.
    • enemy.y = 150; Задает положение объекта «враг» по оси Y (начало оси Y лежит в верхней точке «сцены»).
    • enemy.rotation = 45; Поворот объекта «враг» на 45° по часовой стрелке.
    • enemy.scaleX = 3; Растягивает объект «враг» по ширине на множитель 3. Отрицательное значение величины перевернет объект.
    • enemy.scaleY = 0.5; Урежет высоту объекта вдвое.
      • .

  • Изучите команду trace() . Она возвращает текущие значения для конкретных объектов и необходима для определения того, что все работает правильно. Не стоит включать эту команду в исходный код игры, но она понадобится вам для отладки программы.

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

    var enemyHP : Number = 100 ; // Задает величину запаса здоровья противника (100 в начале игры). var playerAttack : Number = 10 ; // Задает силу атаки игрока при щелчке по противнику. enemy . addEventListener (MouseEvent . CLICK , attackEnemy ); // Действие этой функции направлено непосредственно на объект «враг», // то есть функция запускается только тогда, когда щелчок приходится на объект, // а не на другое место на экране. setEnemyLocation (); // Размещает противника на экране. // Запускается в самом начале игры. function setEnemyLocation () : void { enemy . x = 200 ; // Перемещает противника вправо на 200 пикселей от левой части экрана. enemy . y = 150 ; // Перемещает противника вниз на 150 пикселей от верхней части экрана. enemy . rotation = 45 ; // Поворачивает врага на 45 градусов по часовой стрелке. trace ("enemy"s x-value is" , enemy . x , "and enemy"s y-value is" , enemy . y ); // Отображает текущую позицию противника для отладки. } function attackEnemy (e : MouseEvent ) : void // Создает функцию для описания атаки при щелчке по противнику. { enemyHP = enemyHP - playerAttack ; // Вычитает значение силы атаки игрока из значения запаса здоровья противника. // В результате получается новое значение запаса здоровья противника. enemy . scaleX = enemyHP / 100 ; // Меняет ширину на основе нового значения запаса здоровья противника. // Это значение делится на 100, чтобы получить десятичную дробь. enemy . scaleY = enemyHP / 100 ; // Меняет высоту на основе нового значения запаса здоровья противника. trace ("The enemy has" , enemyHP , "HP left" ); // Отображает потерянный запас здоровья. }

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

    Что представляют собой SWF-файлы?

    Немногие задумываются над тем, что собой на самом деле представляет файл анимации формата SWF, считая его обычным видео.

    На самом деле сами файлы являются компилированными производными от исходного формата FLA, который, в свою очередь, является проектом, в котором можно увидеть и изменить изначальную структуру. Естественно, для этого нужен какой-нибудь редактор SWF-файлов. Но какой? Сегодня ведь для создания и редактирования Flash-анимации создано столько программ, что в них достаточно легко запутаться.

    Чем открыть SWF-файл?

    К редакторам вернемся чуть позже. Пока же рассмотрим, чем открыть SWF-файл в самой простой ситуации. Вариантов как минимум два: либо использовать какой-нибудь программный проигрыватель, поддерживающий данный формат (KMPlayer), либо запускать воспроизведение в веб-браузере.

    Во втором случае для корректного воспроизведения обязательным условием является наличие установленного плагина Flash Player от компании Adobe или его аналога в виде расширения Macromedia Flash, что, в общем-то, то же самое.

    Принцип редактирования готового Flash-ролика

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

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

    Лучшие редакторы для создания анимации с нуля

    Тем не менее для создания ролика (а не его редактирования) на начальном этапе могут применяться и самые простые приложения, и целые программные пакеты профессионального уровня.

    Все их описать не получится, но среди предназначенных для этого программ можно выделить несколько наиболее популярных:

    • Alligator Flash Designer.
    • SWiSH Max.
    • Adobe Flash Professional.
    • Corel R.A.V.E.
    • Sony Vegas Pro.

    Alligator Flash Designer

    Этот SWF-редактор на русском языке из всех далее представленных является самым простым и предназначен в основном для быстрого создания анимационных баннеров, которые будут использоваться на сайтах в интернете.

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

    SWiSH Max

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

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

    Adobe Flash Professional

    Редактор SWF-файлов Adobe Flash является программным пакетом профессионального уровня, который с первого раза освоить сможет далеко не каждый.

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

    Corel R.A.V.E.

    Перед нами еще один профессиональный редактор SWF, обладающий возможностями, сравнимыми с предыдущим пакетом от Adobe.

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

    Sony Vegas Pro

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

    Программа позволяет создавать и редактировать анимационные ролики (в данном случае упор делается именно на них) с использованием более 200 эффектов, редактирование можно производить на основе 8-битного режима, а на стадии финализации для улучшения качества переключиться на 32-битный. Тут же можно применять цветовые фильтры для устранения различий в разных фрагментах, задавать частоту раскадровки на уровне 30 fps и выше, а также устанавливать самые разные соотношения сторон изображения, включая даже преобразования и переходы между ними (4:3, 16:9, 16:10), и т. д. В общем, инструментов хватает.

    Дополнительные утилиты для работы с Flash

    Говоря о создании и редактировании анимационных роликов, нельзя обойти стороной и некоторые дополнительные утилиты, которые могут пригодиться в работе. В частности, это касается преобразования конечного SWF-файла в исходный формат проекта FLA путем декомпиляции (форматирования кода), а также некоторых дополнительных инструментов, применяемых для улучшения качества изображения и уменьшения размера конечного файла без потери качества.

    Среди самых необходимых программ можно отметить следующие:

    • Flash Decompiler Trillix.
    • Sothink SWF Decompiler.
    • Flash Optimizer.
    • Sparkle SWF Optimizer.

    Flash Decompiler Trillix

    Это программа понадобится начинающему пользователю для преобразования файла SWF в формат FLA, чтобы проект можно было открыть даже в самом простом редакторе и внести в него необходимые изменения.

    По сути, это продвинутый конвертер с возможностями редактора, в котором изменения можно вносить «на лету». Также с его помощью можно производить пакетную конвертацию. И делается это все без обязательной установки плагинов Adobe и Macromedia.

    Sothink SWF Decompiler

    Эта программа - тоже декомпилятор-редактор, правда, платный. Возможности его весьма интересны. Он ориентирован на быстрое создание или редактирование баннеров, роликов и даже Flash-игр.

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

    Flash Optimizer и Sparkle SWF Optimizer

    Эти две небольшие утилиты, как уже понятно из названия, являются некими оптимизаторами, позволяющими уменьшить размер готового SWF-файла для экономии занимаемого места без потери качества. Особенно они пригодятся всем тем, кто размешает свои работы в интернете или занимается созданием баннеров и онлайн-игр Flash-формата.

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

    Что использовать?

    Наконец, вопрос самый главный: «Что из всего этого выбрать?». Думаем, начинающим аниматорам и веб-дизайнерам начать стоит с самых простых утилит. Тем, кто хоть немного разбирается в создании и редактировании SWF-роликов, без сомнения, подойдут профессиональные утилиты. Тут выбор за пользователем. Впрочем, при желании и изучении справочной информации, которая имеется в большинстве представленных приложений, освоить работу с ними можно очень даже просто. Но какой же редактор лучше? По праву пальма первенства принадлежит разработкам компании Adobe, хотя и остальные редакторы и декомпиляторы сбрасывать со счетов не стоит.

    Всё же существующие SWF flash-фильмы могут быть использованы как образцы для создания новых flash-фильмов (при замещении видеоклипов, текстов, картинок, разновидностей скриптов действий в SWF образце). ... - Способность конвертировать SWF в EXE, SWF в SCR (экранную заставку). ... - Способность использовать существующие SWF файлы как шаблоны для создания новых flash фильмов.

    5 следующие: - Преобразование MP3/WAV файлов для прослушивания или SWF звуков; - Преобразование MP3 файлов; - Создание SWF Звуковых Библиотек; - Перезаписывание через микрофон и прямое преобразование в SWF ; - Выбор сотни звуковых файлов сразу для преобразования; - Легкий в использовании интерфейс; - Загрузка сервера Программы Передачи Файлов; - Создание XML базированного проекта;...

    Sothink SWF Decompiler – это лидирующая сервисная программа, для захвата, декомпиляции и извлечении Shockwave Флэш фильмов, особенно конвертировании ваших SWF в FLA. ... Для управления, просмотра веб страницы в Internet Explorer или Firefox, вы можете включить Sothink SWF Catcher в качестве вспомогательной программы для захвата флэш фильмов; данная программа очень удобна для декомпиляции SWF .

    Данная программа создания флэш может редактировать практически все элементы SWF файлов, такие как: тексты, фигуры, URL, ActionScript и т. ... Вы можете найти все, что вы могли слышать об этом – дизайн форм, создание движения, проводимое движение и добавление потокового звука; или всего что вы слышали об этом – редактируйте SWF напрямую.

    Анимированный клип может быть сохранен в avi или swf формате и может быть с легкостью выгружен на веб страницу. ... Создание анимации еще никогда ранее не было такой простой операцией. ... Конвертирует фильмы в анимационные клипы. ... Просто скачайте фильм или домашнее видео (в avi формате), щелкните кнопкой и просмотрите готовую анимацию.

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

    ... - Создание неограниченного количества анимации. ... - Визуализация превращения в различных популярных форматах, включая Флэш SWF и анимированные GIF, также как экспорт в реальных форматах, таких как JPEG, PNG, TIFF и других. ... - Плюс большое количество дополнительных функций. ... - Распределение анимации с друзьями и семьей, используя встроенную функцию отправки по электронной почте.

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

    Технология Flash

    Мультимедийная основа, была разработана компанией Macromedia . Но после ее поглощения (слияния ) все права на технологию перешли новому владельцу — компании Adobe Systems .

    Область современного применения Adobe Flash :

    • Создание веб-приложений – достаточно новое направление. Подразумевает полное или частичное применение Flash для создания сайтов. При частичном применении с помощью данной технологии создаются отдельные элементы дизайна: различные интерактивные меню, анимированные кнопки и т.д.

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

    • Реализация мультимедийных возможностей – для прослушивания аудио и воспроизведения видео на сайтах часто используют медиа плееры, созданные на основе Flash . Их разработка включает в себя использование одного из скриптовых языков (чаще JavaScript ):
    • В средствах интернет-рекламы – чаще всего технология используется для создания анимированных баннеров. Они подразумевают не только проигрывание мультимедийной рекламы, но и некое взаимодействие с пользователем на игровой основе.

    Основы и инструментарий для разработки Flash

    Для создания флеш анимации чаще всего используется традиционный инструментарий от Adobe :

    • Adobe Flash Professional – программа для создания интерактивной анимации (аниматор );
    • Adobe Flash Builder – среда для создания интерфейса веб-приложений;
    • Adobe Flash Player – интегрируемый в браузер плеер для воспроизведения Flash .

    Кроме него воспроизводить мультимедийное содержимое такого типа может ряд сторонних приложений. Наиболее популярными из них являются Gnash , QuickTime и некоторые другие:

    Данная технология позволяет отображать любой тип графики (растровую, векторную, 3D ). А также поддерживает потоковую ретрансляцию аудио и видео данных. Специально для мобильных устройств была разработана облегченная версия Flash Lite .

    Основным стандартом для флэш-файлов является расширение SWF . Аббревиатура расшифровывается как Small Web Format . Видео, записанное в Flash , имеет файловые расширения FLV , F4V .

    В основе разработки интерактивной анимации на флэш лежит векторная графика. Именно благодаря этому удалось реализовать поддержку мультимедийной платформы и независимость качества анимации от разрешения экрана.

    Размер файла флэш приложения одинаков для всех пользователей независимо от технических характеристик экрана (разрешения ).

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

    К недостаткам технологии можно отнести следующие моменты:

    • Сильная нагрузка на центральный процессор клиентской машины. Это связано с низкой эффективностью виртуальной машины флэш, встраиваемой вместе с проигрывателем в браузер пользователя;
    • Высокая вероятность возникновения ошибок – проигрывание флэш анимации может происходить с высокой вероятностью возникновения ошибок. Причем сбои в проигрывании Flash негативно влияют на работу всего клиентского приложения (браузера ). Это связано это с недостаточным контролем отказоустойчивости программного кода при создании флэш-приложений;
    • Невозможность индексирования – весь текстовый контент, отображаемый в содержимом Flash , не участвует в процессе индексации. Данное ограничение особенно проблематично для тех ресурсов, которые созданы на основе этой технологии.

    Обзор стороннего программного обеспечения для создания Flash

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

    Кроме создания и редактирования флэш редактор «умеет » работать со всеми остальными видами веб-анимации (GIF , HTML и другие стандарты):

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

    Для того чтобы понять, как сделать флеш анимацию в этом приложении, воспользуемся встроенными шаблонами. Диалоговое окно «New From Template » появляется сразу после запуска программы. Кроме того его можно вызвать через пункт главного меню «File ». Среди предлагаемых вариантов мы выбрали создание баннера:

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

    На следующих этапах нужно задать размеры баннера и ввести 5 фраз текста, которые будут проигрываться в анимации. Кроме того необходимо указать адрес ресурса, на который пользователя приведет клик по баннеру:

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

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

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

    Рекомендуем почитать