Simples. Não importando a maneira como se implementa o Flash no site, ele deve ter seu wmode setado para transparent. Veja abaixo duas maneiras bastante usuais da resolução do problema:

Modo 1

Se a chamada do Flash for via JavaScript sem parameters no código HTML basta implementar o código ‘wmode’,'transparent’ em algum ponto da chamada da função, como abaixo:

<script type="text/javascript"><!--mce:0--></script>

Modo 2

Se a chamada do Flash contiver parameters no código XHTML, fica da seguinte maneira:

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

Já em HTML 5, a diferença é que não há o fechamento da tag nela mesma. Veja abaixo:

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

Com isso, os arquivos Flash sempre aparecerão atrás dos Lightboxes e variantes do mesmo efeito.
Abraços!

   Enviar artigo em PDF   

Que desenvolver em Flash é legal, todos sabem. Que sites em Flash são legais também. Quem desenvolve para a Web muitas vezes tende a optar pelo Flash pela sua riqueza em visual e vasta quantidade de recursos, mas muitas vezes acaba se esquecendo de detalhes básicos… antes, durante e depois do desenv0lvimento.

Exponho isso diversas vezes em treinamentos, e são detalhes que aprendi com pura e simples observação. No meu desenvolvimento e principalmente no dos outros. Sim, pois não se aprende Flash apenas desenhando, animando, e sim observando outros trabalhos, vendo técnicas novas de animação, etc.

Veja os principais cuidados que devemos ter ao trabalhar com Flash:

1 – Seu cliente precisa?

Um site em Flash pode ser bem mais caro que um site institucional (bom, isso é assunto para horas, pois cada profissional tem sua forma de cobrar), mas acima disso, será que o seu cliente precisa de um site em Flash? Quais são as reais necessidades do seu cliente?

É importante considerar esse ponto, pois um site que não atenda às expectativas do cliente logo é substituído, e provavelmente seu desenvolvedor também. Transparência e honestidade são extremamente importantes para o profissional Flash, principalmente ao indicar a tecnologia a ser utilizada. Faça o papel de consultor, e oriente o cliente em relação a isso. Em uma discussão franca com seu cliente conquiste sua confiança, e faça-o permitir apontamentos e sugestões. Uma boa técnica para isso é estudar seu público-alvo.

Pense no seguinte: você atenderá uma empresa cujo foco é a classe C. Você oferecerá um site em Flash simplesmente por ele ser “bonitinho”?

2 - Flash não é pesado, mas pode se tornar pesado.

O que pesa mais? Uma animação Flash de 80 kb ou uma fotografia de 80 kb? É a mesma que perguntar sobre o quilo de chumbo ou algodão. São a mesma coisa!

Porém há uma incidência direta do Flash sobre o vídeo da máquina do usuário. Uma animação Flash com uma bolinha subindo e descendo é uma coisa. Duas bolinhas ao mesmo tempo exigem mais processamento da máquina do usuário. Três bolinhas mais ainda… e quatro, e cinco… e isso sim torna-se pesado! Não pelo peso do arquivo, mas da necessidade de alto processamento vindo dos recursos de vídeo da máquina do usuário. Tente falar com seu amigo jogando uma bolinha para o alto. Depois duas, depois três… e então você não fala mais! Só se concentra. É o mesmo processo.

3 – Maldito botão direito.

Várias vezes testei sites na frente de alunos. Várias vezes peguei erros. Várias vezes apontei, zombei e ensinei.

Não sou perfeito, mas o botão direito de uma animação em Flash eu travo. Sempre. Já peguei sites onde o botão direito do mouse está destravado na aplicação Flash e o usuário consegue dar zoom no mesmo, desfigurando assim o site, o banner, o floater, o menu, ou seja lá o que for. É péssimo, e não é acessibilidade. Para tanto, no primeiro frame do seu site em Flash, utilize o código que trava o botão direito do mouse. Segue abaixo as duas versões de código:

A – ActionScript 2.0

Stage.showMenu = false;

B – ActionScript 3.0

Stage.showDefaultContextMenu = false;

E lá se vai o seu usuário sem dar zoom no seu site…

4 – Qual velocidade eu uso no Timeline?

http://www.eduardolacorte.com.br/2009/04/27/velocidade-do-timeline-em-um-arquivo-flash/

5 – Quero fazer um portal em Flash.

Inviável. Portal geralmente é acessado por diversos tipos de públicos, e não são todos que têm acesso a boa tecnologia, como internet rápida, computador bom e outros. Vá para o XHTML. Já teve universidade que fez isso e não durou muito tempo…

6 – E trilha sonora em site?

