66_flash_e_silverlight by Carlos Silva

EDIÇÃO 66 | R$ 14,95

NO LOGVO O

0 0 0 6 6> 9 771807 924004

FLASH E SILVERLIGHT

Explore os recursos das duas ferramentas que dão show nas animações e vídeos na web Efeitos prontos 10 plug-ins para desenvolver mais rápido

Truques Como fazer um site completo, com animações sob medida

Fotos Exiba imagens em 3D e com recursos de superzoom

Games Que tal criar seu próprio jogo? Aprenda como

VÍDEO | ACTIONSCRIPT | CONCORRENTES capa_Dicas66-FlasheSilverlight.indd 3

04.06.09 21:40:07

conteúdo

FLASH E SILVERLIGHT FLASH — PROGRAMA

As novidades do CS4

GRAVAÇÃO

08 16 20 24 26 28

Cena completa Vire um mestre dos textos Capriche na animação Código rápido Toca o som Design com Photoshop

43 45 47

Fotos em 3D O DVD vira animação Aplicativos com Airs

TUTORIAIS

30 36 40

Jogatina com pouco esforço Site completo Mande o vídeo para a web

DOWNLOAD

49 51 55

Os genéricos do Flash Criação automática Mais poder com plug-ins

SILVERLIGHT — PROGRAMAS

57 60

A força do Visual Studio O Dreamweaver da Microsoft

TUTORIAIS

63 67 71 74 76

Primeiros passos Filmes na web Zoom personalizado Fotos no estilo Flash Game sob controle

DOWNLOAD

Recursos extras

NOVIDADES

Foco em multimídia

D I C AS I NFO I

Conteudo2.indd 3

05.06.09 20:39:46

recado da redação

ANIMAÇÃO NA WEB N

esses tempos de web 2.0, Flash e Silverlight dividem a atenção dos internautas e desenvolvedores para a criação de aplicativos poderosos que rodem no browser. Recentemente, a Microsoft anunciou que mais de 200 milhões de pessoas instalaram o plug-in Silverlight em seus browsers. O Flash normalmente é instalado no primeiro acesso a um site que use sua tecnologia, o que abrange quase todos os portais e páginas populares na internet. Com isso, a escolha da ferramenta a ser usada no desenvolvimento de aplicativos para a web depende, basicamente, do estilo de programação de cada um. O Flash, com sua interface consagrada e copiada, é excelente para quem tem veia de designer, buscando foco inicial no visual do programa. Já o Silverlight, com o uso de sua principal ferramenta, o Visual Studio, é perfeito para quem gosta de colocar rapidamente a mão no código e, em particular, para quem já desenvolve em uma das linguagens da .Net Framework, como C# ou Visual Basic. Neste DICAS INFO há opções para desenvolvedores com todos os perfis, desde iniciantes até para quem manja de tudo e quer conhecer novos truques e plug-ins. Escolha sua tecnologia favorita (ou aprenda ambas, o que é ainda melhor) e mãos à obra.

ERIC COSTA EDITOR DA DICAS INFO DICAS INFO Uma publicação mensal da Editora Abril Para contatar a redação: contateinfo@abril.com.br Para assinar a Dicas INFO: (11) 3347-2121 — Grande São Paulo 0800-701-2828 — Demais localidades abril.assinaturas@abril.com.br

I DI C AS I N FO

Recado.indd 4

EQUIPE EDIÇÃO: ERIC COSTA EDITOR DE ARTE: Vinicius Ferreira CAPA: Vinicius Ferreira, Jefferson Barbato COLABORADORES: André Cardozo, Juliano Barreto, Maurício Grego (textos), Ulysses Borges de Lima (revisão)

NOTAS 10,0

IMPECÁVEL

9,0 a 9,9

ÓTIMO

8,0 a 8,9

MUITO BOM

7,0 a 7,9

BOM

6,0 a 6,9

MÉDIO

5,0 a 5,9

REGULAR

4,0 a 4,9

FRACO

3,0 a 3,9

MUITO FRACO

2,0 a 2,9

RUIM

1,0 a 1,9

BOMBA

0,0 a 0,9

LIXO

Veja os critérios de avaliação da INFO em detalhes na web em www.info.abril.com.br/ sobre/infolab.shl. A lista das lojas onde os produtos testados podem ser encontrados está em www.info.abril.com.br/ arquivo/onde.shl.

05.06.09 20:40:16

VICTOR CIVITA (1907-1990) Editor: Roberto Civita Presidente Executivo: Jairo Mendes Leal Conselho Editorial: Roberto Civita (Presidente), Thomaz Souto Corrêa (Vice-Presidente), Giancarlo Civita, Jairo Mendes Leal e José Roberto Guzzo Diretor de Assinaturas: Fernando Costa Diretora de Mídia Digital: Fabiana Zanni Diretor de Planejamento e Controle: Auro Luís de Iasi Diretora-Geral de Publicidade: Thais Chede Soares Diretor-Geral de Publicidade Adjunto: Rogerio Gabriel Comprido Diretor de RH e Administração: Dimas Mietto Diretor de Serviços Editoriais: Alfredo Ogawa Fundador:

Diretor Superintendente: Alexandre Caldini Diretora de Núcleo: Sandra Carvalho

Diretora de Redação: Débora

Fortes

Redator-chefe: Maurício Grego Editor Sênior: Carlos Machado

Editores: Airton Lopes, Juliano Barreto, Kátia Arima, Maria Isabel Moreira, Maurício Moraes e Renata Leal Estagiários: Leonardo Martins e Talita Abrantes Editor de Arte: Jefferson Barbato Designers: Catia Herreiro, Maurício Medeiros e Wagner Rodrigues Colaboradores: Dagomir Marquezi e John C. Dvorak Infolab: Luiz Cruz (consultor de sistemas), Alberto Pereira (estagiários) Gestor de Comunidades: Virgilio Sousa Info Online Editores-assistentes: Daniela Moreira, Fabiano Candido e Felipe Zmoginski Repórteres: Bruno Ferrari, Guilherme Pavarin, Marco Aurélio Zanni, Mariana Amaro e Paula Rotman Webmaster: Renata Verdasca Desenvolvedor Web: Silvio Donegá Webdesigner: Renato Del Rio Produtor Multimidia: Márcio Alexandre Estagiário: Caio Melzer de Oliveira www.info.abril.com.br

SERVIÇOS EDITORIAIS Apoio Editorial: Carlos Grassetti (Arte), Luiz Iria (Infografia) Apoio Técnico e Difusão: Bia Mendes Dedoc e Abril Press: Grace de Souza Treinamento Editorial: Edward Pimenta PUBLICIDADE CENTRALIZADA Diretores: Marcos Peregrina Gomez, Mariane Ortiz, Robson Monte, Sandra Sampaio Executivos de Negócio: Ana Paula Teixeira, Daniela Serafim, Eliane Pinho, Emiliano Hansenn, Karine Thomaz, Luciano Almeida, Marcelo Cavalheiro,

Marcelo Pezzato, Marcio Bezerra, Maria Lucia Strotbek, Pedro Bonaldi, Renata Mioli, Rodrigo Toledo, Selma Costa, Sueli Fender, Susana Vieira PUBLICIDADE RIO DE JANEIRO Diretor de Publicidade Rio de Janeiro: Paulo Renato Simões Gerente: Edson Melo Executivos de Negócios: Ailze Cunha e Leda Costa Diretor de Publicidade Regional: Jacques Baisi Ricardo

PUBLICIDADE NÚCLEO TECNOLOGIA Gerente: Francisco Barbeiro Neto Executivos de Negócio: André Cecci, Andrea Balsi, Débora Manzano, Edvaldo Silva, Fernando Srodrigues, Jorge Hidalgo, Jussara Dimes Costa, Léa Moreira e Thais Alfaya Coordenadora: Christina Pessoa (RJ) PLANEJAMENTO, CONTROLE E OPERAÇÕES Gerente: Victor Zockun Consultor: Silvio Rosa Processos: Clélio Antonio, Valdir Bertholin, Wagner Cardoso MARKETING E CIRCULAÇÃO Gerente de Marketing: Viviane Ribeiro Gerente de Publicaçoes: Ilona Moysés Analista de Marketing: Rafael Abicair Projetos Especiais: Patrícia Steward, Edison Diniz Gerente de Eventos: Shirley Nakasone Coordenadoras de Eventos: Bruna Veratti, Carolina Fioresi e Ligia Cano Gerente de Circulação - Avulsas: Carmen Lúcia de Sá Gerente de Circulação - Assinaturas: Viviane Ahrens ASSINATURAS Operações de Atendimento ao Consumidor: Malvina Galatovic RH Diretora: Claudia Ribeiro Consultora: Marizete Ambran Em São Paulo: Redação e Correspondência: Av. das Nações Unidas, 7221, 17º andar, Pinheiros, São Paulo, SP, CEP 05425-902, tel. (11) 3037-2000 Publicidade São Paulo www.publiabril.com.br Classiﬁcados 0800-701-2066, Grande São Paulo tel. (11) 3037-2700 ESCRITÓRIOS E REPRESENTANTES DE PUBLICIDADE NO BRASIL: Central-SP (11) 3037-6564 Bauru Gnottos Mídia Representações Comerciais, tel. (14) 3227-0378, Belém Midiasolution Belém tel. (91) 3222-2303; Belo Horizonte Escritório tel. (31) 3282-0630; Triângulo Mineiro F&Campos Consultoria e Assessoria Ltda., tel. (16) 3620-2702; Blumenau M. Marchi Representações, tel. (47) 3329-3820; Brasília Escritório tel. (61) 3315-7554; Representante Carvalhaw Marketing Ltda., tel. (61) 3426-7342; Campinas CZ Press Com. e Representações, tel. (19) 3251-2007; Campo Grande Josimar Promoções Artísticas Ltda., tel. (67) 3382-2139; Cuiabá Agronegócios Representações Comerciais, tel. (65) 8403-0616; Curitiba Escritório tel. (41) 3250-8000, Representante Via Mídia Projetos Editoriais Mkt. e Repres. Ltda., tel. (41) 3234-1224; Florianópolis Interação Publicidade Ltda., tel. (48) 3232-1617; Fortaleza Midiasolution Repres. e Negoc., tel. (85) 3264-3939; Goiânia Middle West Representações Ltda., tel. (62) 3215-5158; Manaus Paper Comunicações, tel. (92) 3656-7588: Maringá Atitude de Comunicação e Representação, tel. (44) 3028-6969; Porto Alegre Escritório tel. (51) 3327-2850, Representante Print Sul Veículos de Comunicação Ltda., telefax (51) 3328-1344; Recife MultiRevistas Publicidade Ltda., tel. (81) 3327-1597; Ribeirão Preto Gnottos Mídia Representações Comerciais, tel. (16) 3911-3025; Rio de Janeiro tel. (21) 2546-8282; Salvador AGMN Consultoria Public. e Representação, tel. (71) 3311-4999; Vitória Zambra Marketing Representações, tel. (27) 3315-6952

PUBLICAÇÕES DA EDITORA ABRIL: Almanaque Abril, Ana Maria, Arquitetura e Construção, Atividades, Aventuras na História, Boa Forma, Bons Fluidos, Bravo!, Capricho, Casa Claudia, Claudia, Contigo!, Disney, Elle, Estilo, Exame, Exame PME, Gloss, Guia do Estudante, Guias Quatro Rodas, Info, Info Corporate, Loveteen, Manequim, Manequim Noiva, Men’s Health, Minha Novela, Mundo Estranho, National Geographic, Nova, Placar, Playboy, Quatro Rodas, Recreio, Revista A, Revista da Semana, Runner’s World, Saúde!, Sou Mais Eu!, Superinteressante, Tititi, Veja, Veja Rio, Veja São Paulo, Vejas Regionais, Viagem e Turismo, Vida Simples, Vip, Viva! Mais, Você S/A, Women’s Health Fundação Victor Civita: Nova Escola INTERNATIONAL ADVERTISING SALES REPRESENTATIVES Coordinator for International Advertising: Global Advertising, Inc., 218 Olive Hill Lane, Woodside, California 94062. UNITED STATES: CMP Worldwide Media Networks, 2800 Campus Drive, San Mateo, California 94403, tel. (650) 513-4200, fax (650) 513-4482. EUROPE: HZI International, Africa House, 64-78 Kingsway, London WC2B 6AH, tel. (20) 7242-6346, fax (20) 7404-4376. JAPAN: IMI Corporation, Matsuoka Bldg. 303, 18-25, Naka 1- chome, Kunitachi, Tokyo 186-0004, tel. (03) 3225-6866, fax (03) 3225-6877. TAIWAN: Lewis Int’l Media Services Co. Ltd., Floor 11-14 no 46, Sec 2, Tun Hua South Road, Taipei, tel. (02) 707-5519, fax (02) 709-8348 DICAS INFO FLASH E SILVERLIGHT, edição 66, (ISSN 18079245) é uma publicação da Editora Abril S.A. Distribuída em todo o país pela Dinap S.A.

Distribuidora Nacional de Publicações, São Paulo IMPRESSA NA DIVISÃO GRÁFICA DA EDITORA ABRIL S.A.

Av. Otaviano Alves de Lima, 4400, Freguesia do Ó, CEP 02909-900, São Paulo, SP

Roberto Civita Presidente Executivo: Giancarlo Civita Arnaldo Tibyriçá, Douglas Duran, Marcio Ogliara e Sidnei Basile

Presidente do Conselho de Administração: Vice-Presidentes:

www.abril.com.br

Expediente-66.indd 5

05.06.09 20:40:42

programas I flash CS4

AS NOVIDADES DO CS4

O Flash volta a suas raízes na última versão, caprichando na animação POR ANDRÉ CARDOZO

LINHA DO TEMPO Além de cortar etapas na criação de animações, o novo método Motion Tween concentra as atenções do usuário na área de desenho, deixando a Linha do Tempo um pouco de lado. A linha tradicionalmente ocupava a parte superior da tela, mas no Flash CS4 ela foi deslocada para a parte inferior, que agora fica do lado direito. Evidentemente, quem não gostar da nova distribuição pode deixar a área de trabalho com a cara antiga, movendo os painéis.

FERRAMENTAS

criação de animações, quem diria, voltou a ser o centro das atenções no Flash. O programa, que começou exclusivamente com essa função, aos poucos foi ganhando terreno em outras áreas, como plataforma para distribuição de vídeos e criação de aplicativos web. Na versão CS4, o Flash volta às origens. A maior parte dos novos recursos está na área de animação, incluindo um

método mais fácil de criação de animações e um painel para controlá-las melhor. Devido ao upgrade significativo nos recursos de animação, a versão CS4 é um bom ponto de partida para quem quer conhecer o Flash e trabalhar nessa área. Para quem trabalha com programação, não mudou muita coisa. A única novidade relevante é o suporte para criação de aplicativos com a plataforma AIR.

Cinco novas ferramentas ajudam o usuário na criação de animações. A ferramenta Bone facilita a criação de animações que necessitem da técnica conhecida como Inverse Kinematics (IK), usada em animações em que um movimento influencia outros. Sua principal utilidade é reproduzir movimentos do corpo humano. Nos testes da INFO, a Bone se revelou uma ferramenta eficiente, mas complicada de usar. São necessários muitos cliques e atenção redobrada ao conectar as formas para que se obtenha o resultado desejado. A ferramenta Spray Brush permite pintar a área de desenho com um símbolo ou movie clip criado pelo usuário. Já a ferramenta Deco trabalha de forma similar, mas a pintura é feita automaticamente, seguindo algumas configurações prontas. Completando o time, vêm a 3D Rotation e a 3D Translation. Ambas servem para incorporar efeitos 3D a objetos bidimensionais. Os efeitos podem ser aplicados a movie clips e também a textos.

ANIMAÇÕES

I DI C AS IN FO

FlashCS4-Mat04.indd 6-7

Adobe

O QUE É

Aplicativo para criação de animações e interfaces para web

PRÓ

Movimentos predefinidos e novas ferramentas tornam mais rápida a criação de animações complexas

CONTRA

A ferramenta Bone, usada para animar objetos mecanicamente acoplados, é pouco intuitiva

ANIMAÇÃO

9,0 Traz 16 animações prontas para uso

PROGRAMAÇÃO

8,0 Cria aplicativos para desktop por meio do ambiente de execução Adobe AIR

INTERFACE

9,0 A nova distribuição dos painéis facilita as tarefas mais comuns

MOTION EDITOR Desde as primeiras versões do aplicativo, as interpolações (tweens) sempre foram aplicadas aos keyframes na Linha do Tempo. Esse método exigia muitos cliques mesmo para criar animações básicas. No Flash CS4, esse processo é bem mais simples. Basta, por exemplo, desenhar um objeto, clicar com o botão direito sobre ele e selecionar a opção de adicionar tween. O programa se encarrega de converter o objeto para símbolo e criar os frames necessários para a animação. Outra novidade importante na área de animação é o painel Motion Presets. Ele traz 16 animações prontas para uso, que são aplicadas a objetos no Palco. Entre essas animações estão o quique de uma bola e animações que partem das bordas para o centro da tela.

FLASH CS4 FABRICANTE

O painel Motion Editor é útil para quem usa o Flash para criar animações. Ele tem uma linha do tempo própria, que funciona como um raio X de todas as animações do arquivo. Ela mostra as coordenadas X e Y do objeto em cada frame. Outros itens do painel são mudanças no ângulo de rotação e tamanho e efeitos especiais aplicados ao objeto. Com todas essas informações na mão, fica fácil saber com precisão as características do objeto em cada frame.

PREÇO (R$) ONDE ENCONTRAR

AVALIAÇÃO TÉCNICA(1) CUSTO/BENEFÍCIO

2 352 www.info.abril.com.br/ download/5351.shtml

8,8 6,4

(1) MÉDIA PONDERADA CONSIDERANDO OS SEGUINTES E RESPECTIVOS PESOS: ANIMAÇÃO (40%), PROGRAMAÇÃO (40%) E INTERFACE (20%). O FLASH CS4 GANHOU 0,2 PONTO NA MÉDIA DEVIDO AO BOM DESEMPENHO DA ADOBE NA PESQUISA INFO DE MARCAS 2008

DIC A S INFO I

05.06.09 22:33:41

programas I flash CS4

AS NOVIDADES DO CS4

O Flash volta a suas raízes na última versão, caprichando na animação POR ANDRÉ CARDOZO

FERRAMENTAS

ANIMAÇÕES

I DI C AS IN FO

FlashCS4-Mat04.indd 6-7

Adobe

O QUE É

Aplicativo para criação de animações e interfaces para web

PRÓ

Movimentos predefinidos e novas ferramentas tornam mais rápida a criação de animações complexas

CONTRA

A ferramenta Bone, usada para animar objetos mecanicamente acoplados, é pouco intuitiva

ANIMAÇÃO

9,0 Traz 16 animações prontas para uso

PROGRAMAÇÃO

8,0 Cria aplicativos para desktop por meio do ambiente de execução Adobe AIR

INTERFACE

9,0 A nova distribuição dos painéis facilita as tarefas mais comuns

FLASH CS4 FABRICANTE

PREÇO (R$) ONDE ENCONTRAR

AVALIAÇÃO TÉCNICA(1) CUSTO/BENEFÍCIO

2 352 www.info.abril.com.br/ download/5351.shtml

8,8 6,4

