logo
  • Home
  • Acerca
  • Autores
  • Faq
  • Rede
  Twitter   Feed-me! RSS!
Jan 3

SharedObject com Flash Media Server

Escrito por Leonardo França em .NET, 1, 2.0, 4, 6, action, Actionscript, ActionScript 3, Actionscript 3.0, Actionscript3, Adobe, Air, Aplicativos, app, AR, BI, botão, browser, C#, class, cliente, código, Cookie, Curso, dados, demo, Download, err, event, EventListener, events, exemplo, Ferramenta, filter, flash, flash media, Flash Media Server, Flash Player, Flex, FMS, function, Geral, git, Google, handle, html, ide, IE, if, image, instalação, int, live, mg, O, on, Outros, Partilha, player, pt, referencia, RIA, Ria’s Geral, RTM, RTMP, S+S, server, servidor, swf, TAT, UI, uint, update, Ved, web, window @ 01 3rd, 2012 | via http://www.leonardofranca.com.br | Sem comentários
Leonardo França
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

SharedObject é um recurso que dar ao Flash Player a capacidade de salvar dados localmente para poder ser usado posteriormente em sua aplicação, a grosso modo é como um cookie. Com o Flash Media Server, foi introduzido a possibilidade de usar o SharedObject Remote, no qual os dados são salvos no servidor Flash Media Server e compartilhados para todas as instâncias de uma conexão entre o Flash Player e o Flash Media Server. Isso possibilita a criação de aplicativos em real time como Dashboards, chats e o que mais a imaginação permitir.

O uso do SharedObject Remote pode ser usado de duas maneiras em conjunto com o Adobe Flash Media Server.

  • Somente pelo lado cliente, através do Flash Player/AIR
  • Em conjunto com ActionScript Communication, linguagem de servidor do Flash Media Server

Vejamos o primeiro caso:

Através do lado cliente, através do Flash Player/AIR

Caso você não tenha conhecimento para usar a linguagem Server-side do Flash Media Server, é possível utilizar o SharedObject Remote somente pelo ActionScript 3.0. Vamos a um exemplo clássico sharedBall, onde o objetivo é compartilhar as posições da bolinha a atualizar nos outros clientes conectados a mesma instância.

  • Vá até o diretório de instalação do Flash Media Server e procure pela pasta “applications”, lá crie um diretório chamado “sharedBall”, dentro dele um arquivo chamado “main.asc”
  • Abra o main.asc no seu editor de textos de preferencia ou pelo próprio Flash e digite: trace(“sharedBall…”);
  • Vamos testar esse arquivo, abra o console do Flash Media Server, geralmente fica localizado no diretorio de instalação/webrrot/swfs. Você pode abrir pelo browser ou o swf diretamente.
  • Clique no botão “View Applications” e em seguida procure o nome “sharedBall” no combobox logo no canto inferior esquerdo onde está escrito “New Instance…”
  • Selecione “sharedBall” e deveremos ter na aba Live Log algo como na imagem abaixo:

  • No Flash, criei uma bola com as ferramentas de desenho e converti para MovieClip dando o nome de “mc_ball”.
  • Estamos prontos para começar a integração entre o Flash e o Flash Media Server. Crie um layer para o ActionScript e abra o editor apertando F9 ou “Window->Actions”
  • Nosso código começa com a conexão com o servidor Flash Media Server
