Леонид Якубович 27 августа 2012 в 17:12

Разработка 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

Мультимедийная основа, была разработана компанией 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 »:

Для ознакомления предоставляется бесплатная версия программы сроком на 30 дней. Полная стоимость Sothink SWF Quicker составляет 85$:

Ближайшие конкуренты приложения.

бесплатная
SWiSHmax 3.0 Build 2009.11.30 позволит быстро создать текст анимацию в формате Macromedia Flash. Программа SWiSHmax позволяет просто применять эффекты при работе с текстом.

Бесплатная
SWF.max 1.6.865 является многофункциональным проигрывателем файлов Macromedia Flash. Программа SWF.max имеет в своём составе медиа обозреватель, который поддерживает отображение эскизов и позволяет быстро и легко пройти по папкам для поиска Flash клипов с выбором нужного, ориентируясь при этом не только по их названиям, но и просматривая знакомые кадры.

Бесплатная
Flash Movie Player 1.5 является программой, которая проиграет для вас Flash-файлы. Программа Flash Movie Player умеет воспроизводить Flash-файлы в форматах EXE, SWF или FMP.

Бесплатная
Adobe Shockwave Player 11.6.4.634 представляет собой плеер, который предназначен для проигрывания Flash роликов. Технология Adobe Shockwave позволяет насладиться всеми возможностями и яркостью интерактивной 3D-графики при просмотре в интернете.

Бесплатная
Adobe Flash Player 11.1.102.62 является кросс-платформенным модулем, который будет вашим незаменимым инструментом для просмотра мультимедийного интерактивного Flash-контента (файлов FLV и SWF) в различных операционных системах и браузерах. Программа Adobe Flash Player даст возможность его пользователям без всяких ограничений совершать просмотр веб-сайтов, содержащих на своих страницах анимацию, видеоматериалы, игры, приложения и подобный Flash-контент.

Бесплатная
GetFlash 2.5 – это утилита, которая обладает способностью сохранять любые flash-ролики, которые встречаются на веб-страницах. Утилита GetFlash значительно облегчает сохранение роликов и анимации при помощи отображения Flash Toolbar в момент загрузки страницы с роликом или анимацией.

Бесплатная
Flash to Video Encoder Pro 5.2.21 представляет собой конвертер, который работает с флеш роликами в формате SWF и FLV, конвертируя их в видео формат MPEG, AVI, MP4, ASF или WMV. Также программу Flash To Video Encoder PRO можно использовать для записи файлов флеш на DVD диски. Помимо этого конвертер Flash To Video Encoder PRO даёт возможность сохранить каждый кадр в флеш файле в виде изображения в разном формате.

Бесплатная
Flash Saver 6.3 – это программа, которая сохранит flash анимацию с любой из страниц в интернете. Программа Flash Saver работает так же, как и при обычном сохранении картинок в стандартном режиме, то есть, используя для этого нажатие на флеш анимации правой кнопки мышки. Программа встраивается в браузер Internet Explorer и при её использовании не будет необходимости искать ролик, который вам понравился в недавних временных документах и затрачивать на это много времени.

Бесплатная
Alligator Flash Designer 8.0.24 - это программа для создания интерактивной мультипликации (Flash) на веб-сайты. Программа содержит порядка 130 эффектов анимации. Также программа позволяет выбрать onclick или OnOver действие для различных кнопок и даёт возможность сделать сразу же экспорт созданной анимации в формат html.

Бесплатная
SWF Maestro SCR 2.0 – это возможность использовать в качестве заставки для вашего дисплея SWF анимации. При помощи программы SWF Maestro SCR можно создать заставку экрана дл режима ожидания из модной Flash-анимации или демонстрации. Благодаря возможностям программы SWF Maestro SCR, которая компилирует выбранные вами файлы, вы можете использовать для создания заставки для вашего компьютера файлы в формате FLV, XML, JPG, MP3 и другие.

Бесплатная
Учебник по Macromedia Flash 5 является качественным и удобным помощником любому пользователю, ведь раскрывает тайны пользования плеером Macromedia Flash, который необходим для совершения просмотра различных роликов или создания собственных презентаций.

Бесплатная
Save Flash 4.3 будет полезна для многих пользователей, ведь её используют в том случае, когда нужно сохранить файл в формате flv или swf. Если вас увлекла флеш-игра, красивая открытка или баннер, с какого-либо сайта, и вы хотели бы получить её себе на компьютер или отослать другу, то данная программа как раз для вас. Программа SaveFlash отображает URL открытой вами страницы в интернете и показывает размер любого из Flash ролика на ней и предоставляет возможность сохранить любой из них на ваш компьютер.

Бесплатная
Macromedia Flash Player 8.5 b133 RU представляет собой не только удобный и простой в использовании, но и наиболее качественный плеер, который воспроизводит Flash-ролики.

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

Чтобы создать 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 необходимый вам тип

все разделы Skype Google+ Twitter Facebook Мой Мир Одноклассники ВКонтакте

Как сделать приложение в ВКонтакте

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

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

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

Создание приложения ВКонтакте - дело нелегкое. Для этого нужны определенные знания и умения. Также совершенно необходимо желание учиться и стремление к самосовершенствованию. Если вас интересует создание приложений в ВК, вы должны быть готовы к тому, что столкнетесь с определенными трудностями на этом пути.

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

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

Типы приложений

Прежде чем начинать раздумывать о том, как создать приложение в ВК, необходимо знать, что на этом ресурсе есть два их типа. Это, кстати, отражено в документации.

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

Обучающее видео

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

Надеемся что теперь вам стало более понятно, как сделать приложение В Контакте.

Что необходимо знать

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

• Adobe Flash
• Action Script
• 3D движки
• JavaScript

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

Исходники приложений

На сегодняшний день в сети можно отыскать исходники приложений ВКонтакте. Многие можно бесплатно скачать на файлообменниках.

Однако если вы желаете получить исходник какого-то определенного приложения, следуйте этой инструкции:

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

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

Платная разработка приложений

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

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

Последовательность создания приложения

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

Бесплатные программы

Программы для приложений ВКонтакте можно скачать в Интернете бесплатно. В первую очередь, конечно, потребуется скачать Adobe Flash . Это главная и основная программа, которая позволит вам начать работу над своим проектом. Данная программа для создания приложения очень удобна. Однако работать с ней новичку нелегко. Но со временем появляются навыки и пользоваться ею становится проще. Остальные проги для приложений тоже отличаются удобством в использовании. 3D движки , например, значительно ускоряют и упрощают процесс создания приложений.