Flash-приложение своими руками. Разработка Flash приложения для ВКонтакта Флэш приложения

Если Вы работаете с Flash и используете его пока что только для рисования и простой анимации, создание роликов или баннеров, но ни разу не занимались программированием в нём, то вероятно Вам очень хотелось узнать эту сторону flash-а .

Что такое ActionScript ? Как можно писать код на flash-е ? Как можно полноценно программировать во flash ? Какие инструменты для этого лучше всего использовать? В данной статье приводятся ответы на подобные вопросы.

Эта статья послужит хорошим руководством новичка в программировании под flash на ActionScript 3.0 и поможет выбрать лучшие инструменты для этого.

Что такое ActionScript?

Action Script — это объектно-ориентированный язык программирования, который добавляет интерактивность, обработку данных и многое другое в содержимое Flash-приложений.

С помощью Action Script можно создавать интерактивные мультимедиа-приложения, игры и веб-сайты.

Если Вы работаете с графической средой разработки Flash IDE (например Adobe Flash Professional CS5), но ни разу не интересовались где там можно писать программный код, то вероятно Вас уже волнует вопрос «Где же он прячется, этот AS3?».

AS3 во Flash IDE.

Создадим новый проект File — New — ActionScript 3.0 (рис. 1).

Рис 1. Создание нового проекта AS3.

Появится пустая сцена с пустым кадром на одном слое. Теперь можно выделить кадр и нажать F9 , тем самым открыть окно «Actions», в котором и находится область редактирования программного кода данного кадра.

Давайте напишем в открывшемся окне следующий код:

ActionScript

var s: String = "its my AS3 code trace!"; trace(s);

var s : String = "its my AS3 code trace!" ; trace (s ) ;

Рис. 2. Код, написанный в редакторе Flash IDE.

Теперь можно запускать флешку (Ctrl+Enter ). Данный код создаёт переменную s типа String (строка) и присваивает ей начальное значение — строку «its my AS3 code trace! «. Далее, функцией trace() , аргументом которой выступает ново созданная переменная, данная строка (а точнее уже значение переменной s ) выводится во вкладку output , которая по умолчанию в интерфейсе IDE располагается рядом с вкладкой timeline .

Таким образом можно открывать и закрывать(на F9) редакторы кода для любого кадра флеш-приложения.

Вроде картина выходит не плохая — можно создавать разные объекты с анимациями (MovieClip ), либо статичные картинки (Sprite ) и у каждого объекта будут кадры и в каждом кадре можно запрограммировать всё что угодно. Выглядит удобно и гибко. Но это лишь на первый взгляд. Представьте что у Вас десятки объектов с десятками кадров и всем им нужно описать кодом различную или схожую логику поведения. Во втором случае (схожая логика) — это вообще означает сотни схожих строк кода, которые можно будет замучиться даже копировать из кадра в кадр. А представьте что в процессе разработки вам понадобится что-то изменить. Нет — это не дело! Не для этого хаоса был задуман язык AS3!

В добавок, если Вы поработаете редактором кода Flash IDE и, к примеру, работали в какой-нибудь другой среде программирования (Delphi, Visual Studio), то сразу заметите, что данный редактор, мягко говоря, удручает своей не удобностью и недоделанностью.

Что же делать, спросите Вы? Искать сторонние редакторы кода.

Альтернативные редакторы кода.

Самый лучший вариант для ОС Windows — это FlashDevelop (FD). Скачать свежую версию можно с сайта .

Для iOS хорошей альтернативой является FDT . Ознакомиться можно на оф. сайте .

FlashDevelop.

Т.к. я на данный момент преимущественно обитаю в Windows, то расскажу о редакторе именно под эту ОС. В будущем, когда наберусь опыта в FDT, то напишу и о нём.

В установке нет ничего сложного, качайте свежую версию с оф. сайта и устанавливайте. Редактор совершенно бесплатный и для компиляции использует Flex SDK. Во время стандартной установки FD сам позаботится об установке последнего. Всё что надо установить для FD самому — это Java .

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

После установки можно создать новый проект (Project — New Project…), откроется диалог создания проекта, как показано на рис. 4.

Как можно заметить, FD позволяет создавать не только AS3 проекты. Но сейчас нас интересует именно AS3 проект, я предпочитаю выбирать заготовку для проекта с Preloader -ом, который и выбран на рис. 4 . Далее введите имя проекта (поле Name ) и назначьте директорию проекта (поле Location ), если стоит галочка «Create directory for project» , то в директории Location будет создана папка с именем проекта (Name) и в неё уже поместятся файлы проекта, если галочка не стоит, то файлы поместятся в указанную директорию Location.

