andré.santana [webdesign blog]

Archive for the ‘Flash’ Category

Adobe Flash CS3

A maior habilidade de quem trabalha com Flash é desenvolver um filme bem produzido, com um SWF muito enxuto. Existem várias estratégias que, em conjunto, deixam o seu SWF o mais enxuto possível. Veremos algumas dicas para otimizar seu filme:

  • Não use formas simples (primitivas), procure sempre agrupar as formas. Transforme tudo que for usar mais de uma vez no filme, em símbolos (gráficos, MC e Buttons). Assim é possível uma grande redução. Não faça dois botões que apenas mudem a posição (sobe e desce). Simplesmente use o mesmo símbolo para representar os sentidos com rotação para cada instância. Quando você cria um MovieClip, ele fica na biblioteca de seu filme e o Flash incorpora todos os cálculos vetoriais no SWF final, e cada vez que você usa uma instância desse MovieClip, o Flash apenas “linka” para o item da biblioteca, deixando seu filme mais leve.
  • Importe com o tamanho já finalizado todas as imagens que usar em seu filme. Nunca reescale uma imagem dentro do Flash pois o tamanho em Kbytes continuará o mesmo. Procure sempre deixar as imagens com compactação, mesmo que seja leve. Faça o tratamento de sua imagem fora do Flash, e deixe a resolução até 72 dpi. Acima disso é desperdício, pois não é percebido nos monitores.
  • Sempre que puder, substitua uma imagem por uma forma em vetor. Bitmaps contém muitos Kbytes de informação e aumentam bastante o tamanho do SWF.
  • Nunca “quebre” (converter em curvas) um texto, com raras exceções. Principalmente fontes com muitos detalhes. O vetor final ficará muito complexo e pesado. Na maioria dos casos, o ideal é incluir a fonte em seu SWF. Porém use com cautela. Sempre que usar fontes simples como Arial, Courier ou Times New Roman, procure sempre usar as fontes de dispositivos (_sans, _serif e _typewriter) pois não são incorporadas ao filme.
  • Sempre que tiver um vetor muito complexo, com muitos detalhes, curvas e nós, faça uma limpeza suavizando bordas e eliminando detalhes desnecessários. Quanto mais nós em uma forma, mais pesado fica seu SWF.
  • Reduza ao máximo o uso de sons. Quando necessário, use o formato MP3 e altere o modo de exportação na biblioteca, para o menor tamanho possível, desde que também não comprometa a qualidade mínima aceitável.
  • Sempre que possível, utilize o carregamento dinâmico de imagens, sons e vídeo, carregando-os externamente. Assim é possível reduzir consideravelmente o tamanho de um filme, pois os elementos serão carregados durante a navegação do usuário, evitando um preload demorado.
  • Evite, sempre que possível, o uso de gradientes (degradé). Sendo inevitável, use o menor número de cores que puder.
  • Evite usar Twenning Motion e Shape (principalmente) no filme. Desde que seja possível, troque esses recursos por Action Script, que além de mais flexível e rápido, possibilita uma redução considerável no tamanho do SWF, pois a animação é executada durante a execução do SWF (run-time). Você poderá, inclusive, criar efeitos que interajam com o internauta e não simples animações pré-definidas.
  • Procure usar a ferramenta Ímã (Snap to Objects) para unir todos os pontos de um objeto, pois se estes ficarem separados (abertos), o Flash tem mais trabalho na execução, tendo que fazer vários cálculos desnecessários.
  • Reduza o número de frames desnecessários no filme. Em vários filmes são esquecidos frames inúteis. Além de aumentar o tamanho do arquivo FLA, pode comprometer o processamento do filme e tamanho do SWF também.
  • Analise seu código Action Script e, se houver duplicações, crie funções para executá-las, principalmente quando houver grande quantidade de comandos. Lembre-se sempre que, quanto mais elementos existirem no seu filme, tão maior seu tamanho será.
  • Evite usar “Break apart” em imagens ou use com muito cuidado, pois em muitos casos o tamanho do arquivo acaba ficando maior que a imagem original, mesmo que se elimine as partes desnecessárias da imagem. Isto em função principalmente do número de pixels selecionado. Ao invés disso, faça os devidos cortes em um programa de imagem e importe a imagem já finalizada.
  • Faça filmes objetivos que tenham ligação direta com o site. Muitos desenvolvedores esquecem que o internauta, geralmente, busca informações e não quer perder tempo carregando coisas inúteis, por mais “legais” que possam parecer.
  • Evite animar tudo que existe no filme. Movimentos só devem ser usados, nos itens realmente úteis e que precisam chamar a atenção ou sejam parte fundamental do contexto de seu site.
  • Faça uma limpeza na biblioteca do Fla, eliminando tudo o que não foi usado no filme. Para facilitar, o Flash tem uma função na biblioteca que seleciona automaticamente os itens que não estão sendo utilizados em seu filme. Use a função para destacar os itens e exclua. As versões mais recentes do Flash ignoram automaticamente os itens não utilizados.
  • Divida seu filme principal (SWF) em filmes menores (vários SWF) e chame-os somente quando necessário. Isto agiliza o carregamento, diminui o tamanho da animação e só exibe o que o visitante desejar. Isto possibilita uma perfeita manutenção, agilização e redução no tamanho dos seus filmes.
  • Cuidado com o uso de variáveis. É muito comum para os iniciantes, usar variável para tudo e incluir diversas variáveis para fazer coisas semelhantes que seriam possíveis com a utilização de uma única. Isto é possível com um maior conhecimento de programação. Sempre que não necessitar usar novamente uma variável, delete-a para reduzir o “consumo” de memória RAM do micro. Um número elevado de variáveis pode travar o micro. Isto dependerá, é claro, da configuração de cada equipamento, recursos disponíveis, consumo da memória por programas rodando simultaneamente na máquina e complexidade de seu filme.
  • O Flash possui uma ferramenta poderosa chamada Shared Libraries. Você pode ter uma única biblioteca com elementos que você vá utilizar repetidamente em vários filmes. Cada filme fará um link do objeto para essa biblioteca compartilhada. Esse método é extremamente eficiente ao se trabalhar com fontes, botões, etc, e caso você precise alterar algum elemento, fará apenas uma vez, na biblioteca principal. Leia a documentação do Flash para saber como usar melhor essa ferramenta.
  • Textos escritos como comentários no FLA, não são incluídos no arquivo final SWF, isso porque ele tem por finalidade auxiliar a documentação do código e facilitar sua compreensão posterior. Não se preocupe com isso.
  • Aproveite sempre os efeitos das versões mais recentes. Sempre que precisar usar sombras, efeitos de blur, glow ou blending mode, ao invés de usar bitmaps para isso. Ainda há a vantagem de animar estes efeitos.