Vai de cada um. Certa vez passei horas escolhendo uma trilha sonora para uma animação que eu havia feito para a Ellemento, e depois de terminar mandei o link para um grande amigo meu avaliar, como usuário mesmo. A avaliação dele foi a seguinte: “Cara, gostei muito, só não gostei do som.”

Claro, perguntei o porquê. E a resposta: “É que eu já entro na Internet ouvindo música, e sites com música atrapalham o que estou ouvindo.”

É de se pensar…

7 – Qual a medida ideal para um site em Flash?

Não há medida ideal, e sim medida ideal para projeto a ser executado. O site será direcionado para qual público? Lembre-se que a resolução de 800 x 600 já está praticamente descartada. Outro fator a considerar é que os browsers não são iguais, e os usuários os utilizam de maneiras diferentes, com barras de ferramentas diferentes, dando então alturar diferentes.

Pessoalmente gosto de utilizar 980 x 550, pois desenvolvo para o público que usa no mínimo 1024 x 768 px na resolução de tela. E rolagem liberada, pois não sei o que o usuário tem no navegador dele. Avaliar altura é sempre complicado…

8 – E peso? Há peso ideal?

Não. Há bom senso. Você colocaria no ar um site de 2 MB para ser baixado pelo seu usuário? Ele está cheio de recursos? O que é realmente importante manter? Esvazie-o, elimine animações, deixe o seu site o mais objetivo possível. Certamente você atingirá para o primeiro carregamento algo em torno de 500kb a 1 MB, o que considero sim, IDEAL.

9 – Posso fazer o menu do meu site HTML em Flash?

Pode, mas não deve. O Flash inibe a apresentação do link na barra de status do browser do usuário, e muitos usuários consultam esse setor para saber precisamente para onde estão indo. O Flash não passa essa informação ao browser, o que pode gerar certa desconfiança no seu usuário. Site em HTML, menu em HTML. Não cabe Flash a esse setor.

10 – Filtros no Flash exigem cuidados também?

Sim. Tendem a deixar a animação mais lenta. Faça um teste aplicando um efeito do tipo Blur em uma palavra (desde que devidamente criada como Movie Clip), onde a mesma irá aparecendo aos poucos com Motion Tweening. No Flash ela terá o efeito desejado, mas no browser seu surgimento ficará mais lento. Evite grandes efeitos, seja prático e direto. É melhor.

—

Bom, essas foram algumas dicas que eu quis passar. Existem várias outras, que devo ir postando aos poucos. Mas espero que essas dez dicas acima o auxiliem em seu desenvolvimento Flash. Perceba que a grande maioria não passa de análise e bom senso. No Flash são fundamentais.

Grande abraço! Principalmente para a minha mãe, pelo seu aniversário! Um grande beijo, mãe… amo você! (ficou meio Xuxa, mas tudo bem… rs)

   Enviar artigo em PDF   

Porém, podemos abrir mão desse conceito de TV / Cinema x Frames por segundo, passando a pensar em qualidade e simplesmente trabalhando com outras velocidades que viabilizem melhor animação. Qual tal SESSENTA frames por segundo?

Vamos tomar como exemplo uma animação de uma janela aparecendo na tela. Pelo nosso briefing ela precisa de 2.5 segundos para aparecer completamente na tela. Efeito simples… de alpha 0% para 100%, por exemplo. Ou deslocamento de um ponto a outro.

Com a velocidade de 12 frames por segundo no seu arquivo você precisará de 30 frames para executar essa animação. Logo, serão 30 passos ou 30 estágios de evolução da sua animação.

Já com a velocidade de 30 frames por segundo a coisa melhora um pouco no quesito qualidade, justamente porque você passará a utilizar o dobro de passos para a mesma animação, pois para executá-la em 2.5 segundos você precisará de 75 frames!

Imagine agora a mesma animação a 48 frames por segundo, e 120 frames no Timeline. É a quantidade necessária de frames para atender àqueles 2.5 segundos do briefing.

Mas o meu frame rate (taxa de frames) preferido é 60 frames por segundo. Eu utilizaria 150 frames para obter a mesma animação, atendendo aos 2.5 segundos.

Veja as imagem abaixo e entenda onde está a explicação disso:

Perceba que cada contorno é um passo da animação (visualizada com Edit Multiple Frames e Outlines na opção da camada). Quanto mais distante um passo se encontrar do outro, maior será o pulo entre eles. E somando isso à baixa velocidade do arquivo, o efeito de travamento na sua animação será dado como certo.

O objetivo é aplicar um efeito de deslize perfeito, por isso mais intervalos dentro do mesmo espaço são imprescindíveis. Realize o teste com motion ou shape na sua animação (independente) e tire suas próprias conclusões. Ao longo da sua experiência com Flash você ouvirá perguntas como:

“A quantidade de frames por segundo aumenta exponencialmente o tamanho do meu arquivo?”
Resposta: Não. Ela acrescenta sim, algo a mais, mas nada relevante, pois para o Flash é mais importante a quantidade de desenhos e imagens, e não a velocidade do mesmo.

“A quantidade de frames por segundo pode interferir na execução da aplicação na máquina do meu usuário?”
Resposta: Sim, pois serão mais passos de animação. Porém, convém analisar o público-alvo antes de aplicar a técnica. Se for um site voltado para um público que não tem problemas com maquinário, tudo bem. Senão, convém partir para a web estática e deixar o Flash um pouco de lado. Ou então trabalhar com uma velocidade baixa para atender o público com menor acesso a bom maquinário. Banners a serem exibidos em portais, por exemplo, CONTRATUALMENTE têm seus frame rates reduzidos. O Terra, por exemplo, solicita o banner com a velocidade fixada em 18 frames por segundo.

“Ouvi dizer que a visão humana capta 24 posições por segundo. E se eu usar mais do que isso no Flash?”
Resposta: Estamos falando de qualidade, não de Leis da Física, Ótica, seja lá o que for. O assunto é qualidade de animação, não passagem de mensagem subliminar, o que a visão humana capta ou não. Ela captará qualidade na animação, e isso é inquestionável.

Bom, pessoal, é isso aí. Além de ser um momento “Para refletir”, é também uma boa dica de uso do Flash, e também uma opinião pessoal, de que devemos focar em qualidade, não em Leis da Física ou processamento. Um post 3 em 1… que beleza!

[]‘s!

   Enviar artigo em PDF   

Que o Flash é um software de animação todos sabem. Que aprender Flash sozinho é complicado todos sabem. Inclusive eu. =)

O Flash trabalha com uma Linha do Tempo (Timeline), que sempre anda pra frente, e pode ser trabalhada de maneiras diferentes. Decidi então escrever uma matéria sobre os comandos básicos que podem ser aplicados nesse Timeline, o que costuma ser dúvida entre muitos principiantes. Creio que o domínio sobre os principais comandos do Timeline ajudam e muito na evolução do uso desse software “estúpido” da Adobe!

Para começar, veja a imagem abaixo:

Agora, uma relação dos principais atalhos de teclado que você deve saber para trabalhar de maneira simples com o Flash CS4:

• Insert Frame (Inserir Frame): F5
• Insert Keyframe (Inserir Quadro-chave): F6
• Insert Blank Keyframe (Inserir Quadro-chave em branco): F7
• Copy Frames (Copiar Quadros): Ctrl + Alt + C
• Paste Frames (Colar Quadros): Ctrl + Alt + V
• Clear Keyframe (Limpar Quadro-chave): Shift + F6

Veja também uma pequena lista de comandos de mouse que podem ser executados:

• Botão direito em qualquer frame: Surgirá uma lista de comandos para operações rápidas (Criar animação, Recortar frames, colar…)
• Clicar em um frame que não esteja selecionado: Seleciona o mesmo (óbvio…)
• Clicar em um frame que não esteja selecionado, segurar, arrastar e soltar: Seleciona uma quantidade maior de frames
• Voltar a clicar em frames previamente selecionados com o comando acima: Desloca esses frames para outra posição, com o objetivo de acelerar / retardar uma animação
• Clicar fora (ou Esc, o correto…): Tira a seleção dos objetos ou frames

Bom, passados os principais comandos, vamos a um exemplo simples de uso:

- Desenhe um quadrado no seu palco, de qualquer medida, com qualquer cor, em qualquer posição.

- No painel Timeline, clique no frame 30 (não no número, e sim no frame) e pressione F6. Você terá inserido um Keyframe.

- Clique nele e realize uma edição qualquer (troca de cor, por exemplo). Ele estará diferente dos anteriores. Pressione Ctrl + Enter para testar a sua animação.

- Caso você queira prolongar a minha animação basta clicar uma vez no frame 30 e soltar. Clique novamente, segure e arraste o frame mais para frente, e solte onde desejar.

- Para realizar mais passos de animação basta continuar o trabalho pressionando F6 para criar os intervalos e as edições. Nesse ponto vale lembrar que SOMENTE É POSSÍVEL REALIZAR EDIÇÕES EM KEYFRAMES. Então, caso queira realizar uma edição em um local que seja um frame simples, basta transformá-lo em um Keyframe, com F6.

- Caso queira transformar um Keyframe em Frame, pressione o botão direito sobre o Keyframe em questão e escolha a opção “Clear Keyframe”.

- Caso queira inserir um Blank Keyframe em algum ponto da sua animação, pressione F7. O Blank Keyframe serve para criar espaços na sua animação, com o intuito de fazer com que uma animação comece depois, ou haja um intervalo entre duas animações.

- Agora, observe a imagem abaixo:

