Flex – o meu Hello World

Publicado em Publicado por gserrano

Por vários motivos, comecei a dar uma olhada em Flex, o framework da Adobe para criação de RIAs (Rich Internet Application) baseado no Flash.

Nunca me atrevi a abrir um .fla na minha vida; pelo pouco que conheci do Flash na épcoa do action script 1 e 2, achei que era muito confuso para o resultado final, e que o AS1 e 2 eram voltados a designers (nada contra) que precisavam de poucos recursos nos seus swfs. Por isso que quando saiu o action script 3 eu já fiquei mais animado, pois ele estava muito melhor estruturado, com pacotes de componentes melhor divididos, boa orientação a objetos (e seus paradigmas), documentação online

Quem já trabalhou com qualquer linguagem orientada a eventos (VB, Delphi, C++ Builder) se sente muito confortável, e quem está acostumado a OO só tem o trabalho de descobrir as features do framework. A SDK pode ser baixada livremente.
A Adobe comercializa o Adobe Flex Builder, que permite uma maior facilidade na implementação das interfaces.

Eu não baixei pois queria trabalhar direto no mxml, que é o formato (uma espécie de xml) concebido para os arquivos onde são escritos os códigos de um projeto Flex.

Basicamente, os passos para um Hello World – algo simples – são, além de ter a SDK do Flex na sua máquina, criar o .mxml e compilar o mesmo, para gerar o swf.

O mxml ficou da seguinte forma (pode fazer download aqui):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:explorer="*"
    width="100%" height="100%" pageTitle="Hello World">
   
    <mx:HDividedBox width="100%" height="100%">
        <mx:Text>
            <mx:text>Olá Mundo!</mx:text>
        </mx:Text>
    </mx:HDividedBox>
   
</mx:Application>

Application é o nó pai do documento, seria como no html a tag <html>. Nele, digo que o swf gerado terá largura e altura de 100%.

Então insiro um objeto HDividedBox, que insere uma divisão horizontal nela, e dentro dela uma área de texto (Text).

Com isso, é só salvar (salvei como hello.mxml) e compilar o mesmo, com o comando

../bin/mxmlc -use-network=false hello.mxml

*aponte ../bin para a pasta bin que fica dentro da SDK do Flex da sua máquina.

O swf gerado foi esse aqui

O que achei do Flex? A vantagem é a facilidade na componentização de elementos da interface, com uma qualidade gráfica que CSS/javascript não alcançam com facilidade.

Silverlight X Flex

Publicado em Publicado por gserrano

Estava lendo algumas coisas na web sobre o futuro do flash, e na maioria dos textos me deparei ou com o Flex ou o Silverlight.
Flex é a tecnologia que a Macromedia desenvolveu como continuação para o flash quando voltada a RIAs (rich interface applications): tem uma SDK poderosa, dando a possibilidade do desenvolvedor trabalhar em cima de uma interface gráfica ou escrever uma espécie de XML (chamada de MXLM) que será interpretado. O uso de webservices e a possibilidade de integração com frameworks voltados para ajax é o grande salto desde o tempo do flash.
Silverlight é uma tecnologia que a Microsoft criou e que compete diretamente com o Silverlight (criação de RIAs): também tem uma interface visual ou pode ser desenvolvido sobre XML (XAML), tem todo o poder da Microsoft por trás (nem tanto em tecnologia, mais em poder de penetração) e integração com o (framework) .Net.

Segue abaixo uma tabela comparativa entre as duas tecnologias

 

Pontos em comum

  • Aplicações multi-plataforma: suporte para Windows, Mac e Linux
  • Linguagem XML para definir a interface
  • Integração com vídeo
  • Linguagem orientada para objectos
  • Acesso facilitado a serviços web XML
  • Suporte directo com JAVA e AJAX

Vantagens Flex

  • Ferramentas dedicadas ao design
  • Facilidade no desenvolvimento do Design
  • Forte integração com restantes ferramentas da Adobe
  • Tecnologias de suporte já implementadas na maioria dos sistemas
  • Existência de uma vasta colecção de plug-ins gratuitos para a plataforma
  • Suporte directo com JAVA e AJAX
  • Frameworks dedicadas para aplicações standalone (AIR)
  • Comunicação directa com todo o tipo de tecnologias server-side

Vantagens Silverlight

  • Suporte para Visual Basic e C#
  • Facilidade de integração com ASP.NET

Desvantagens Flex

  • Suporte apenas para ActionScript 3.0
  • Algumas limitações de programação (falta de suporte para VB, C++, Python)

Desvantagens Silverlight

  • Incompatível com versões antigas do Windows, como o Windows 2000 e 98.
  • Necessidade de software específico para suporte.
  • Fraca penetração no mercado a curto prazo
  • Tecnologia recente, logo ainda pouco desenvolvida

Fonte: http://geoxplorer.files.wordpress.com/2008/03/flex_vs_silverlight.pdf

 