После создания проекта справа Вы увидите структуру файлов и папок проекта, откройте папку src и откройте двойным щелчком файл Main.as . После чего Вы должны наблюдать код примерно такой же, как на рис. 5.

Попробуем написать какой-нибудь код, например примерно тот же, который пробовали в Flash IDE . Писать можно после комментированной строки «// entry point» т.к. это точка где сцена уже точно создана. напишем команду trace() , на рис. 5. я уже позволил себе это деяние:]

Теперь можно скомпилировать проект (F8 ) или сразу запускать для тестирования (F5 ), после запуска в окне Output вы увидите результат работы функции trace() — вывод строки.

Результаты команды trace() можно наблюдать только во время запуска приложения из под IDE, в которой компилируется и запускается код.
При запуске файла.swf в браузере или в обычном flash-плеере результат (а т.е. отображение окна output) не будет виден никому.

Теперь я уверен, что Вам уже не терпится сделать свой первый проект на AS3! А для этого нужно приступить к изучению самого языка.

Изучение языка AS3.

Про AS3 можно конечно писать много, но лучше чем в книгах я вряд ли напишу, тем более что всё уже написано, поэтому моё дело посоветовать лучшую литературу отталкиваясь от своего опыта.

Лучшая книга: Колин Мук — .

Хорошее дополнение к знаниям: Джои Лотт — .

Читал в своё время ещё такую книгу: Рич Шуп — . Написано хоть и не сильно много и подробно, но для новичков сойдёт, если под рукой нет Мука.

Этих книг весьма достаточно для бодрого старта! Читайте и практикуйтесь, практикуйтесь и читайте. Нет необходимости сесть и читать эти книги от корки до корки, т.к. в процессе чтения важно закреплять знания практикой, да и Вам самим будет приятно сделать что-нибудь как можно скорее:]

Во время быстрого поиска документации в инете очень помогает оф. документация от .

Для дальнейшего развития, для хорошего осознания ООП и шаблонов проектирования (а это очень важно для хорошей ООП структуры) Вам будет незаменима следующая книга: Уильям Сандерс, Чандима Кумаранатунг — .

На этом сайте вы так же найдёте не мало аспектов программирования на AS3, накопленных моим опытом.

Или попробовать сделать свой первый прелоадер прочитав статью: Preloader своими руками.

Всего доброго и успешных проектов!

03.12.2009

Статья посвящена быстрой разработке приложений для Flash, причем с использованием флагманского продукта Adobe Flex Builder 3. Следует заметить, что традиционная среда для Flash - Adobe Flash, но она в основном предназначена для рисования и создания анимации. Программировать же гораздо проще с помощью Flex Builder.

В данной статье будет показано, как создать довольно простое и одновременно типичное приложение - каталог продукции с возможностью подсчета стоимости заказа и с учетом дополнительных опций. Такая программа предназначена для ресторанов: пользователю будет доступен каталог блюд, разделенных на категории, а также опция «доставка» и указание числа заказываемых порций.

Нужно признать, что установка на сайт даже простой системы поддержки интернет-магазина решила бы как эту, так и другие проблемы (в частности, формирование корзины заказа или отправку его по e-mail). Однако не следует забывать, что это будет лишь демонстрацией следующих возможностей:

Пересчет стоимости на лету, без перезагрузки страницы. При использовании HTML пришлось бы прибегать к помощи JavaScript, что не всегда просто. Кроме того, потребовалось бы постоянно сохранять выбранные пользователем опции.

Использование анимационных эффектов при загрузке фотографий.

Реализация каталога продукции посредством 40 строк программного кода.