DIC A S INFO I

05.06.09 22:33:41

dicas I ilustração e animação

TRAÇOS 2 PRIMEIROS Para começar a desenhar a cena, vamos criar um planeta. Para isso, clique e segure o botão do mouse na ferramenta Rectangle Tool (com desenho de retângulo). Selecione, então, Oval Tool. Com a ferramenta selecionada, mantenha a tecla Shift pressionada, clique e arraste o mouse na área de desenho para criar um círculo. Para pintar o círculo, clique no quadro com cor sob o ícone de balde. Na janela que aparece, escolha a tonalidade que mostra um degradê radial, em sua parte inferior. Ao clicar na tonalidade, ela é automaticamente aplicada ao círculo. Para mudar a cor do degradê, acesse Window > Color. Clique na seta preta e escolha a cor laranja. Depois, clique na barra para adicionar um terceiro tom intermediário. Clique na nova seta e escolha a cor vermelha. Se precisar, ajuste as setas para obter um efeito de cor mais bonito.

EFEITOS NO PLANETA 3

CENA COMPLETA Aprenda as principais técnicas de desenho e animação com um tutorial completo POR ANDRÉ CARDOZO E ERIC COSTA

melhor forma de aprender os conceitos básicos de camadas, frames, tweens e outros recursos do Flash é colocar a mão na massa. Para isso, vamos fazer um desenho com vários elementos e animações, que exploram as principais técnicas de criação no Flash. Pronto? Então, mãos à obra.

TAMANHO DO DESENHO 1

Comece rodando o Flash e escolhendo Flash File (ActionScript 3.0). Depois, ao lado direito da tela, clique no botão Edit na seção Properties. Na janela que surge, altere as dimensões da área de desenho para 800 x 600, além de mudar o valor em Frame Rate para 30. Clique em OK para continuar.

I DI C AS IN FO

IlustracaoAnimacao-Mat05.indd 8-9

Para adicionar efeitos ao nosso círculo, vamos usar uma nova camada. Para isso, clique no botão New Layer, na parte inferior da janela do Flash. Se quiser, mude o nome da nova camada, clicando nesse texto duas vezes com o mouse. Clique no quadrado abaixo do ícone de caneta (Stroke Color) e escolha a opção com um traço diagonal vermelho (para desenho sem borda). Depois, clique na ferramenta Brush. Altere o tamanho do pincel e tipo de traçado com os botões que aparecem ao final da barra do Flash. Depois, trace algumas manchas fechadas sobre o planeta. Escolha a ferramenta Paint Bucket Tool e clique em cada mancha, de forma que elas fiquem preenchidas. Se quiser, clique em cada mancha, abra as opções de cores e mexa nos valores em Alpha, para deixar as manchas transparentes e mais realistas.

DETALHES 4 MAIS Vamos agora desenhar anéis em nosso planeta. Para isso, clique no ícone de cadeado nas camadas já existentes e crie outra, clicando no botão New Layer. Usando a ferramenta Oval Tool (mas sem pressionar Shift), desenhe uma oval sobre o planeta. Clique no contorno da oval e tecle Delete, para apagá-lo. Agora, clique na oval e tecle Ctrl+D, para criar uma duplicata desse objeto. Mova a duplicata para o alto da área de desenho. Clique no botão Free Transform Tool e, mantendo Shift pressionado, arraste o mouse para diminuir o tamanho da oval, mantendo suas proporções. Arraste a oval menor sobre a maior. Depois, tecle Delete para apagar a menor e, com ela, parte do miolo da maior.

DIC A S INFO I

05.06.09 20:55:34

dicas I ilustração e animação

EFEITOS NO PLANETA 3

CENA COMPLETA Aprenda as principais técnicas de desenho e animação com um tutorial completo POR ANDRÉ CARDOZO E ERIC COSTA

TAMANHO DO DESENHO 1

I DI C AS IN FO

IlustracaoAnimacao-Mat05.indd 8-9

DIC A S INFO I

05.06.09 20:55:34

HORA DO GIRO 5

Selecione novamente a ferramenta Free Transform Tool, clique na oval e, depois, em um dos vértices do retângulo de seleção. Arraste o mouse para rotacionar a oval. Depois, clique no botão Eraser Tool e apague as partes da oval que ficam atrás do planeta. Tecle, então, Ctrl+D para duplicar o anel. Mova a nova cópia um pouco acima da original.

JUNTANDO TUDO 6 Para facilitar a manipulação do planeta e seus anéis como um só elemento, vamos agrupar tudo. Para isso, destrave as camadas, clicando nos ícones de cadeado de cada uma delas, selecione todos os elementos do desenho e acesse Modify > Group. Dessa forma, o planeta é movido de forma única, sem correr o risco de desarranjar o desenho. Com isso, selecione a ferramenta Free Transform Tool e diminua o planeta.

LOGOTIPO 7

Crie uma nova camada, clicando em New Layer, para receber o logotipo do desenho. Selecione a ferramenta Text Tool e tecle o texto Space Monsters. Depois, no lado direito da janela do Flash, mude a fonte da letra para Arial, na seção Family, e escolha Black, em Style. Selecione o texto Space e mude o valor em Size, para que essa palavra fique em tamanho maior. Depois, mude o segundo campo em Spacing, na seção Paragraph, de forma que as palavras fiquem mais grudadas.

10 I DI C AS I N FO

IlustracaoAnimacao-Mat05.indd 10

05.06.09 20:56:03

NO TEXTO 8 EFEITOS Para aplicar efeitos, é preciso transformar o texto em formas editáveis. Selecione o texto Space e acesse Modify > Break Apart duas vezes. Com isso, todas as letras foram convertidas em formas. Acione Modify > Transform > Distort. Clique nas alças ao redor do texto para distorcê-lo, criando um efeito tridimensional. Aproveite para selecionar cada letra e convertê-la em um grupo, acionando Ctrl+G após cada seleção.

DUPLICAÇÃO DAS LETRAS 9 Para melhorar ainda mais o visual do logotipo, selecione todas as letras do texto Space e tecle Ctrl+D duas vezes para triplicar o título. Posicione o título original e suas duplicatas com um leve deslocamento entre si, de forma a criar um efeito de profundidade. Agora, selecione cada letra do fundo e clique no ícone de balde, mudando sua cor para vermelho. Repita o processo com a primeira e segunda camadas, trocando a cor usada. Se preferir, use um degradê para a primeira camada, escolhendo tons no painel de cores. Se quiser, use a mesma técnica na palavra Monsters.

TELA DE FUNDO 10 Para completar a ilustração, precisamos criar uma camada de fundo. Crie uma nova camada, clicando em New Layer. Depois, clique na nova camada e use a ferramenta Rectangle Tool para desenhar um retângulo azul. Escolha um degradê radial, com tons de azul. Na seção Properties, mude os valores em W e H para 800 e 600, respectivamente. Então, acesse Window > Align. Depois, clique o botão To Stage e o quinto botão na seção Align (Align Vertical Center), para que o retângulo ocupe toda a área de desenho.

D I C AS I NFO I 11

IlustracaoAnimacao-Mat05.indd 11

05.06.09 20:56:18

ESTRELAS 11

O fundo da ilustração pode contar com estrelas. Para isso, crie um círculo e escolha o gradiente radial para seu preenchimento. Acesse Window > Color e escolha as duas cores do gradiente como branco. Na segunda cor do degradê, escolha o valor 0 (zero) na opção Alpha. Feche a janela de cores e acesse Modify > Convert to Symbol. Na janela que aparece, escolha Graphic na seção Type. Agora, a estrela virou um símbolo a ser usado nos desenhos. Então, acesse a guia Library, no lado direito da tela, e clique duas vezes no símbolo criado, para que uma cópia seja adicionada. Crie várias estrelas no desenho.

ORGANIZAÇÃO 15

Nosso projeto já está com muitas camadas. Vale a pena organizar os elementos da animação em pastas. Para isso, clique no botão New Folder, ao lado direito do botão New Layer. Crie uma pasta para as letras da palavra Space, além de outra para os elementos do planeta.

PREPARE A ANIMAÇÃO 12 Para facilitar a criação de animações com as letras da ilustração, vamos agrupar cada letra separadamente. Para isso, selecione as três camadas de cada letra da palavra Space e acesse Modify > Convert to Symbol. Escolha a opção Graphic em Type e dê um nome descritivo ao novo símbolo. Repita o processo para o restante das letras.

MOVIMENTO FÁCIL 16 Para animar as letras da palavra Space, clique no ponto 1 da linha do tempo das letras, clique na seleção com o botão direito do mouse e escolha Create Motion Tween. Note que o Flash gera automaticamente 30 frames para serem usados na animação. Clique, nas outras camadas, no ponto 31 e tecle F6, para incluir novos frames.

CRIAÇÃO DA LUA 13 Com o planeta pronto, podemos usá-lo como modelo para criar uma lua. Clique nas camadas relativas ao planeta e sua atmosfera. Selecione todo o conteúdo e acesse Modify > Convert to Symbol. Quando for preciso criar um planeta, basta clicar no nome do novo símbolo para criar um novo planeta.

DE TRÁS PARA FRENTE 17

CAMADAS PARA AS LETRAS 14

Para facilitar a criação de uma animação para as letras na palavra Space, vamos criar uma camada para cada letra. Para isso, selecione a letra S e tecle Ctrl+X, removendo esse elemento de sua camada original. Depois, clique no botão New Layer, no canto inferior esquerdo da janela do Flash, e cole a letra S (teclando Ctrl+V) na nova camada. Se quiser, clique duas vezes no nome da nova camada para dar um nome descritivo a ela. Repita o processo com as outras letras.

12 I DI C AS IN FO

IlustracaoAnimacao-Mat05.indd 12-13

Clique no ponto 30 da camada da letra S. Arraste, então, essa letra para fora da área de animação. Repita o processo, clicando nas camadas respectivas, para cada letra. A animação está pronta, mas invertida, já que queremos que as letras entrem em vez de sair. Para inverter a animação, clique com o botão direito do mouse em cada camada de letra e escolha a opção Reverse Keyframes. Se quiser testar a animação, acesse Control > Test Movie.

DIC A S INFO I 13

05.06.09 20:56:59

ESTRELAS 11

ORGANIZAÇÃO 15

DE TRÁS PARA FRENTE 17

CAMADAS PARA AS LETRAS 14

12 I DI C AS IN FO

IlustracaoAnimacao-Mat05.indd 12-13

DIC A S INFO I 13

05.06.09 20:56:59

ANIMAÇÃO DA LUA 18

Vamos agora animar uma lua ao redor do planeta. Clique em New Layer para criar uma camada só para a lua. Tecle F6 no ponto 30 dessa camada para criar um Novo keyframe. Depois, clique duas vezes no símbolo de planeta que criamos, na seção Library. Modifique as cores para que ele fique cinza ou azul, além de mudar o tamanho dele, de forma que fique pequeno em relação ao planeta principal. Posicione a lua próxima ao planeta, seguindo os anéis. Clique com o botão direito no ponto 30 e escolha Create Motion Tween. Agora, nas outras camadas, clique no ponto 60 e tecle F5, para criar frames para esses itens.

DO 21 SUMIÇO PLANETA Ainda na guia Motion Editor, clique no último frame e abra as opções em Color Effect. Escolha, em Alpha > Alpha Amount, o valor 0%. Dessa forma, a lua sumirá ao final da animação.

EFEITO 3D 22

CIRCULAR 19 MOVIMENTO Para criar o movimento elíptico da lua, clique no ponto 45 da camada dela e arraste a lua para o ponto final da animação, ou seja, do outro lado do planeta. O Flash cria uma linha reta entre os dois pontos. Selecione cada seção dessa linha e arraste-a, de forma que o movimento fique ao redor do planeta.

EFEITO DE PROFUNDIDADE 20 Agora, vamos adicionar um efeito de profundidade à lua. Para isso, clique na camada da lua e acesse a guia Motion Editor. Escolha um frame no qual a lua esteja na frente dos anéis e, então, use os controles Scale X e Scale Y para aumentar a lua, o que dá o efeito de aumento de tamanho pela proximidade. No frame final da animação, retorne os valores de Scale X e Scale Y aos iniciais. Assim, a lua começa pequena, aumenta de tamanho ao “aproximar-se” do observador e, depois, diminui de tamanho.

14 I DI C AS IN FO

IlustracaoAnimacao-Mat05.indd 14-15

Para animar a palavra Monsters, vamos usar os efeitos 3D do Flash. Para isso, selecione a palavra e tecle F8. Em Type, escolha a opção Movie Clip. Clique com o botão direito no primeiro ponto da linha do tempo da camada da palavra Monsters e escolha Create Motion Tween. Depois, tecle G para selecionar a ferramenta 3D Translation Tool. Clique no último ponto da linha do tempo na mesma camada e arraste a palavra Monsters para fora da tela. Clique com o botão direito do mouse em algum dos frames intermediários e escolha Reverse Keyframes.

LOOP 23 SEM Para completar nossa animação, não queremos que ela fique se repetindo sem parar. Para evitar isso, clique no último ponto da linha do tempo e tecle F9. Na janela que aparece, tecle o comando abaixo:

stop(); Esse é um comando simples em Actionscript que para a animação no ponto indicado.

DIC A S INFO I 15

05.06.09 20:57:15

ANIMAÇÃO DA LUA 18

EFEITO 3D 22

14 I DI C AS IN FO

IlustracaoAnimacao-Mat05.indd 14-15

stop(); Esse é um comando simples em Actionscript que para a animação no ponto indicado.

DIC A S INFO I 15

05.06.09 20:57:15

dicas I texto

VIRE UM MESTRE DOS TEXTOS N Dicas para caprichar no visual e na animação de letras POR ERIC COSTA

ão dá para montar uma animação, aplicativo ou game em Flash com textos que mais parecem vindos de relatórios de vendas. É possível mexer nos visual das letras com vários efeitos do Flash, além de criar animações que combinem com o estilo do aplicativo ou game. Confira, a seguir, algumas dicas para incrementar o visual dos textos no Flash.

AJUSTE NO FOCO ZOOM RÁPIDO Um efeito simples e rápido de ser feito em textos é o zoom. Comece teclando o texto, em um tamanho bem pequeno (como 12), deixando-o no centro da área de animação. Depois, clique no ponto 2 da linha do tempo. Tecle F6 para criar um keyframe e selecione o texto. Mude o tamanho para um ponto maior que o original. Clique no ponto 3 da linha do tempo e repita a operação, aumentando o tamanho ainda mais. Basta ir criando keyframes até chegar ao tamanho desejado do texto. A dica é uma forma prática de criar animação com texto sem precisar recorrer a tweens.

O filtro Blur pode ser usado de forma dinâmica, para criar uma animação rápida para textos e outros elementos. Para isso, crie o texto e converta-o para um símbolo, teclando F8. Escolha, em Type, a opção Movie Clip. Clique no objeto e, na parte inferior da seção Properties, pressione o botão Add Filter. Escolha a opção Blur. Na área de configuração do filtro, clique no ícone de corrente ao lado de Blur X, para destravar a paridade entre o valor dele e o de Blur Y. Use os valores 20 para Blur X e 0 para Blur Y. Mexa nos valores em Quality, de forma que o efeito fique no estilo desejado. Clique, então, no ponto 20 da linha do tempo com o botão direito do mouse e escolha Insert Keyframe. Agora, volte aos ajustes do filtro Blur e mude o valor de Blur X para 0. Clique com o botão direito do mouse no ponto 1 e escolha Create Classic Tween. Clique novamente no ponto 20 e tecle F9. Na janela que aparece, tecle o texto abaixo:

stop(); Feche a janela e pronto. Para testar o efeito, tecle Ctrl+Enter.

DESAPAREÇA COM O TEXTO Um efeito bacana para textos é fazer as letras sumirem em uma animação. Para fazer isso, comece teclando o texto. Com ele selecionado, tecle F8 e escolha, em Type, a opção Movie Clip. Clique no ponto 60 na linha do tempo e pressione F6 para criar um novo keyframe. Clique com o botão direito em qualquer local entre o começo e o ponto 60 e escolha Create Motion Tween. Clique no ponto 15 e tecle F6, repetindo a operação no ponto 30. Selecione o texto e clique no botão Add Filter. Escolha a opção Blur e use 95 para os valores de Blur X e Blur Y. Clique no ponto 40, tecle F6 e reduza horizontalmente o tamanho do texto, de forma que ele fique quase imperceptível. Clique no ponto 45, tecle F6 e mova um pouco o texto para cima. Abra as opções em Color Effect e escolha a opção Alpha, em Style. Use o valor 0% em Alpha. O efeito está pronto.

TRANSFORMAÇÃO NA FONTE Para evitar uma viagem ao Photoshop, um efeito simples para dar destaque ao texto é criar uma borda ofuscada para ele. Para isso, tecle o texto, selecione-o e pressione F8. Na janela que aparece, dê um nome ao texto e escolha, em Type, a opção Movie Clip. Depois, na parte inferior da seção Properties, clique no botão Add Filter. Escolha a opção Glow. Em Strength, use o valor 1 000. Mantenha Blur X e Blur Y com o valor 10. Mude a opção, em Quality, para High. Por fim, marque o item Knockout. O efeito pode ser personalizado, mexendo nos valores de Blur X e Y.

16 I DI C AS IN FO

mestredosTextos-Mat06.indd 16-17

BRILHO COM MÁSCARA Esse efeito simula um brilho com animação em um texto. Primeiro, acesse Insert > Timeline > Layer para criar uma nova camada para nossa animação. Depois, tecle o texto, preferencialmente com uma fonte mais forte, ou usando negrito. Crie um retângulo um pouco maior do que o texto e da mesma cor dele, movendo-o para fora da área de animação, em seu lado esquerdo. Selecione o retângulo e acesse Window > Color para mostrar as opções de degradê. Selecione Linear, em Type, e use os controles na parte inferior à janela de forma que uma pequena faixa de cor diferente fique visível no meio do retângulo. Feche a janela de cor e tecle F, girando o efeito de gradiente, de forma que ele fique um pouco inclinado. Clique no ponto 20 da linha do tempo da primeira camada e tecle F6, para criar um novo keyframe. Agora, clique no ponto 1 da segunda camada e mova o retângulo, de modo que a faixa de cor diferente fique um pouco à esquerda do texto. Clique no ponto 15 da segunda camada, tecle F6 e mova o retângulo, de forma que a faixa de cor diferente fique logo após o texto. Clique com o botão direito do mouse na primeira camada e escolha a opção Mask. Teste o efeito teclando Ctrl+Enter.

DIC A S INFO I 17

05.06.09 20:58:28

dicas I texto

VIRE UM MESTRE DOS TEXTOS N Dicas para caprichar no visual e na animação de letras POR ERIC COSTA

stop(); Feche a janela e pronto. Para testar o efeito, tecle Ctrl+Enter.

16 I DI C AS IN FO

mestredosTextos-Mat06.indd 16-17

DIC A S INFO I 17

05.06.09 20:58:28