É isso aí pessoal. Com esse “pacote” de dicas é possível construir bases de sites completos em Flash com até míseros 60Kb, aproveitando ao máximo a otimização do SWF.

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

por Arthur Paredes

Anúncios
Tags: , , ,

O Flash já foi um alvo de muitas críticas, incluindo do famoso Jakob Nielsen, pai da usabilidade, sobre suas deficiências ao gerar conteúdos acessíveis.

Bom, a Macromedia, atualmente Adobe, contratou o próprio Jakob Nielsen, autor das maiores críticas, como consultor para melhorar o programa. O resultado foi o surgimento de um painel novo, além de novas características em outros painéis.

Vamos ver como utilizar estes painéis da forma correta, aplicando ao documento, menus e campos de texto.

Para este manual básico, estarei utilizando a versão CS3 do Flash, mas as mesmas ferramentas e painéis são encontradas nas versões MX 2004 e 8.

Acessibilizando o documento

Janela Document Properties

Para abrir esta janela, vá até o menu Modify > Document.

Para cada arquivo em Flash que for desenvolver, é importante que defina duas informações sobre o mesmo:

  1. Title – Este campo serve para determinar um título para o arquivo, uma informação breve, sobre o documento, como por exemplo: “Catálogo de Produtos”.
  2. Description – Neste campo faça uma breve descrição sobre o conteúdo do arquivo e seu propósito. Como por exemplo: “Conheça nossas linhas de produtos”.

