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

27 октября 2007

Включение файлов в SWF в виде байтовой последовательности

Написал: Алексей «Vooparker» Аникутин
В категории: Материалы

Те из вас, кто собирает свои as3 приложения с помощью mxmlc знакомы с метатэгом [Embed], который используется для внедрения внешних ресурсов в конечный swf. Среди поддерживаемых mxmlc типов внедряемых ресурсов присутствуют файлы изображения (JPG, JPEG, PNG и SVG), swf файлы, символы из swf файлов, mp3 файлы, файлы системных и TrueType шрифтов. Но не все знают, что с помощью [Embed] можно внедрить любой файл в виде байтовой последовательности.
Как вы знаете включение ресурсов возможно как на уровне свойства так и на уровне класса. Это справедливо и для файлов, которые мы включаем в виде байтовой последовательности. В примере ниже мы включаем в наш клип текстовый файл на уровне свойства (обратите внимание на дополнительный параметр mimeType, именно он сообщает mxmlc, что мы хотим включить файл как байтовую последовательность):

ТЕКСТ С ПОДСВЕТКОЙ

Actionscript:

[Embed(source="readme.txt", mimeType="application/octet-stream")]
public var Readme:Class;

Если вы хотите включить свой файл на уровне класса то вы должны будете наследоваться от mx.core.ByteArrayAsset:

ТЕКСТ С ПОДСВЕТКОЙ

Actionscript:

package
{
import mx.core.ByteArrayAsset;
[Embed(source="readme.txt", mimeType="application/octet-stream")]
public class Readme extends ByteArrayAsset {}
}

После этого, чтобы создать экземепляр класса нашего включенного файла просто вызываем конструктор:

ТЕКСТ С ПОДСВЕТКОЙ

Actionscript:

var readme:ByteArrayAsset = new Readme(); // для уровня свойства
var readme:Readme = new Readme(); // для уровня класса

Так как в любом случае наш ресурс является наследником или экземпляром ByteArrayAsset, который в свою очередь расширяет ByteArray, то мы можем использовать все методы последнего. Например, прочитать содержимое текстового файла из нашего примера можно так:

ТЕКСТ С ПОДСВЕТКОЙ

Actionscript:

var readmeContent:String = readme.readUTFBytes(readme.length);

В бинарном виде вы можете включать и файлы поддерживаемых типов. Например, вы можете включить другой swf в виде последовательности байтов, после чего можно внести swf в список видимых объектов или получить доступ к его внутренним ресурсам, предварительно использовав Loader:

ТЕКСТ С ПОДСВЕТКОЙ

Actionscript:

package
{
import flash.display.Loader;
import flash.display.Sprite;
import flash.events.Event;
public class EmbedResourceExample extends Sprite
{
[Embed(source="assets/resources.swf", mimeType="application/octet-stream")]
private var Resources:Class;
public function EmbedResourceExample ()
{
var loader:Loader = new Loader();
// Подписываемся на событие INIT, после которого
// мы получим доступ к классам внутри включенного swf
loader.contentLoaderInfo.addEventListener(Event.INIT, resourceInitHandler);
// Загружаем swf как байтовую последовательность
loader.loadBytes(new Resources());
}
private function resourceInitHandler (e:Event):void
{
// Извлекаем и создаем экземпляр класса из включенного swf
var SomeClass:Class = e.target.content.loaderInfo.applicationDomain.getDefinition("SomeClass") as Class;
var someClass:Object = new SomeClass();
}
}
}

Пожалуй на этом все.
Напоследок хочу отметить, что метатэг [Embed] не распознается flash compiler и включить тот же текстовый файл в swf силами Flash IDE не получится.
Удачи!

7 комментариев

Теги: ActionScript 3, ByteArray, Embed, Flex, mxmlc, Компиляция

4 июня 2007

ByteArray в AMFPHP и обратно

Написал: Алексей «Vooparker» Аникутин
В категории: Материалы

