Dica Flex – Como embedar assets de um arquivo SWF

Colocado por Pablo Souza na(s) categoria(s): 1, 3d, 4, 6, Adobe, AR, BI, Bindable, Botões, class, classe, código, custom, Dica, exemplo, flash, Flex, for, html, IE, if, label, O, on, Orientação, Orientação a Objetos, Pessoal, pt, RIA, Ria’s Geral, swf, TAT, UI em 12 31st, 2010 | Sem comentários

A dica Flex de hoje é para aqueles que querem embedar assets de arquivos SWF. O Flex permite que façamos esse trabalho de forma simplificada, utilizando apenas a metadata “Embed“, especificando qual o símbolo a ser embedado. Para dar um exemplo prático, digamos que você criou uma série de assets no Flash, como ícones e botões customizados, e agora deseja utilizá-los no seu aplicativo Flex.

Veja o código abaixo:

No exemplo embedamos 2 símbolos de um arquivo SWF chamado “MyAssets.swf” e vamos utilizá-los como ícones dos nossos botões.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<mx:Script>

        <![CDATA[ 



            [Bindable]

            [Embed(&#039;assets/myAssets.swf&#039;, symbol=&#039;btnSalvar&#039;)]

            private static var BUTTON_SALVAR:Class; 



            [Bindable]

            [Embed(&#039;assets/myAssets.swf&#039;, symbol=btnEditar)]

            private static var BUTTON_EDITAR:Class; 



        ]]>

    </mx:Script> 



    <mx:Button id="salvar" label="Salvar" icon="{BUTTON_SALVAR}" />

    <mx:Button id="editar" label="Editar" icon="{BUTTON_EDITAR}" />

O código acima funciona perfeitamente mas não é a forma mais clara de fazer esse trabalho. Utilizando um conceito da orientação a objetos chamado divisão de responsabilidades, vamos refatorar nosso pequeno exemplo, criando uma nova classe que vai encapsular nossos assets, movendo para ela nossas propriedades estáticas. Veja o código da classe a seguir:

1
2
3
4
5
6
7
8
    public class MyAssets

    {

            [Embed(&#039;assets/myAssets.swf&#039;, symbol=&#039;btnSalvar&#039;)]

            private static var BUTTON_SALVAR:Class; 



            [Embed(&#039;assets/myAssets.swf&#039;, symbol=btnEditar)]

            private static var BUTTON_EDITAR:Class;

    }

Para utilizá-la faça:

1
2
    <mx:Button id="salvar" label="Salvar" icon="{MyAssets.BUTTON_SALVAR}" />

    <mx:Button id="editar" label="Editar" icon="{MyAssets.BUTTON_EDITAR}" />