Com o documento descrito, podemos começar a desenvolver nosso projeto, sabendo que já informará ao usuário que documento está acessando e qual o seu propósito.

Painel Acessibility

Com este painel, podemos gerar conteúdo acessível, fornecendo equivalentes textuais aos elementos utilizados no Flash.

Para abrir este painel, vá até o menu Window > Other Panels > Acessibility.

Acessibilizando Textos

Por padrão, o Flash permite o acesso a todos os elementos textuais para os leitores de tela. Não sendo necessário fazer nenhuma modificação. Mas é importante observar que as opções do painel Accessibility mudam de acordo com o tipo de Campo Texto que for utilizado.

Static Text (Texto Estático)

Se escrever qualquer texto utilizando o campo Static Text, vai encontrar no painel Accessibility apenas a mensagem: “Current selection cannot have accessibility applied to it” ou seja: “A seleção atual não tem acessibilidade aplicada a ela”, o que nos informa que não há opções a serem configuradas para ela, veja a Imagem 3 . Mas é importante deixar ativa a opção “selectable”, que possibilita a seleção do texto, isto permite que usuário selecione o texto e facilita a acessibilidade para alguns leitores de tela.

Static Text não possui configurações no painel Accessibility.

Dynamic Text (Texto Dinâmico)

Os campos de texto do tipo Dynamic Text, quando com a opção “Make object Accessible” ou seja “Torne o objeto acessível”, estiver ativada, permitirá ao leitor de tela ler exatamente o conteúdo escrito no mesmo. Mas se achar necessário poderá contar com mais duas configurações:

  1. Description (Descrição) – Utilize esta opção para definir uma pequena descrição do campo, o qual deve ser feita apenas se o campo necessitar de maiores explicações, o que na maioria das vezes não é necessário.
  2. Tab index (Ordem da Tabulação) – Utilizado para definir a ordem que o objeto será selecionado quando o usuário navegar utilizando as teclas TAB e SHIFT+TAB.

Opções de acessibilidade para Dynamic Text.Input Text (Texto de Entrada)

No campo de texto do tipo Input Text, configuramos o painel Accessibility da mesma forma que fariamos na linguagem (X)HTML, onde é indicado definir um “Name” – um rótulo para o campo de texto, para que o usuário saiba o que está preenchendo, e quando for necessário coloque uma descrição no campo “Description”, como por exemplo: “Campo obrigatório”.

Além destas duas opções ainda temos os campos:

  1. Shortcut – que serve para definir um atalho, um acesso rápido ao campo, o que é feito definindo uma letra ou número, como por exemplo: “A”. O atalho para o usuário será a tela ALT juntamente com a letra ou número definido, no nosso exemplo o atalho é “ALT + A”.
  2. Tab index – No caso de formulários é muito importante definir a ordem da tabulação para que o usuário tenha uma ordem lógica definida ao preencher os campos. Caso contrário ele ficará preso à ordem de criação dos campos.

Acessibilizando Buttons e MovieClips

O termo “etiquetar” é bem conhecido por quem desenvolve conteúdo acessível, que significa identificar textualmente um elemento, o que é feito no HTML com imagens através do atributo “alt” e no Flash é feito através do painel Accessibility.

Tanto os Buttons como os MovieClips tem que ser etiquetados, pois mesmo contendo campos de texto inseridos no seu corpo, é um elemento fechado e pode acarretar em não ser acessado pelo leitor de tela.Para demonstrar como etiquetar um menu de navegação, criei no Flash dois elementos utilizados para este fim, um Button, com a função de voltar e um MovieClip com a função de avançar.

A utilização do Symbol Button é para botões mais simples, sem uma animação maiselaborada, enquanto o Symbol MovieClip deve ser utilizado para botões animados e com aspectos visuais mais elaborados.

Acessibilizando um Button

O Button tem as mesmas opções que foram vistas nos campos de texto, então basta configuralo da mesma forma, mas é importante salientar a importância de determinar o rótulo do botão no campo “Name” do painel Accessibility, para este botão do exemplo o Name seria “Voltar” e nos casos que forem necessários determine a descrição no campo Description, aqui poderíamos utilizar: “Clique para voltar para o slide anterior”.