До появления ActionScript 3 единственным вариантом сохранить изображение на сервере была передача значения каждого пикселя объекта BitmapData серверному скрипту. Теперь с появлением объекта ByteArray и с помощью последнего релиза AMFPHP мы можем с легкостью передать объект BitmapData в виде последовательности байтов.
Оригинал статьи: Send and Receive ByteArray to AMFPHP
Автор: Alessandro Crugnola
Перевод: Алексей «Vooparker» Аникутин

Перед прочтением этой статьи автор советует ознакомиться с этими материалами:

1. Экипировка

Чтобы успешно справиться c этим уроком нам потребуются:

2. Настройка аmfphp-проекта

Сначала настроим серверную часть нашего проекта. Для это в папке amfphp/services создайте директорию: "tutorials/amfphp_bytearray". И в только что созданной директории создайте файл SaveJPEG.php со следующим содержанием:

ТЕКСТ С ПОДСВЕТКОЙ

PHP:

<?php
class SaveJPEG
{
var $output_dir = "temp";
var $server_url = "http://www.sephiroth.it/amfphp2/services/tutorials/amfphp_bytearray/";
/**
* Save image from the given bytearray
* and return the path of the saved image
*/
function SaveAsJPEG($ba, $compressed = false)
{
if(!file_exists($this->output_dir) || !is_writeable($this->output_dir))
trigger_error ("please create a 'temp' directory first with write access", E_USER_ERROR);
$data = $ba->data;
if($compressed)
{
if(function_exists(gzuncompress))
{
$data = gzuncompress($data);
} else {
trigger_error ("gzuncompress method does not exists, please send uncompressed data", E_USER_ERROR);
}
}
file_put_contents($this->output_dir . "/rawdata.jpeg", $data);
return $this->server_url . $this->output_dir . "/rawdata.jpeg";
}
/**
* Save file from a given bytearray
* and return a ByteArray from the saved file
*/
function SaveAsByteArray($ba, $compresses = false)
{
if(!file_exists($this->output_dir) || !is_writeable($this->output_dir))
trigger_error ("please create a 'temp' directory first with write access", E_USER_ERROR);
$data = $ba->data;
if($compressed)
{
if(function_exists(gzuncompress))
{
$data = gzuncompress($data);
} else {
trigger_error ("gzuncompress method does not exists, please send uncompressed data", E_USER_ERROR);
}
}
file_put_contents($this->output_dir . "/rawdata.rgb", $data);
return new ByteArray(file_get_contents($this->output_dir . "/rawdata.rgb"));
}
}
?>

В той же директории amfphp_bytearray создайте пустую директорию temp c маской доступа 755. Мы будем использовать эту директорию для хранения временных файлов, которые были получены из flash.

В нашем классе всего два метода: SaveAsJPEG и SaveAsByteArray. Оба принимают два параметра:

экземпляр ByteArray
и флаг указывающий сжата ли передаваемая последовательность байтов

Так как метод compress класса ByteArray использует алгоритм сжатия zlib, необходимо чтобы в вашей установке PHP была доступна функция gzuncompress.

2.1 SaveAsJPEG

Этот метод получает из flash последовательность байтов, которая представляет собой jpeg файл. По этой причине, мы просто сохраняем файл как 'rawdata.jpg', а так как это изображение будет валидным jpeg файлом, и мы просто скажем flash загрузить его как обычное изображение.

2.2 SaveAsByteArray

В этом случае мы сохраним последовательность байтов так как есть, это означает, что изображение не может быть загружено как обычный файл изображения (вы также не сможете просмотреть его в браузере). Так что, во втором примере мы вернем flash экземпляр php ByteArray, содержащий данные сохраненного файла (используя для этого file_get_content).
Flash получит его как последовательность байтов и, таким образом, мы сможем с легкостью использовать его для создания экземпляра BitmapData.

3. Flex

Давайте посмотрим на наш .mxml файл:

ТЕКСТ С ПОДСВЕТКОЙ

