В этом руководстве объясняется, как создавать собственные расширения файлов в Adobe AIR. Я покажу вам, как создать небольшое приложение, сохранить в нем позиции нескольких мувиклипов и перезагрузить их при запуске приложения.
Следуйте инструкциям и посмотрите, сможете ли вы придумать свои собственные варианты использования пользовательских расширений файлов.
Шаг 1: Настройка документа
Откройте новый документ Flash Air, назовите его «saveFile» и сохраните в новой папке. Затем откройте новый файл ActionScript, присвойте ему то же имя и сохраните его в той же папке, что и вновь созданный документ Flash.
Если экран приглашения не появляется при запуске Flash, просто создайте новый документ Flash ActionScript 3. Сохраните файл, затем выберите «Команды»> «AIR» — «Настройки приложения и установщика». Flash преобразует файл в воздушный документ.
На панели свойств документа Flash введите «saveFile» в поле «Класс документа». Это свяжет новый файл ActionScript (наш класс документа) с документом Flash.
Шаг 2: Добавление элементов управления
Создайте черный квадрат с высотой 52, установите ширину равной ширине сцены и выровняйте ее по левому нижнему краю сцены. Дайте квадрату альфа 33. На панели компонентов перетащите три кнопки и поместите их поверх черного квадрата.
Дайте одной из кнопок имя экземпляра «open» и измените его метку на «Open». Следующая кнопка будет иметь имя экземпляра «сохранить», а ее метка будет «Сохранить». Название третьей кнопки будет «изображение» и будет иметь метку «изображение». Разложите их по своему усмотрению, выберите все три кнопки и черный квадрат и превратите их в один фрагмент ролика с именем экземпляра «нижний колонтитул».
Шаг 3: Маленькие кружочки
На сцене создайте красный круг с высотой и шириной 50 пикселей. Преобразуйте его в мувиклип, затем в диалоговом окне нажмите кнопку «Дополнительно». В разделе «Связывание» установите флажок «Экспорт для ActionScript». Дайте ему имя класса «Red» и нажмите «OK».
Затем создайте синий круг того же размера, что и красный круг. Преобразуйте его в мувиклип, экспортируйте его для ActionScript и присвойте ему имя класса «Blue». Удалите два круга со сцены, чтобы единственным оставшимся видеоклипом был видеоклип нижнего колонтитула.
Шаг 4. Загрузите кодировщик Adobe JPEG
Перейдите на страницу http://code.google.com/p/as3corelib/ и загрузите папку z3 as3corelib. С помощью кодера JPEG мы сможем сохранить изображение наших маленьких сверстников.
Шаг 5: Скелет класса документа
Это основной фрейм, куда мы поместим весь наш код.
|
01
02
03
04
05
06
07
08
09
10
11
12
|
package {
import flash.display.Sprite;
public class saveFile extends Sprite
{
public function saveFile()
{
}
}
}
|
Шаг 6: Импорт
Вот операторы импорта, чтобы приложение Air работало. Они будут помещены в файл прямо под объявлением пакета и над оператором открытого класса.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
import com.adobe.images.JPGEncoder;
import flash.desktop.NativeApplication;
import flash.display.BitmapData;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.InvokeEvent;
import flash.events.MouseEvent;
import flash.filesystem.File;
import flash.filesystem.FileMode;
import flash.filesystem.FileStream;
import flash.net.FileFilter;
import flash.utils.ByteArray;
|
Шаг 7: Переменные и функции настройки
Вот переменные, которые мы используем для создания двух маленьких кружков на сцене. Переменные смещения будут использованы позже для перетаскивания окружностей.
Я также назначил прослушиватель события invoke для NativeApplication. Это будет срабатывать при запуске приложения или при щелчке пользовательского файла. Функция invoke проверит, как было запущено приложение. Если он был из файла, он загрузит файл. Если нет, он вызовет функцию init.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
public class saveFile extends Sprite
{
private var red:MovieClip;
private var blue:MovieClip;
private var currentClip:MovieClip;
private var xOffset:Number;
private var yOffset:Number;
public function saveFile()
{
NativeApplication.nativeApplication.addEventListener(InvokeEvent.INVOKE, onInvoke);
movieClips();
listeners();
}
private function init():void
{
var sw:int = stage.stageWidth;
var sh:int = stage.stageHeight-footer.height;
red.x = sw * Math.random();
red.y = sh * Math.random();
blue.x = sw * Math.random();
blue.y = sh * Math.random();
}
private function movieClips():void
{
red= new Red();
blue = new Blue();
this.addChildAt(red, 0);
this.addChildAt(blue, 1);
this.addChildAt(footer, 2);
}
|
Шаг 8: функция слушателей
Эта функция просто устанавливает прослушиватели событий для всех кнопок и кругов на сцене.
|
1
2
3
4
5
6
7
8
|
private function listeners():void
{
red.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
blue.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
footer.open.addEventListener(MouseEvent.CLICK, openClick);
footer.save.addEventListener(MouseEvent.CLICK, saveClick);
footer.image.addEventListener(MouseEvent.CLICK, imageClick);
}
|
Шаг 9: Перемещение маленьких кругов
Здесь мы настроили функции для перемещения кругов по сцене.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
private function onDown(event:MouseEvent):void
{
currentClip = event.target as MovieClip;
xOffset = mouseX — currentClip.x;
yOffset = mouseY — currentClip.y;
currentClip.removeEventListener(MouseEvent.MOUSE_DOWN, onDown);
this.addEventListener(MouseEvent.MOUSE_UP, onUp, false, 0, true);
this.addEventListener(MouseEvent.MOUSE_MOVE, onMove, false, 0, true);
}
private function onMove(event:MouseEvent):void
{
currentClip.x = mouseX — xOffset;
currentClip.y = mouseY — yOffset;
event.updateAfterEvent();
}
private function onUp(event:MouseEvent):void
{
this.removeEventListener(MouseEvent.MOUSE_MOVE, onMove);
this.removeEventListener(MouseEvent.MOUSE_UP, onUp);
currentClip.addEventListener(MouseEvent.MOUSE_DOWN, onDown, false, 0, true);
}
|
Шаг 10: Сохранение изображения
При нажатии кнопки «Изображение» вызывается функция «imageClick». Эта функция открывает диалоговое окно для сохранения, и вы можете присвоить своему изображению любое имя, какое захотите. Когда пользователь называет изображение, оно вызывает функцию «imageSave». Внутри этой функции мы используем класс JPGEncoder для создания изображения. Затем приложение Air сохраняет изображение и прослушивает функцию «onClose». Эта функция просто переназначает маленькие круги на сцену из временного спрайта, который был создан.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
private function imageClick(event:MouseEvent):void
{
var file:File = File.desktopDirectory;
file.browseForSave(«Save Image»);
file.addEventListener(Event.SELECT, imageSave);
}
private function imageSave(event:Event):void
{
var temp:Sprite = new Sprite();
var len:int = this.numChildren;
temp.addChild(red);
temp.addChild(blue);
var bitmapData:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight);
bitmapData.draw(temp);
var jpg:JPGEncoder = new JPGEncoder(100);
var byteArray:ByteArray = jpg.encode(bitmapData);
var saveFile:File = File(event.target);
var directory:String = saveFile.url;
if(directory.indexOf(«.jpg») == -1)
{
directory += «.jpg»;
}
var file:File = new File();
file = file.resolvePath(directory);
var fileStream:FileStream = new FileStream();
fileStream.addEventListener(Event.CLOSE, onClose);
fileStream.openAsync(file, FileMode.WRITE);
fileStream.writeBytes(byteArray);
fileStream.close();
}
private function onClose(event:Event):void
{
this.addChildAt(red, 0);
this.addChildAt(blue, 1);
}
|
(Примечание редактора: комментатор Джесси дал нам знать, что способ работы класса File изменился с момента публикации этого руководства. См. Его комментарий для получения дополнительной информации о том, как сделать ваш код совместимым.)
Шаг 11: Сохранение файла
После того, как мы немного переместили маленькие круги, мы можем сохранить их местоположение для дальнейшего редактирования. Здесь мы создаем наш пользовательский файл. Сначала мы помещаем координаты в массив, затем массивы помещаются внутри объекта. Объект записывается в файл с нашим расширением. Вы можете дать ему любое расширение.
После этого мы устанавливаем приложение как приложение по умолчанию для вновь созданного расширения файла.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
private function saveClick(event:Event):void
{
var file:File = File.desktopDirectory
file.browseForSave(«Save»);
file.addEventListener(Event.SELECT, onSaveSelect);
}
private function onSaveSelect(event:Event):void
{
var object:Object = {};
var redArray:Array = [red.x, red.y];
var blueArray:Array = [blue.x, blue.y];
object.RED = redArray;
object.BLUE = blueArray;
var saveFile:File = File(event.target);
var directory:String = saveFile.url
if(directory.indexOf(«.tuts») == -1)
{
directory += «.tuts»;
}
var file:File = new File();
file = file.resolvePath(directory);
var fileStream:FileStream = new FileStream();
fileStream.open(file, FileMode.WRITE);
fileStream.writeObject(object);
fileStream.close();
NativeApplication.nativeApplication.setAsDefaultApplication(«tuts»);
}
|
Шаг 12: Открытие файла
Если вы хотите открыть только что созданный файл, просто нажмите кнопку «Открыть». Появится диалоговое окно, которое ищет только это расширение файла. Затем приложение прочитает объект внутри файла и соответственно поместит маленькие кружочки.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
private function openClick(event:MouseEvent):void
{
var file:File = File.desktopDirectory;
file.addEventListener(Event.SELECT, onSelect);
file.browseForOpen(«Open»,[new FileFilter(«Tuts Files (*.tuts)», «*.tuts»)]);
}
private function onSelect(event:Event):void
{
var file:File = File(event.target);
var fileStream:FileStream = new FileStream();
fileStream.open(file, FileMode.READ);
var object:Object = fileStream.readObject();
red.x = object.RED[0];
red.y = object.RED[1];
blue.x = object.BLUE[0];
blue.y = object.BLUE[1];
fileStream.close();
}
|
Шаг 13: вызов приложения
Это функция вызова. Без этой функции, если бы вы запустили приложение из нового файла, оно не узнало бы о его загрузке. Эта функция проверяет, что было сказано открыть. Если это был файл, он загрузит этот файл. Если это не так, то он просто вызывает функцию «init», которая дает кружкам случайное размещение.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
private function onInvoke(event:InvokeEvent):void
{
if(event.currentDirectory != null && event.arguments.length > 0)
{
var directory:File = event.currentDirectory;
var file:File = directory.resolvePath(event.arguments[0]);
var fileStream:FileStream = new FileStream();
fileStream.open(file, FileMode.READ);
var object:Object = fileStream.readObject();
red.x = object.RED[0];
red.y = object.RED[1];
blue.x = object.BLUE[0];
blue.y = object.BLUE[1];
fileStream.close();
} else
{
init();
}
}
|
Шаг 14: Настройки публикации
Когда файл все протестирован и работает правильно, мы готовы к публикации. Перейдите в «Команды»> «AIR» — «Настройки приложения и установщика» и откройте настройки публикации.
Шаг 15: Настройка пользовательского расширения файла
В настройках публикации в эфире нажмите на дополнительные настройки.
Это вызовет другое диалоговое окно. Нажмите на кнопку «плюс», чтобы добавить расширение файла.
Заполните описания файлов, выберите свои собственные значки и нажимайте «ОК», пока не вернетесь к первому окну настроек публикации.
Шаг 16: опубликуй свой файл
Последнее, что нужно сделать, это опубликовать ваш файл. Нажмите на кнопку «Опубликовать файл AIR». Вам нужно будет создать сертификат для подписи приложения. Просто нажмите «Создать», чтобы открыть настройки.
Заполните форму и нажмите «ОК». Flash подскажет вам, когда сертификат будет создан. Когда сертификат будет создан, введите пароль, и ваш файл будет создан.
Вывод
Это был лишь основной пример того, что можно сделать с помощью этой техники. Вы также можете создать какое-нибудь приложение для рисования, в котором вы можете либо сохранить то, что нарисовали, либо продолжить редактирование. Или, если вы хотите создать собственный MP3-плеер и иметь свой собственный формат файла списка воспроизведения. Возможности безграничны..
Надеюсь, вам понравилось следить за этим.