Para botões com a função de navegação de slides, como “Voltar” e “Avançar” é importante definir corretamente o Tab index e um Shortcut.

Para botões animados desenvolvidos com MovieClips, há apenas uma diferença no painel

Accessibility para os botões definidos pelo Symbol Button: a opção “Make child objects accessible”, ou seja, “Tornar os objetos filhos (ou internos) acessíveis”.

Acessibilizando um MovieClip

Neste caso, como o MovieClip pode, desde ter a simples funcionalidade de um botão até ter a função de recipiente de partes ou de toda uma animação, a opção “Make child objects accessible” permite que os elementos internos do MovieClip possam ser lidos pelo leitor de tela, os quais devem também estar com as suas opções de acessibilidade definidas.

por Carlos Tristacci

O objetivo de classificar é agrupar elementos de acordo com seu grau de semelhança, seja qual for a classificação. Podemos enxergar isso de forma bem simplificada na classificação dos números:

N = { 1, 2, 3, 4, 5 … }

O conjunto dos números naturais é uma classificação numérica tal que seus elementos são todos maiores que zero (característica comum a todos os elementos). Se somarmos qualquer um de seus elementos, o resultado sempre será um elemento do mesmo conjunto, e muitas outras características dessa classificação, ou conjunto.

Analogamente, quando criamos classes, estas podem possuir características comuns e, portanto, podem ser agrupadas num conjunto de outras classes que também possuam estas características. Veja:

class bicicleta
{

function bicicleta(){} //construtor
/*
… corpo da classe
*/
}

class carro
{

function carro(){}
/*
… corpo
*/

}

Analisando as classes, percebemos que ambas caracterizam veículos de transporte. Logo, poderíamos agrupá-las em um conjunto que possua classes desse tipo (veículos de transporte). Formalmente, estes conjuntos são chamados Pacotes de classes. Sintaticamente (em forma de código), definimos o pacote em que a classe está pela forma: “class nome_do_pacote.nome_da_classe”. Veja:

class transporte.bicicleta
{

function celular(){} //construtor
/*
… corpo da classe
*/
}

class transporte.carro
{

function carro(){}
/*
…corpo
*/

}

É importante lembrar que, se as classes pertencem ao mesmo pacote, então elas devem estar na mesma pasta, que deve possuir o mesmo nome do pacote. De acordo com o exemplo, as classes estariam organizadas numa estrutura de arquivos da seguinte forma:
– ClassPath
– transporte
carro.as
bicicleta.as

Herança entre classes

Biologicamente, os organismos herdam características de seus antecessores, para que haja um reaproveitamento de características evolutivas, e não precise desenvolve-las repetidamente, ou seja, o código genético é reaproveitado.

Assim como reutilizamos os código genético de nossos antecessores, em programação orientada a objetos existem relações de herança entre classes. Quando uma classe herda as características (propriedades e métodos) de outra, dizemos que a classe herdada é superclasse da classe que herdou.

Um exemplo simples de onde ocorre essa herança de características são os carros, os quais todos têm funções como frear, acender o farol, buzinar, acelerar, e outras características comuns de um carro normal. Então, não faz sentido refazer estas funções para todos os carros que são produzidos. Cria-se uma função padrão que todos os carros herdem. Sintaticamente, a herança se dá da seguinte forma:

Class carro_base
{
function carro_base(){}
function frear(){}
function acelerar(){}
/* … */
}

Class ferrari extends carro_base
{
}

Diz-se, então, que a classe ferrari herdou a classe carro_base, ou seja, reaproveitou as funções básicas de um carro. Agora todos os métodos da classe carro_base também pertencem a classe ferrari.

Casualmente, algum método herdado pode ser insuficiente, pode ser necessário implementá-lo:

Class ferrari extends carro_base
{
function acelerar(){
super.acelerar()
/*
Processos adicionais
*/
}
}

Neste caso, a função de aceleração de um carro normal não foi suficiente para a ferrari, então nós utilzamos a função de aceleração padrão e incrementamos com outros processos.