PLAIN TEXT
ACTIONSCRIPT3:

  1. import flash.net.NetConnection;
  2. import flash.events.NetStatusEvent;
  3. var nc:NetConnection;
  4. function init():void
  5. nc = new NetConnection();
  6. nc.addEventListener(NetStatusEvent.NET_STATUS, handlerNetStatus);
  7. nc.connect(“rtmp://localhost/sharedBall”);
  8. function handlerNetStatus(evt:NetStatusEvent):void
  9. trace(evt.info.code);
  10. init();

Feito isso, podemos testar o swf apertando Ctrl+Enter, se tudo correr bem, deveremos ter a seguinte mensagem no output do Flash:

NetConnection.Connect.Success

Com a conexão feita, podemos instanciar o nosso SharedObject Remote para compartilhar as posições de x e y da bolinha.

PLAIN TEXT
ACTIONSCRIPT3:

  1. if(evt.info.code == “NetConnection.Connect.Success”)
  2. so = SharedObject.getRemote(“so”,nc.uri,false);
  3. so.addEventListener(NetStatusEvent.NET_STATUS, handlerNetStatus);
  4. so.addEventListener(SyncEvent.SYNC, handlerSync);
  5. so.connect(nc);

O handlerSync é responsável por atualizar os dados de x e y pegaremos do SharedObject Remote:

PLAIN TEXT
ACTIONSCRIPT3:

  1. function handlerSync(evt:SyncEvent):void
  2. mc_ball.x = so.data.x;
  3. mc_ball.y = so.data.y;

Daremos a opção de ao clicar na bolinha, que ela possa ser arrastável, em seguida atualizaremos as posições de x e y no SharedObject Remote:

PLAIN TEXT
ACTIONSCRIPT3:

  1. mc_ball.addEventListener(MouseEvent.MOUSE_DOWN, handlerSharedBall);
  2. mc_ball.addEventListener(MouseEvent.MOUSE_UP, handlerSharedBallOut);
  3. function handlerSharedBall(evt:MouseEvent):void
  4. this.addEventListener(Event.ENTER_FRAME, update);
  5. mc_ball.startDrag();
  6. function handlerSharedBallOut(evt:MouseEvent):void
  7. mc_ball.stopDrag();
  8. function update(evt:Event=null):void
  9. so.setProperty(“x”,mc_ball.x);
  10. so.setProperty(“y”,mc_ball.y);

Segue o código completo:

PLAIN TEXT
ACTIONSCRIPT3:

  1. import flash.net.NetConnection;
  2. import flash.events.NetStatusEvent;
  3. import flash.net.SharedObject;
  4. import flash.events.SyncEvent;
  5. import flash.events.MouseEvent;
  6. import flash.events.Event;
  7. var nc:NetConnection;
  8. var so:SharedObject;
  9. function init():void
  10. nc = new NetConnection();
  11. nc.addEventListener(NetStatusEvent.NET_STATUS, handlerNetStatus);
  12. nc.connect(“rtmp://localhost/sharedBall”);
  13. function handlerNetStatus(evt:NetStatusEvent):void
  14. {
  15. trace(evt.info.code);
  16. if(evt.info.code == “NetConnection.Connect.Success”)
  17. so = SharedObject.getRemote(“so”,nc.uri,false);
  18. so.addEventListener(NetStatusEvent.NET_STATUS, handlerNetStatus);
  19. so.addEventListener(SyncEvent.SYNC, handlerSync);
  20. so.connect(nc);
  21. }
  22. function handlerSync(evt:SyncEvent):void
  23. mc_ball.x = so.data.x;
  24. mc_ball.y = so.data.y;
  25. mc_ball.addEventListener(MouseEvent.MOUSE_DOWN, handlerSharedBall);
  26. mc_ball.addEventListener(MouseEvent.MOUSE_UP, handlerSharedBallOut);
  27. function handlerSharedBall(evt:MouseEvent):void
  28. this.addEventListener(Event.ENTER_FRAME, update);
  29. mc_ball.startDrag();
  30. function handlerSharedBallOut(evt:MouseEvent):void
  31. mc_ball.stopDrag();
  32. function update(evt:Event=null):void
  33. so.setProperty(“x”,mc_ball.x);
  34. so.setProperty(“y”,mc_ball.y);
  35. init();

Veja uma demostração em funcionamento:

Download sharedBall

Nov 3

Flash Camp SP

Escrito por Pedro Claudio em 1, 4, 6, ActionScript 3, AUG, blog, C#, camp, Eventos, flash, html, image, mg, O, Ria’s Geral, vs @ 11 3rd, 2011 | via http://blog.pcsilva.com/index.cfm | Sem comentários
Pedro Claudio
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

O AUG ASDev está organizando um Flash Camp em São Paulo, saiba mais.

Set 16

Google+ API e Actionscript 3

Escrito por Pedro Claudio em 1, 2.0, 4, 6, action, Actionscript, ActionScript 3, api, AR, C#, demo, exemplo, Google, int, mg, Notícias, O, on, pt, Ria’s Geral, S+S, UI, Wordpress, XP @ 09 16th, 2011 | via http://blog.pcsilva.com/index.cfm | Sem comentários
Pedro Claudio
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Luca Mezzalira, mostra seu experimento com Google API e ActionScript 3, para demonstrar a facilidade da interação.

A demonstração ainda dispõe de arquivos de exemplo, confira.

Ago 31

Oportunidades de trabalho na Alta Comunicazione

Escrito por Lucas Marçal em 1, 4, action, Actionscript, ActionScript 3, Actionscript 3.0, AMF, amfphp, Android, api, app, AR, Banco de Dados, BI, builder 4, C#, ColdFusion, ColdFusion 8, css, css3, dados, Desenvolvimento, Design, designer, Destaque, developer, DRE, Dreamweaver, err, Ferramenta, flash, flash builder, Flash Builder 4, framework, gaia, git, html, html5, IE, if, ignite, int, Java, Javascript, JQuery, layout, motion, mysql, O, on, oop, photoshop, PHP, procura, programação, pt, RIA, Ria’s Geral, S+S, Sun, TAT, UI, Vagas, web, xhtml @ 08 31st, 2011 | via http://www.lucasmarcal.com.br/blog/ | Sem comentários
Lucas Marçal
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

A Alta Comunicazione está abrindo novas vagas para o setor de web, abaixo segue um descritivo do perfil desejado separado por áreas.
Se você tem facilidade em trabalhar em equipe, gosta de um bom desafio e procura uma vaga de trabalho entre em contato conosco:

Enviar CV para: trabalhecomagente@altacomunicazione.com.br
Assunto: DIGITAL
www.altacomunicazione.com.br

Perfil WebDesigner

-Ferramentas de trabalho
*Dreamweaver CS5.5
*Photoshop Cs5
*Illustrator CS5
*Fireworks Cs5

-Habilidades necessárias
*Conhecimento sobre XHTML e CSS
*Conhecimento sobre Jquery
*Conhecimento sobre JavaScript
*Sólidos Conhecimentos sobre Adptação de layouts (PSD) para XHTML

-Diferenciais
*habilidade para desenvolver layouts
*HTML5 e CSS3
—————————————————————————-

Perfil Developer PHP

-Ferramentas de trabalho
*Dreamweaver CS5.5
*Navcat
*Photoshop cs5
*Fireworks Cs5

-Habilidades necessárias
*Conhecimento sobre XHTML e CSS
*Conhecimento sobre Jquery / Javascript
*Conhecimento Intermediário sobre Linguagem SQL e Banco de dados MYSQL
*Conhecimento (ter desenvolvido algo) com Codeigniter
*Conhecimento sobre AMFPHP
*Conhecimento sobre PHP nativo
*Falicidade na integração de APIs

-Diferenciais
*HTML5 e CSS3
*Coldfusion 8 ou 9
—————————————————————————

Perfil Developer Actionscript 3.0

-Ferramentas de trabalho
*Dreamweaver CS5.5
*Flash Cs5.5
*Flash Builder 4.5 / FlashDeveloper 4.0 / FTD
*Photoshop cs5
*Fireworks Cs5

-Habilidades necessárias
*Conhecimento sobre Actionscript 3.0
*Conhecimento sobre Gaia Framework
*Conhecimento sobre adptação de layouts
*Conhecimento sobre OOP (Programação orientada a objeto)
*Falicidade na integração de APIs
*Sólidos conhecimentos sobre Motion via Timeline ou Greensock

-Diferenciais
*HTML5 e CSS3
*Coldfusion 8
*PHP (AMFPHP)
*Desenvolvimento de Apps para Android e IOS

Enviar CV para: trabalhecomagente@altacomunicazione.com.br
Assunto: DIGITAL
www.altacomunicazione.com.br

Jul 6

Adobe Mobile Challenge

Escrito por Mauro Martins em .NET, 1, 2.0, 3.5, 4, 6, action, Actionscript, ActionScript 3, Actionscript 3.0, Adobe, Adobe Max, Android, app, apple, AR, BI, blog, C#, class, err, Eventos, Flash / Flex, Flex, for, Formação, framework, image, Inspiração, layout, Links e sugestões, map, mg, mobile, O, on, pt, Ria’s Geral, S+S, web @ 07 6th, 2011 | via http://imauro.com/blog/ | Sem comentários
Mauro Martins
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

ch3 Adobe Mobile Challenge

Olá a todos!

A Adobe lançou hoje o Adobe Mobile Challenge que te permite ganhar um bilhete para a MAX 2011!

O desafio consiste em desenvolver uma aplicação usando apenas ActionScript 3.0 ou usando a framework de Flex. Pode ser qualquer tipo de aplicação!

Coloca a aplicação nos três marketplaces (Android Marketplace, Apple Store e BlackBerry App World) antes de 1 de Setembro, e regista-te para te habilitares a ganhar o bilhete!

Para mais informação:

http://www.adobemobilechallenge.com/



Mai 19

10 coisas que um bom programador flex deve saber

Escrito por Daniel Schmitz em .NET, 1, 2.0, 2009, 3.5, 4, 6, action, Action Script, Actionscript, ActionScript 3, Actionscript 3.0, Actionscript3, Adobe, Air, api, Aplicativos, Apresentação, AR, Arquitetura, arte, Artigo, as3, BI, Bindable, blog, bug, builder 4, C#, Cairngorm, class, classe, classes, código, código fonte, Componente, Componentes, components, control, Controles, css, Curso, Cursos, custom, dados, Data Binding, DataGrid, Debug, demo, desempenho, Desenvolvedor, desenvolvedores, Design, developer, development, dispatch, dispatchEvent, DRE, empresas, err, Estilo, event, EventListener, Evento, Eventos, eventos customizados, events, Excel, explorer, Ferramenta, flash, flash builder, Flash Builder 4, Flash Player, Flex, Flex 3, Flex 4, Flex Examples, fonte, for, framework, Frameworks, Google, Gráfico, handle, html, HTTPService, ide, IE, if, int, interface, Java, layout, lista, live, Livro, lógica, map, Mate, MAX 2009, mvc, MXML, O, on, oop, opensource, Outros, player, polimorfismo, problema, problemas, programação, Projetos, pt, RIA, Ria’s Geral, ruby, S+S, site, skins, Sun, tag, TAT, Tech, Tecnologia, tv, UI, uint, utf8, Ved, Vídeo, vs, web, Webservice, XML, XP @ 05 19th, 2011 | via http://flex.etc.br | Sem comentários
Daniel Schmitz
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Esta é uma tradução do seguinte artigo: 10 Things A Good Flex Developer Should Know

Para ser um bom programador Flex é preciso mais que simplesmente saber como usar alguns componentes nativos do Flex. É preciso muito mais.

Aqui está minha contribuição sobre o assunto… juntamente com alguns recursos ou algumas palavras-chave que você poderá pesquisar facilmente através do Google.

Por favor, comente no blog se você achar que esqueci algo (o que é inevitável) ou se quiser sugerir alguns recursos interessantes que devo acrescentar.

1- Programação orientada a Objetos (OO)

O Flex se baseia na linguagem ActionScript3, que é totalmente orientada a objetos. Embora não seja um conceito fácil de aprender, programação orientada a objeto é um pré-requisito para aprender Flex. Se já possui experiência com OO (Java, C#, Ruby, etc), então você está pronto. Se não, você precisará pegar um livro sobre OO e começar a aprender o mais rápido possível.

· Head First Java (Java? Sim, Eu sei. Mas confie em mim.)

· Object-oriented programming with ActionScript 3.0

Nota: Alguns de vocês poderão perguntar – “O que são padrões de projetos?”. Vamos dar um passo de cada vez? Preocupe-se em entender classes e objetos, interfaces, herança, composição, polimorfismo, encapsulamento, etc. Só então considere estudar padrões de projetos. De fato, se eu escrever um post intitulado “10 coisas que um GRANDE programador Flex deve saber”, padrões de projeto estará nessa lista.

2- ActionScript/MXML

ActionScript é a linguagem de programação usada juntamente com MXML para criar aplicações Flex. MXML é uma linguagem de marcação baseada em XML. Cada tag MXML é mapeada diretamente para uma classe ActionScript correspondente. MXML é usado pelos desenvolvedores Flex principalmente para apresentar a interface do usuário, enquanto que, o ActionScript é usado para a lógica de negócio. Com exceções, é claro.

O Framework Flex inclui centenas de classes ActionScript e interfaces usadas para desenvolver aplicações Flex. Seu nível de habilidade como um desenvolvedor Flex está diretamente ligado ao seu conhecimento em relação ao ActionScript e MXML.

· Flex in a Week

· Tour De Flex

· Essential ActionScript 3.0

Nota: Fique ? vontade com a API do Flex. Como um desenvolvedor Flex, você vai usá-la diariamente.

3- Debugging

Boa parte do tempo de qualquer programador é gasto no debugging. Obviamente, é necessário debugar para rastrear a causa de bugs. No entanto, também é uma ótima maneira de conhecer o código fonte.

Felizmente, existem muitas ferramentas disponíveis para ajudá-lo com o trabalho de debugging. Invista algum tempo para aprender essas ferramentas. Seu investimento irá proporcionar retorno imediato.

· Flash Builder 4.5 Debugger

· De MonsterDebugger

· Kap Inspect

4- Programação orientada a eventos

Aplicações Flex são orientadas a eventos. Toda ação é o resultado de um evento assíncrono.

Como um desenvolvedor Flex, você deve saber como responder a eventos e como criar e disparar eventos. Para isso, é necessária uma sólida compreensão da arquitetura de eventos do Flex, incluindo familiaridade com os seguintes conceitos:

· Eventos nativos (Flash Player ou Framework de eventos Flex)

· Eventos customizados (Eventos criados pelo desenvolvedor, que estende a classe Event ou uma de suas subclasses)

· Disparar eventos, propagação de eventos (ver classe EventDispatcher e seu método dispatchEvent)

· Event listeners, event handlers (ver classe EventDispatcher e seus métodos addEventListener e removeEventListener)

· Fases do evento (capture, target & bubbling phases; target vs. currentTarget)

· Objetos do evento, tipos de eventos (ver classe Event e subclasses)

· Comportamento do evento default (ver classe Event e subclasses e seu método preventDefault)

5- Data binding

Aparentemente, data binding é um “no brainer”[1]. É só vincular o valor de uma propriedade ao valor de outra propriedade usando chaves. Quando o valor da propriedade de origem for alterado, o valor da propriedade de destino também é alterado.

No entanto, existe uma sobrecarga associada ao uso indiscriminado de data binding, podendo haver implicações no desempenho. Uma sólida compreensão de data binding ajudará a determinar quando é apropriado o seu uso e quando não é.

· Flex Tips – Using Bindable Metadata Events

· Michael Labriola’s presentation entitled Diving in the Data Binding Waters

6- Item renderers

Uma característica de uma aplicação Flex bem projetada é a apresentação dos dados de uma forma visualmente atraente. O Flex oferece uma série de controles baseados em listas (DataGrid, List, TileList, HorizontalList, etc) responsável pela apresentação dos dados. Portanto, pode-se personalizar a exibição dos dados com a ajuda de item renderers.

Você irá consumir muito tempo trabalhando com item renderers. Então é melhor saber bem como ele funciona.

· Flex Examples – Item Renderers in Practice

· A Deep Dive into Flex 4 Lists and Layouts

7- Acesso remoto a dados

Você conhece muitas aplicações que não interagem com os dados? Eu também não. Saiba como recuperar dados através de HTTPServive, WebService e RemoteObject. A arquitetura do framework Flex também poderá ajudá-lo com isso (ver #9).

· Retrieving and handling data with HTTPService

· Retrieving and handling data with WebService

· Retrieving and handling data with RemoteObject

8- Styling / Skinning

Não vamos nos esquecer que o Flex é uma tecnologia de interface e, como tal, certamente há expectativas em relação ao design. Como um desenvolvedor Flex, você deve ser capaz de personalizar a aparência de seus aplicativos usando estilos CSS, gráficos e/ou skins.

Com o Flex 4, não há mais desculpas. Use um pouco do seu tempo para conhecer de uma vez o lado direito do seu cérebro. É uma excelente mudança de paradigma, e vai ajudá-lo a diferenciar-se dos outros desenvolvedores Flex.

· Flex Style Explorer

· ScaleNine

· Introduction to Flex: Part 3 – Styles & Skins

9- Pelo menos um framework de arquitetura Flex

A maioria dos frameworks de arquitetura Flex impõe uma separação de camadas através da implementação do MVC (model-view-controller). Além disso, esses mesmos frameworks especificam como seu código deve ser organizado dentro do projeto Flex.

Embora muitos argumentariam que os frameworks são desnecessários, acredito que os desenvolvedores Flex se beneficiam em muitos aspectos da experiência de usá-los. Basta assistir ? s técnicas (boas ou más) empregadas por um framework para resolver problemas complexos de arquitetura. Isso contribuirá para seu crescimento como um desenvolvedor Flex.

Além disso, é difícil negar o fato de que a experiência com framework aumentará substancialmente o seu valor comercial como um desenvolvedor Flex. Jesse Warden me disse recentemente “Existem poucas empresas que não usam frameworks, mas isso é raro. Queiramos ou não, está na ‘moda’”. Eu concordo com Jesse.

· Cairngorm

· Parsley

· PureMVC

· Mate

· Swiz

· Robotlegs

10- Ciclo de vida de componentes e display list

Eu não estava convencido da necessidade de aprender o ciclo de vida de componentes Flex ou da display list até que escrevi o meu primeiro componente customizado (na verdade foi um componente semi-customizado que se estendia do componente Canvas). Até essa época eu usava componentes nativos do Flex, usando apenas o MXML enquanto que a display list era renderizada para mim. Em nenhuma vez tive que usar os métodos addChild, createChildren ou commitProperties, e usava o evento creatiomComplete para tudo.

Meu primeiro componente customizado usava uma quantidade enorme de eventos assíncronos, e eu não poderia prever a ordem em que cada evento seria disparado. Só depois que eu aprendi os métodos e variáveis do ciclo de vida dos componentes do Flex que eu pude ter um certo controle.

Estes métodos do ciclo de vida estão lá para serem usados. Saiba como funcionam e use-os para o seu benefício. Sua vida será mais fácil e você perderá menos cabelos.

· Colin Moock’s Lost ActionScript Weekend – The Display List

· Creating New Components in Flex 3

· Diving Deep with the Flex Component Lifecycle

· Understanding the Flex 3 Component and Framework Lifecycle


[1] Expressão americana usada para algo que requer pouco esforço mental ou inteligência para realizar ou compreender

Mar 16

Faça seu site de jogos online feitos em Flash

Escrito por Leonardo França em .NET, 1, 3d, 4, 6, action, Actionscript, ActionScript 3, Actionscript 3.0, Adobe, api, AR, BI, blog, class, código, demo, Desenvolvedor, desenvolvedores, Desenvolvimento, DRE, engine, exemplo, Exemplos, facebook, flash, flash media, Flash Media Server, Flash Player, for, free, game, Google, ide, if, image, int, jogo, Jogos, library, lista, mg, News, newsletter, O, on, online, Pessoal, PHP, player, Plugin, produto, pt, Redes Sociais, RIA, Ria’s Geral, Scroll, server, site, TAT, UI, Ved, vs, web, wii, Wordpress @ 03 16th, 2011 | via http://www.leonardofranca.com.br | 1 comentário
Leonardo França
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »



Sites de jogos online feitos com Adobe Flash se tornaram muito populares. Existem varias produtoras que se especializaram no desenvolvimento de jogos em Flash e nos últimos anos vimos um crescimento grande em relação aos jogos em Flash nas redes sociais a exemplos dos jogos casuais que encontramos no Facebook e Orkut.

Introducing the Molehill 3D APIs

O Adobe Flash oferece uma gama enorme de possibilidades para o desenvolvimento de jogos e recentemente com a nova API 3D do Flash Player(codinome Molehill), isso só aumentou e deu muita liberdade os desenvolvedores. Veja uma lista de demonstrações com Molehill.

Engine de Física

Para alguns jogos é essencial que se tenha um simulador de física(gravidade, ação e reação, colisões etc), as chamadas engines de física, que são bem conhecidas pelo pessoal que já desenvolve em outras plataformas especificas para jogos. Alguns engines de físicas para o Adobe Flash são:

  • Box2DFlash — This Flash physics engine is based on the widely recognized Box2D engine from C++.
  • Glaze — This one is based on the Chipmunk engine from C++. Beyond physics, this library also features scene management, line of sight, user input, scrolling, and AI.
  • JigLibFlash

visit www.mandreel.com

Você pode aproveitar também algumas bibliotecas ou códigos de jogos ja desenvolvidos e portar para o Flash atraves do Adobe Alchemy, para quem não sabe, o Adobe Alchemy converte código em C/C++ para ActionScript 3.0. Tanto que temos até produtoras portando jogos do Nintendo Wii para o Flash.

Sempre fui fã de games e desde meu primeiro video game, um Master System, sempre tive vontade de criar jogos e agora resolvi criar um site. Para criar um site de jogos em Flash, a empresa Mochi oferece opções entre plugin para WordPress, Game Site Script, Arcadem Pro 2.8+, phpArcadeScript e AV Arcade. O interessante da empresa é que a empresa oferece também os jogos e da a possibilidade de você publicar e ganhar alguma grana com seu próprio jogo. Meu jogo ainda está em produção e envolve Flash e Flash Media Server para algo mais interativo e em tempo real. Breve estarei disponibilizado no Mochi. Enquanto isso, aproveite alguns dos mais de 900 jogos online free feitos em Flash no site.

Submarino.com.br

Mar 9

Iniciando um projeto utilizando Gaia Framework

Escrito por Lucas Marçal em 1, 2.0, 4, 6, action, Actionscript, ActionScript 3, Actionscript 3.0, Adobe, Air, Animação, Apresentação, AR, as3, auto, BI, blog, botão, camp, class, classe, classes, código, configuração, contextMenu, demo, Desenvolvedor, desenvolvedores, Desenvolvimento, Destaque, developer, Download, dynamic, exemplo, Exemplos, facebook, flash, Flash Player, for, framework, gaia, game, IE, if, image, imagens, Iniciando, int, library, Linha de Código, Links, lista, menu, mg, O, on, Outros, painel, Pessoal, PHP, player, processo, Projetos, pt, RIA, Ria’s Geral, SEO, site, Software, Sun, swf, tag, TAT, template, Tutoriais, Tutorial, Twitter, UI, uint, Ved, Vídeo, Vídeos, window, XML, XP @ 03 9th, 2011 | via http://www.lucasmarcal.com.br/blog/ | Sem comentários
Lucas Marçal
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

Salve pessoal
Estou voltando à ativa nesse blog, espero que agora eu encontre tempo para criar os tutoriais.

Inicialmente gostaria de deixar claro que o foco desse blog não é o público que eu chamo de “Hard ActionScript Developer” o meu foco são aqueles desenvolvedores que estão iniciando ou que são intermediários no mundo do Actionscript 3.0, então nem sempre vamos focar no “melhor código” para os exemplos, mesmo porque eu nem teria tempo para fazer isso, na verdade a minha intenção e abordar superficialmente algumas coisas que vejo no meu dia-a-dia e apresentar coisas realmente usuais para todos.

Dito isso, fica claro que não tenho a intenção de criar uma metodologia definitiva para desenvolvimento, então pegue leve nas críticas =)

Hoje vamos falar sobre a utilização do Gaia Framework para desenvolvimento de pequenos projetos (games, hotsites etc…)

O que é o Gaia Framework?

O Gaia Framework é um projeto Open-Source para Actionscript 2.0 e 3.0 que visa facilitar sua vida na hora de desenvolver projetos em Flash, ele reduz drasticamente o tempo que você leva desenvolvendo, pois cria automaticamente alguns dos processos comuns a qualquer site em Flash.
Com o Gaia Framework é possível criar sites usuais em flash em pouco tempo com características que você levaria horas para fazer tais como:

1. Navigation
2. Transitions
3. Preloading
4. Asset Management
5. Dynamic Font Loading
6. SEO
7. DeepLinks

Para maiores informações e detalhes sobre o que é o Gaia Framework acesse o site

Instalando o Gaia Framework

Acesse o site e faça download do arquivo MXP do Gaia Framework, feito isso clique duas vezes no arquivo para instalar. Abra o Adobe Flash Cs5 e vá na aba Help > Manage Extentions ,certifique-se que o Gaia Framework esteja instalado corretamente como na imagem abaixo:

Pronto, agora o seu Adobe Flash Cs5 já está pronto para trabalhar com o Gaia Framework.

Instalando Gaia Site Creator

O Gaia Site Creator é um aplicativo AIR que facilita ainda mais o desenvolvimento com Gaia Framework ele irá nos ajudar na hora de criar o arquivo “site.xml” que define as “paginas” que nosso site em Flash vai ter, sobre esse arquivo XML vamos falar nas próximas aulas, por hora apenas acesse o site e instale o Gaia Site Creator.

Criando 1º projeto com Gaia Framework

Com o Adobe Flash Cs5 aberto vá na aba Window > Other Panels > Gaia Framework
Uma janela como essa vai se abrir para você:

1. Criar um novo projeto em Actionscript 3.0
2. Criar um novo projeto em Actionscript 2.0 (sai fora, credo!)
3. Importar um projeto existente
4. Fazer uma doção para o Steven Sacks =)
5. Lista de projetos criados (ainda em branco)

Esse é o painel que você vai trabalhar durante todo o tempo de desenvolvimento com o Gaia Framework aconselho você a deixar ele em um lugar de fácil acesso durante o desenvolvimento.
Agora é a hora de começarmos realmente a desenvolver utilizando o Gaia Framework, com o painel do Gaia Framework aberto clique no botão “Create AS3″ e configure como a imagem abaixo:

1. Nome do projeto que vamos desenvolver
2. Pasta raiz do projeto
3. Versão do Flash Player que esse projeto vai ser compilado
4. Versão do Gaia Framework e do Greensock (motor de animação) utilizado
5. Tamanho do Stage, Framerate e cor
6. Estrutura de pastas criada pelo Gaia Framework aconselho a deixar dessa forma
7. Tipo de projeto utilizado, nesse exemplo vamos usar o FlashDevelop para desenvolver

Com todos esses requisitos preenchidos clique no botão “Create New Project” para criar o projeto do Gaia Framework.
Pronto, o Gaia Framework acabou de criar a estrutura básica para trabalharmos o projeto veja como ficou nossa estrutura:

1. Arquivo de configuração do Gaia Framework
2. Arquivo de projeto do FlashDevelop
3. Pastas com arquivos publicáveis (swf, imagens, XML…)
4. Pasta com os arquivos FLAs
5. Pasta com os arquivos .as
6. Pasta com os templates (não vamos usar mais não delete)

Agora é hora de configurar o arquivo “site.xml” que determina quais “paginas” serão criadas em nosso projeto, lembra do nosso amigo Gaia Site Creator? Então é hora de iniciar ele, com o Gaia Site Creator aberto importe o arquivo “site.xml” que se encontra dentro da pasta “bin>xml” o arquivo deve aparecer como na imagem abaixo:

Essa é a estrutura básica que o Gaia Framework cria para o projeto, porém, não é a estrutura que vamos usar para esse projeto inicial siga os próximos passos para configurar corretamente o arquivo “site.xml”
Clique no item “home” e no item “id:nav” e arraste eles para o campo vermelho chamado “drop here to delete” como mostra a figura abaixo:

Configurando um projeto de portfólio dentro do Gaia Site Creator

O item “id:index” funciona como uma “Main page” ele é o root do nosso aplicativo(existe ainda uma classe chamada “Main.as” mas vamos falar sobre ela depois. Nesse projeto todas as paginas serão filho da pagina “índex.fla”

Para criar um novo “filho” no arquivo “site.xml” você deve clicar na aba “assets” do Gaia Site Creator e arrastar o item “New Page” para dentro do item “id:index” e depois configurar algumas propriedades como mostra na figura abaixo:

1. Nome utilizado posteriormente para acessar essa pagina
2. Nome do arquivo swf que será criado quando o Gaia Framework for compilado
3. Titulo da “pagina” quando esse arquivo for acessado

A descrição para as outras configurações desse arquivo não serão abordadas nesse momento e podem ser encontradas nesse link

Antes que eu esqueça de dizer esse projeto vai ser um portfólio de um Flash Developer como eu e você então a estrutura de paginas vai ser como mostra a imagem abaixo:

1. Pagina de apresentação
2. Perfil do desenvolvedor
3. Portfólio
4. Fotos
5. Vídeos
6. Contato

A minha intenção com esse tutorial é que posteriormente eu mostre como trabalhar com algumas classes que utilizo então podemos explorar integrações com Twitter, Flickr, Youtube etc… Esse projeto vai servir como base para outros tutoriais.

Criada essa estrutura dentro do Gaia Site Creator clique na aba “file > Export > ExportSiteXML” e sobrescreva o arquivo “site.xml” com essa nova configuração, abra esse arquivo dentro do software Flash Develop (imagino que você já esteja utilizando ele para desenvolver seus projetos) a estrutura do arquivo “site.xml” ficou da seguinte forma:

Se você seguiu todos os passos que descrevi acima, abra novamente o Adobe Flash Cs5, com o painel do Gaia Framework aberto vá até a aba “scaffold” e clique em “scaffold project”.

Ele vai criar todos aqueles arquivos que configuramos no “site.xml” dentro da pasta de projeto, aguarde os arquivos serem criados/compilados, ao final desse processo ele vai abrir uma aplicação como na figura abaixo:

Agora no painel do Gaia Framework a aba que ficou marcada é “Publish” clique no botão “save” que fica no canto direito superior para salvar esse projeto. Agora na lista de projetos criados você tem todos os projetos que está trabalhando no Gaia Framework como mostra uma visão dos meus projetos na figura abaixo:

Clique duas vezes sobre o projeto que estamos trabalhando, vá até a aba “publish” clique na pasta “lib” e veja que todos os arquivos configurados no “site.xml” foram criados dentro do projeto como mostra a figura abaixo:

1. Esse botão deve ser usado sempre que você fizer alterações nos arquivos, não adianta apenas dar um CTRL+Enter no arquivo é preciso clicar nesse botão para compilar os arquivos marcados na lista, caso algum arquivo não esteja marcado ele NÃO vai compilar o arquivo
2. Botão abre a pasta raiz do projeto
3. Lista de arquivos do projeto
4. Esse botão sincroniza as modificações feitas no arquivo “site.xml” e vamos tratar disso nos próximos tutoriais

Clique no botão “Test Project” para ver o resultado desse tutorial, lembrando que essa tela preta que aparece é fruto de uma configuração inicial feita pelo Gaia Framework, se você abrir por exemplo a pagina “home.fla” não vai ver nenhum “asset” dentro dela ou da library, não se assuste vamos tratar desses e de outros assuntos no próximo tutorial.

Nesse tutorial não vamos abordar o desenvolvimento do menu do site, então para navegar no projeto feito até aqui utilize o botão direto do mouse e clique no ContextMenu para navegar entre as paginas.

Conclusão

Nesse tutorial eu abordei os aspectos básicos para desenvolver usando o Gaia Framework, veja que não fizemos nenhuma linha de código, mas não se engane existem muitas coisas para aprender ainda.

No próximo tutorial vou falar sobre a estrutura de pastas criadas pelo Gaia Framework e como iniciar nosso projeto com as modificações em Actionscript 3.0 ou seja, prepare-se para programar no próximo tutorial.

Arquivos utilizados no tutorial

Baixar

Resultado desse tutorial

Link

Meu perfil no Facebook
Meu Twitter

Uma abraço a todos, divulguem esse tutorial!

Mar 8

Iniciando com Adobe AIR for iOS

Escrito por Leonardo França em 1, 4, 6, action, Actionscript, ActionScript 3, Actionscript 3.0, Adobe, Adobe Air, Air, Android, api, Aplicativos, app, app store, apple, AR, Artigo, Artigos, BI, builder 4, class, Componente, Componentes, Curso, Cursos, Desenvolvedor, desenvolvedores, Desenvolvimento, Desktop, development, err, Ferramenta, flash, flash builder, Flash Builder 4, Flash Platform, Flash Player, Flex, for, html, ide, IE, if, image, Iniciando, iphone, Mac, Mercado, mg, O, on, padrão, PHP, platform, player, problema, Projetos, pt, RIA, Ria’s Geral, runtime, screen, SDK, SmartPhone, state, TAT, Tema, Tutoriais, Tutorial, UI, Ved, Widget, XP @ 03 8th, 2011 | via http://www.leonardofranca.com.br | Sem comentários
Leonardo França
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »



O iPhone[bb], lançado por volta de 2007, foi revolucionario em relação a experiencia do usuário e naturalmente criou-se um novo nicho de mercado para desenvolvimento de aplicações. A App Store(loja virtual onde os aplicativos da Apple[bb] são disponibilizados) já pagou mais de 2 bilhões de dolares aos seus desenvolvedores e com a chegada do iPad[bb], esse número tende a crescer muito. Então se você quer entrar nesse nicho de mercado, precisa saber do que precisa para criar seus aplicativos para rodar no sistema operacional movél da Apple[bb], o iOS(antes da chegada do iPad[bb], era simplesmente iPhone[bb] OS), no qual rodam o iPhone[bb] e iPad[bb], portanto vamos iniciando com Adobe AIR for iOS.

Antes de começar, precisamos de alguns esclarecimentos em relação a como irá funcionar seu aplicativo feito com Adobe AIR rodando no iOS. Você só podera criar aplicativos com Adobe AIR, não é possivel criar aplicativos que rodem no navegador com o Flash Player.

Você só podera criar aplicativos com Adobe AIR, não é possivel criar aplicativos que rodem no navegador com o Flash Player.

Sem Flash Player no iOS =õ(

Sem Flash Player no iOS =õ(

Com o runtime do Adobe AIR, temos o mesmo problema, não é possivel instalar o runtime do Adobe AIR da maneira que estamos acostumados a fazer no desktop ou no Android.
O que a Adobe fez foi criar uma ferramenta usando o Low Level Virtual Machine (LLVM) que permite que você converta seu aplicativo feito em Adobe AIR para um aplicativo nativo do iOS. A Adobe mudou o modo de compilação completamente para que seu aplicativo pudesse rodar no iOS, do modo JIT (Just in Time) para o AOT (Ahead-of-Time) permitindo que seu aplicativo em Adobe AIR pudesse ser convertido para um aplicativo nativo do iOS.

A Adobe mudou o modo de compilação completamente para que seu aplicativo pudesse rodar no iOS, do modo JIT (Just in Time) para o AOT (Ahead-of-Time) permitindo que seu aplicativo em Adobe AIR pudesse ser convertido para um aplicativo nativo do iOS.

LLVM é um sistema modular, o sistema compilador flexível que é amplamente utilizado em uma variedade de projetos. A principal razão que a Adobe escolheu o LLVM é a sua flexibilidade e aplicabilidade para o desenvolvimento do iOS. LLVM já é utilizado no projeto Alchemy(Alchemy = C/C++ com ActionScript 3.0).

A criação de aplicativos para iOS usando a Flash Platform só é possivel a partir do iOS 3.0 ou superior.

Ferramentas de desenvolvimento
Adobe Flash CS5 Professional – Com a atualização do Packager for iPhone, você pode a partir do Adobe Flash CS5(com o Packager for iPhone instalado), criar seus aplicativos para o iOS(iPhone/iPad), teremos um novo profile chamado “AIR for iOS”, gerando o arquivo ja com o tamanho padrão de 320×480. Por enquanto não existem componentes pré-programados para iOS e não é recomendado usar os já existentes no Flash.

Adobe Flash Builder 4 (burrito) – A Adobe disponilibizou juntamente com o Flash Builder 4 (burrito), o SDK do Flex versão 4.5, com componentes otimizados para dispositivos moveis, no entanto, esses componentes ainda estão sendo otimizados para rodarem no iOS e serão disponibilizados numa futura versão do Flash Builder, mas você pode criar tranquilamente um projeto ActionScript(usando somente ActionScript 3.0 sem o SDK do Flex) e usar o compilador por linha de comando(ADT).

Qualquer editor de texto – Você pode usar qualquer editor de texto salvando na extensão .as ou seu editor ActionScript favorito.

Distribuição
Você pode gerar o instalador do seu aplicativo pelo Flash Builder(próximas versões), Flash CS5(com o Packager for iPhone instalado) ou por linha de comando usando o ADT. É gerado um aplicativo com a extensão .ipa. A distribuição pode ser feita atraves da App Store, para se tornar um publisher da App Store, basta pagar a inscrição de 99 dolares. Acompanhe esse tutorial sobre como publicar seu aplicativo na App Store.

Acompanhe alguns tutoriais:
Developing for iOS using Flash Professional
Optimizing content for Apple iOS devices
Guide for Apple App Store submissions
Saving state in AIR applications for iOS devices
Using screen orientation APIs for smartphone application development

Nos proximos artigos, mostrarei como usar alguns recursos do AIR for iOS :D

Jan 31

Dica Flex – Abrindo um Popup com o componente TitleWindow

Escrito por Pablo Souza em 1, 2009, 4, action, Actionscript, ActionScript 3, Actionscript 3.0, Adobe, app, AR, blog, class, classe, classes, Componente, demo, Dica, event, Evento, Flex, for, function, handle, label, layout, library, MXML, O, on, pt, RIA, Ria’s Geral, singleton, spark, TextInput, UI, window, XML @ 01 31st, 2011 | via http://rectius.com.br/blog | Sem comentários
Pablo Souza
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

A dica flex de hoje mostra como podemos criar um componente TitleWindow que será aberto como um popup em nossa aplicação.

Primeiro vamos definir nosso componente que terá como sua base class a classe TitleWindow.

“MyPopup.mxml“:

?
<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   title="My popup"
			   close="close_handler()"
			   width="400" height="300">
	<fx:Script>
		[CDATA[
			import mx.managers.PopUpManager;
?
			protected function close_handler():void
			{
				PopUpManager.removePopUp(this);
			}
		]]>
	fx:Script>
?
	<mx:Form>
		<mx:FormItem label="User">
			<s:TextInput width="200" />
		mx:FormItem>
		<mx:FormItem label="Passwd">
			<s:TextInput width="200" />
		mx:FormItem>
		<mx:FormItem>
			<s:Button label="Cancel" click="close_handler()"/>
		mx:FormItem>
	mx:Form>
?
s:TitleWindow>

Repare que o evento close do componente faz uma chamada ao método close_handler(). Na implementação desse método utilizamos a classe Singleton PopUpManager para remover o popup. Entre outras atribuições essa classe gerencia a criação, o posicionamento e a remoção de janelas.

Em seguida vamos implementar nossa application que será responsável por instanciar o componente e abri-lo como um popup.

?
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx">
?
	<s:layout>
		<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
	s:layout>
?
	<fx:Script>
		[CDATA[
			import mx.managers.PopUpManager;
?
			protected function add_clickHandler(event:MouseEvent):void
			{
				PopUpManager.createPopUp(this, MyPopup, true);
			}
?
		]]>
	fx:Script>
?
	<s:Button id="add" label="Add TitleWindow Popup" click="add_clickHandler(event)" />
?
s:Application>

Para saber mais sobre classes Singletons veja:
“Dica Flex – Como criar uma classe Singleton com ActionScript 3.0″

Espero que tenham gostado. Até a próxima!

« Entradas anteriores |

ACERCA

O que é o RedeRIA ?

O redeRIA não é nada mais que um agregador de feed's que disponibiliza o conteudo de varios blogs e autores ao redor do mundo RIA, actualmente agregamos mais de 2755 entradas vindas de 53 blogs especializados em ria’s, pelo que só fica a ganhar em assinar o feed ou seguir a comunidade no twitter.

Se acha que o seu blog ou um blog de um amigo é interessante e util para os leitores o redeRIA, faça a sua submissão aqui.

Feed: assine já
Twitter: siga-nos

GOOGLE

Votação


Deveria o RedeRia agregar conteúdo em inglês?
Ver Resultados

AUTORES


Eduardo KrausAlexandre TadashiBindableCognitiva SoluçõesDaniel LopesDaniel SchmitzDanielPedrinhaDClick TeamEbercomEdgard DavidsonElvis FernandesErko BrideeFabiel PrestesFábio Batista da SilvaFabio da SilvaFabriccio BernardesFelipe BorellaFlavia MoreiraGabriel VersalliniGabriela T. PerryIgor MusardoJanderson CardosoJoão AugustoJose Carlos FielKelps SousaLeonardo FrançaLucas MarçalLuis MessiasLuiz TarabalMario JuniorMário SantosMauro MartinsPablo SouzaPedro ClaudioreneRia BrazilriaPTRicardo CerqueiraRobson FernandesRodrigo Pereira FragaSaintBrSamuelFacchinelloSergio SouzaSilva DeveloperStefan HorochovecTech CaffeTecinforThiago BuenoVedVinícius SandimWillian ManoXAML Cast

PUBLICIDADE








Powered by Wordpress & msdevstudio.com