FAÇA UM CARIMBO Uma boa forma de destacar um texto repetido em uma animação ou site é transformá-lo em um carimbo. Para isso, vamos começar teclando o texto em uma fonte chamativa, como a Impact, além de usar a cor vermelha. Depois, clique na ferramenta Rectangle Tool e, na seção Rectangle Options, use o valor 15 para os quatro cantos. Assim, os cantos do retângulo ficarão arredondados. Se preferir, mude os valores em Stroke para que o retângulo fique mais espesso. Segure a tecla Shift e selecione todos os elementos do retângulo. Acesse Modify > Shape > Convert Line to Fills. Agora, selecione o texto e tecle Ctrl+B duas vezes. Selecione então a Eraser Tool e apague traços ao longo do retângulo e das letras, dando um efeito de falhas no carimbo. Para completar, tecle S para escolher a ferramenta Ink Bottle. Escolha, em Style, a opção Stippled. Clique em cada pedaço da imagem para dar o efeito final ao carimbo. Se quiser, teste os valores em Stroke para que o efeito fique mais convincente.

EFEITO CROMADO Um efeito bacana para títulos e elementos de destaque em uma animação ou aplicativo em Flash é usar letras cromadas. Para criar esse efeito, comece digitando o texto desejado. Use a cor #3399FF nas letras, ou outra de sua preferência. Depois de teclar o texto, selecione-o, clique nele com o botão direito do mouse e escolha Break Apart, repetindo esta operação. Clique em outra área para perder a seleção das letras e depois escolha a ferramenta Ink Bottle, clicando e segurando em Paint Bucket. Na seção FillS and Stroke, mude a cor para preto e escolha Solid em Style. Em Stroke, use o valor 4.00. Clique, então, em cada letra para criar um contorno. Escolha a ferramenta de seleção e, depois, segurando o botão Shift, clique em cada parte azul de cada letra. Depois, tecle F8 e escolha, em Type, a opção Graphic, pressionando OK em seguida. Pressione Delete no teclado. Tecle Ctrl+A, depois K e, em seguida, Shift+F9. Em Type, escolha Linear. Feche a janela e tecle F, clicando nas letras em seguida. No canto superior direito, use o ícone de círculo para girar o degradê das letras, de forma que ele fique horizontal. Tecle Ctrl+A de novo e acesse Modify > Shape > Convert Lines to Fills. Tecle Ctrl+A, depois F8 e dê o nome de borda ao objeto. Tecle Ctrl+L e localize o item Symbol 1, clicando duas vezes nele. Clique na barra de cores três vezes para ficar com cinco tons. Use os seguintes valores: #CCCCCC, #FFFFFF, #999999, #CCCCCC, #FFFFFF. Tecle novamente Ctrl+A e gire o degradê para que ele fique horizontal.

18 I DI DIC C AS I NFO N FO

mestredosTextos-Mat06.indd 18

05.06.09 20:58:48

dicas I animação

CAPRICHE NA ANIMAÇÃO Seis dicas para agilizar criação de movimentos e transformações no Flash POR ERIC COSTA

nimação é o básico do Flash e dominar os recursos de tweening do programa torna-se essencial para quem quer explorar o programa ao

máximo. Mas, para quem quer um efeito rápido, há várias opções rápidas que dão um resultado bonito. Confira, a seguir, seis dicas de efeitos práticas no Flash CS4.

FUMAÇA COM TWEEN Fazer um efeito de fumaça ou vapor no Flash é fácil, usando o Motion Tween e o filtro Blur. Para isso, comece selecionando a ferramenta Brush Tool (dependendo do tamanho da imagem, pode ser mais interessante usar círculos, com a ferramenta Oval Tool). Escolha a cor branca na seção Fill and Stroke. Crie vários pontos (ou círculos) na região onde aparecerá a fumaça. Depois, selecione todos os pontos criados e tecle F8. Escolha a opção Movie Clip, em Type. Clique duas vezes na seleção e, na seção Filters, clique em Add Filter e escolha Blur. Ajuste os valores em Blur X e Blur Y, de forma a obter um efeito bacana. Clique nos pontos 25 e 50 da linha do tempo e tecle F6 em cada um, para criar novos keyframes. No ponto 50, escolha o elemento da fumaça e selecione Alpha, no controle Style. Use o valor 0% para Alpha. Clique em um ponto entre 25 e 50 com o botão direito do mouse e escolha a opção Create Motion Tween.

BOTÃO ANIMADO Para controlar as animações pode ser interessante criar um botão, que pode conter uma animação. Fazer isso é bem simples. Qualquer elemento visual pode ser um botão, mas o mais normal é um retângulo. Crie esse elemento e, com ele selecionado, tecle F8. Clique duas vezes no retângulo. Note que, na linha do tempo, há quatro opções: Up, Over, Down e Hit. Elas correspondem ao que pode ser feito com o botão. Vamos usar a opção Over, que é acionada quando se passa o mouse sobre o botão. Clique no espaço abaixo de Over e tecle F6, para criar um keyframe. Agora, clique com o botão direito do mouse no retângulo e escolha Convert to Symbol. Escolha, em Type, a opção Movie Clip. Clique duas vezes no retângulo e crie a animação que desejar.

BATE CORAÇÃO RAPIDEZ NO FOCO Um truque rápido de animação é aproveitar os efeitos prontos do Flash. Um deles é o Blur, que mexe com o foco em textos e imagens. Comece acessando File > Import > Import to Stage. Escolha a imagem que será adicionada e que fará parte da animação. Com ela selecionada, tecle F8 e, na janela que aparece, escolha Movie Clip na seção Type. Clique nos pontos 15, 60 e 70 da linha do tempo, teclando F6 em cada um deles, o que cria um novo keyframe. No ponto 75, tecle Q para escolher a ferramenta Free Transform. Com a tecla Shift pressionada, arraste uma das pontas na imagem para aumentá-la de tamanho. Tecle V para voltar à ferramenta de seleção e, na seção Filters, clique em Add Filter e escolha Blur. Use, em Blur X e Blur Y, os valores 83. Agora, clique no ponto 1 da linha do tempo e repita a criação do filtro Blur. Para completar o efeito, clique na área entre os pontos 1 e 15 com o botão direito do mouse e escolha Create Motion Tween, fazendo o mesmo na seção entre os pontos 60 e 75.

20 I DI C AS IN FO

Animacao-Mat07.indd 20-21

Uma animação prática e que pode ser reutilizada em vários contextos é a simulação de batimentos cardíacos em um cardiograma. Comece criando um novo arquivo Flash e mudando seu tamanho para 200 x 100 pixels. Use preto como cor de fundo e FPS igual a 12. Escolha, então, a ferramenta Line Tool e, usando a cor verde (selecionada na seção Fill and Stroke), faça um traço de batimento cardíaco. Clique no botão New Layer e, depois, no ícone de cadeado na primeira camada, para travá-la. Desenhe, então, um retângulo preto que cubra toda a área de animação. Tecle F8 e, em Type, escolha a opção Movie Clip. Clique nos pontos 40, 41 e 80 da linha do tempo e, em cada uma, tecle F6. Clique na primeira camada, no ponto 80 e tecle F6. Clique no ponto 40 da segunda camada e mova o retângulo para o lado direito do desenho (fora da área de animação). Clique no ponto 41 e, agora, mova o retângulo para o lado esquerdo. Clique com o botão direito do mouse no intervalo entre 1 e 40 e escolha Create Motion Tween. Faça o mesmo com o intervalo entre 41 e 80.

DIC A S INFO I 21

05.06.09 20:59:48

dicas I animação

CAPRICHE NA ANIMAÇÃO Seis dicas para agilizar criação de movimentos e transformações no Flash POR ERIC COSTA

nimação é o básico do Flash e dominar os recursos de tweening do programa torna-se essencial para quem quer explorar o programa ao

máximo. Mas, para quem quer um efeito rápido, há várias opções rápidas que dão um resultado bonito. Confira, a seguir, seis dicas de efeitos práticas no Flash CS4.

20 I DI C AS IN FO

Animacao-Mat07.indd 20-21

DIC A S INFO I 21

05.06.09 20:59:48

SHOW DE SLIDES SIMPLES Uma forma rápida de fazer um show de slides com fotos é usar o recurso Shape Tween do Flash. Crie um novo arquivo do Flash e modifique suas dimensões, em Properties, para o maior tamanho horizontal e vertical entre as fotos. Modifique o valor em FPS para 32. Acesse, então, File > Import > Import to Library. Localize e escolha todas as imagens. Agora, acesse a guia Library e arraste a primeira foto para a área de animação. Tecle Ctrl+K e marque a opção To Stage. Clique nos botões Align Horizontal Center e Align Vertical Center. Com a imagem selecionada, tecle Ctrl+B. Clique no ponto 25 da linha do tempo e tecle F6. Depois, clique no ponto 40 e tecle F7. Note que a imagem some. Ainda no ponto 40, mova a segunda imagem para a área de animação. Repita o procedimento de alinhar a imagem, tecle Ctrl+B e clique em um ponto entre 25 e 40 com o botão direito do mouse e escolha Create Shape Tween. Se você clicar nos pontos entre 25 e 40, perceberá o aumento da primeira imagem para ficar do mesmo tamanho da segunda. Para as outras imagens, basta repetir o procedimento, mantendo a mesma distância na linha do tempo.

CORES ANIMADAS Para dar destaque a uma foto, uma animação interessante é adicionar cores, de forma animada. Isso é feito de maneira simples com o recurso Shape Tween. Para isso, vamos precisar do arquivo de uma foto original e uma cópia dela em preto-e-branco. Crie um novo arquivo do Flash e modifique as dimensões para o tamanho da foto. Mude o valor em FPS para 28. Acesse, então, File > Import > Import to Library. Selecione as duas fotos. Acesse a guia Library e arraste a foto em preto-e-branco para a área de animação. Tecle Ctrl+K e marque a opção To Stage. Clique nos botões Align Horizontal Center e Align Vertical Center. Clique no ponto 35 da linha do tempo e tecle F5. Depois, pressione o botão New Layer. Clique no ponto 10 da nova camada e pressione F6 para criar um novo keyframe. Ainda no ponto 10, arraste a imagem colorida para a área de animação e faça os ajustes de alinhamento teclando Ctrl+K. Tecle, então, F8 e selecione Movie Clip na seção Type. Clique no ponto 35 e tecle F6. Clique no ponto 10 da segunda camada e selecione a imagem. Clique no botão Add Filter e escolha Adjust Color. Use os valores 80, 100, 0 e 0 para Brightness, Contrast, Saturation e Hue, respectivamente. Clique com o botão direito do mouse entre os pontos 10 e 35 e escolha Create Motion Tween. Clique novamente em New Layer. Clique no ponto 10 da nova camada e tecle F6. Crie um pequeno retângulo no centro do palco. Depois, na terceira camada, clique no ponto 35 e pressione F6. Tecle Q e aumente o tamanho do retângulo para ocupar toda a área do palco. Clique, na terceira camada, entre os pontos 10 e 35 com o botão direito do mouse e escolha Create Shape Tween. Por fim, clique com o botão direito no nome da terceira camada e escolha Mask.

22 I DI DIC C AS I NFO N FO

Animacao-Mat07.indd 22

05.06.09 20:59:20

dicas I actionscript

CÓDIGO RÁPIDO O

Actionscript evoluiu, com as novas versões do Flash, transformando-se numa linguagem poderosa de programação capaz de gerar jogos e aplicativos complexos. Mas ela também pode ser usada de forma prá-

Use o Actionscript de forma prática com esses truques POR ERIC COSTA

tica para incrementar animações e facilitar a interação com o usuário, sem precisar de dezenas de linhas de código. Confira, a seguir, algumas dicas rápidas para melhorar sua animação em Flash com o Actionscript.

AUDIÊNCIA CONTADA FUNDO ALEATÓRIO Uma forma de deixar um arquivo Flash menos chato é mudar a tela de fundo de forma aleatória, sempre que a animação é carregada. Para fazer isso, crie um novo retângulo preenchendo toda a tela e tecle F8, escolhendo a opção Movie Clip em Type. Depois, clique duas vezes no objeto e adicione, nos primeiros frames da animação, telas de fundo diferentes, definindo cada um desses frames como keyframe (use o atalho F6, no teclado). Crie uma nova camada, clicando em Add Layer, e dê o nome de Ações. Depois, tecle F9 e digite o código abaixo:

var num_telas : Number = 3; var escolha :Number = Math.ceil(Math.random()*num_ telas); bg_mc.gotoAndStop(escolha); Substitua o valor em num_telas pelo número de telas de fundo utilizadas.

Para quem vai montar um site em Flash, é uma boa ideia manter o controle do número de visitantes. Para quem usa o Google Analytics, é muito fácil fazer esse controle. Para isso, comece baixando o pacote Google Analytics Tracking For Adobe Flash em www.info.abril. com.br/download/5724.shtml. Descompacte-o e copie o arquivo analytics_flash.swc para a pasta Common\ Configuration\Components, no local onde foi instalado o Flash. Ao criar o site em Flash, para adicionar o controle de visitas, tecle Ctrl+F7, para abrir a janela de componentes e arraste o item do Google Analytics para a seção Library. Use o código abaixo para marcar as visitas, substituindo meu_codigo pelo código do Google Analytics:

import com.google.analytics.AnalyticsTracker; import com.google.analytics.GATracker; var tracker:AnalyticsTracker = new GATracker( this, "meu_codigo", "AS3", false ); tracker.trackPageview("/page1");

MONITOR DE CARGA Um recurso útil para qualquer animação é uma barra que mostra o status do carregamento dos objetos na página. Para fazer essa barra, comece criando quatro camadas, clicando no botão Add Layer. Dê os seguintes nomes para as camadas: Ações, Texto, Contorno e Barra, de cima para baixo. Clique na camada Barra e desenhe um retângulo. Selecione as bordas do retângulo (segurando a tecla Shift) e digite Ctrl+X. Clique na camada Contorno e cole as bordas, ajustando-as à barra. Clique na barra, tecle F8 e escolha, em Type, a opção Movie Clip. Tecle, na seção Instance Name, o nome Barra_anim, para a barra. Clique na ferramenta de texto e, na seção Properties, escolha Dynamic Text. Crie uma caixa de texto abaixo da barra. Na seção Instance Name, tecle o nome Porcentual. Agora, clique na camada Ações e tecle o código abaixo:

stop(); this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, loadbar); function loadbar(event:ProgressEvent):void { var porcento:Number=event.bytesLoaded/event.bytesTotal*100; Barra_anim.scaleX=porcento; Porcentual.text="Carregando... " + int(porcento)+ "%"; if(porcento==100){ gotoAndStop(2); } }

BARRAS ANIMADAS Para sites musicais, um efeito interessante é animar barras de forma aleatória, simulando a execução de música. Fazer isso com a ajuda do Actionscript é bem fácil. Crie um novo arquivo Flash, selecionando Actionscript 2. Use o valor 18 em FPS. Desenhe uma barra vertical na tela com a altura de cerca de metade do valor máximo desejado. Selecione a barra e tecle F8. Em Type, escolha a opção Movie Clip, marcando o ponto central na última linha, em Registration. Com isso, a barra crescerá para cima e não para os lados. Com a barra selecionada, tecle F9 e use o código abaixo:

onClipEvent(enterFrame){ _yscale = Math.random()*200 + 10; } No exemplo acima, a altura da barra varia entre 10 e 210 pixels. Basta mudar os valores para adequar à sua animação. Copie e cole a barra várias vezes para obter o efeito de execução de música.

24 I DI C AS IN FO

Actionscript-Mat08.indd 24-25

DIC A S INFO I 25

05.06.09 21:03:10

dicas I actionscript

CÓDIGO RÁPIDO O

Use o Actionscript de forma prática com esses truques POR ERIC COSTA

var num_telas : Number = 3; var escolha :Number = Math.ceil(Math.random()*num_ telas); bg_mc.gotoAndStop(escolha); Substitua o valor em num_telas pelo número de telas de fundo utilizadas.

import com.google.analytics.AnalyticsTracker; import com.google.analytics.GATracker; var tracker:AnalyticsTracker = new GATracker( this, "meu_codigo", "AS3", false ); tracker.trackPageview("/page1");

24 I DI C AS IN FO

Actionscript-Mat08.indd 24-25

DIC A S INFO I 25

05.06.09 21:03:10

dicas I som

TOCA O SOM

Dicas para adicionar rapidamente som em uma animação no Flash POR ERIC COSTA

lém de desenhos e animações, para completar um projeto em Flash, é importante tocar efeitos ou músicas. Adicionar arquivos de áudio a uma animação ou aplicativo em Flash não é difícil. Confira, a seguir, três dicas para mandar o som para os FLVs.

MÁQUINA DE BARULHOS Para facilitar a criação de efeitos de som em um podcast ou, simplesmente, distribuir efeitos de áudio divertidos, uma ideia bacana é criar um sound board. Trata-se de um aplicativo em Flash formado basicamente de botões com som. Há vários sites especializados em sound boards com efeitos de desenhos animados e seriados. Para fazer uma sound board, simplesmente use a dica de criação de botão com som várias vezes, para cada efeito desejado.

BÁSICO DO ÁUDIO Com a animação pronta ou em qualquer momento da edição, é fácil adicionar um som de fundo no Flash. Acesse File > Import > Import to Library. Depois, localize o arquivo de som desejado. O Flash consegue ler itens nos formatos MP3 e WAV. O arquivo escolhido aparece na guia Library. Crie uma nova camada para o som, clicando em New Layer e arraste o item da Library para o palco (a área do desenho). O som tocará junto com a animação. Se a ideia for repetir o efeito constantemente, clique no ponto 1 da camada de som e acesse a guia Properties. Na seção Sync, escolha a opção Loop, no segundo campo de seleção.

BOTÃO COM SOM Além de sons de fundo, os arquivos de áudio também podem ser usados em eventos específicos, como quando um botão é pressionado. Para fazer um botão com som, comece desenhando um retângulo. Adicione letras ou outros símbolos sobre ele, se preferir. Selecione o retângulo e tecle F8. Na janela que surge, escolha, na seção Type, a opção Button. Acesse, então, File > Import > Import to Library e escolha o arquivo de música ou efeito desejado. Clique duas vezes sobre o retângulo para abrir as opções de eventos do botão. Pressione o botão New Layer e dê o nome Som à nova camada que é criada. Clique, na nova camada, no ponto Down e pressione F6 para criar um novo keyframe. Na guia Properties, escolha, na seção Sound, o arquivo de áudio importado.

26 I DI C AS I N FO

Som-Mat09.indd 26

05.06.09 21:03:35

dicas I design

DESIGN COM PHOTOSHOP Confira as dicas para combinar o programa com o Flash, usadas no site da TechRust POR MAURÍCIO GREGO

m site diferenciado e com grande impacto visual foi a encomenda recebida pelo designer e programador Guilherme Tavares Alberti. O objetivo era levar à web o ambiente da oficina mecânica TechRust, especializada na restauração de carros antigos. O site deveria ter cheiro de graxa e,

COLAGENS MIL A imagem do fundo foi construída juntando várias fotos num arranjo panorâmico. Para caracterizar o céu, Alberti escureceu a parte superior e salpicou estrelas com o pincel do Photoshop. Um processo similar foi usado na camada principal. Nela, fotos de carros, pneus, placas de trânsito e outros objetos foram coladas para compor a imagem. Com o carimbo do Photoshop, Alberti espalhou texturas de pisos, formando o chão. Por fim, alguns objetos foram animados no Flash. Quando o visitante posiciona o cursor sobre a palavra Vendas, por exemplo, o capô de um dos carros se abre.