Quando queremos fazer referência à superclasse, devemos utilizar o keyword super.

Espero que tenha ajudado um pouco!

Abraços!

por Caio Meriguetti

O ActionScript vem, desde a sua primeira versão, estabelecendo um papel importante na navegação em websites, sempre na interação usuário – website, tornando-a mais atrativa e fácil. O objetivo aqui é mostrar como é feito, e deixar as análises para os usabilidoidos da internet.

Quando navegamos, é difícil não perceber a presença de aplicações em flash, que hoje são desenvolvidas formalmente de acordo com conceitos de POO – Programação orientada a objetos, bastante organizada e hierarquizada, fazendo com que haja uma otimização dos códigos.

Saber, conceitualmente, ActionScript é fundamental para um bom programador, tanto quanto saber na prática. Alguns conceitos básicos e muito importantes:

Classe

Uma classe pode ser definida como uma coleção de funções, que chamaremos de métodos, e propriedades. Um exemplo bastante simples é o ser humano, que possui funções (andar, falar, gritar, correr, e outras milhares de funções biológicas) e também propriedades (cor dos olhos, altura, peso, cor dos cabelos e qualquer outra que se possa definir). Assim como classificamos os objetos, os animais, os números, buscando simplificar o nosso processo de aprendizado e execução de certas tarefas, o ActionScript nos possibilta criar classes (classificações). Veja:

// arquivo humano.as
class humano
{
var cor_olho : String = “Azul”;
var altura : Number;
var peso : Number;
var cor_cabelo : String;

function humano()
{
// construtor da classe, este método é chamado quando você cria uma instância da classe
}
function andar ()
{
}
function falar ()
{
return “Olá, eu sou uma instância da classe humano”;
}
function gritar ()
{
}
}

Para definir uma classe, usa-se:

class nome_da_classe_sem_espacos{
//corpo da classe
}

As classes devem ser armazenadas em arquivos separados de extensão “.as”, e para acessar métodos e propriedades da classe você deve criar instâncias.

var inst_humano:humano = new humano(); // o método humano() da classe é chamado
trace(inst_humano.cor_olho); // retorna “Azul” no painel output do flash.
trace(inst_humano.falar()); // retorna “Olá, eu sou uma instância da classe humano” no painel output do flash.

Membros da classe

Qualquer definição dentro de uma classe ou é um método ou é uma propriedade, que, generalizando, podem ser chamados de membros, os quais podem ter tipos diferentes. Podem ser públicos (public), privados (private) ou estáticos (static).

Tipos de membros

Um membro público sempre pode ser acessado pela instância da classe, em contrapartida, membros privados não podem.

//carro.as
class carro
{
public var placa:String = “MM 0056”;
private var volume_tanque:Number = 30;

public function acender_farol(){
return 1;
}

private function queimar_gasolina(){
return 1;
}
}

Quando instanciamos a classe no flash:

var inst_carro:carro = new carro();

trace(inst_carro.placa); // neste caso, você consegue acessar a propriedade

trace(inst_carro.volume_tanque); // neste caso não, ocorre erro dizendo que membros privados não podem ser acessados.

E análogamente:

trace(inst_carro.acender_farol()); // neste caso você consegue acessar o método

trace(inst_carro.queimar_gasolina()); // neste caso não, ocorre erro dizendo que membros privados não podem ser acessados.

Existem também membros estáticos, os quais não exigem uma instância para serem acessados.

class carro
{
public var placa:String = “MM 0056”;
private var volume_tanque:Number = 30;

public function acender_farol(){
return 1;
}

private var queimar_gasolina(){
return 1;
}
static function getNumeroRodas(){
return 4;
}
}

Para acessar o método getNumeroRodas basta, sem criar uma instância, digitar:

trace(carro.getNumeroRodas()); // retorna 4

Essa regra serve também para propriedades estáticas.

Bom, é isso pessoal, espero que tenha ajudado um pouco com conceitos do ActionScript.

por Caio Meriguetti 

Flash CS3_icon

Para quem quer instalar o Flash CS3 em sua máquina, ai vai uma boa notícia:

A Adobe já está disponibilisando para download a versão trial.

Link para download:

http://www.adobe.com/go/tryflash

Enjoy it!  x]~

por André Santana 

Evento é um conceito extremamente útil e importante para o gerenciamento da interatividade em sistemas. Eventos acontecem a todo instante no momento da interação, quando o usuário clica em um botão, arrasta uma janela, move o mouse, dentre outras ações.

Analogamente à realidade, podemos citar o sistema nervoso humano que responde a cada interação com o nosso corpo com o ambiente. Neste caso, o sistema nervoso é que fica aguardando um evento ocorrer para, logo em seguida, avisar ao cérebro, e assim o cérebro poder responder.

Em programação orientada a objetos, o sistema de eventos é simples, existem objetos que disparam eventos (geradores de eventos) e outros que ficam na espera por eventos (escutadores de eventos). Um exemplo de objeto gerador de evento é um simples botão que ao ser clicado dispara um determinado evento.

No Actionscript, os eventos podem ocorrer de duas formas: um objeto dispara um evento para muitos outros (um para muitos) ou dispara um evento para um único outro objeto (um para um). A primeira forma é muito útil e importante quando temos que modificar vários objetos em função de uma ação específica, por exemplo, quando temos uma interface e queremos modificar vários elementos com apenas um clique, ou uma tecla apertada, a melhor forma de se fazer é utilizando um objeto que dispara o evento para muitos outros.

Na prática, o Flash possui uma classe nativa do pacote mx.events chamada EventDispatcher. Objetos que estendem esta classe são disparadores (ou dispachadores) de eventos, ou seja, são neles que os eventos ocorrem e em seguida são dispachados para um escutador.

// Classe disparadora de evento

import mx.events.EventDispatcher;
class disparador extends EventDispatcher {
function disparador() {
}
public function DisparaEvento() {
dispatchEvent({type:”evento”});
}
}

Depois de definida, quando você constrói um objeto desta classe, pode executar seus métodos normalmente, mas alguns métodos podem influênciar no sistema de forma abrangente, modificando objetos, alterando a interface, criando novos objetos ou qualquer outra consequência, neste caso definimos o método DisparaEvento que dispara o eveno chamado “evento”.

import disparador;
var disp:disparador = new disparador();
var listener1:Object = new Object();
var listener2:Object = new Object();
var listener3:Object = new Object();
listener1.evento = function() {
trace(“Listener 1”);
};
listener2.evento = function() {
trace(“Listener 2”);
};
listener3.evento = function() {
trace(“Listener 3”);
};
disp.addEventListener(“evento”, listener1);
disp.addEventListener(“evento”, listener2);
disp.addEventListener(“evento”, listener3);
disp.DisparaEvento();

Observe que, neste código, o objeto disp, ao executar o método DisparaEvento, influência outros 3 objetos (escutadores: listener1, listener2, listener3) de formas distintas. Um exemplo de caso em que podemos utilizar objetos escutadores é quando temos uma interface em várias línguas e quaremos modificar todos os elementos desta com apenas um clique (um disparador dispara um evento para vários listeners que modificam a interface).

Eventos de um para um são bem práticos e menos complexos. Quando temos um disparador que, ao disparar um determinado evento, implicam apenas uma conseqüência no sistema, utilizamos eventos de um para um. Veja:

class disparador2 {
public var onDispara:Function;
function disparador2() {
}
public function DisparaEvento() {
onDispara();
}
}

E para escutar o evento não é necessário criar objetos escutadores. Veja:

import disparador2;
var disp2:disparador2 = new disparador2();
disp2.onDispara = function() {
trace(“Disparou”);
};
disp2.DisparaEvento();

Download do arquivo de exemplo

por Caio Meriguetti 


Seja Bem-Vindo!

@andrehsantana

dezembro 2017
S T Q Q S S D
« abr    
 123
45678910
11121314151617
18192021222324
25262728293031

RSS Feeds Deliciosos

  • Ocorreu um erro. É provável que o feed esteja indisponível. Tente mais tarde.

Blog Stats

  • 240,991 hits