Флэш приложения. Как создать flash приложение во flash-редакторе

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

Введение

Приложение мы будем писать на языке ActionScript 3.0, на данный момент это последняя и удобная версия. Не бойтесь, тут больших затруднений не будет! Программную среду для разработки приложения на Flash можете выбрать сами, но я рекомендую Adobe Flash Professional, объясняю почему:
  • Я не первый раз на ней работаю, так что с уверенностью скажу, легка в основании
  • Не ставит пороги между функциональностью и дизайном
  • Можно создавать приложения даже для телефонов
Создавать мы будем приложение на примере обычной визитной карточки, все материалы у меня уже готовы.

С чего же начать? Подключение кадров.

Создаём документ «ActionScript»:

В окне «Временная шкала» создаём «слои», сохраняем их название и порядок:


Каждые 5 кадров нажимаем «F6», в конце «F5». Должно получится как на скрине.

Думаю объяснять тут нечего:
Слой «ActionScript» - в нём и будет находиться код.
Слой «Метки» - чтобы не потерять кадры из виду, они будут пронумерованы, впрочем почти как лишний слой.
Слой «Кнопки» - содержат кнопки, которые будут в одном положении в течении всего проекта, также и со слоями «Фон» и «Материалы». Теперь нумеруем кадры, не зря же слой «Метки» сделали. Нажимаем кадры, которые вы создали на слое «Метки», видим тип «Кадр», вводим имя кадру.


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

Символы и ресурсы

Сейчас будет также легко, как и до этого. Нажимаем на слой «Фон» на любой кадр, вставляем картинку из компьютера. Сначало это будет как растровое изображение, мы сможем изменить там ширину, высоту. Фон мы так и оставляем.


Эту же процедуру проводим со слоем «Кнопки», только теперь преобразовываем растровое изображение в символ нажатием правой кнопкой мыши «Преобразовать в символ»:


Называем экземпляр кнопки как хотим. Давайте назовём «Символ 1». Тип: Фрагмент ролика. После назначаем название экземпляра самому символу и его тип так, как это показано на скрине:

Активация страниц

Далее мы должны активировать страницы через слой «ActionScript», нажимаем на слой, жмём «F9». Появится пустое окно, для активации вводим код:

Import flash.events.MouseEvent;
stop();
btn1.addEventListener(MouseEvent.CLICK,OnClickДвэ);

Function OnClickДвэ(e:MouseEvent):void
{
gotoAndStop("Двэ");
}

Думаю вы разберётесь, что к чему! Примечание: при запуске приложения первым делом запускается кадр «Адын»

Заполнение приложение материалами

Нажимаем на слой «Материалы», а именно на те кадры, под которыми в слое «Метки» обозначены словом «Адын», принцип загрузки фотографии тот же, так что дальше будет легко, а также можно загрузить тест!


Чтобы проверить, не обманул ли я вас, нажимаем «Управление, тестировать ролик, тестировать ролик». Нажимаем на кнопочку сверху слева и видим текст!

Получаем конечный файл и грузим ВКонтакт

Нажимаем в меню «Файл, экспорт, экспортировать ролик» и выбираем куда сохранить файл

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

Чтобы создать 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 приложение готово!

Язык ActionScript 3.0 можно использовать в нескольких средах разработки приложений, включая инструменты Flash Professional и Flash Builder, а также любой текстовый редактор.

В этом примере рассмотрены этапы создания и модернизации простого приложения ActionScript 3.0 с использованием инструмента Flash Professional или Flash Builder. Создаваемое приложение является простой моделью использования внешних файлов классов ActionScript 3.0 в инструментах Flash Professional и Flex.

Проектирование приложения ActionScript

В этом примере приводится стандартное приложение ActionScript, которое называется «Hello World» и имеет простую структуру.

    Приложение называется HelloWorld.

    В нем отображается одно текстовое поле со словами «Hello World!»

    В приложении используется один объектно-ориентированный класс Greeter. Такая структура позволяет использовать класс в проекте Flash Professional или Flex.

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