- Na camada Cenário foi pressionado F5 no frame 30, para que o fundo da animação fosse apenas prolongado, para o caso de uma futura edição todo o conteúdo ser facilmente atualizado através do primeiro frame apenas. Apenas usamos o F5 em caso de não haver animação futura naquela camada.

- Na camada Círculo foi elaborada uma animação que começa no frame 1, vai até o 15 quadro a quadro e se estende até o 30 com F5.

- Na camada Ellemento foi elaborada uma animação que começa no frame 20, onde foi pressionado F7 para marcar o seu início, e do frame 20 pra frente foi feita uma animação quadro a quadro também, com o auxílio do F6.

Os recursos de mouse que expliquei mais acima são usados para manutenções, como deslocamento de animação (para que ela comece mais para frente ou mais para trás), remoção de frames em excesso (botão direito na área desejada – Remove frames), desistência de ter um Keyframe em determinado local (Clear Keyframe), etc…

É questão de muito treino, por isso recomendo a animação de um boneco, com um braço em cada camada, uma perna em cada camada.

Para editar vários frames ao mesmo tempo:

Usa-se o recurso Edit Multiple Frames, presente também no painel Timeline, no local indicado na figura abaixo:

Ao clicar na opção citada acima, duas alças (Onions) aparecerão acima dos frames, no Timeline, e é o ajuste delas que permitirá a edição daquele setor por completo, bastando fazer uma seleção simples de objetos (Ferramenta Seleção) para poder selecionar também os frames que estiverem compreendidos entre os onions.

OBS: Extremamente recomendável desabilitar a opção Edit Multiple Frames ao término do uso.

[]‘s a todos os principiantes de Flash, e boa sorte nos estudos! Vale a pena! =)

   Enviar artigo em PDF   

Máscara é um recurso bastante utilizado por profissionais do Flash, mas ao mesmo tempo é um recurso bastante simples de ser criado e explicado. É um dos meus recursos preferidos, por se tratar de um efeito que tem muitas vertentes de uso.

Veja abaixo como vou tratar esse assunto:

- Configure o arquivo para fundo preto, velocidade de 30 fps (frames por segundo). Para isso vamos pela forma mais fácil, através do painel Properties (Ctrl + F3).

- Selecione a ferramenta Oval (O) e faça um círculo sem contorno fora do palco, na cor que desejar.

- Com a ferramenta seleção (V), selecione o círculo e alinhe-o verticalmente ao centro em relação ao palco, através do painel Align (Ctrl + K)

- Com o círculo ainda selecionado, selecione o círculo e pressione F8, para salvá-lo com o nome de Luz, sendo um objeto do tipo Gráfico. Adote como padrão a opção Registration ao centro, até obter maiores explicações sobre o que é isso (outros posts…).

- De volta ao palco, no painel Timeline, vá ao frame 60, pressione F6 para a inserção de um Keyframe* e desloque o objeto para a outra extremidade do palco.

* Keyframe: Quadro-chave, cópia do quadro-chave imediatamente anterior.

- Ainda no painel Timeline, com o botão direito no primeiro keyframe, clique na opção Create Classic Tween, para aplicar a interpolação de movimento. Até o Flash CS3 essa opção era conhecida como Create Motion Tween.

- Dê à camada o nome de Luz, e crie uma nova camada com o nome de Palavra.

- Com a ferramenta texto em Static Text e a configuração do texto com a fonte desejada e um tamanho aproximado ao da altura da Luz, escreva a palavra Ellemento (tá, marketing… rs), pinte-a de preto e dê o mesmo nome à camada. Os contornos na palavra são apenas a opção Outlines habilitada. Desconsidere-as. Alinhe a palavra ao centro da tela.

- Teste o filme (Ctrl + Enter). A luz deverá passar por trás da palavra.

Bom, agora vamos à mascara:

- Com o mouse em cima do nome da camada superior (Ellemento), clique com o botão direito, e habilite a opção Mask.

- Os ícones das camadas mudarão, conforme a figura abaixo:

- Teste o filme (Ctrl + Enter). O resultado deverá ser como o da imagem abaixo:

- Salve o arquivo como máscara.fla e gere o swf novamente através do Ctrl + Enter. Está pronto para ser inserido em alguma página HTML.

Em resumo: Máscara não passa de inversão do campo de visão. O que não víamos passamos a ver, e o que víamos se torna oculto. No exemplo construído não conseguíamos ver a luz por trás da letra, e com a máscara só vemos o que estava por trás da letra. A mesma coisa acontece com um quadrado em cima de uma imagem. Sem máscara o quadrado tapa a imagem, e com o quadrado ele mostra a imagem. Para editar a máscara, basta tirar os cadeados das camadas. Simples, não?

Até!

   Enviar artigo em PDF