ao mesmo tempo, refletir a sofisticação dos carros restaurados, que valem centenas de milhares de reais depois de prontos. Alberti trabalhou no Photoshop e no Flash, criando colagens e animações. Aqui, ele conta como desenvolveu esse projeto, feito quando ele era sócio da agência MG3, em São Paulo.

VELOCÍMETRO ANIMADO Há uma terceira camada fixa na tela. Ela exibe o logotipo da empresa e o menu de navegação em forma de velocímetro. Nele, o ponteiro indica as várias seções do site. No Flash, esse ponteiro foi animado para acompanhar os movimentos do mouse. Quando uma das opções é escolhida, as duas camadas ao fundo se deslocam até a área correspondente e o desenho de uma tela suspensa por correntes desce do alto. Alberti empregou um efeito 3D simples nessa tela: quando o cursor do mouse passa sobre a foto de um carro, ela gira como uma folha de papel para exibir informações.

CAMADAS MÓVEIS O site está estruturado em três camadas. A do fundo contém uma imagem com montanhas e céu estrelado ao crepúsculo. À frente dela, fica a camada principal, com imagens de carros, objetos e instalações que representam a oficina. No Flash, essas duas camadas foram sobrepostas e animadas. Quando o usuário desloca o mouse para a direita, elas se movem para a esquerda, e vice-versa. Um truque simples permite criar ilusão de profundidade: a camada da oficina se desloca mais rapidamente que a do fundo. Esse comportamento foi programado em ActionScript no Flash.

28 I DI C AS IN FO

Design-Mat10.indd 28-29

EMAGRECIMENTO Como o site foi todo feito com imagens, Alberti teve de tomar cuidado para que não ficasse pesado demais. Em cada um dos arquivos JPEG que formam a composição, ele aplicou, no Photoshop, a máxima taxa de compressão com qualidade aceitável. “Sacrifiquei um pouco a qualidade dos elementos secundários e procurei preservar a dos mais importantes”, diz Alberti. Além disso, o site foi montado no Flash com cada camada em um arquivo separado. “O carregamento é feito em partes, o que também ajuda a evitar a sensação de lentidão”, diz.

GUILHERME TAVARES ALBERTI 27 anos, é diretor da agência Keal, de Curitiba M FÓRyUurl.comh/ /tin ﬂas http:/ m-infoforu

DIC A S INFO I 29

05.06.09 21:04:12

dicas I design

DESIGN COM PHOTOSHOP Confira as dicas para combinar o programa com o Flash, usadas no site da TechRust POR MAURÍCIO GREGO

28 I DI C AS IN FO

Design-Mat10.indd 28-29

GUILHERME TAVARES ALBERTI 27 anos, é diretor da agência Keal, de Curitiba M FÓRyUurl.comh/ /tin ﬂas http:/ m-infoforu

DIC A S INFO I 29

05.06.09 21:04:12

tutoriais I jogo

JOGATINA COM POUCO ESFORÇO O

Use o Actionscript para fazer um jogo espacial POR ANDRÉ CARDOZO E ERIC COSTA Flash é perfeito para a criação de pequenos jogos para publicação na web. A facilidade de animar elementos, além do suporte do ActionScript, que se tornou uma linguagem bastante completa para programação, torna a plataforma da Adobe uma opção prática para modelar games. Confira, a seguir, um tutorial para criação de um jogo básico, inspirado no clássico Space Invaders.

ELEMENTOS 1

Antes de começarmos a criação do jogo, é preciso desenhar três elementos: a nave, a bala e o alienígena. Faça os desenhos desses elementos ou use cliparts prontos. Preferencialmente, transforme esses itens em um objeto na biblioteca (Library), para facilitar o trabalho. Também crie um keyframe no ponto 2 da linha do tempo com a tela de final de jogo.

NAVE 2

Selecione a nave e tecle o nome de instância nave no painel Properties. Aproveite e dê os nomes de instância alien e bala ao alienígena e à bala, respectivamente. Todos eles devem estar definidos como Movie Clip. Se isso não for o caso, tecle F8 e escolha, em Type, a opção Movie Clip. Clique duas vezes na nave para entrar no modo de edição da mesma.

INICIAL 3 POSIÇÃO Crie uma nova camada, clicando em New Layer. Dê a ela o nome Ações. Clique no ponto 1 (o primeiro frame) dessa camada e, depois, no primeiro keyframe dela. Tecle F9 para abrir a janela de ações. Tecle o código abaixo:

this.x = 400; this.y = 450; var speed:int = 10; Os dois primeiros comandos definem a posição inicial da nave (que podem ser modificados conforme o tamanho do palco escolhido). O último determina uma velocidade inicial de deslocamento. Feche a janela de código.

30 I DI C AS IN FO

Jogo-Mat11.indd 30-31

DIC A S INFO I 31

05.06.09 21:05:02

tutoriais I jogo

JOGATINA COM POUCO ESFORÇO O

ELEMENTOS 1

NAVE 2

30 I DI C AS IN FO

Jogo-Mat11.indd 30-31

DIC A S INFO I 31

05.06.09 21:05:02

DA TELA 7 LIMITES Clique no ponto 2 e tecle F6 para criar um novo keyframe. Tecle F9 e digite o código abaixo:

4 MOVIMENTO Clique no ponto 2 da camada Ações e tecle F6,

SEM FIM 5 REPETIÇÃO Clique no ponto 3 da camada Ações e tecle F6

para criar um novo keyframe. Tecle F9 para abrir a janela de código e digite o texto abaixo:

gotoAndPlay(2);

De forma resumida, o código acima detecta quando as setas esquerda e direita são pressionadas, assim como a barra de espaços. Nos dois primeiros casos, a nave é movimentada com a verificação dos limites do palco. Quando a barra é pressionada, uma nova bala é criada.

Basicamente, esse comando força a execução do frame anterior, que movimenta a nave e cria balas, até o jogo ser finalizado.

MAIS UM LAÇO 8

gotoAndPlay(2); Com isso, o alienígena e a nave estão prontos para uso. Resta o tratamento da bala e de sua colisão com o alienígena.

DO ALIEN 6 VELOCIDADE Clique no alienígena e verifique novamente que ele é um Movie Clip e tem nome de instância alien. Clique duas vezes nele. Pressione o botão New Layer para criar uma nova camada e dê a ela o nome de Ações. Tecle F9 para abrir a janela de código e digite nela o texto abaixo: O comando acima apenas define uma variável que armazena a velocidade da nave.

Jogo-Mat11.indd 32-33

Note que o código verifica se o alienígena atingiu os lados esquerdo e direito da tela (nos pixels 0 e 670, respectivamente). Nesse caso, a direção do movimento é invertida e o alienígena desce. Se chegar no final da tela, o jogo acaba, passando ao frame 2 da animação.

Como na nave, queremos que o movimento do alienígena seja repetido até o final do jogo. Assim, clique no ponto 3 da camada Ações e tecle F6. Digite F9 para abrir a janela de código e digite o texto abaixo:

var xmove = 20;

32 I DI C AS IN FO

this.x += xmove; if (this.x < 30) { xmove = 0 – xmove; this.y = this.y + 50; } else if (this.x > 670) { xmove = 0 – xmove; this.y = this.y + 50; } else if (this.y > 400) { this.y = 700; MovieClip(parent).nave.y = 700; MovieClip(parent).nave.x = 1000; stop(); MovieClip(parent).gotoAndPlay(“2”); }

DA BALA 9 CONFIGURAÇÃO Antes de criarmos o código para tratamento da bala é preciso configurá-la para ser acessível pelo Actionscript. Para isso, clique com o botão direito do mouse sobre seu símbolo na guia Library e escolha Properties. Na janela que surge, marque a opção Export for Actionscript. Se essa opção não estiver visível, pressione o botão Advanced.

DIC A S INFO I 33

05.06.09 21:05:24

DA TELA 7 LIMITES Clique no ponto 2 e tecle F6 para criar um novo keyframe. Tecle F9 e digite o código abaixo:

4 MOVIMENTO Clique no ponto 2 da camada Ações e tecle F6,

SEM FIM 5 REPETIÇÃO Clique no ponto 3 da camada Ações e tecle F6

para criar um novo keyframe. Tecle F9 para abrir a janela de código e digite o texto abaixo:

gotoAndPlay(2);

Basicamente, esse comando força a execução do frame anterior, que movimenta a nave e cria balas, até o jogo ser finalizado.

MAIS UM LAÇO 8

gotoAndPlay(2); Com isso, o alienígena e a nave estão prontos para uso. Resta o tratamento da bala e de sua colisão com o alienígena.

Jogo-Mat11.indd 32-33

var xmove = 20;

32 I DI C AS IN FO

DIC A S INFO I 33

05.06.09 21:05:24

CÓDIGO 10 MAIS Clique duas vezes no item relativo à bala na guia Library e, depois, pressione o botão New Layer. Dê o nome Ações à nova camada. Clique no ponto 1, tecle F9 e digite o código abaixo:

this.y -= 10; if (this.y) < -30 { this.y = -100; stop(); } if (this.hitTestObject(MovieClip(parent).alien)) { this.y = -100; MovieClip(parent).alien.y = 700; MovieClip(parent).alien.stop(); }

DA BALA 11 LOOP Para completar o funcionamento da bala devemos repetir seu funcionamento até o final do jogo. Para isso, clique no ponto 2 da camada Ações e tecle F6. Digite F9 e tecle o comando abaixo:

gotoAndPlay(1);

O código acima inicialmente movimenta a bala e verifica se ela saiu da tela. Na segunda parte do código é verificada a colisão com o alienígena, usando a função hitTestObject. Se isso ocorrer, o alienígena para e é movido para fora da tela.

PRINCIPAIS 12 ROTINAS Volte à cena principal e crie uma nova camada, dando a ela o nome de ações. Crie dois keyframes no ponto 1 e 2 digitando para ambos o código abaixo:

stop(); No frame 2, defina a tela de final de jogo com um desenho ou texto indicativo. O jogo está pronto. Se quiser ver a versão com os gráficos mostrados aqui, baixe-a em www.info.abril.com.br/download/5726.shtml.

34 I DI C AS I N FO

Jogo-Mat11.indd 34

05.06.09 21:05:39

tutoriais I criação de site

SITE COMPLETO

2 LOGOTIPO Use a ferramenta Text Tool e digite

Com o Flash e usando pouco código é possível montar páginas com apresentação profissional POR ANDRÉ CARDOZO E ERIC COSTA

ma utilização bastante comum do Flash é a criação de elementos para páginas web ou mesmo do conteúdo completo de um site. Neste tutorial, vamos montar um site simples, mas

o texto Info. Modifique os valores em Letter Spacing, na guia Properties, de forma que as letras fiquem mais coladas entre si. Use a ferramenta Oval Tool e crie uma oval que cubra o logotipo. Mude a cor da oval para um degradê com cores semelhantes às do fundo do site, mas mude o valor de Alpha para 0% na cor central. Assim, o degradê fica transparente perto do centro, não atrapalhando a visualização do texto. Digite, então, o texto Motors, na cor vermelha, e ajuste-o dentro da oval. Ajuste os dois textos e a oval no canto superior esquerdo da área de desenho.

que passa pelos principais conceitos de elaboração de páginas, com a criação de um menu e mudança no conteúdo conforme o item clicado. Confira o passo a passo, a seguir.

MENU 3

Para fazer o menu do site, crie textos para cada seção, começando por Home e dispondo-os no topo da área de desenho. Depois, crie outros textos com o caractere | para separar cada item do menu. Para alinhar tudo direitinho, selecione todos os textos, incluindo os separadores, e tecle Ctrl+K. Use o botão Space e os itens ficarão com o mesmo espaço entre eles.

DIMENSÕES E CORES 1 Rode o Flash e escolha a opção Flash File (ActionScript 3.0). Acesse, então, a guia Properties e mude o valor em Size para 800 x 600 pixels, clicando no botão Edit. Clique na ferramenta Rectangle Tool. Mude as opções em Rectangle Options para que as bordas do retângulo fiquem arredondadas. Então, desenhe um retângulo cobrindo toda a área de desenho. Clique na ferramenta de escolha de cores, na barra de botões do Flash, e escolha um degradê radial, em tons de vermelho.

36 I DI C AS IN FO

CriacaodeSite-Mat12.indd 36-37

4 BOTÕES Agora, devemos transformar os textos do menu em botões, para permitir ações com o clique do mouse. Para isso, selecione cada texto e tecle F8, escolhendo, em Type, a opção Button. Dê um nome descritivo a cada botão, que pode ser o próprio texto dele. Passe à guia Library e verifique se os botões criados encontram-se lá.

DIC A S INFO I 37

05.06.09 21:06:07

tutoriais I criação de site

SITE COMPLETO

2 LOGOTIPO Use a ferramenta Text Tool e digite

Com o Flash e usando pouco código é possível montar páginas com apresentação profissional POR ANDRÉ CARDOZO E ERIC COSTA

ma utilização bastante comum do Flash é a criação de elementos para páginas web ou mesmo do conteúdo completo de um site. Neste tutorial, vamos montar um site simples, mas

que passa pelos principais conceitos de elaboração de páginas, com a criação de um menu e mudança no conteúdo conforme o item clicado. Confira o passo a passo, a seguir.

MENU 3

36 I DI C AS IN FO

CriacaodeSite-Mat12.indd 36-37

DIC A S INFO I 37

05.06.09 21:06:07

DE NAVEGAÇÃO 7 SCRIPT Crie uma nova camada, pressionando o botão New Layer, no canto inferior esquerdo da janela do Flash. Dê à nova camada o nome Ações. Clique no ponto 1 da nova camada e tecle F6 para criar um novo keyframe. Pressione F9 para abrir a tela de código. Digite o texto abaixo:

AÇÃO 5 PRIMEIRA O primeiro botão do nosso site, o Home, traz à tela principal. Para criar a ação para esse comportamento, clique duas vezes no botão. Clique, agora, em Over e tecle F6 para criar um novo keyframe. Faça o mesmo para o estado Down. Só que neste, mude a cor da fonte no botão. Com isso, ao ser pressionado, a cor do texto do botão muda. Por fim, crie um keyframe para o estado Hit e desenhe um retângulo (de qualquer cor) sobre o texto do botão. Esse retângulo serve apenas para definir a área de sensibilidade do botão. Repita o processo para os outros botões.

stop(); function navegacao (event:MouseEvent):void { gotoAndStop(event.target.name); } home.event.AddEventListener(MouseEvent.CLICK,navegacao); empresa.event.AddEventListener(MouseEvent.CLICK,navegacao); estoque.event.AddEventListener(MouseEvent.CLICK,navegacao); financiamento.event.AddEventListener(MouseEvent.CLICK,navegacao); contato.event.AddEventListener(MouseEvent.CLICK,navegacao); Nas últimas cinco linhas, os comandos devem iniciar com os nomes de instância escolhidos anteriormente (usamos aqui home, empresa, estoque, financiamento e contato). Feche a janela de código.

DA PÁGINA 8 CONTEÚDO Vamos começar a montar a seção de conteúdo do site. Para isso, copie o retângulo de fundo, reduzindo-o com a ferramenta Free Transform Tool e mudando sua cor. Duplique esse retângulo menor e use uma cor chapada, sem degradê, para não atrapalhar o conteúdo. Use o retângulo menor e com degradê como uma sombra da área de conteúdo. Agora, crie outros keyframes para cada seção do site, nos pontos 2 em diante. Copie os retângulos de conteúdo e sombra para eles. Assim, cada frame terá seu conteúdo próprio. Aproveite para adicionar textos e fotos em cada frame, conforme a seção do site.

NAVEGAÇÃO 9

DE INSTÂNCIA 6 NOMES Volte à cena principal, clicando na seta para a esquerda na parte superior da janela do Flash. Clique em cada botão do menu e tecle um nome de instância (na guia Properties) para ele. Você pode usar ou não o mesmo nome do item na Library.

38 I DI C AS IN FO

CriacaodeSite-Mat12.indd 38-39

Para terminar o site, precisamos dar nomes aos frames com cada conteúdo. Para isso, crie uma nova camada, clicando em New Layer, e dê a ela o nome Rótulos. Clique no ponto 1 dessa camada e, no campo Name da guia Properties, tecle o texto Home. Note que o nome do frame é o mesmo usado na instância. Repita o procedimento com os outros frames, repetindo os nomes de instância em cada caso. Com isso, o site está pronto. Basta teclar Ctrl+Enter para testar o funcionamento do site.

DIC A S INFO I 39

05.06.09 21:06:27

NAVEGAÇÃO 9

38 I DI C AS IN FO

CriacaodeSite-Mat12.indd 38-39

DIC A S INFO I 39

05.06.09 21:06:27

tutoriais I vídeo

MANDE O VÍDEO PARA A WEB

2 FORMATO Com os clipes escolhidos na janela do Adobe Media Encoder, é hora de selecionar o formato para o qual eles são convertidos. Para cada vídeo, abra as opções em Format/ Formato. Há vários formatos de codificação, com mais ou menos compressão. Escolha o formato FLV, que tem maior compatibilidade com versões antigas do Flash Player, já que sua audiência pode não ter instalado o plug-in nas encarnações mais recentes.

Converta arquivos em vários formatos e monte um player completo para publicação na internet POR ANDRÉ CARDOZO E ERIC COSTA

pesar da facilidade de sites como o YouTube, usar o Flash para publicar vídeos em sua própria página dá opções mais completas de qualidade e visual do player. Confira, a seguir, como converter e publicar um vídeo, usando as ferramentas incluídas no Flash CS4.

MEDIA ENCODER 1 Para a conversão do vídeo vamos usar o Adobe Media Encoder, que vem com o Flash. Rode o programa e clique no botão Adicionar, para incluir novos vídeos para conversão. Escolha os arquivos desejados e pressione Abrir.

40 I DI C AS IN FO

Vi deo-Mat13.indd 40-41

CONFIGURAÇÕES 3

Para cada formato de vídeo, há configurações prontas em relação ao público-alvo do vídeo. Elas podem ser escolhidas abrindo as opções da coluna Preset/ Predefinição. Também é possível definir os detalhes de codificação de forma específica. Para isso, clique no link do arquivo na coluna Preset/Predefinição.

FINO 4 AJUSTE A tela de configurações de exportação permite definir quais trechos do vídeo serão codificados, o tamanho e até aplicar filtros. Depois de modificar as opções para os valores desejados, clique em OK para voltar à janela principal do programa. Se quiser, repita os ajustes para cada vídeo a ser codificado. Para começar a codificar os vídeos, clique no botão Iniciar Fila/Start Queue.

DIC A S INFO I 41

05.06.09 21:07:05

tutoriais I vídeo

MANDE O VÍDEO PARA A WEB

Converta arquivos em vários formatos e monte um player completo para publicação na internet POR ANDRÉ CARDOZO E ERIC COSTA

40 I DI C AS IN FO

Vi deo-Mat13.indd 40-41

CONFIGURAÇÕES 3

DIC A S INFO I 41

05.06.09 21:07:05

NO FLASH 5 VÍDEO Abra o Flash e clique em Flash File (ActionScript 3.0). Depois, acesse Window > Components. Na janela que aparece, abra as opções na categoria Video e arraste o componente FLVPlayback para a área de desenho. Com o novo objeto selecionado, acesse Window > Component Inspector. Agora, clique no campo Source e, depois, no botão de lupa nesse campo. Localize o arquivo gerado pelo Adobe Media Encoder e clique em OK.