После этого краткого определения можно приступать к созданию приложения.

Создание проекта HelloWorld и класса Greeter

В проектном задании для приложения Hello World говорится, что его код должен допускать простое повторное использование. Чтобы достичь этой цели, в приложении используется один объектно-ориентированный класс Greeter. Этот класс используется в приложении, создаваемом в инструменте Flash Builder или Flash Professional.

Создание проекта HelloWorld и класса Greeter в Flex

    В инструменте Flash Builder выберите «Файл» > «Создать» > «Проект Flex».

    Введите HelloWorld в поле «Имя проекта». Убедитесь, что в качестве типа приложения выбрано значение «Web (выполняется в Adobe Flash Player)», а затем нажмите «Готово».

    Flash Builder создает проект и показывает его в окне проводника пакетов. По умолчанию проект содержит файл с именем HelloWorld.mxml, который открывается в редакторе.

    Теперь, чтобы создать пользовательский файл класса ActionScript в среде Flash Builder, выберите «Файл» > «Создать» > «Класс ActionScript».

    В диалоговом окне «Новый класс ActionScript» в поле «Имя» введите Greeter в качестве имени класса и нажмите кнопку «Готово».

Чтобы создать класс Greeter в инструменте Flash Professional, выполните следующие действия:

    В инструменте Flash Professional выберите «Файл» > «Создать».

    В диалоговом окне «Создать документ» выберите файл ActionScript и нажмите кнопку «ОК».

    Теперь появится окно редактирования нового файла ActionScript.

Класс Greeter определяет объект Greeter , который используется в приложении HelloWorld.

Добавление кода к классу Greeter

    Введите следующий код в новом файле (часть кода может быть уже добавлена):

    Package { public class Greeter { public function sayHello():String { var greeting:String; greeting = "Hello World!"; return greeting; } } }

    Класс Greeter включает один метод sayHello() , который возвращает строку с фразой «Hello World!».

    Для сохранения этого файла ActionScript выберите команды «Файл» > «Сохранить».

Класс Greeter теперь готов для использования в приложении.

Создание приложения с использованием кода ActionScript

Класс Greeter, который был только что создан, определяет самодостаточный набор программных функций, однако он не представляет собой законченное приложение. Для использования класса необходимо создать документ Flash Professional или проект Flex.

При создании кода необходимо использовать экземпляр класса Greeter. Ниже описана процедура использования класса Greeter в приложении.

Чтобы создать приложение ActionScript с использованием инструмента Flash Professional, выполните следующие действия.

    Выберите команды «Файл» > «Создать».

    В диалоговом окне «Новый документ» выберите «Файл Flash (ActionScript 3.0)» и нажмите кнопку «ОК».

    Открывается окно создания документа.

    В палитре инструментов Flash Professional выберите инструмент «Текст». Перетащите его в рабочей области, чтобы определить новое текстовое поле шириной приблизительно 300 пикселов и высотой 100 пикселов.

    На панели «Свойства» при все еще выделенном в рабочей области текстовом поле задайте тип текста как «Динамический текст» и введите mainText в качестве имени экземпляра текстового поля.

    Щелкните кнопкой мыши первый кадр временной шкалы. Откройте панель «Действия», выбрав меню «Окно» > «Действия».

    На панели «Действия» введите следующий сценарий:

    Var myGreeter:Greeter = new Greeter(); mainText.text = myGreeter.sayHello();

    Сохраните файл.

Чтобы создать приложение ActionScript с использованием инструмента Flash Builder, выполните следующие действия.

    Откройте файл HelloWorld.mxml и добавьте код в соответствии со следующей распечаткой:

    Этот проект Flex включает четыре тега MXML:

    • Тег определяет контейнер приложения.

      Тег определяет стиль компоновки (вертикальная компоновка) для тега Application.

      Тег включает некоторую часть кода ActionScript.

      Тег определяет поле, в котором отображаются текстовые сообщения для пользователя.

    Код в теге определяет метод initApp() , который вызывается при загрузке приложения. Метод initApp() задает текстовое значение текстовой области mainTxt для строки «Hello World!», возвращенной методом sayHello() только что созданного класса Greeter.

    Для сохранения приложения выберите команды «Файл» > «Сохранить».

