Bom, Embed no Flex é uma forma compilar o objeto diretamente ao código do Flex. Resumindo, é quase como um anexo do SWF. Eles não são carregados em tempo de execução.
Você pode inserir imagens no formato PNG, JPEG, GIF, arquivos SWF, arquivos sonoros no formato MP3, e SVG, e fontes.
PS: não exagere nos Embed. Utilize o mínimo possível para que não sobrecarregue sua aplicação principal. Lembre-se que o código do arquivo carregado ao código será compilado e faráparte de código fonte do projeto.
Primeiro quero desmentir um mito. Se você fazer dois Embed de um mesmo arquivo ele não duplicará esta imagem no código!
Com certeza é a mais utilizada. Tanto diretamente no objeto Image, como em CSS ou em váriaveis. Então vamos as diferenças.
Neste primeiro exemplo, o Embed foi adicionado diretamente ao source da imagem. A vantagem é a manutenção. Neste formato é necessário iniciar com @.
Arquivo Imagem1.mxml<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Image source="@Embed('imagem/flex.png')" />
</mx:Application>
Neste segundo exemplo o Embed é adicionado a uma variável do tipo Class, que armazena o ByteArray desta imagem. Esta variável pode ser adicionada ao source de um componente imagem.
Arquivo Imagem2.mxml<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
[Embed("imagem/flex.png")]
[Bindable]
private var flex:Class;
]]>
</mx:Script>
<mx:Image source="{flex}" left="0"/>
<mx:Image source="{flex}" left="302"/>
</mx:Application>
O terceiro exemplo trata o Embed de imagens no CSS. Estou utilizando um Embed para a imagem de fundo e algumas imagens para alterar o estilo do ComboBox.
No CSS estou usando escala inteligente para carregar partes uteis desta imagem, mais isso fica para um próximo post.
Arquivo Imagem3.mxml<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style source="css/css1.css"/>
<mx:ComboBox horizontalCenter="0" verticalCenter="0">
<mx:dataProvider>
<mx:Array>
<mx:Object label="Alinhar ao centro"/>
<mx:Object label="Alinhar a esquerda"/>
<mx:Object label="Alinhar a direita"/>
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
</mx:Application>
Arquivo css/css1.css
Application{
background-image: Embed('imagem/flex.png');
}
ComboBox{
upSkin: Embed('imagem/comboBox_up.png', scaleGridLeft=10,
scaleGridRight=82,
scaleGridTop=19,
scaleGridBottom=20);
downSkin: Embed('imagem/comboBox_up.png', scaleGridLeft=10,
scaleGridRight=82,
scaleGridTop=19,
scaleGridBottom=20);
overSkin: Embed('imagem/comboBox_over.png', scaleGridLeft=10,
scaleGridRight=82,
scaleGridTop=19,
scaleGridBottom=20);
disabledSkin: Embed('imagem/comboBox_disabled.png', scaleGridLeft=10,
scaleGridRight=82,
scaleGridTop=19,
scaleGridBottom=20);
padding-left: 10;
color: #444444;
dropdownStyleName: dropdownStyleName;
}
.dropdownStyleName{
background-color: #2b2a2a;
border-color: #2e2821;
selectionColor: #3e3d3d;
rollOverColor: #3e3d3d;
textRollOverColor: #ffffff;
textSelectedColor: #ffffff;
color: #ffffff;
font-weight: normal;
dropShadowEnabled: true;
}
Embed de SWF segue a mesma lógica das imagen. podendo ser importada nas formas acima citada.
Arquivo wf1.mxml<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="540" height="145"
verticalScrollPolicy="off" horizontalScrollPolicy="off"
viewSourceURL="097/index.html">
<mx:SWFLoader source="@Embed('imagem/design.swf')"/>
</mx:Application>
Também e possível carregar apenas um símbolo interno.
Arquivo SWF1.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
preloader="preload.Preloader"
viewSourceURL="097/index.html">
<mx:Image source="@Embed('imagem/papel_de_parede_economia_MPPE.JPG')" width="500" height="354"/>
</mx:Application>
Arquivo preload/Preloader.as
[Embed(source="preload/preloader.swf", symbol="Preloader")] private var FlashPreloaderSymbol:Class;
Este arquivo possui Preload. Se não o visse, recarregue esta página.
Neste exemplo, demosntro um pequeno exemplo de Embed de MP3. No post que fiz sobre do Chat eu usei este recurso para adicionar o alerta de nova mensagem no Chat.
Arquivo mp3.mxml<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
<mx:Script>
<![CDATA[
import mx.core.SoundAsset;
import flash.media.*;
[Embed(source="musica/mp3.mp3")]
[Bindable]
public var musica:Class;
public var Som:SoundAsset = new musica() as SoundAsset;
public var canal:SoundChannel;
public function play():void
{
stop();
canal = Som.play();
}
public function stop():void
{
if ( canal != null )
canal.stop();
}
]]>
</mx:Script>
<mx:HBox x="10" y="10">
<mx:Button label="play" click="play();"/>
<mx:Button label="stop" click="stop();"/>
</mx:HBox>
</mx:Application>
Quando é necessário utilizar uma fonte que o SO não possui, pode-se utilizar Embed de Fontes.
Arquivo Fontes .mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style source="css/css2.css"/>
<mx:Label x="10" y="10" text="Usando Fonte Calibri"
fontFamily="Calibri" fontSize="12" fontWeight="bold"/>
<mx:Label x="10" y="38" text="Fonte-barras"
fontFamily="c39hrp48dhtt" fontSize="300"/>
</mx:Application>
Arquivo css/css2.css
@font-face{
src: url("fonts/calibri.ttf");
fontFamily: "calibri";
}
@font-face{
src: url("fonts/c39hrp48dhtt.ttf");
fontFamily: "c39hrp48dhtt";
}
Fonte de todos os exemplos disponível aqui.