DO PLAYER 6 VISUAL Para não ficar com o visual padrão do Flash, há várias skins diferentes para o player de vídeo. Para modificar o visual do componente, clique no campo Skin e no botão de lupa que surge. Na janela Select Skin, escolha o visual desejado no campo Skin e, se quiser, mude as cores dos botões para controle do vídeo. Clique em OK para aplicar as mudanças.

PUBLICAÇÃO 7

Com o player de vídeo pronto é preciso gerar a página HTML que será usada para tocá-lo. Para isso, acesse File > Publish. O Flash gera os arquivos necessários. Serão criados dois arquivos Flash para os controles de vídeo e um HTML com a página que hospeda tudo. Copie para a web esses arquivos, além do vídeo, que terá a extensão FLA. Se quiser testar o funcionamento do vídeo antes de publicá-lo na web, basta abrir o arquivo HTML com o browser.

42 I DI C AS I N FO

Vi deo-Mat13.indd 42

05.06.09 21:07:22

tutoriais I álbum 3D

FOTOS EM 3D Use um programinha para criar um show tridimensional com imagens POR ERIC COSTA

xistem vários programas que geram conteúdo em Flash, facilitando a vida de quem quer um efeito elaborado, mas dispensa o tempo e o trabalho de programação. Para criar galerias de fotos, um dos melhores programas é o Flash Gallery Factory (www.info.abril.com.br/download/5729.shtml). Ele conta com diversos efeitos poderosos, para dar um visual bastante bonito às imagens. Confira como gerar conteúdo em Flash com esse programa, a seguir.

1 INSTALAÇÃO Comece baixando o Flash Gallery Factory e fazendo sua instalação. Não é preciso configurar quase nada, exceto pela pasta onde o programa será instalado. Depois de instalado o programa, marque a opção Launch Wondershare Flash Gallery Factory, para que o programa seja executado. Escolha, na tela de abertura, a opção Gallery Mode.

DAS FOTOS 2 ESCOLHA Ao ser aberto, o programa já permite a escolha das fotos que serão usadas na animação Flash. Para isso, use a parte superior da janela para navegar pelas pastas do computador. Clique duas vezes em uma imagem para adicioná-la ao conjunto de fotos que farão a animação. Note que, na parte inferior da janela, são mostradas as imagens selecionadas. Se quiser um som de fundo, clique no botão Add Music e escolha um arquivo MP3 ou WAV.

D I C AS I NFO I 43

Album3D-Mat14.indd 43

05.06.09 21:07:51

DE EFEITOS 3 OPÇÕES Com as fotos escolhidas, clique na guia Template, para selecionar o efeito desejado. As formas de exibição tridimensional das fotos são mostradas na seção à esquerda da janela, na guia 3D Theme. Note que cada animação 3D tem um número de fotos definido, então escolha uma opção que tenha pelo menos a quantidade de imagens escolhida anteriormente.

4 PUBLICAÇÃO Depois de selecionar o efeito 3D desejado, clique na guia Publish. Há vários tipos de conteúdo que podem ser gerados, desde o HTML até um arquivo EXE, que é útil para distribuir as fotos em um CD. Se quiser mudar a qualidade na qual as imagens são publicadas (diminuindo o tamanho do arquivo Flash final, clique no botão Publish Settings). Como queremos publicar as imagens na internet, clique no botão Publish as HTML. Escolha uma pasta e um nome para o arquivo HTML. Será gerado, além da página web, um arquivo SWF, com o conteúdo em Flash.

5 TESTE Abra a página HTML no browser e teste o funcionamento da galeria de fotos. O código HTML gerado para exibir o arquivo Flash é bastante simples e pode ser integrado com facilidade a qualquer página web. A única chatice é que, na versão de testes, as animações geradas pelo Flash Gallery Factory ficam com um texto no centro da tela, indicando que o programa não foi registrado.

44 I DI C AS I N FO

Album3D-Mat14.indd 44

05.06.09 21:08:03

tutoriais I conversão de DVD

O DVD VIRA ANIMAÇÃO Converta os vídeos para a web, com a ajuda de um shareware POR ERIC COSTA

pesar de prático e poderoso, o Adobe Media Encoder, incluído com o Flash, não encara todos os formatos de vídeo existentes. Para quem quer passar um DVD para a web e não quer converter os vídeos em um formato intermediário antes de usar o Adobe Media Encoder, uma solução é utilizar o shareware Xilisoft SWF Converter (www.info.abril.com.br/download/5728.shtml).

1 INSTALAÇÃO Comece instalando o programa, sem precisar de ajustes adicionais durante esse processo, exceto pela escolha pela inclusão do codec RM, para conversão de vídeos no formato Real Video. Caso você já tenha um codec instalado para tocar esse tipo de vídeo, como o incluído no pacote K-Lite Codec Pack (www.info. abril.com.br/download/3593.shtml), não será preciso instalar o do Xilisoft SWF Converter.

ESCOLHA DOS ARQUIVOS 2 Rode o Xilisoft SWF Converter. Na janela do programa, clique no botão com ícone de + para adicionar os vídeos do DVD. Abra a pasta VIDEO_TS no drive de DVD e localize os arquivos que comecem com extensão VOB e com maior tamanho. Eles são os vídeos armazenados no disco. Selecione-os e clique em Abrir.

D I C AS I NFO I 45

ConversaodeDVD-Mat15.indd 45

05.06.09 21:26:44

DE QUALIDADE 3 AJUSTE Ao lado direito da janela do Xilisoft SWF Converter é possível mexer nas configurações de tamanho e qualidade do vídeo. Se nada for modificado, o vídeo fica no tamanho original, que pode ser muito grande para a transmissão pela web. Assim, abra as opções em Video Size e escolha um tamanho menor, como o CIF, com resolução de 352 x 288 pixels. Por fim, em Profile, escolha a opção SWF + HTML, para que seja gerada a página que hospedará o vídeo.

CONVERSÃO 4

Clique no botão com um círculo vermelho para iniciar a conversão. Na versão de testes, o Xilisoft SWF Converter somente gera cinco minutos do vídeo, mas é o suficiente para avaliar se o programa dará conta do recado. Depois do término da codificação, clique no botão Open para abrir a pasta na qual os arquivos SWF e HTML foram armazenados.

5 TESTE Agora é hora de testar o vídeo. Abra o arquivo HTML no browser e verifique se a codificação foi bem-sucedida. Também é o momento para checar se o tamanho do vídeo é suficiente. Aproveite para acessar o código HTML da página no browser, para usar o mesmo conteúdo em outras seções de um site sem precisar do Xilisoft SWF Converter.

46 I DI C AS I N FO

ConversaodeDVD-Mat15.indd 46

05.06.09 21:26:55

tutoriais I adobe air

APLICATIVOS COM AIR

Transforme animações do Flash em aplicativos independentes, em poucos passos POR ERIC COSTA

ma forma interessante de distribuir criações em Flash é transformá-las em aplicativos Air, que rodam em vários sistemas operacionais e dispensam modificações na animação original. Transformar um arquivo do Flash em um aplicativo Air é bem fácil. Confira o passo a passo, a seguir.

1 ANIMAÇÃO Comece rodando o Flash e escolhendo a opção Adobe Air (Flash File). Como o objetivo aqui é mostrar como transformar uma animação em um aplicativo em Air, não é preciso uma criação complexa. Use uma animação simples de desenho ou simplesmente adicione uma foto (acessando File > Import > Import to Stage) ao palco do Flash. Depois, tecle Ctrl+Enter para verificar se a animação funciona direito.

D I C AS I NFO I 47

AdobeAir-Mat16.indd 47

05.06.09 21:29:02

INICIAIS 2 CONFIGURAÇÕES Acesse File > Air Settings. Na janela que aparece, será preciso teclar um nome para o aplicativo, além de definir uma pasta de publicação para o mesmo. Clicando no botão Select Icon Images, é possível definir os ícones do aplicativo, que podem usar o formato PNG, em vez do ICO, normalmente encontrados em programas do Windows.

CERTIFICADO 3 Ainda na janela de ajustes, será preciso definir um certificado de segurança para o aplicativo que será criado. Por sorte, o próprio Flash CS4 permite a criação de um certificado, sem precisar gastar nada. Para isso, clique em Change e, na janela que aparece, selecione a opção Sign the Air File With a Digital Certificate. Pressione o botão Create e preencha informações sobre o criador, país de origem e tecle uma senha para proteger o conteúdo. Por fim, escolha uma pasta para salvar o certificado e clique em OK.

ARQUIVOS 4 AOUTROS última seção, Included Files, permite adicionar mais arquivos ao aplicativo. Em alguns tipos de animações em Flash, como players de música e galerias de fotos, pode ser preciso incluir os arquivos de som e imagem correspondentes, assim como textos em XML de descrição. Adicione tudo o que iria para a web com sua animação.

PUBLICAÇÃO 5

Clique no botão Change, na seção Destination, e escolha uma pasta e nome de arquivo para seu aplicativo. Depois, pressione o botão Publish Air File para gerar o arquivo AIR que conterá o programa. O Flash juntará tudo e avisará quando o arquivo AIR estiver pronto. Com isso, seu aplicativo está pronto para a distribuição. Clique no botão Change, na seção Destination, e escolha uma pasta e nome de arquivo para seu aplicativo. Depois, pressione o botão Publish Air File para gerar o arquivo AIR que conterá o programa. O Flash juntará tudo e avisará quando o arquivo AIR estiver pronto. Com isso, seu aplicativo está pronto para a distribuição.

6 TESTE Clique duas vezes no arquivo AIR para começar sua instalação. Se o arquivo estiver sendo usado em outra máquina, será preciso instalar antes o suporte ao Adobe Air, disponível em www.info.abril.com.br/download/4820.shtml. A tela inicial de instalação mostrará o nome do aplicativo e informações de publicação. Como usamos um certificado do próprio Flash, não há informações na internet sobre o editor. Clique no botão Instalar. Escolha a pasta para instalação, pressione Continuar e, depois, Concordo. A animação será executada automaticamente após a instalação e será adicionado um ícone para rodá-la no menu Iniciar do Windows.

48 I DI C AS I N FO

AdobeAir-Mat16.indd 48

05.06.09 21:29:11

download I concorrência

OS GENÉRICOS DO FLASH Conheça quatro opções baratas para substituir o Flash em animações simples POR ERIC COSTA

Flash é quase onipresente em animações e vídeos online. Mas quem quer criar conteúdo animado para sites não precisa obrigatoriamente desembolsar os 3 060 reais do Adobe Flash Pro. Há alternativas com recursos poderosos e preços bem mais camaradas. Elas resolvem desde

a simples inclusão de sons e vídeos nas páginas até trabalhos avançados, com objetos tridimensionais e efeitos especiais. O INFOLAB avaliou três alternativas econômicas ao Adobe Flash. A escolha INFO fica com o Swish Max, da Swish Zone, que oferece um cardápio mais completo de recursos.

O SWISH CAPRICHA NO VÍDEO O mais conhecido criador de animações Flash (depois do software da Adobe, claro) é o Swish Max. Ele traz tantos recursos que somente quem precisa realizar trabalhos muito complexos vai precisar de outro aplicativo. Para começar, ele conta com 180 itens prontos, incluindo textos, imagens, desenhos e botões, além de componentes e scripts para ações específicas, como ir a um ponto escolhido no vídeo ou abrir o browser. O Swish também importa vídeo diretamente e tem um player próprio para a web. Ainda no quesito importação, o programa pode abrir arquivos SWF prontos. O Swish traz 350 efeitos, o que até torna difícil a escolha da opção desejada. Com tantos recursos, o ponto fraco do Swish é justamente esse: ele é quase tão complexo quanto o Adobe Flash. Não é a ferramenta mais prática para uma produção rápida. Mas, para quem quer economizar sem perder funcionalidades, esse programa é uma ótima opção. FABRICANTE: SWISHZONE

150 DÓLARES

www.info.abril.com.br/download/3612.shtml AVALIAÇÃO TÉCNICA

7,8

CUSTO/BENEFÍCIO

7,5 D I C AS I NFO I 49

Concorrencia-Mat17.indd 49

05.06.09 21:32:37

O KOOLMOVES É EQUILIBRADO O KoolMoves consegue manter-se no meio do caminho entre programas básicos, como o FireStarter, e os mais complexos, como o Swish. De cara, o usuário já escolhe seu grau de proficiência com programas para a criação de animações. Se escolher o nível mais básico, tudo é feito com a ajuda de assistentes. Se selecionar o mais avançado, receberá uma interface com toneladas de opções. Um ponto forte do programa é a biblioteca de efeitos e modelos. Há opções prontinhas para determinados tipos de animação, como a exibição de um organograma, lista de vídeos ou player de música. O programa importa arquivos SWF e permite copiar itens rapidamente e criar uma biblioteca de objetos previamente desenhados. Uma chatice do KoolMoves é que a interface não é tão intuitiva para usuários do Adobe Flash, nem simples o suficiente para quem nunca usou esse tipo de aplicativo. FABRICANTE: COFFECUP

49 DÓLARES

www.info.abril.com.br/download/1453.shtml AVALIAÇÃO TÉCNICA

7,3

CUSTO/BENEFÍCIO

7,3

O FIRESTARTER FACILITA A VIDA Ao ser executado, o FireStarter exibe as opções básicas das animações que gera: vídeo ou banner. Depois de escolher um desses tipos é só adicionar textos, imagens e vídeos. Para cada item, basta clicar na varinha mágica para ter opções de efeitos. Para textos, por exemplo, é possível fazer cada letra aparecer como se fosse digitada numa máquina de escrever. O FireStarter também usa a linha do tempo, que o Flash tornou popular, para gerenciar a duração dos efeitos. No geral, ele é bastante útil para animações simples e banners, que dependem mais de imagens e links, mas não resolve a vida de quem quer incluir vídeos nos arquivos Flash. FABRICANTE: LUCKY MONKEY DESIGNS

49 DÓLARES

www.info.abril.com.br/download/1388.shtml AVALIAÇÃO TÉCNICA

7,6

CUSTO/BENEFÍCIO

7,5

MELHOR SUPORTE A 3D Apesar de ter sido adquirida pela Corel, a Ulead ainda continua usando seu nome nos programas. O Cool 3D é a opção para animação e, como o nome indica, seu ponto forte é a manipulação de objetos tridimensionais. Para dar opções diferentes de enfoque, basta criar câmeras e fontes de luz. Um ponto forte do programa é ser uma alternativa, bem mais fácil de usar, a programas de modelagem 3D, que costumam exigir muito tempo de aprendizado. Em compensação, os recursos de geração de Flash que não envolvam objetos 3D são bastante restritos. Há suporte a textos, mas o programa não importa imagens em qualquer formato, restringindo-se aos padrões de programas de desenho como Corel Draw e Illustrator. Como era de se imaginar, também não encara vídeos. FABRICANTE: COREL 80 DÓLARES

www.info.abril.com.br/download/5515.shtml AVALIAÇÃO TÉCNICA

7,5

CUSTO/BENEFÍCIO

7,0

50 I DI C AS I N FO

Concorrencia-Mat17.indd 50

05.06.09 21:32:47

download I flash automatizado

CRIAÇÃO AUTOMÁTICA Quer ficar longe do código e da linha do tempo do Flash? Use esses programas e serviços para gerar animações com poucos cliques POR ERIC COSTA

ansado de passar horas na frente do Flash modelando um efeito? Há opções de programas e serviços que resolvem problemas comuns de forma automática, sem precisar de codificação nem de criação de camadas. Há várias

opções gratuitas, além de software pago, com opções avançadas de personalização, que dão um resultado profissa, economizando tempo e dinheiro. Confira, a seguir, algumas soluções para produção automatizada em Flash.

WIX Wix Esse serviço permite a criação de um site completo em Flash sem instalar nada no micro nem mexer com código ActionScript. Há várias opções de designs prontos, que podem servir como base para seu site. O Wix também conta com animações, ícones, sons e outros elementos disponíveis para facilitar o design das páginas. É possível usar imagens e vídeos diretamente do Flickr e do YouTube, facilitando a vida de quem já publica arquivos nesses sites. Apesar das vantagens, a versão gratuita do Wiz só permite a hospedagem do site nos servidores deles. Além disso, são mostradas propagandas do Wix nas páginas. Para livrar-se dessas limitações é preciso pagar, com preços que começam em cinco dólares por mês. SERVIÇO ONLINE

EM INGLÊS

www.info.abril.com.br/web20/325.shtml AVALIAÇÃO TÉCNICA

8,0

CUSTO/BENEFÍCIO

D I C AS I NFO I 51

FlashAutomatizado-Mat18.indd 51

05.06.09 21:33:20

SWISH JUKEBOX

FLOWPLAYER 3.1.1 THE EFFECT GENERATOR Uma opção poderosa para criar efeitos em Flash sem instalar nada no micro é o Effect Generator. Esse serviço traz opções de animação como shows de slides, efeitos em textos, widgets, banners, botões, entre outros. As opções de edição são bastante amplas, permitindo a adição de formas geométricas, letras e pequenas animações. Ao contrário de outros serviços do gênero, o Effect Generator exige trabalho de criação, não funcionando como uma ferramenta completamente automatizada. Em compensação, para um design em Flash mais complexo, sem ter nenhuma ferramenta instalada no computador, ele resolve vários pepinos. Um ponto fraco do serviço é que, para baixar o elemento gerado e editá-lo de forma independente, é preciso pagar cinco euros. Esse valor deve ser pago por elemento gerado e não há opção de assinatura periódica. Se a hospedagem nos servidores do Effect Generator não for um problema, ele traz opções para publicação automática em serviços populares, como Orkut e Facebook, além de um código HTML para inclusão em qualquer página. SERVIÇO ONLINE

EM INGLÊS

www.info.abril.com.br/web20/326.shtml

Flowplayer Para facilitar a vida de quem quer publicar vídeos na internet, o Flowplayer é uma alternativa para tocar filmes que traz opções poderosas de configuração. Para começar, é possível, usando apenas código HTML e JavaScript, tocar vários vídeos em sequência, além de carregar imagens e músicas em MP3. Os filmes são carregados de forma progressiva, como no YouTube e outros sites assemelhados. Além de encarar vídeos no formato FLV, o padrão do Flash, ele também faz o streaming de arquivos MP4 e codificados no padrão H.264, o que evita a recodificação para quem já distribui os filmes nesses formatos. Também é fácil definir, dentro do código HTML e JavaScript, capítulos e seções para os vídeos, sem precisar de codificações específicas. Para completar, o Flowplayer também funciona como um tocador online de podcasts, baixando os vídeos ou arquivos de som diretamente de canais RSS. O programa tem código aberto, mas é possível adquirir licenças pagas, que não exibem o logotipo do produto e ainda contam com suporte do fabricante. LIVRE

154 KB

EM INGLÊS

www.info.abril.com.br/download/3056.shtml AVALIAÇÃO TÉCNICA

7,9

CUSTO/BENEFÍCIO AVALIAÇÃO TÉCNICA

7,9