XML:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
xmlns:display="flash.display.*"
xmlns:ns1="http://www.sephiroth.it/2006/mxml">
<mx:RemoteObject id="service" showBusyCursor="true" destination="amfphp" fault="faultHandler(event)" source="tutorials.amfphp_bytearray.SaveJPEG">
<mx:method name="SaveAsJPEG" result="savejpeg_resultHandler(event)" />
<mx:method name="SaveAsByteArray" result="savebyte_resultHandler(event)" />
</mx:RemoteObject>
<mx:Style>
NumericPopUp {
slider-border-style:solid;
slider-border-color:#999999;
slider-background-color:#EBEBEB;
direction:horizontal;
}
Application {
background-color: #FFFFFF;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
import mx.controls.Alert;
import mx.controls.SWFLoader;
import com.adobe.images.JPGEncoder;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
private var send_compressed:Boolean = false; // send always uncompressed bytearrays (i.e. your server doesn not support "gzuncompress")
private var encoder:JPGEncoder;
/**
* Default handler for the remote SaveAsJPEG function
*/
private function savejpeg_resultHandler(event:ResultEvent):void
{
if(event.result || event.result is String)
{
var path:String = event.result as String;
trace(path);
var swf_loader:SWFLoader = preview_box.getChildByName("preview") as SWFLoader;
swf_loader.showBusyCursor = true;
swf_loader.load(path + "?rand=" + new Date().getTime());
image_size.text = "Loading...";
}
}
/**
* Default handler for the remote SaveAsByteArray function
*/
private function savebyte_resultHandler(event:ResultEvent):void
{
var ba:ByteArray = event.result as ByteArray;
var ui_loader:UIComponent = preview_box.getChildByName("preview") as UIComponent;
image_size.text = 'ByteArray size: ' + Math.round(((ba.length/4)/1024)*100)/100 + ' Kb'
try
{
ba.uncompress();
} catch(err:Error)
{
}
var data:BitmapData = new BitmapData(original_image.width, original_image.height, false, 0);
var bmp:Bitmap = new Bitmap(data);
bmp.name = "image";
data.setPixels(data.rect, ba);
ui_loader.addChild(new Bitmap(data));
ui_loader.width = data.width;
ui_loader.height = data.height;
}
/**
* Default fault handler
*/
private function faultHandler(event:FaultEvent):void
{
Alert.show(event.fault.faultString, "Error: " + event.fault.faultCode);
trace(event.fault.message);
}
/**
* Save the image using the JPEGEncoder class
*/
private function saveJpegHandler(event:MouseEvent):void
{
removeImages();
var swf_loader:SWFLoader = new SWFLoader();
swf_loader.autoLoad = true;
swf_loader.name = "preview";
swf_loader.addEventListener(Event.COMPLETE, function(event:Event):void { image_size.text = 'Image size: ' + (SWFLoader(event.target).bytesTotal/1024).toPrecision(3) + ' Kb' });
preview_box.addChildAt(swf_loader, 0);
var bmpdata:BitmapData = Bitmap(original_image.content).bitmapData;
var ba:ByteArray;
encoder = new JPGEncoder(jpeg_quality.value);
ba = encoder.encode( bmpdata );
if(send_compressed)
ba.compress();
service.getOperation("SaveAsJPEG").send(ba, send_compressed);
image_size.text = "Sending..."
}
/**
* Save the image using only ByteArray derived from
* BitmapData.getPixels
*/
private function saveByteHandler(event:MouseEvent):void
{
removeImages();
var ui_loader:UIComponent = new UIComponent();
ui_loader.name = "preview";
preview_box.addChildAt(ui_loader, 0);
var bmpdata:BitmapData = Bitmap(original_image.content).bitmapData;
var arr:ByteArray = Bitmap(original_image.content).bitmapData.getPixels(new Rectangle(0,0,bmpdata.width, bmpdata.height));
if(send_compressed)
arr.compress();
arr.position = 0;
service.getOperation("SaveAsByteArray").send(arr, send_compressed);
image_size.text = "Sending..."
}
private function removeImages():void
{
if(preview_box.getChildByName("preview"))
preview_box.removeChild(preview_box.getChildByName("preview"));
image_size.text = "";
}
]]>
</mx:Script>
<mx:VBox left="5" top="5" right="5" bottom="5">
<ns1:LabelledBox title="Original Image" direction="horizontal" paddingBottom="20" paddingLeft="20" paddingRight="20" paddingTop="20" labelPlacement="left" labelPadding="10" cornerRadius="5" id="original_box">
<mx:Image x="10" y="33" source="@Embed('images/284541843_b77b917989[1].jpg')" id="original_image"/>
<mx:Grid x="269" y="33">
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="100%" height="100%" verticalAlign="middle">
<mx:Label text="Jpeg quality"/>
</mx:GridItem>
<mx:GridItem width="100%" height="100%" verticalAlign="middle">
<ns1:NumericPopUp id="jpeg_quality" minimum="1" maximum="100" stepSize="1" value="50" direction="horizontal">
</ns1:NumericPopUp>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="100%" height="100%">
</mx:GridItem>
<mx:GridItem width="100%" height="100%" verticalAlign="middle">
<mx:Button label="Save as Jpeg" click="saveJpegHandler(event)" width="100%"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="100%" height="100%">
</mx:GridItem>
<mx:GridItem width="100%" height="100%" verticalAlign="middle">
<mx:Button label="Save as ByteArray" click="saveByteHandler(event)" width="100%"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="100%" height="100%" colSpan="2">
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
</ns1:LabelledBox>
<ns1:LabelledBox id="preview_box" paddingBottom="20" paddingLeft="20" paddingRight="20" paddingTop="20" labelPlacement="left" labelPadding="10" cornerRadius="5" title="Saved Image" clipContent="false" minWidth="300" minHeight="100" direction="horizontal" width="{original_box.width}">
<mx:Grid>
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="100%" height="100%" verticalAlign="middle">
<mx:Label text="" id="image_size" />
</mx:GridItem>
</mx:GridRow>
<mx:GridRow width="100%" height="100%">
</mx:GridRow>
</mx:Grid>
</ns1:LabelledBox>
</mx:VBox>
</mx:Application>

