Exibir páginas em html com o componente TextArea do FlashMX2004
por Maxwell Dayvson
Nesta matéria
vamos aprender como exibir páginas em html com imagens no formato
.jpg e também arquivos .swf, em componente TextArea com
barra de rolagem dentro do Flash usando classe LoadVars. Com poucas
linhas de código.
Neste
filme teremos duas layers a layer actions que irá conter todo o
nosso código e a layer campo que terá o nosso componente
Text Area. Vamos arastar do nosso painel components o componente TextArea
como mostrar a figura abaixo.
Após
ter inserido o componente TextArea no Stage vamos dimensioná-lo
vou ajustá-lo para o tamanho que preciso. Clique no componente
e vamos agora instaciá-lo com o nome de texto, clique na aba parameters
e vamos vamos habilitar como "true" a propriedade HTML, e também
a wordWrap para a quebra de linha automática. E finalmente vamos
para os códigos :)
Poderiamos
aqui pelo código mesmo habilitar a opção de HTML
e wordWrap sem a necessidade de alterar as propriedades do componente
da seguinte maneira:
texto.html
= true;
texto.wordWrap = true;
Mas
como já definimos no componente, vamos deixar como está,
eu particularmente uso pelo código, mais para todos os efeitos
é interessante que agente possa ver as opções que
tem no componente TextArea. Vamos usar a actions, que anteriormente no
Flash MX era não documentada que serve para mostrar caracteres
especiais como acentos, que no Flash MX 2004 tornou-se documentada.
System.useCodepage
= true;
Vamos
criar uma função chamada "carregaPagina",
ela será a responsável pelo carregamento do nosso arquivo.htm
que será passado como argumento nesta função
carregaPagina
= function (arquivohtm) {
};
O
próximo passo é criar uma instância da classe "LoadVars",
precedido da keyword "var", fazendo isso você está
dizendo que o objeto só vai estar presente na função.
var
meu_lv = new LoadVars();
Aplicamos
ao componente a propriedade "condenseWhite" para dar
suporte a quebra de linhas e vários espaços no html ex:a
tag <br>, por possuir valor boleano, esta propriedade será
"true" ou "false" - para todos os efeitos
caracterizamo-as como "true".
texto.condenseWhite
= true;
Agora
carregaremos nossa página passada pelo argumento, para tanto, usaremos
a propriedade "load"
meu_lv.load(arquivohtm);
Iremos
agora criar uma função apartir de um evento chamado "onData".
O onData pede um parâmetro para a função. Este parâmetro
vai receber todos os dados que foram carregados do arquivo htm. Por isso
basta atribuir texto.text para dados. É como se agente incluisse
um texto lá dentro mesmo só que vai ser interpretado como
html. Vale salientar que usando o metódo onData ao invez, de onLoad,
você não precisa criar uma variável no arquivo que
vai ser lido. Como é necessário usando o metódo onLoad.
meu_lv.onData
= function(dados) {
if (dados) {
texto.text = dados;
} else {
texto.text = "Ocorreu algum
erro no processo de leitura dos arquivos";
};
};
Logo
acima temos uma condição "if", dizendo
que, caso o nosso campo de texto seja "dados", que é
um parâmetro da função, o texto vai receber o valor
de nossa página.
E
por último vamos executar nossa função passando como
parâmetro o nome da nossa página htm, que por coincidência
tem o nome de pagina.htm
carregaPagina("pagina.htm");
E,
finalmente, caracterizado e exemplificada a parte que diz respeito ao
Flash. Foi facil não ?! :)
Vamos
agora saber como criar nossa página em html.
O que deve ser feito é retirar todas as tags como <html><head><title><body>.
Para isso eu irei usar o Dreamweaver MX, mais você pode usar o seu
editor favorito, caso não seja esse. Foi criado um texto, sem formatação
de fonte apenas definindo um tamanho pra mesma, eu usei 20 e uma cor,
para o titulo Macromedia Flash MX 2004 - Ponto Flash. Ai inseri uma imagem
.jpg e do lado um texto, que está sem formatação
de tamanho ou cor.
Depois Temos outro título chamado Truques e dicas:
que tem alguns truques e dicas, da página inicial do Ponto Flash
com seus respectivos links.
Por
último percebam aquele pedaço de imagem cortada, que o Dreamweaver
mostrar como se fosse erro no endereço da imagem, isso agora é
muito legal, porque o que foi feito aí foi um processo simples
de inserir uma imagem qualquer no Dreamweaver só que dessa vez
ao invez de mostrarmos o endereço de uma imagem vamos apontar para
um arquivo .swf vejam o código <img src="banner.swf">
Isso é necessário porque o nosso TextArea não irar
interpretar o flash inserido da forma normal, com o <embed>.
PS: Vocês devem está se perguntando porque ele não
utilizou tabelas e outros recursos do dreamweaver para a formatação
ficar melhor, o problema é que infelizmente o TextArea,
ou o TextField não suportam todas as tags do html e sim
algumas. :(
Espero que tenham aproveitado, na próxima matéria iremos
ver como aplicar estilo CSS no campo de texto, até lá..
Abraços a todos
Devido à reformulação implementada no site, pode ser que você encontre alguns links quebrados. Por favor, ajude-nos a corrigir eventuais problemas nos informando links quebrados