SWiSHzone.com Uma forma simples de tocar música em um site é usar o software SWiSH Jukebox. Ele permite a importação e geração automática de uma interface para alternar entre arquivos MP3. O programa conta com 31 desenhos para o player, desde estilos tradicionais, com visual semelhante ao do Winamp, até designs minimalistas, para ocupar o mínimo de espaço na página. Também é possível mostrar as capas de CDs no player e definir imagens personalizadas a serem exibidas. As músicas também podem ser recodificadas diretamente no SWiSH Jukebox, reduzindo seu bitrate e o uso da banda dos visitantes. O programa gera os arquivos HTML e SWF necessários à publicação na web, com definição fácil do código que hospeda a juke-box, permitindo a utilização em mais de uma página do site. SHAREWARE (39,95 DÓLARES)

AVALIAÇÃO TÉCNICA

EM INGLÊS

7,5

CUSTO/BENEFÍCIO

FLASHVORTEX FlashVortex Nos momentos de falta de criatividade, o FlashVortex pode dar uma mão, oferecendo opções de visual para botões, banners, menus e outros elementos a serem usados em animações e sites. Basta clicar no tipo de elemento visual a ser gerado, escolher um design entre os existentes e modificá-lo. É possível mexer nas cores, textos e outros elementos, conforme o tipo de item escolhido. Depois, é só clicar em Generate Animation para poder baixar o resultado, pronto para edição e inclusão nas animações. Se preferir, o serviço fornece um código HTML rápido para inclusão em um site. SERVIÇO ONLINE

CUSTO/BENEFÍCIO

6,44 MB

www.info.abril.com.br/download/5713.shtml

EM INGLÊS

www.info.abril.com.br/web20/327.shtml AVALIAÇÃO TÉCNICA

7,4

CUSTO/BENEFÍCIO

PPT2FLASH STANDARD 4.8 Wondershare Existem várias formas de publicar arquivos PowerPoint na internet, mas se a ideia é personalizar a URL e forma de visualização, pode valer a pena investir no PPT2Flash. O programa instala-se como um complemento do aplicativo da Microsoft e pode publicar os arquivos em SWF/web, transformá-los em executável ou empacotálo para envio por e-mail. O programa também preserva efeitos de transição e muitas das animações, apesar de nem tudo ser convertido de forma satisfatória. SHAREWARE (59,95 DÓLARES)

9,65 MB

EM INGLÊS

www.info.abril.com.br/download/4941.shtml AVALIAÇÃO TÉCNICA

52 I DI C AS IN FO

FlashAutomatizado-Mat18.indd 52-53

7,6

CUSTO/BENEFÍCIO

6,0

WINK 2.0 Satish Kumar Na hora de montar tutoriais e demonstrações para outras pessoas, mostrar um vídeo é uma opção poderosa. Para isso, o Wink ajuda bastante. Ele pode capturar telas automaticamente, montando um vídeo em Flash, que pode posteriormente ser publicado na internet ou distribuído como um arquivo individual. O vídeo ainda pode receber uma narração gravada no microfone da máquina e o resultado gravado também como PDF, com comentários a cada imagem capturada. Para facilitar as explicações, também é possível adicionar textos e desenhos (como setas) às imagens, além de links para diferentes trechos do vídeo. SERVIÇO ONLINE

3,19 MB

EM PORTUGUÊS E INGLÊS

www.info.abril.com.br/download/5458.shtml AVALIAÇÃO TÉCNICA

7,3

CUSTO/BENEFÍCIO

DIC A S INFO I 53

05.06.09 21:33:54

SWISH JUKEBOX

EM INGLÊS

www.info.abril.com.br/web20/326.shtml

154 KB

EM INGLÊS

www.info.abril.com.br/download/3056.shtml AVALIAÇÃO TÉCNICA

7,9

CUSTO/BENEFÍCIO AVALIAÇÃO TÉCNICA

7,9

AVALIAÇÃO TÉCNICA

EM INGLÊS

7,5

CUSTO/BENEFÍCIO

6,44 MB

www.info.abril.com.br/download/5713.shtml

EM INGLÊS

www.info.abril.com.br/web20/327.shtml AVALIAÇÃO TÉCNICA

7,4

CUSTO/BENEFÍCIO

9,65 MB

EM INGLÊS

www.info.abril.com.br/download/4941.shtml AVALIAÇÃO TÉCNICA

52 I DI C AS IN FO

FlashAutomatizado-Mat18.indd 52-53

7,6

CUSTO/BENEFÍCIO

6,0

3,19 MB

EM PORTUGUÊS E INGLÊS

www.info.abril.com.br/download/5458.shtml AVALIAÇÃO TÉCNICA

7,3

CUSTO/BENEFÍCIO

DIC A S INFO I 53

05.06.09 21:33:54

FLASH MENU BUILDER CoffeeCup Software Não é muito difícil fazer um menu em Flash, mas gerar um visual bacana demanda um tempo considerável de edição e desenho. Se a ideia é produzir algo rapidamente, o Flash Menu Builder resolve bem. Basta teclar as URLs para cada botão e escolher o desenho deles para construir um menu rápido em Flash, que pode ser incorporado a qualquer site. É possível criar submenus, com desenho igual ou diferente do menu principal, além de associar sons quando os botões são pressionados. Um ponto forte do programa é manter os itens do menu em um arquivo XML, facilitando sua modificação rápida, sem precisar de nova criação no Flash Menu Builder. Para ajudar usuários sem veia artística, o programa inclui 200 opções de visual para os botões. SHAREWARE (34 DÓLARES)

4,9 MB

EM INGLÊS

www.info.abril.com.br/download/5714.shtml AVALIAÇÃO TÉCNICA

7,2

CUSTO/BENEFÍCIO

CAMSTUDIO CamStudio Perfeito para divulgar tutoriais na web, o CamStudio grava os comandos no desktop, gerando um arquivo Flash como resultado. Basta clicar no botão Record e operar um programa ou serviço normalmente. Tudo o que for efetuado no desktop será gravado, podendo receber símbolos e anotações posteriormente. O arquivo SWF resultante pode ser aberto diretamente no browser ou adicionado a páginas web com um código simples. O CamStudio ainda permite a gravação de voz durante os tutoriais, facilitando as explicações dos comandos, enquanto eles são efetuados. O programa também pode gerar arquivos AVI em vez de SWF e também pode definir regiões específicas do desktop para captura. LIVRE

1,3 MB

EM INGLÊS

www.info.abril.com.br/download/5715.shtml AVALIAÇÃO TÉCNICA

7,1

CUSTO/BENEFÍCIO

FLASH MEDIA SHOW 1.0 FlashPionner Criar um show de slides não é a tarefa mais complicada do mundo, usando o Adobe Flash. Mas, para ter mais opções de animações de transição sem ficar fuçando nos tweens, uma solução simples é usar o Flash Media Show. Basta adicionar as imagens e selecionar, para cada uma, o efeito de transição em sua exibição. As fotos ainda podem ser giradas e ampliadas, mostrando apenas parte da imagem. O programa gera um arquivo SWF como resultado, exigindo um código HTML simples para sua exibição em páginas web. Apesar de não ter limitação em relação ao número de fotos ou ao uso de efeitos, o programa mostra uma propaganda no topo da animação. FREEWARE

2,90 MB

EM INGLÊS

www.info.abril.com.br/download/5716.shtml AVALIAÇÃO TÉCNICA

7,0

CUSTO/BENEFÍCIO

54 I DI C AS I N FO

FlashAutomatizado-Mat18.indd 54

05.06.09 21:33:32

download I plug-ins

MAIS PODER COM PLUG-INS Adicione recursos e elementos prontos aos projetos em Flash, com opções gratuitas e pagas POR ERIC COSTA

ma forma prática de reduzir o trabalho ao criar animações e aplicativos no Flash é usar componentes prontos. Há montes de opções na internet, mas, infelizmente, poucas contam

com versões de teste. Mesmo assim, garimpando um pouco, é possível achar componentes bacanas que podem ser avaliados ou até gratuitos. Confira, a seguir, boas opções para agilizar a criação no Flash.

GOOGLE MAPS API FOR FLASH Google Um adendo interessante para um site feito em Flash pode ser o uso dos mapas do Google. Para isso, há um componente prontinho desenvolvido pelo Google. Basta baixá-lo e copiar o arquivo SWC para a pasta Common\Configuration\Components, dentro do diretório do Flash. Antes de usar o componente, é preciso registrar-se para ter um número de acesso direto à interface de programação do Google Maps. O componente conta com opções detalhadas de configuração, podendo efetuar zoom e criar rotas com base em código ActionScript. Também é possível definir marcadores e outros elementos para personalizar o mapa. FREEWARE

529 KB

EM INGLÊS

http://www.info.abril.com.br/download/5718.shtml AVALIAÇÃO TÉCNICA

8,0

CUSTO/BENEFÍCIO

UMAP 1.5.0 Advanced Flash Components Para quem prefere mais opções de mapas, o componente UMap pode baixar imagens do Virtual Earth, da Microsoft, dos mapas do Yahoo, entre outros serviços. Como os componentes oficiais dos serviços de mapas, ele pode adicionar marcadores, mas o UMap ainda tem a vantagem de permitir a leitura de arquivos KML, gerados por programas de GPS. Outro recurso bacana é a integração com o site GeoNames, para facilitar as buscas com base em nomes de regiões ou pontos geográficos. O UMap pode usar serviços de cálculo de rota, mas, nesse caso, será preciso o registro nesses sites para receber uma chave de acesso aos mesmos. FREEWARE

7,2 MB

EM INGLÊS

http://www.info.abril.com.br/download/5717.shtml AVALIAÇÃO TÉCNICA

7,5

CUSTO/BENEFÍCIO

D I C AS I NFO I 55

Plug-ins-Mat19.indd 55

05.06.09 21:34:39

PARTICULATOR 1.0.2 FlashExtension.net Criar movimentos com vários elementos simultaneamente não é tão simples no Flash. O Particulator resolve essa complicação, com efeitos prontos para simular fogo, fumaça e outros visuais que dependem de muitos elementos ao mesmo tempo. A interface do programa permite definir de forma detalhada o movimento de cada elemento, mas os ajustes também podem ser feitos diretamente pelo código ActionScript. Uma chatice é que a versão de testes só tem suporte a ActionScript na versão 2. Quem quiser codificar no padrão mais recente terá de registrar o componente. SHAREWARE (39,95 DÓLARES)

398 KB

EM INGLÊS

http://www.info.abril.com.br/download/5719.shtml AVALIAÇÃO TÉCNICA

7,5

CUSTO/BENEFÍCIO

7,0

THUMBNAILSCROLLER FlashOtaku Para facilitar a criação de animações com imagens, o componente Thumbnail Scroller é uma boa. Ele pode ler as imagens de um arquivo XML, facilitando a criação de sites dinâmicos, além de permitir configurações detalhadas do efeito, como tamanho das amostras, espaçamento entre elas, movimentação a cada clique e muito mais. Fica faltando, no entanto, opções diferentes de efeitos. Mas, para um componente gratuito, não dá pra reclamar tanto. FREEWARE

1,2 MB

EM INGLÊS

http://www.info.abril.com.br/download/5720.shtml AVALIAÇÃO TÉCNICA

7,2

CUSTO/BENEFÍCIO

SPINNING PRELOADER Tribungo Um efeito comum ao carregar uma animação mais pesada é usar um preloader, que mostra o quanto já foi carregado dos elementos do Flash. O componente Spinning Preloader permite gerar esse efeito rapidamente, com montes de opções de configuração. Basta definir os parâmetros de forma criativa para ter um efeito personalizado e bacana. O Spinning Preloader conta com vários exemplos de utilização, em um download separado, além de documentação completa num arquivo PDF. Para baixar o Spinning Preloader é preciso criar uma conta no site Flash Components gratuitamente. FREEWARE

118 KB

EM INGLÊS

http://www.info.abril.com.br/download/5722.shtml AVALIAÇÃO TÉCNICA

7,0

CUSTO/BENEFÍCIO

DICE FlashValley Quem quer criar um jogo de tabuleiro ou no estilo dos RPGs tradicionais precisa do lançamento de dados. O componente Dice é feito justamente para isso. Ele é bem simples, podendo ser arrastado para o palco do Flash e configurado para lançamento dos dados com um botão ou pelo código ActionScript. Há uma animação bacana para o lançamento e posições diferentes para cada resultado obtido. O ponto fraco é que só dados com seis lados são gerados pelo componente, o que pode ser insuficiente para simulação de alguns RPGs. FREEWARE

71 KB

EM INGLÊS

http://www.info.abril.com.br/download/5723.shtml AVALIAÇÃO TÉCNICA

6,5

CUSTO/BENEFÍCIO

56 I DI C AS I N FO

Plug-ins-Mat19.indd 56

05.06.09 21:34:48

programas I visual studio

A FORÇA DO VISUAL STUDIO A ferramenta de desenvolvimento da Microsoft é a opção mais poderosa para desenvolver em Silverlight POR JULIANO BARRETO

epois de dez anos no mercado, o pacotão para desenvolvimento de aplicativos da Microsoft ganhou mais uma versão. O Visual Studio 2008 traz recursos melhorados para desenvolvimento em Ajax e a possibilidade de acesso a bancos de dados por meio da poderosa linguagem

Linq. Também se integra melhor a outros produtos da Microsoft, como o Silverlight e a suíte para design Expression. O INFOLAB avaliou a edição Professional do Visual Studio 2008. Uma cópia de avaliação do pacote pode ser baixada no endereço www.info.abril.com. br/download/5037.shtml. Confira a análise a seguir.

BANCO DE DADOS: a representação visual facilita as deﬁnições

DADOS COMO OBJETOS Graças à adoção da linguagem Linq (Language Integrated Query, ou Linguagem Integrada de Consulta), a manipulação de arquivos XML e de bancos

de dados no Visual Studio ficou mais fácil para quem está acostumado com linguagens orientadas a objetos. O INFOLAB verificou que é possível criar consultas em C# ou em Visual

D I C AS I NFO I 57

VisualStudio-Mat20.indd 57

05.06.09 21:35:24

INTERFACE: INTERF INT ERFACE ERF ACE: código ACE códi ódi digo e pr projeto ojet j to na tela t l

Basic mesmo sem ter conhecimento de SQL. Além disso, o Linq permite conectar bancos de dados de diferentes tipos, aproveitando-se de estruturas já existentes e de uma interface em que é possível arrastar e soltar itens.

INFORMAÇÕES NA TELA A versão 2008 do pacote de desenvolvimento oferece mais informação para o programador saber onde está acertando ou errando. Ao abrir um arquivo XML, por exemplo, é possível dividir a tela para ver, ao mesmo tempo, código e resultado final. Cada mudança ou adição de informação é refletida nas duas telas. Outra novidade é a janela que traz estilos CSS para serem usados diretamente. Ao selecionar um item da página, é possível observar quais estilos ele está usando e quais são as propriedades ativadas.

FORÇA PARA INICIANTES A Microsoft lançou um pacote de documentos que ajuda os iniciantes a explorar as novidades de sua suíte de desenvolvimento. É o Visual Studio 2008 Training Kit. O material, em inglês, pode ser baixado de graça no endereço: www.info.abril.com.br/ download/5073.shtml.

FERRAMENTAS NA FAIXA Além dos pacotes comerciais, a Microsoft oferece ferramentas gratuitas, chamadas de Express, para programação nas linguagens Visual Basic, C# e C++. Há também um kit de desenvolvimento para a web. São boas ferramentas para aprendizado e pequenos projetos. Você pode baixá-las em www.info.abril.com.br/download/5037.shtml.

58 I DI C AS I N FO

VisualStudio-Mat20.indd 58

05.06.09 21:35:41

FORMULÁRIO: os painéis mostram opções para o objeto selecionado

VISTA E OFFICE Com um editor de códigos XAML integrado, o Visual Studio 2008 oferece ferramentas para criar aplicativos para o Vista e para o Office 2007. O pacote é compatível com APIs nativas do sistema e é capaz de atualizar aplicativos em C++, além de criar novos projetos de acordo com as especificações do WPF (Windows Presentation Foundation). O mesmo vale para o desenvolvimento de aplicações para o Office 2007. Por meio do Visual Studio Tools for Office (VSTO) é possível criar ferramentas específicas para a nova geração da suíte de escritório da Microsoft, incluindo o acesso a dados de sistemas SAP, CRM e ERP.

MAIS COMPATIBILIDADE Embora tenha sido anunciado ao lado do .NET Framework 3.5, o Visual Studio 2008 dá suporte às versões anteriores da plataforma, sendo compatível com os aplicativos desenvolvidos nas versões 2.0 e 3.0. A compatibilidade com Ajax e Silverlight também foi aprimorada. Novas opções de depuração e sugestões de código também foram adicionadas à programação de projetos em JavaScript. Trabalhos criados na suíte Expression, da Microsoft, também recebem tratamento especial do Visual Studio 2008.

VISUAL STUDIO 2008 PROFESSIONAL ONAL FABRICANTE

Microsoft

O QUE É

Pacote para desenvolvimento de aplicativos

PRÓ

Produz programas para desktop, web e híbridos

CONTRA

Só funciona em Windows e as aplicações para a web dependem do servidor IIS

RECURSOS

9,0

B LINGUAGENS B WEB B EDITOR DE CÓDIGO

Visual Basic, Visual C# e Visual C++ ASP.Net usando Ajax Facilita programação sugerindo comandos B ACESSO A BANCO DE DADOS Integração entre design e manipulação de dados através da linguagem Linq INTERFACE

8,5

B ORGANIZAÇÃO

As ferramentas são mostradas de acordo com o tipo de projeto, e a tela exibe código e resultado ao mesmo tempo Há descrição dos componentes na interface, tutoriais e modelos prontos

B AJUDA E DOCUMENTAÇÃO COMPATIBILIDADE

6,5

B SISTEMA OPERACIONAL B SERVIDOR WEB B .NET

Compatível com Windows Vista e XP Integração com IIS6 e IIS7 Compatível com as versões 2.0, 3.0 e 3.5 da plataforma .Net

PREÇO (R$)(1)

2 209 (2)

AVALIAÇÃO TÉCNICA CUSTO/BENEFÍCIO

8,3 7,3

(1) PREÇO ESTIMADO. (2) MÉDIA PONDERADA CONSIDERANDO OS SEGUINTES ITENS E RESPECTIVOS PESOS: RECURSOS (40%), INTERFACE (40%) E COMPATIBILIDADE (20%)

D I C AS I NFO I 59

VisualStudio-Mat20.indd 59

05.06.09 21:35:51

programas I expression studio

O DREAMWEAVER DA MICROSOFT O pacote Expression Studio ajuda no design em Silverlight e até conversa com o Flash POR ERIC COSTA

penas oito meses após iniciar a venda da versão 1, a Microsoft já começou a distribuir o Expression Studio 2. Havia boas razões para a pressa em apresentar a nova versão. Esse pacotão de ferramentas para desenvolvimento de aplicativos online tem a difícil missão de competir com os consagrados programas da Adobe, como Flash e Dreamweaver. A Microsoft tenta, com ele, popularizar o Silverlight, sua tecnologia alternativa

ao onipresente Flash para a publicação de conteúdo multimídia online. O Expression Studio 2 acena aos desenvolvedores de outras plataformas com opções extras de linguagens, como o PHP, e importação de arquivos de muitos formatos comuns na web. O INFOLAB verificou que o pacote é poderoso, mas continua tendo foco bastante concentrado nas tecnologias da Microsoft. Confira, a seguir, a análise de seus principais componentes.