Для отправки данных на сервер у нас есть два метода: saveJpegHandler и saveByteHandler.

3.1 saveJpegHandler

Этот метод получает экземпляр BitmapData из оригинального изображения, и преобразует его в jpeg, используя JPEGEncoder, передавая в конструктор степень оптимизации jpeg изображения.

var bmpdata:BitmapData = Bitmap(original_image.content).bitmapData;
var ba:ByteArray;
encoder = new JPGEncoder(jpeg_quality.value);
ba = encoder.encode( bmpdata );

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

swf_loader.load(path + "?rand=" + new Date().getTime());

Добавление параметра "?rand" позволяет обойти проблему с кэшированием браузером изображения.

3.2 saveByteHandler

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

// get the original bitmapdata
var bmpdata:BitmapData = Bitmap(original_image.content).bitmapData;
// transform the bitmapdata into a bytearray
var arr:ByteArray = Bitmap(original_image.content).bitmapData.getPixels(new Rectangle(0,0,bmpdata.width, bmpdata.height));

Метод преобразует BitmapData в ByteArray с помощью метода класса BitmapData getPixels и отправляет на сервер.
Метод AMFPHP возвращает последовательность байтов, так что мы можем использовать ее, чтобы создать BitmapData, используя метод setPixel:

// server returns a bytearray
var ba:ByteArray = event.result as ByteArray;
// create a new bitmapdata to store into the resulting bytearray pixels
var data:BitmapData = new BitmapData(original_image.width, original_image.height, false, 0);
var bmp:Bitmap = new Bitmap(data);
// draw the bytearray into just created bitmapdata
data.setPixels(data.rect, ba);

// then add the bitmap to a new UIComponent
ui_loader.addChild(new Bitmap(data));
ui_loader.width = data.width;
ui_loader.height = data.height;

4. Загрузки

Вы также можете скачать исходные файлы к статье.

3 комментария

Теги: ActionScript 3, AMF, AMFPHP, ByteArray, Client/Server, Flex 2, PHP