Разумеется, для дальнейшей работы над приложением нужно иметь представление о том, что такое XML (это язык структурного представления данных, подробнее см. http://ru.wikipedia.org/wiki/XML), и обладать хотя бы небольшим опытом разработки настольных приложений (в среде Delphi или Visual Studio).

Итак, начнем. Для работы вам понадобится установленный Adobe Flex Builder 3.

Сразу после запуска вы увидите приветственное окно, в котором предлагается познакомиться со ссылками на уроки по созданию приложений. Это можно сделать и позднее - начинающим полезно поучиться. Чтобы приступить к реализации программного проекта, прежде всего нужно вызвать команду меню File New Flex Project. В появившемся окне создания нового проекта введите имя проекта и то место, где он будет располагаться. Среди дополнительных опций выберите Web application и Application server: None (поскольку пока не планируется использовать никакого сложного взаимодействия с сервером), а потом нажмите кнопку Finish.

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

Окно навигатора проекта (Flex Navigator), отражающее структуру файлов;

Окно Outline, отражающее структуру программы или доступные компоненты (при переключении в режим дизайна);

Основное окно программы с двумя вкладками - Source (редактор кода) и Design (режим визуального проектирования);

Окно Problems, где выводятся сообщения компилятора, отладочная информация и прочие служебные сообщения.

Если вы измените дизайн приложения, то обнаружите, что его код также изменился. Это правильно, поскольку, по сути, вы работаете с MXML-кодом. Язык MXML предназначен для описания интерфейса приложений (ряда компонентов, возможно вложенных друг в друга) в XML-формате. Похожую технологию под названием XAML использует корпорация Microsoft при разработке Silverlight-приложений.

Теперь немного о специфике создаваемого приложения:

Блюда в создаваемом каталоге делятся на категории (закуски, вторые блюда, десерт, напитки);

Для каждого из блюд даны фотография, название, описание и цена;

Предусмотрена возможность заказать несколько порций и доставку.

Вам понадобятся изображения, а также информация о блюдах в структурированном виде.

Для изображений следует создать в папке src проекта (его основной папке) подпапку img и сложить туда нужные объекты. Каждое блюдо имеет идентификатор (например, 53), и большой фотографии блюда название присваивается по шаблону 53big.jpg, а маленькой - 53mini.jpg.

Данные необходимо поместить в файл config.xml и расположить его в папке src. Такой файл показан в листинге 1.

В XML-файле указаны группы блюд (group). В каждую из них может входить несколько блюд (item), у которых указаны идентификатор картинки (img), название (name), цена в рублях (price) и многострочное описание (desc). В конце конфигурационного файла отдельным элементом идет стоимость доставки в рублях (dostavka).

Теперь переходите непосредственно к интерфейсу приложения и для начала определите размер его окна: 800×500 пикселов. Можно было бы сделать и «тянущееся» приложение, заполняющее весь экран, но пока лучше ограничиться таким, у которого фиксированные ширина и высота.

Затем разместите на сцене два статичных текста (компонент Label), раскрывающийся список категорий (компонент ComboBox), галерею выбора блюда (компонент HorizontalList), три изменяющихся текстовых элемента - название, цена и конечная стоимость (также компоненты Label), компонент для изменения количества порций (NumericStepper), флажок выбора доставки (CheckBox). Кроме того, каждому компоненту присвойте идентификатор (ID в панели свойств компонента).

А сейчас начнется непосредственно программирование поведения Flash-приложения. Для этого вам потребуется разобраться с двумя понятиями: источник данных (Data provider) и связывание данных (Data binding).

Источники данных

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

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

Чтобы реализовать подобную концепцию, проделайте следующее (см. листинг 2).

Задайте источник данных. В рассматриваемом случае загрузите данные из файла config.xml и задайте им идентификатор configXML.

Укажите источник данных для раскрывающегося списка - dataProvider=?© {configXML.group}?©.

Укажите, какое из XML-свойств должно быть использовано для задания текстов внутри раскрывающегося списка. Предположим, вы бы хотели (с учетом созданного вами XML-файла), чтобы элементами списка стали атрибуты name соответствующего тега group (т.е. названия - «Закуски», «Десерты» и т.д.). Для этого установите свойство labelField=?©@name?© (символ @ означает, что вы имеете дело с атрибутом, а не вложенным тегом), и тогда элементами соответствующего списка станут ваши группы.

Связывание данных

Предположим, что вы изменили категорию выбранных блюд в раскрывающемся списке. Очевидно, что тогда должен измениться и их набор. Для этого предназначена специальная директива, обозначаемая фигурными скобками ({}). Она подразумевает следующее: «Если изменился источник данных, то необходимо изменить и отображение данных в текущем компоненте».

Как применять это на практике? У вас есть компонент HorizontalList, отображающий набор фотографий блюд текущей категории (закусок или напитков), и компонент ComboBox, где можно выбрать категорию согласно XML-данным. И что замечательно, ComboBox (а также большинство компонентов списочного типа во Flex) обладает свойством selectedItem. Его значение изменяется в зависимости от того, какой из элементов списка выбран пользователем и содержит ли он соответствующую выбору часть источника данных. В рассматриваемом случае, когда источником данных служит XML, это свойство будет включать XML-поддерево выбранной группы блюд.

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

Идентификатор раскрывающегося списка: id=?©cmbGroup?©;

Источник данных для списка блюд dataProvider=?©{cmbGroup.selectedItem.item}?©.

Кстати, подобное поведение нужно реализовать и при выборе отдельного блюда - поменять его изображение, название, цену и описание. Для этого установите следующее:

Идентификатор списка выбора блюд: id=?©lstProduct?©;

Источник данных для адреса ваших картинок: source=?©img/{lstProduct.selectedItem.img}.big.jpg?© (Flex поддерживает и такие сложные конструкции для связывания данных); источники данных для всех текстовых элементов, например для цены (text=?©Цена: {lstProduct.selectedItem.price} р.?©).

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

Программный код вам потребуется лишь для вычисления суммы заказа. Код пишется внутри специальных тегов (см. листинг 2). Вам нужно определить процедуру onChange(), и она будет вызываться каждый раз, когда пользователь произведет одно из трех действий:

Выберет другой продукт. Для каждого компонента при возникновении какой-то особой ситуации генерируется событие, которое может быть обработано программным образом. В данном случае вы должны установить обработку события change (изменение выбранного блюда) для списка блюд: change=?©onChange();?©

Изменит состояние флажка «Включить доставку». Аналогично change=?©onChange();?© для флажка «Доставка». 3. Изменит количество заказанных порций. Таким же образом change=?©onChange();?© для поля ввода числа порций.

На этом основная часть вашего приложения завершена. А теперь кое-что о возможностях «полировки» его внешности:

Чтобы главная картинка не выглядела одинокой, стоит добавить к ней эффект подсветки серым с помощью строки программы filters=?©{}?©; кроме того, можно применять и другие графические эффекты;

Чтобы при смене блюд изображение не изменялось мгновенно, а красиво выплывало, добавлен эффект появления: completeEffect=?©{Fade}?©. Кстати, при небольших дополнительных усилиях можно было бы настроить его длительность, а также реализовать эффекты увеличения (Zoom) и движения (Move), поддерживающиеся внутри Flex. Здесь приведен самый простой вариант.

Из-за ограниченного объема статьи мне пришлось «утаить» одну важную особенность - организацию списка картинок блюд в компоненте HorizontalList. Для этого нужно было бы создать небольшой дополнительный компонент ItemImg (еще три строки кода, но описание такого процесса заняло бы много места) и установить свойство itemRenderer=?©ItemImg?©.

Кроме того, я сознательно опустил аспекты подгрузки конфигурационного XML-файла (с использованием текущего кода он «вшивается» в программу), отправки выбранных блюд и создания корзины, поскольку все это увеличило бы объем статьи за счет не очень интересных технических деталей.

В данной статье я стремился продемонстрировать эффективность использования Flash (и Flex) на примере в общем-то не самой простой задачи создания каталога товаров. Получившееся решение (включая интерфейс) укладывается в 40 строк кода и может быть опубликовано прямо на страницах журнала. На мой взгляд, это лучшее доказательство эффективности создания приложений на Flash по сравнению с приложениями на HTML и JavaScript. Безусловно, сделанный здесь вывод верен не всегда. Однако, надеюсь, я подвел вас к мысли о том, что отдельные задачи можно решить просто и красиво с помощью Flash.

Работающее приложение, использованное здесь для примера, приведено с незначительными улучшениями на «Мир ПК-диске»

При создании приложения в Flex Builder можно выбирать между опциями Web application и Desktop application. Во втором случае созданное приложение будет работать в так называемой виртуальной машине AIR (Adobe Integrated Runtime, интегрированная среда выполнения Adobe), благодаря чему получит доступ к файлам, автозапуску и другим свойствам компьютера. Виртуальная машина AIR сейчас доступна для Windows, Macintosh и некоторых Linux-систем, что позволяет эффективно создавать кросс-платформенные настольные приложения с использованием стандартных возможностей Flash. Лично я уже давно отдаю предпочтение этой возможности перед разработкой приложений на Delphi.

Поскольку название программы Flex приводило в замешательство некоторых заказчиков, разработчики объявили, что ее следующая версия будет именоваться Adobe Flash Builder 4. Сейчас она находится на стадии бета-тестирования.

Кстати, Adobe Flex Builder официально бесплатно доступна для учащихся всех возрастов, от школьников до аспирантов. Чтобы познакомиться с этим подробнее, стоит зайти на http://habrahabr.ru/blogs/flex/41597/,

Все заинтересованные в создании приложений для ВКонтакте, вступайте в группу В Контакте vk.com/club17157755 . В ней вы будете узнавать о появлении новых уроков и исходников, которые помогут вам научиться создавать свои приложения в Контакте.

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

Готовы посвятить изучению программирования несколько лет? Тогда на этом сайте вы найдёте полезные материалы, которые помогут начать разбираться в программировании. Другие знания вы получите в процессе самостоятельной практики, когда уже будете знать какую книгу почитать по конкретному языку программирования.

Как научиться программировать

Создание приложений в контакте - это программирование. Без умения программировать не получится сразу начать создавать хорошие приложения.

Чтобы научиться создавать приложения для контакта, сначала нужно научиться программировать. Нужно понимать что такое переменные, функции, условия, циклы и т.п. Основы программирования нужно получить до того как начинать пытаться создать приложение именно для контакта.

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

Разработка Flash-приложения ВКонтакте

Разработка приложений ВКонтакте

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

В зависимости от того какой тип приложений вы выбрали - Flash или IFrame, вы можете прочитать уроки, помогающие разобраться с тем как работать с ВКонтакте API.

Если не хочите изучать программирование

Если вы не хотите изучать программирование, можете попробовать создать своё IFrame-приложение ВКонтакте с помощью сервиса 3apps.ru - Конструктор IFrame-приложений.

Проблемы при создании приложений

Когда у вас мало опыта в программировании или поставленная задача трудна даже для профессионалов, вы можете попросить помощи на

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

Эта программа, разработанная компанией Adobe, является, пожалуй, самым известным инструментом для создания флеш-приложений, мультфильмов и анимированных веб-объектов. Отличается большим количеством функций, одной из которых является возможность программирования команд на языке Action Script.

Adobe Flash Builder

Флеш Билдер представляет собой мощный редактор исходного кода приложений с функциями отладки. Может работать как самостоятельный инструмент для разработки программ, так и как вспомогательное средство для редактирования проектов, созданных в Adobe Flash Professional.

KoolMoves

Детище американских разработчиков Lucky Monkey Designs призвано составить конкуренцию продуктам Адобе. Обладая теми же основными функциями – производством анимации и программированием действий — программа имеет более дружелюбный интерфейс и является менее сложной в освоении.

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

Приступаем к работе

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

Для начала вам необходимо определить размеры будущего приложения. К примеру, если это будет стандартный баннер, его размеры составят 468 мм на 60 мм. Укажите эти параметры в разделе Movie Properties в полях Width и Height – они обозначают ширину и высоту соответственно. Затем выбирайте цвет основного фона flash приложения. Чтобы завершить установку параметров, в поле Frame Rate укажите количество кадров в секунду.

Cоздать flash приложение вам поможет специальная программа

Сразу после завершения установки параметров нажимайте левой клавишей мыши на кнопку ОК. Теперь в работу вступает непосредственно сам flash-редактор, который и поможет вам создать flash приложение.

Начинаем создавать анимированное приложения – к примеру, движущуюся надпись. Для этого выбирайте инструмент Text и открывайте панель настройки – Window Panels Characters. В появившемся меню Font щелкайте по панели Characters и выбирайте какой-либо шрифт, к примеру, Times New Roman. Установите его цвет и нужный размер, например, 26-й, напишите им какое-либо или предложение. Базовая основа вашего flash приложения готова!

Сделать flash приложение можно в анимированном виде

После этого можно заняться и . Для этого необходимо преобразовать написанный вами в символ. Используйте для этого команду Insert Convert to Symbol. Также присвойте ему какое-либо имя, чтобы впоследствии сохранить на жестком диске.

После этого выделяйте кадр №20 на линейке Timeline и вставляйте самый первый, так называемый ключевой кадр командой Insert Keyframe. При этом с левой стороны от нового кадра вы увидите серую полоску, идущую по направлению от ключевого кадра.

Теперь вам осталось сделать flash приложение активным. Для этого снова вернитесь в первый кадр и перемещайте сделанную вами надпись за пределы его границы в произвольно место за правый край. Затем, не убирая выделения с первого кадра, открывайте панель Window Panels Frame и сразу же переключайтесь на закладку Frame.

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