WEB COM AJAX Mais compatibilidade com produtos de outros fabricantes é a principal atração da nova versão do Expression Web, o componente do Expression Studio voltado para a edição de páginas da web. Ele traz suporte ao desenvolvimento em PHP e importação de conteúdo do Photoshop e de animações do Flash. O suporte a Photoshop também é útil para acrescentar mais uma opção no desenvolvimento. Um designer pode criar o visual geral do site no Photoshop. A tradução para controles e a codificação da interface são, então, feitas no Expression Web. Já a tarefa de desenvolver a parte lógica do aplicativo continua cabendo ao Visual Studio. A interface do Expression Web é tranquila para quem monta um site, com atalhos para os principais comandos e recursos que podem ser incluídos nas páginas. E há facilidades como uma função que sugere maneiras de completar um comando. Ela funciona inclusive em PHP. Além disso, o programa avisa quando há inconsistências no código e quando algum comando usado não é compatível com os padrões mais recentes de HTML, CSS ou JavaScript.

SILVERLIGHT NO BLEND O programa mais poderoso do pacote Expression Studio é o Blend. Ele lembra os concorrentes Adobe Flash e Director. Conta, inclusive, com uma linha do tempo para edição de eventos, ferramenta característica desses aplicativos. O Blend pode gerar aplicativos, interfaces e applets em Silverlight. A interface do Blend exige certo esforço do usuário para acostumar-se com os controles, especialmente para quem está habituado ao estilo do Adobe Flash. Um ponto forte do Blend é a ênfase no desenho vetorial ao elaborar uma interface. Isso facilita sua adaptação a resoluções de tela diferentes sem criar serrilhados. O Blend se integra de forma transparente aos outros programas do pacote. Permite, por exemplo, importar desenhos feitos no Design, como elementos da interface, ou mexer nos padrões de player de vídeo usados pelo Encoder.

O DESIGN CRIA A INTERFACE Para quem precisa de um toque artístico nos sites ou aplicativos, o pacote Expression Studio inclui o Design. Esse aplicativo de desenho encara vetores ou pixels, seguindo os moldes do Illustrator, da Adobe. Mas seu objetivo maior é a criação de interfaces para os aplicativos. Um exemplo desse foco está na ausência de suporte a cores CMYK, usadas na indústria gráfica. Há poucas opções de formatos para importação (o programa não lê EPS, por exemplo). A ausência de importação e exportação no formato SVG faz falta, especialmente para quem precisa criar desenhos e ilustrações para outras plataformas. O Expression Design funciona bem para a finalidade a que se propõe. Mas seu conjunto de ferramentas não se compara ao do concorrente da Adobe.

60 I DI D I C AS DIC A S IN FO

ExpressionStudio-Mat21.indd 60-61

DIC A S INFO I 61

05.06.09 21:36:44

programas I expression studio

O DREAMWEAVER DA MICROSOFT O pacote Expression Studio ajuda no design em Silverlight e até conversa com o Flash POR ERIC COSTA

60 I DI D I C AS DIC A S IN FO

ExpressionStudio-Mat21.indd 60-61

DIC A S INFO I 61

05.06.09 21:36:44

VÍDEO É COM O ENCODER Apesar de ser um dos programas mais simples do pacote, o Expression Encoder é especialmente útil em tempos de YouTube, quando qualquer site que se preze tem de ter algum vídeo. O Encoder permite importar arquivos de vídeo em vários formatos, unir e cortar seu conteúdo. Há vários ajustes de codificação prontos, incluindo um para o player de mídia Zune, da Microsoft. A configuração para publicação na web oferece opções para adequar o vídeo a conexões com velocidades variadas. Infelizmente, não há opções para geração de MP4, padrão usado nos iPods e PSP, nem alternativas de codecs de áudio e vídeo diferentes do VC-1 e do WMA. O tamanho final dos vídeos é razoável. Nos testes do INFOLAB, converter um filme de 40 minutos, com 260 MB (originalmente em XviD) para conexões de 512 kbps, resultou num arquivo de 130 MB; e, para conexões de 256 kbps, em 63 MB.

EXPRESSION STUDIO 2 FABRICANTE

Microsoft

O QUE É

Pacote para desenvolvimento para a web e computadores com recursos multimídia

PRÓS

Criação fácil de conteúdo multimídia, verificação de padrões da web e integração com o Visual Studio

CONTRAS

Poucos formatos de importação em alguns programas e ênfase em tecnologias da Microsoft

CRIAÇÃO DE SITES

8,0

CATÁLOGO DE CONTEÚDO O Expression Media complementa os outros programas servindo como catálogo para o conteúdo que pode ser incluído em páginas, aplicativos e imagens. Nesse aspecto, pode ser comparado ao Bridge, da Adobe, mas tem foco mais amplo que o concorrente. Além de fotos, o Expression Media pode catalogar sons e vídeos. Também acrescenta anotações, etiquetas e notas a cada item. A coleção pode ser gravada num DVD, com miniaturas e acesso pelo programa, ou exportada como um site. O programa ainda pode receber scripts para operações comuns, como trocar o nome dos arquivos, aplicar efeitos básicos (como rotação e mudança de tamanho) ou adicionar anotações. O Expression Media é útil, mas poderia, sem maiores consequências, ser substituído por outro programa. Um ponto forte do Expression Studio está em seu preço, de 1 825 reais, em média. O produto inteiro custa menos que o Flash sozinho e cerca de um terço do preço do CS3 Production Premium, o pacote concorrente da Adobe. O Expression Studio é eficaz para desenho e criação de aplicativos e páginas da web, em particular para quem quer desenvolver com base no .Net Framework e na tecnologia Silverlight. O problema é que, por continuar centrado nas plataformas da Microsoft, pode afastar quem quer ter outras possibilidades de desenvolvimento. O suporte a PHP no Expression Web é um bom começo, mas ainda é preciso adicionar mais tecnologias abertas e de outros fabricantes para ser uma alternativa ao Flash e ao Dreamweaver.

Suporte a PHP, avisos úteis ao editar código e interface prática DESENVOLVIMENTO DE APLICATIVOS

7,5 Tem linha do tempo para animações, suporte a elementos 3D e integração com o Visual Studio

DESENHO

7,5 Bons recursos para desenho de interfaces

CONVERSÃO DE VÍDEO 7,5 Fácil de usar e com boas opções de importação, mas poucos formatos de saída GERENCIAMENTO MULTIMÍDIA

7,0 Trabalha com vídeo, imagens e sons e exporta para DVD e sites

PREÇO (R$)

AVALIAÇÃO TÉCNICA(1) CUSTO/BENEFÍCIO

1 825

7,8 7,5

(1) MÉDIA PONDERADA CONSIDERANDO OS SEGUINTES ITENS E RESPECTIVOS PESOS: EDIÇÃO WEB (30%), CRIAÇÃO DE APLICATIVOS (30%), DESENHO (15%), CONVERSÃO DE VÍDEOS (15%) E GERENCIAMENTO MULTIMÍDIA (10%). HOUVE ACRÉSCIMO DE 0,2 PONTO NA AVALIAÇÃO TÉCNICA PELO BOM DESEMPENHO DA MICROSOFT NA PESQUISA INFO DE MARCAS 2008

62 I DI C AS I N FO

ExpressionStudio-Mat21.indd 62

05.06.09 21:37:14

tutoriais I primeiros passos

PRIMEIROS PASSOS

Configure todas as ferramentas para desenvolver em Silverlight e faça o primeiro programa nessa tecnologia POR ERIC COSTA

ntes de começar a desenvolver aplicativos web em Silverlight, é preciso instalar vários aplicativos no computador, assim como ferramentas e componentes para facilitar a programação. Confira, a seguir, como instalar tudo e desenvolver o primeiro programa em Silverlight.

STUDIO 1 VISUAL Comece instalando o Visual Studio (www.info.abril.com.br/download/537.shtml) na máquina que será usada para desenvolvimento Silverlight. A instalação do Visual Studio já inclui a atualização para a versão 3.5 do .Net Framework, necessária ao desenvolvimento em Silverlight. Instale também o pacote de atualização SP1 (www.info.abril.com.br/ download/5380.shtml), caso sua cópia do Visual Studio não esteja com ele incluso. Também será preciso baixar e instalar o pacote Silverlight Tools for Visual Studio (www.info.abril.com.br/ download/5727.shtml).

2 BLEND Uma ferramenta opcional, mas extremamente útil, é o Blend (www.info.abril.com.br/download/4699. shtml). Ele ajuda a criar interfaces de forma visual, gerando o código XAML que será usado no Visual Studio, o que agiliza bastante o processo de desenvolvimento. A instalação do Blend é bem direta, dispensando configurações e ajustes.

D I C AS I NFO I 63

PrimeirosPassos-Mat22.indd 63

05.06.09 21:37:56

FERRAMENTAS 3 OUTRAS Além dos pacotes acima, é interessante instalar o Deep Zoom Composer (www.info.abril.com.br/download/5725.shtml), para criação de montagens de fotos com efeito de zoom, além do Silverlight Toolkit, um pacote com vários componentes e exemplos de código, que dão uma mão no desenvolvimento. Com isso, o micro está pronto para criar aplicativos Silverlight.

DE PROGRAMAÇÃO 6 INTERFACE Note que a interface do Visual Studio é dividida em três seções básicas. No meio, fica a visualização do conteúdo do aplicativo Silverlight, com essa seção também sendo usada para a codificação em Visual Basic. Na parte inferior, é possível digitar o código em XAML, a linguagem que descreve os controles (botões, barras, imagens etc.). Já do lado direito podem ser selecionados arquivos de código-fonte, páginas web criadas e outros itens adicionados ao projeto.

PROGRAMA 4 PRIMEIRO Rode o Visual Studio e, na janela que aparece, escolha a opção Web Development Settings, já que vamos desenvolver um controle para a web. Clique, então, em Start Visual Studio e acesse File > New Project. Na janela seguinte, localize, do lado esquerdo, a subseção Silverlight, em Visual Basic. Depois, do lado direito, clique no item Silverlight Application. Dê um nome ao projeto de aplicativo no campo Name e pressione o botão OK.

DE BOTÃO 7 CRIAÇÃO Clique no espaço entre as tags <Grid> e </Grid>. Depois, na parte esquerda da janela do Visual Studio, abra a guia Toolbox. Clique duas vezes no item Button. Note que é adicionada uma nova tag, com nome de <Button>. Edite seu código, de forma que fique semelhante ao texto abaixo:

<Button x:Name=”MeuBotao” Content=”Oi, Mundo!” Width=”200” Height=”100”></Button> Durante a edição de texto, o Visual Studio tenta completar os comandos e adiciona as aspas de forma automática. Com esse código, é criado um botão no centro da área destinada ao aplicativo Silverlight. Se quiser, aproveite para editar a cor, substituindo o texto após Background, na tag <Grid>, por um nome de cor, em inglês (o Visual Studio também ajuda na escolha).

SERVIDOR WEB 5

A próxima janela permite a criação de um projeto web para abrigar o controle Silverlight. Essa opção é interessante quando o controle faz parte de um projeto maior para publicação na web. Assim, seria possível a criação de várias páginas associadas e outros elementos para a internet. Como a ideia aqui é fazer algo bem simples, escolha a opção Automatically Generate a Test Page to Host Silverlight at Build Time. Dessa forma, será gerada apenas uma página HTML básica para mostrar o aplicativo Silverlight. Clique em OK para chegar finalmente ao ambiente de desenvolvimento do Visual Studio.

64 I DI C AS IN FO

PrimeirosPassos-Mat22.indd 64-65

INICIAL 8 TESTE Acesse Debug > Start Debugging (ou tecle F5) para fazer o primeiro teste do aplicativo Silverlight. Será aberto um navegador, com o aplicativo funcionando. Clique no botão para testá-lo, mas, por enquanto, ele não faz nada. Feche o navegador para terminar o teste e volte ao Visual Studio.

DIC A S INFO I 65

05.06.09 21:39:21

SERVIDOR WEB 5

64 I DI C AS IN FO

PrimeirosPassos-Mat22.indd 64-65

DIC A S INFO I 65

05.06.09 21:39:21

DE EVENTOS 9 ADIÇÃO Para que o botão tenha alguma funcionalidade, é preciso adicionar um evento a ele. Adicione, ao final do texto da tag <Button>, o comando Click=. Note que, ao teclar o símbolo de igual, surge a opção New Event Handler. Clique nela para transformar o texto após o símbolo de igual em MeuBotao_Click. Com isso, o Visual Studio criou um evento para o clique do botão, além de uma função em Visual Basic para tratar desse evento.

DO CÓDIGO 10 HORA No lado direito da tela, abra as opções em Page.xaml. Clique duas vezes no item Page.xaml.vb, para selecionar o arquivo que trará o código em Visual Basic do aplicativo. Note que existe um procedimento denominado MeuBotao_Click, sem nenhum código. Digite o comando abaixo, antes da linha End Sub:

MeuBotao.Content = “Pressionado!” Com isso, o botão mostrará essa mensagem ao ser clicado. Você pode, se quiser, brincar com outras características do botão, como cor e tamanho, para familiarizar-se com a edição de código no Visual Studio.

TESTE FINAL 11

Com o código teclado, pressione F5 para fazer o teste final do aplicativo Silverlight. Clique no botão e veja se ele muda, conforme o comando teclado anteriormente. Com isso, você já aprendeu o básico para criar um projeto Silverlight, além de testar o seu funcionamento no browser.

66 I DI C AS I N FO

PrimeirosPassos-Mat22.indd 66

05.06.09 21:38:05

tutoriais I vídeo

FILMES NA WEB D

ominar os recursos para exibir e controlar vídeos é essencial para desenvolver aplicativos na web atualmente. Por sorte, há objetos prontinhos para fazer de tudo com filmes no Silverlight. Com eles, é possível fazer um player rapidamente e sem

Crie um aplicativo em Silverlight para tocar filmes em poucos passos POR ERIC COSTA

muito código. Neste tutorial usaremos a versão de demonstração do Expression Encoder para converter um vídeo para o formato reconhecido pelo Silverlight, criando um player com botão de pausa e controle de tempo. Confira o passo a passo, a seguir.

ENCODER 1 EXPRESSION Comece baixando a versão de demonstração do Expression Encoder em

www.info.abril.com.br/download/5669.shtml. Faça a instalação normalmente, sem precisar de quaisquer configurações especiais. Depois de instalado o programa, rode-o e clique em OK para fechar a mensagem relativa ao Windows Media SDK (que não será necessário neste tutorial).

2 CODIFICAÇÃO Clique no botão Import, localize o vídeo que será convertido e pressione Abrir. Do lado direito da janela do Expression Encoder escolha, na seção Profile, o formato de vídeo apropriado para sua audiência. Há várias opções de qualidade que podem ser voltadas a públicos com conexões mais lentas, como 256 Kbps, ou a Streaming High Speed Broadband, que usa 2 Mbps de banda. Escolhido o formato, clique no botão Encode para converter o vídeo. Esse processo pode levar de poucos minutos a algumas horas, conforme o tamanho do filme a ser convertido.

D I C AS I NFO I 67

Video-Mat23.indd 67

05.06.09 21:41:00

PROJETO 3 NOVO Abra o Visual Studio 2008 e acesse File > New Project. Selecione, dentro das opções em Visual Basic, o item Silverlight. No lado direito da janela, escolha Silverlight Application. Dê um nome ao novo projeto e clique em OK para começar a desenhar o player de vídeo. Depois, escolha a opção Automatically Generate a Test Page to Host Silverlight at Build Time e clique em OK.

DO ESPAÇO 4 ORGANIZAÇÃO Para organizar o espaço destinado ao vídeo e aos controles tecle o comando entre as tags <Grid> e </Grid>:

<Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="30" /> </Grid.RowDefinitions> O texto acima define duas linhas, uma com tamanho livre, para abrigar o vídeo, e outra com altura de 30 pixels, que receberá os botões e o controle de posição do filme.

E PARAR 6 TOCAR O próximo passo é adicionar o botão para tocar e parar o vídeo. Para isso, adicione o seguinte comando, na linha seguinte, mas antes de </Grid>:

<StackPanel Orientation="Horizontal" Grid.Row="1" HorizontalAlignment="Center"> <ToggleButton x:Name="btnTocaPara" Content="Pause" Width="75" Height="25" /> <Slider x:Name="sliderPosicao" Width="250" Minimum="0" Maximum="1" Margin="5,0,0,0" /> <TextBlock x:Name="txtPosicao" Margin="5,0,0,0" /> </StackPanel> Note que, com isso, surge o botão de tocar, além de um controle que mostra a posição atual no vídeo, com o texto correspondente.

DO ESPAÇO 7 ORGANIZAÇÃO No botão, tecle, antes do final da tag ToggleButton, o texto Checked. Note que surge a opção New Event Handler. Clique nela para gerar uma função para o evento de o botão estar ativado. Repita o processo, agora com o texto Unchecked, para o evento do botão desativado. No lado direito da janela abra os itens em Page.xaml e clique duas vezes em Page.xaml.vb. Modifique as funções criadas para que fiquem como o texto abaixo:

Private Sub btnTocaPara_Checked(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) TocadorVideo.Pause() btnTocaPara.Content = "Play" End Sub Private Sub btnTocaPara_Unchecked(ByVal sender As System.Object, ByVal e As System.Windows. RoutedEventArgs) TocadorVideo.Pause() btnTocaPara.Content = "Pausa" End Sub

DE VÍDEO 5 CONTROLE Clique com o botão direito do mouse no nome do projeto e escolha Add > Add Existing Item. Localize o vídeo codificado e clique em Abrir. Clique no item do vídeo e, no item Copy To Output dentro da guia Properties, escolha a opção Copy Always. Na seção de código, digite o comando abaixo:

<Grid Grid.Row="0" Background="Black"> <MediaElement x:Name="TocadorVideo" Source="filme.wmv" /> </Grid> Substitua, no comando acima, o texto filme.wmv pelo nome do arquivo adicionado. Com isso, o vídeo já está no aplicativo Silverlight.

68 I DI C AS INFO IN FO

Video-Mat23.indd 68-69

DIC A S INFO I 69

05.06.09 21:42:59

DO ESPAÇO 4 ORGANIZAÇÃO Para organizar o espaço destinado ao vídeo e aos controles tecle o comando entre as tags <Grid> e </Grid>:

E PARAR 6 TOCAR O próximo passo é adicionar o botão para tocar e parar o vídeo. Para isso, adicione o seguinte comando, na linha seguinte, mas antes de </Grid>:

68 I DI C AS INFO IN FO

Video-Mat23.indd 68-69

DIC A S INFO I 69

05.06.09 21:42:59

DO TEMPO 8 CONTROLE Para controlar o tempo e atualizar o controle Slider precisamos de um relógio que, no Silverlight, pode ser criado com um objeto DispatchTimer. Para isso, adicione a linha abaixo antes de qualquer outra no arquivo Page.xaml.vb:

Imports System.Windows.Threading Depois, na linha acima de Public Sub New(), adicione o texto abaixo:

Dim WithEvents Timer As New DispatchTimer Continue adicionando o comando abaixo após a linha InitializeComponent():

Timer.Start() Por fim, digite, antes de End Class, o texto abaixo:

Private Sub Timer_tick() Handles Timer.Tick If (TocadorVideo.NaturalDuration.TimeSpan.TotalSeconds > 0) Then txtPosicao.Text = String.Format("{0:D2}:{1:D2}", TocadorVideo.Position.Minutes, TocadorVideo.Position. Seconds) sliderPosicao.Value = TocadorVideo.Position.TotalSeconds / TocadorVideo.NaturalDuration.TimeSpan. TotalSeconds End If End Sub

TESTE DO PLAYER 9 Para testar o player, simplesmente tecle F5. O vídeo deve começar a tocar. Verifique se o controle do tempo decorrido e os botões funcionam corretamente. Agora, é só sair publicando vídeos à vontade.

70 I DI C AS I N FO

Video-Mat23.indd 70

05.06.09 21:41:19

tutoriais I deep zoom

ZOOM PERSONALIZADO Crie efeitos de aproximação em Silverlight com uma ferramenta da Microsoft POR ERIC COSTA

m recurso interessante do Silverlight é o Deep Zoom. Trata-se de uma forma de criar murais e outras alternativas de composição de fotos, com opção de aproximar-se e novos detalhes da imagem serem carregados. O recurso é interessante para fotos de gigapixels, além de co-

leções grandes de imagens. Para facilitar a criação dessas composições, existe um programinha associado ao recurso, o Deep Zoom Composer. Confira, a seguir, como usar esse software para criar um cenário de Deep Zoom, além de exportá-lo para a web e para uso no Visual Studio.

1 INSTALAÇÃO Se o pacote ainda não está em sua máquina, baixe e instale o Deep Zoom, disponível em www.info.abril.com.br/download/5725.shtml. Para usar o Deep Zoom não é preciso ter o Visual Studio 2008 instalado, mas ele requer o plug-in Silverlight (www.info.abril.com.br/download/4809. shtml) e o .Net Framework 3.5 (www.info.abril.com.br/download/4700.shtml). Com tudo instalado, rode o Deep Zoom e escolha a opção New Project. Dê um nome e escolha uma pasta para o novo projeto, pressionando OK em seguida.

D I C AS I NFO I 71

DeepZoom-Mat24.indd 71

05.06.09 21:56:35

Coleção com zoom Para se inspirar, o melhor exemplo de uso do Deep Zoom na web está no site Hard Rock Memorabilia, que mostra os itens de pessoas famosas existentes nos restaurantes Hard Rock Cafe. Ao aproximar-se de uma imagem são exibidas informações sobre aquele item, além do restaurante no qual ele está em exibição.

DAS IMAGENS 2 IMPORTAÇÃO Clique na guia Import e, depois, no botão Add Images. Localize, no disco rígido, as imagens que farão parte da composição. É possível usar várias fotos no mesmo efeito de zoom, o que é interessante para montar, por exemplo, um mural na web, no qual cada foto pode ser aproximada ao máximo. Clique em Abrir para adicionar as imagens. É possível navegar pelas fotos escolhidas para verificar se estão todas com boa resolução.

VISUAL 3 ARRANJO Passe à guia Compose. Aqui, será possível organizar as imagens no espaço de zoom. Arraste cada foto e movimente-a pelo espaço, de forma a criar um arranjo bacana. Se quiser, use os botões na parte inferior da janela para ajustar o tamanho e o posicionamento das imagens de forma automática. Quando tudo estiver pronto clique na guia Export.

DA PÁGINA 4 CRIAÇÃO Há várias opções de geração de conteúdo pelo Deep Zoom Composer. Ele pode somente criar as versões com zoom das imagens, um projeto completo em Silverlight, para serem modificadas no Visual Studio ou ainda uma página web com suporte a Ajax. Escolha, na seção Output Type, a opção Silverlight Deep Zoom. Na seção Image Settings escolha a opção Export as a Composition (Single Image). Clique, então, no botão Export.

5 TESTE Após a geração do conteúdo será exibida uma janela. Clique no botão Preview in Browser. O navegador será aberto com o aplicativo em Silverlight prontinho. Use os botões no canto inferior direito dele para navegar e dar zoom nas imagens. Vale lembrar que também é gerado um projeto para Visual Studio. Com ele, podem ser criados eventos quando o usuário aproxima-se de uma imagem, entre outras formas de interação.

http://memorabilia. hardrock.com/

72 I DI C AS INFO IN FO

DeepZoom-Mat24.indd 72-73

DIC A S INFO I 73

05.06.09 21:57:00

http://memorabilia. hardrock.com/

72 I DI C AS INFO IN FO

DeepZoom-Mat24.indd 72-73

DIC A S INFO I 73

05.06.09 21:57:00

tutoriais I sothink quicker

FOTOS NO ESTILO FLASH Os fãs do programa da Adobe podem usar um shareware para criar aplicativos em Silverlight POR ERIC COSTA

estilo mais voltado à programação do Silverlight pode assustar os fãs do Flash que estão acostumados com uma forma mais visual de desenvolvimento. Para eles, a ferramenta Sothink Quicker for Silverlight é uma opção prática para criar programas em Silverlight com uma interface semelhante à do Flash. Veja, a seguir, como instalar esse software e criar um show de slides simples nele.

E INSTALAÇÃO 1 DOWNLOAD Comece baixando o shareware Sothink Quicker for Silverlight em www.info.abril.com.br/download/5735.shtml. A instalação do programa não exige qualquer configuração especial, mas lembre-se de que é preciso ter instalado anteriormente pelo menos o .Net Framework 3.5 (www. info.abril.com.br/download/4700.shtml) e o plug-in Silverlight (www.info.abril.com.br/download/4809.shtml).

CRIAÇÃO DO PROJETO 2 Rode o programa e clique no botão Continue para passar da janela de registro. Depois, pressione o botão New Project. Será preciso escolher entre dois tipos de projeto: aplicativo, com código na linguagem C#, ou web, em JavaScript. Escolha a opção Web e dê um nome ao projeto. Pressione o botão OK para entrar na interface do Sothink Quicker, que é bastante parecida com a do Adobe Flash.

74 I DI C AS I N FO

SothinkQuicker-Mat25.indd 74

05.06.09 21:57:36

DAS FOTOS 3 CARGA Acesse File > Import to Library. Escolha todas as imagens que serão usadas no show de slides e clique em Abrir. Note que as fotos aparecem no canto inferior direito da janela do Sothink Quicker, na guia Library. Agora, arraste uma das fotos para a área de desenho.

E 4 FRAMES KEYFRAMES Clique no botão Transform (ou tecle Q) e mexa no tamanho da imagem, de forma que ela caiba na área de desenho. Depois, clique no ponto 25 da linha do tempo e acesse Insert > Frame. Clique no ponto 26, acesse Insert > Keyframe, apague a imagem original e arraste a segunda foto. Repita o processo para as outras fotos, sempre com um intervalo de 25 frames entre elas. Se quiser um efeito entre as fotos, uma opção simples é clicar com o botão direito entre os intervalos e escolher Create Motion Tween. Nesse caso, a foto será ampliada sucessivamente até a troca pela próxima imagem.

E PUBLICAÇÃO 5 TESTE Para testar a animação, clique no ponto 1 da linha do tempo e acesse File > Play > Play. Serão exibidos os frames em sequência. Se tudo estiver OK, acesse File > Export Movie para gerar a página em Silverlight. Note que é gerada, além da página HTML e arquivo de código em JavaScript, uma definição da interface em XAML, que pode ser modificada no Microsoft Blend, para inclusão de outros elementos. Mas basta o upload de todos os arquivos gerados para que a animação funcione de forma correta.

D I C AS I NFO I 75

SothinkQuicker-Mat25.indd 75

05.06.09 21:57:45

tutoriais I jogo

DA NAVE 3 OIMAGEM próximo passo é adicionar a imagem da nave. Para isso, use um desenho preferencialmente em formato PNG e com a área externa à nave em cor transparente. Na seção Solution Explorer, clique com o botão direito no texto Primeiro Game e escolha Add > Add Existing Item. Localize a imagem da nave e clique em Abrir. Depois, entre as tags <Canvas> e </ Canvas>, digite o código abaixo:

GAME SOB CONTROLE D

Aprenda a movimentar objetos e a interpretar teclas digitadas, recursos úteis na criação de jogos POR ERIC COSTA

esenvolver jogos em qualquer plataforma demanda bastante tempo, além de criatividade. Mas vários conceitos básicos podem ser aprendidos rapidamente, como o tratamento de eventos relacionados ao teclado, além de movimentação de objetos na área de desenho. Neste tutorial vamos fazer essas duas operações no Silverlight, dando os primeiros passos na construção de um game. Confira o passo a passo, a seguir.

TRATAMENTO DO TECLADO 4 A seguir, é preciso criar um evento para detectar a digitação no teclado e movimentar a nave de acordo com o que for pressionado. Para isso, tecle, ao final da tag <UserControl>, o texto KeyDown=. Note que surge um menu. Clique na opção New Event Handler. Com isso, é criada uma função, denominada UserControl_KeyDown, na área de código do programa que poderá ser modificada para responder ao que for digitado.

EVENTO 5 NOVO Agora, vamos mudar a função que trata o evento criado acima, de forma a movimentar a nave com as setas do teclado. Abra as opções no item Page.xaml e clique duas vezes no arquivo Page.xaml.vb. Digite o texto abaixo na função UserControl_KeyDown:

PROJETO 1 NOVO Abra o Visual Studio 2008 e acesse File > New Project. Escolha, do lado esquerdo da janela, a opção Silverlight. Do lado direito, marque o item Silverlight Application. No campo Name, tecle o texto Primeiro Game e clique em OK. Na janela seguinte escolha a opção Automatically Generate a Test Page to Host Silverlight at Build Time e pressione o botão OK.

DE DESENHO 2 ÁREA Na seção de código XAML modifique os valores de Width e Height na tag <UserControl> para os valores 640 e 300, respectivamente. Note que o Visual Studio reflete as mudanças na área de desenho automaticamente. Depois, mude o texto em Background, na tag <Grid>, para White. Com isso, o fundo da área de desenho fica branco sem ter conflito com as imagens que usaremos no game. Você pode mudar a cor de fundo conforme os tons dos elementos que serão utilizados no jogo. Por fim, digite o código abaixo dentro da área da tag <Grid>:

<Canvas x:Name="cnvAreaJogo" Width="640" Height="300"></Canvas> 76 I DI C AS IN FO

Jogo-Mat26.indd 76-77

If (e.Key = Key.Left) Then Canvas.SetLeft(imgNave, Canvas. GetLeft(imgNave) - 10) ElseIf (e.Key = Key.Right) Then Canvas.SetLeft(imgNave, Canvas. GetLeft(imgNave) + 10) ElseIf (e.Key = Key.Down) Then Canvas.SetTop(imgNave, Canvas. GetTop(imgNave) + 10) ElseIf (e.Key = Key.Up) Then Canvas.SetTop(imgNave, Canvas. GetTop(imgNave) - 10) End If Com isso, a nave já pode ser movimentada com as setas do teclado. Se quiser, tecle F5 e faça um teste no browser.

DIC A S INFO I 77

05.06.09 22:24:08

tutoriais I jogo

GAME SOB CONTROLE D

Aprenda a movimentar objetos e a interpretar teclas digitadas, recursos úteis na criação de jogos POR ERIC COSTA

<Canvas x:Name="cnvAreaJogo" Width="640" Height="300"></Canvas> 76 I DI C AS IN FO

Jogo-Mat26.indd 76-77

DIC A S INFO I 77

05.06.09 22:24:08

DE FUNDO 6 DESENHO Vamos, então, definir um desenho de fundo, que será movimentado, dando um efeito de movimento. Use um arquivo da mesma altura (300 pixels) da área de desenho, mas bem mais largo, o que permitirá criar o efeito de movimentação posteriormente. Clique com o botão direito do mouse em PrimeiroGame e escolha Add > Add Existing Item. Escolha o arquivo para a tela de fundo do game e pressione Abrir. Depois, adicione o código abaixo para mostrá-lo na área de desenho, entre as tags <Canvas> e </Canvas>:

7 MOVIMENTAÇÃO Para completar nosso tutorial, precisamos movimentar a imagem de fundo criando a ilusão de que a nave está voando. Para isso, adicione a linha abaixo após o comando InitializeComponent():

AddHandler CompositionTarget.Rendering, AddressOf fundo_Rendering Depois, digite a seguinte função, antes do texto End Class:

Private Sub fundo_Rendering(ByVal sender As System.Object, ByVal e As System.EventArgs) Canvas.SetLeft(imgFundo, Canvas.GetLeft(imgFundo) - 1) If (Canvas.GetLeft(imgFundo) < -2110) Then Canvas.SetLeft(imgFundo, 0) End If End Sub

TESTE DOS ELEMENTOS 8

Agora, a nave e a tela de fundo estão prontas para serem usadas. Tecle F5 para fazer o teste final. Para publicar o exemplo, basta copiar o conteúdo da pasta indicada na URL do browser.

78 I DI DIC C AS I NFO N FO

Jogo-Mat26.indd 78

05.06.09 21:58:36

download I plug-ins

RECURSOS EXTRAS

Reduza o tempo de desenvolvimento usando bons componentes para Silverlight POR ERIC COSTA

a hora do desenvolvimento pode sair bem mais barato investir em um componente pronto do que gastar horas de várias pessoas

na criação de um recurso para o aplicativo. Há montes de opções interessantes de plug-ins para Silverlight na internet. Conheça, a seguir, algumas delas.

COMPONENTONE STUDIO FOR SILVERLIGHT ComponentOne Apesar do preço bem salgado, o ComponentOne Studio é uma opção bastante completa para agilizar o desenvolvimento em Silverlight. São nada menos do que 35 componentes no pacote, com opções básicas, como um controle para seleção de data em aplicativos, e itens mais poderosos, como o Gauges, que cria relógios, medidores e outros elementos com ponteiros. Outro componente interessante é o SpellCheck, que verifica a ortografia de textos e tem dicionário em português. Também há opções para facilitar o desenvolvimento de aplicativos para escritório, como caixas de edição de textos, geradores de gráficos e controles tabulares para relatórios e planilhas. SHAREWARE (800 DÓLARES)

28,97 MB

EM INGLÊS

www.info.abril.com.br/download/5731.shtml AVALIAÇÃO TÉCNICA

8,5

CUSTO/BENEFÍCIO

7,0

VISIFIRE Webyog O Visifire é uma ferramenta para adicionar gráficos animados a aplicativos Silverlight. Há dez tipos de gráficos, incluindo opções tradicionais, como barras e pizza. O mais interessante para os desenvolvedores é a possibilidade de alterar os dados em tempo real com animações instantâneas. Para quem só precisa de um gráfico rápido, o site do fabricante fornece um gerador automatizado que cria código HTML e XAML com um clique. Apesar de feito para as linguagens da Microsoft, o componente também funciona com PHP, Java e Ruby on Rails. LIVRE

974 KB

EM INGLÊS

www.info.abril.com.br/download/5732.shtml AVALIAÇÃO TÉCNICA

8,0

CUSTO/BENEFÍCIO

D I C AS I NFO I 79

Plug-ins-Mat27.indd 79

05.06.09 21:59:12

SVFX Cellbi Fazer efeitos simples manualmente é sempre uma chateação. Uma saída é usar um componente pronto, como o SvFx. Ele traz efeitos visuais como Fade, que apaga uma imagem ou texto gradualmente, Flashlight, que simula uma fonte de luz, além de opções para rotacionar elementos em todos os eixos e um recurso semelhante aos tweens do Flash. SHAREWARE (59 DÓLARES)

3,8 MB

EM INGLÊS

www.info.abril.com.br/download/5733.shtml AVALIAÇÃO TÉCNICA

7,5

CUSTO/BENEFÍCIO

6,8

SILVERLIGHT VIDEO PLAYER 1.05 Joel Neubeck Fazer um player de vídeo em Silverlight não é muito difícil, mas esse componente torna a operação ainda mais simples, dispensando a criação de botões e outros elementos. Há duas opções de player, uma com os controles básicos de vídeo e outra com escolhas de marcação de capítulos e adição de legendas. O ponto forte está no tamanho do download, o player mais simples tem incríveis 18 KB, sendo excelente para conexões lentas ou para utilização em aplicativos que já estejam pesados. FREEWARE

170 KB

EM INGLÊS

www.info.abril.com.br/download/5734.shtml AVALIAÇÃO TÉCNICA

7,2

CUSTO/BENEFÍCIO

80 I DI DIC C AS I NFO N FO

Plug-ins-Mat27.indd 80

05.06.09 21:59:28

novidades I silverlight 3

FOCO EM MULTIMÍDIA A versão 3 do Silverlight facilita o uso de animações e vídeos, além da instalação offline de aplicativos POR ERIC COSTA

esde a primeira versão, em abril de 2007, o Silverlight vem ganhando recursos interessantes, muitas vezes seguindo as inovações do Flash. A nova versão da tecnologia, com lançamento oficial marcado para julho, traz várias novidades interessantes, além de melho-

rias em recursos que já eram bacanas, como o Deep Zoom. Quem quiser testar o novo plug-in, que estava em fase de testes até o fechamento desta edição, pode fazer o download em www.info. abril.com.br/download/5730.shtml. Confira, a seguir, as principais novidades do Silverlight 3.

FORÇA NO ZOOM O recurso Deep Zoom, que já era um destaque no Silverlight 2, ganhou mais opções, incluindo a possibilidade de criação de links para um local determinado da composição de imagens (o que é chamado pela Microsoft de Deep Linking). É possível ver esse recurso no site PlayboyArchive ( http://playboyarchive.com/ ), onde uma página da revista pode ser enviada como um link para um amigo, que cai diretamente no ponto de zoom indicado.

D I C AS I NFO I 81

Silverlight3-Mat28.indd 81

05.06.09 21:59:57

CONTROLES MAIS PODEROSOS Os componentes para aplicativos Silverlight ficaram mais vitaminados, com possibilidade de aplicação de efeitos no código XAML, dispensando o desenvolvimento em VB ou C#. Basta adicionar um comando, como RotationY, para girar o objeto no eixo vertical. Também foram criadas funções para facilitar animações, de forma parecida com os tweens do Flash.

MAIS EXPRESSÃO O Expression Blend, aplicativo para design de interfaces para Silverlight, ficou ainda mais poderoso. Entre as novidades está a importação direta de imagens do Photoshop e Ilustrator, mantendo a estrutura de camadas desses arquivos, o que ajuda na criação de animações e efeitos. Outro ponto forte está no SketchFlow, que permite definir protótipos rápidos para demonstrar a funcionalidade de uma interface, com base em um diagrama de fluxo.

VÍDEO AO VIVO Além de adicionar suporte ao codec H.264 de vídeo e som em AAC, o Silverlight 3 também inclui a tecnologia Smooth Streaming, que ajusta, de forma dinâmica, a qualidade do vídeo à conexão de quem assiste. Para diminuir o peso da reprodução de filmes no processador do usuário há suporte à integração com placas de vídeo.

INSTALAÇÃO OFFLINE Seguindo a tendência do Adobe Air, o Silverlight 3 permite a conversão fácil de aplicativos da web para o desktop. Um ponto forte é a possibilidade de instalação diretamente do site sem precisar de plug-ins ou um download distinto. Até as atualizações podem ser instaladas de forma automatizada na próxima visita do usuário à página do aplicativo.

82 I DI C AS I N FO

Silverlight3-Mat28.indd 82

05.06.09 22:00:06