Como um escritor de HTML/CSS que sou, pouco conheço de flash e suas evoluções.
Mas, sem querer fazer um julgamento, a Microsoft vai ter que ralar muito para se dar bem com o Silverlight: o Flex pega diretamente toda a base de desenvolvedor Flash já existentes no mercado (de 10 anos, mais ou menos) além de não requisitar um plug-in diferente para o browser (o mesmo player do flash funciona para o Flex). Sem contar que o Flex, agora, é uma tecnologia aberta, onde os usuários podem contribuir, enquanto (até onde encontrei referências) o Silverlight é mais uma tecnologia fechada da Microsoft.
Ou seja, "Não é a primeira vez que a Microsoft desenvolve algo novo que acaba caindo no esquecimento e saindo de linha, como tantas outras coisas que eles desenvolveram." (como diriam os Garotos da Web)

SWFObject – inserindo flash na sua página sem complicações

Publicado em Publicado por gserrano

Há aproximadamente 2 anos, os desenvolvedores web tiveram uma grande (ou não) dor de cabeça quando a Microsoft perdeu uma disputa judicial contra uma empresa americana, chamada Eolas, a qual patenteou – simplificando o assunto – o carregamento de um plugin em um documento hipertexto. Com isso, as versões atualizadas do IE7 de lá pra cá pedem para que o usuário clique no flash para que ele comece a ser reproduzido, causando umd esconforto na experiência do usuário.

De lá pra cá, muito já se discutiu sobre como contornar essa questão, e muitas soluções já foram expostas. As mais conhecidas se baseiam em inserir o flash via javascript (e não mais escrevendo diretamente no html as tags object e embed), e com isso a tal questão do "Clique aqui para ativar" é contornada.

No começo, usava-se muito uma biblioteca javascript chamada dynActiveX.js. Depois, uma outra chamada SWFObject ficou conhecida e foi adotada pela maior parte da comunidade de desenvolvedores (vejo por aí alguns projetos que usam um plugin da jQuery para isso. Me parece uma boa também).

Uma outra vantagem de utilizar essa forma de inserir flash no seu html é que você não precisa se preocupar com todas as formalidades que a tag object necessita, nem ter que ficara duplicando todo o código dentro da tag embed (para que os browsers gecko entendem). Ou seja, write once, work always 🙂

A versão 2.0 da SWFObject foi lançada alguns meses atrás; se você usava a 1.x, terá que mudar a forma de escrever seu código. Você pode fazer o download direto do Google Code aqui.
*aproveito e deixo a dica de ler um pouco a respeito do Google Code e da Ajax Libraries aqui

Como utilizar?

Depois de fazer download do arquivo, você pode usar esse código mínimo como exemplo:

<html>
<head>
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
<div id="flashcontent">
  Esse btexto é substituído pelo Flash
</div>
<script type="text/javascript">
   var so = new SWFObject("movie.swf", "meuflashvideo", "400", "200", "8", "#336699");
   so.write("flashcontent");
</script>
</body>
</html>

O que é feito, basicamente, é que o javascript insere dentro da div com id="flashcontent" o código necessário para inserir o flash troca a div com o id="flashcontent" pelo código necessário para inserir o flash (obrigado @rulico pela correção, na 1.x é que funcionava dessa outra forma!).
Segundo a documentação do SWFObject, você pode parametrizar o flash da seguinte forma:

var so = new SWFObject(swf, id, width, height, version, background-color
[, quality, xiRedirectUrl, redirectUrl]);

 

Onde:

  • swf: é o caminho do arquivo .swf
  • id: id do objeto, para tratamento javascript
  • width: largura do swf
  • height: altura do swf
  • version: versão necessária do Flash Player necessária (ver a documentação oficial para mais detalhes)
  • background-color: cor de fundo do Flash, em hexadecimal

 

Existem ainda os parâmetros opcionais:

  • quality: a qualidade que deve ser usada. Por padrão, é usado o valor high
  • xiRedirectUrl: url para onde o usuário que fez o download do flash player pelo Expressinstall
  • redirectUrl: use se você quise redirecionar o usuário que não tem a versão correta do flash player para alguma página

 

Definindo outros atributos e passando variáveis

Caso seja necessário, você pode definir outros atributos usando o método setAttribute. A sintaze é a seguinte:

so.setAttribute("parametro", "valor");

Você pode passar quantos atributos quiser, é só replicar esse código.
Pode ser necessário também passar variáveis para o seu flash. Siga o seguinte código como base:

so.addVariable("nome da variável", "valor");

Qualquer coisa, vejam na documentação oficial um how-to com todos os detalhes e um FAQ bem completo a respeito 🙂

[update]Gerador de código para inserir o SWFObject (by @rulico): http://www.swffix.org/swfobject/generator/[/update]

Como deixar fundo transparente no Flash

Publicado em Publicado por gserrano

É uma dúvida simples e extremamente fácil de resolver, estou postando isso pois estava procurando informaçõe sobre ActionSctip em fóruns e me espantei com a quantidade de dúvidas sobre como deixar o fundo transparente em Flash.

1. Salve o arquivo e exporte em .swf

2. Insira o arquivo no HTML da página desejada e nos parâmetros adicione nos parâmetros do object:

<param name="wmode" value="transparent" />

 

3. Dentro da tag <embed> você também deve adicionar o parâmetro wmode como transparente, exemplo:

<embed src="meuflash.swf" wmode="transparent">

 

 

 

Pronto, agora a exibição do swf será com fundo transparente!

Simples, não? 😉