Публикация и проверка приложения ActionScript

Разработка программного обеспечения - это интерактивный процесс. После написания кода его необходимо компилировать и редактировать до тех пор, пока он не будет полностью соответствовать поставленным задачам. Необходимо запустить скомпилированное приложение и проверить, что оно выполняет задачи, описанные в задании. Если нет, необходимо редактировать код, пока не будет получен нужный результат. В средах разработки Flash Professional и Flash Builder предусмотрено несколько способов для публикации, проверки и отладки приложений.

Ниже приводятся основные этапы проверки приложения HelloWorld в каждой из упомянутых сред.

Чтобы опубликовать и проверить приложение ActionScript с использованием инструмента Flash Professional, выполните следующие действия.

    Опубликуйте приложение и проверьте его на наличие ошибок компиляции. В инструменте Flash Professional выберите «Управление» > «Тестировать ролик», чтобы скомпилировать код ActionScript и выполнить приложение HelloWorld.

    Если при тестировании приложения в окне «Вывод» отображаются ошибки и предупреждения, исправьте эти ошибки в файле HelloWorld.fla или HelloWorld.as. Затем повторно проверьте приложение.

    При отсутствии ошибок компиляции приложение Hello World появится в окне Flash Player.

После успешного создания простого, но законченного объектно-ориентированного приложения ActionScript 3.0, можно приступить к .

Чтобы опубликовать и проверить приложение ActionScript с использованием инструмента Flash Builder, выполните следующие действия.

    Выберите «Выполнить» > «Выполнить HelloWorld».

    Приложение HelloWorld будет запущено.

    • Если при тестировании приложения в окне «Вывод» отображаются ошибки и предупреждения, исправьте эти ошибки в файле HelloWorld.mxml или Greeter.as. Затем повторно проверьте приложение.

      При отсутствии ошибок компиляции приложение Hello World появится в открывшемся окне обозревателя. На экране должен отображаться текст «Hello World!»

    После успешного создания простого, но законченного объектно-ориентированного приложения ActionScript 3.0 можно приступить к Модернизация приложения HelloWorld .

Модернизация приложения HelloWorld

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

Прежде всего нужно обновить класс Greeter, расширив его функциональные возможности. Затем следует обновить приложение, чтобы оно могло использовать новые функции.

Обновление файла Greeter.as

    Откройте файл Greeter.as.

    Измените содержимое файла следующим образом (новые и измененные строки выделены жирным шрифтом):

    Package { public class Greeter { /** * Defines the names that receive a proper greeting. */ public static var validNames:Array = ["Sammy", "Frank", "Dean"]; /** * Builds a greeting string using the given name. */ public function sayHello(userName:String = "" ):String { var greeting:String; if (userName == "") { greeting = "Hello. Please type your user name, and then press " + "the Enter key."; } else if (validName(userName)) { greeting = "Hello, " + userName + "."; } else { greeting = "Sorry " + userName + ", you are not on the list."; } return greeting; } /** * Checks whether a name is in the validNames list. */ public static function validName(inputName:String = ""):Boolean { if (validNames.indexOf(inputName) > -1) { return true; } else { return false; } } } }

Класс Greeter имеет теперь новые свойства:

    В массиве validNames содержится список разрешенных имен пользователей. При загрузке класса Greeter в массиве устанавливается список из трех имен.

    Метод sayHello() принимает имя пользователя и изменяет приветствие в зависимости от определенных условий. Если имя пользователя userName задано пустой строкой (""), свойство greeting устанавливается на запрос имени пользователя. Если имя пользователя принято, приветствие выглядит так: "Hello, userName ." И, наконец, при невыполнении предыдущих двух условий переменная greeting устанавливается таким образом: "Sorry userName , you are not on the list." («Извините, [имя пользователя], Вас нет в списке»).

    Метод validName() возвращает истинное значение true , если введенное имя inputName найдено в массиве validNames , и возвращает ложное значение false , если имя не найдено. Инструкция validNames.indexOf(inputName) сверяет каждую строку массива validNames со строкой введенного имени inputName . Метод Array.indexOf() возвращает положение указателя первого экземпляра объекта в массиве. Он возвращает значение -1, если объект не найден в массиве.

Затем необходимо изменить файл приложения, в котором существует ссылка на этот класс ActionScript.

Чтобы изменить приложение с использованием инструмента Flash Professional, выполните следующие действия.

    Откройте файл HelloWorld.fla.

    Измените сценарий в Кадре 1 так, чтобы пустая строка ("") перешла в метод sayHello() класса Greeter:

    Var myGreeter:Greeter = new Greeter(); mainText.text = myGreeter.sayHello("");

    Выберите инструмент «Текст» в палитре инструментов. Создайте два новых текстовых поля в рабочей области. Расположите их рядом друг с другом под существующим текстовым полем mainText .

    В первом новом текстовом поле, которое является меткой, введите текст Имя пользователя: .

    Выберите другое текстовое поле и установите его тип в инспекторе свойств как «Вводимый текст». В качестве типа строки выберите Single line (отдельная строка). Введите textIn в качестве имени экземпляра.

    Щелкните кнопкой мыши первый кадр временной шкалы.

    На панели «Действия» добавьте следующие строки в конце имеющегося сценария:

    MainText.border = true; textIn.border = true; textIn.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed); function keyPressed(event:KeyboardEvent):void { if (event.keyCode == Keyboard.ENTER) { mainText.text = myGreeter.sayHello(textIn.text); } }

    Новый код добавляет следующие функциональные возможности:

    • Первые две строки просто задают границы для двух текстовых полей.

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

      Настраиваемая функция keyPressed() проверяет, будет ли нажата именно клавиша Enter. Если требуемая клавиша нажата, метод sayHello() объекта myGreeter передает текст из текстового поля textIn в качестве параметра. Этот метод возвращает строку приветствия на основе переданного в него значения. Возвращенная строка затем назначается свойству text текстового поля mainText .

    Полный сценарий для Кадра 1 выглядит следующим образом:

    Var myGreeter:Greeter = new Greeter(); mainText.text = myGreeter.sayHello(""); mainText.border = true; textIn.border = true; textIn.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed); function keyPressed(event:KeyboardEvent):void { if (event.keyCode == Keyboard.ENTER) { mainText.text = myGreeter.sayHello(textIn.text); } }

    Сохраните файл.

    Для запуска приложения выберите команды «Управление» > «Тестировать ролик».

    При выполнении приложения появляется приглашение к вводу имени пользователя. Если имя принимается программой, появится подтверждающее сообщение «hello».

Чтобы изменить приложение с использованием инструмента Flash Builder, выполните следующие действия.

    Откройте файл HelloWorld.mxml.

    Затем измените тег , чтобы показать пользователю, что текст используется только для отображения. Измените цвет фона на светло-серый и задайте для атрибута editable значение false:

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

    Атрибут enter определяет действия, которые выполняются при нажатии пользователем клавиши Enter в поле userNameTxt . В этом примере код передает текст, введенный в поле, в метод Greeter.sayHello() . Приветствие в поле mainTxt изменяется соответственно.

    Файл HelloWorld.mxml имеет следующий вид:

    Сохраните отредактированный файл HelloWorld.mxml. Выберите «Выполнить» > «Выполнить HelloWorld» для выполнения приложения.

    При выполнении приложения появляется приглашение к вводу имени пользователя. Если имя (Sammy, Frank или Dean) принимается программой, появится подтверждающее сообщение « Hello, userName ».

Все заинтересованные в создании приложений для ВКонтакте, вступайте в группу В Контакте 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 же является более компактным и простым в работе инструментом.

Похожие статьи