Flash + CSS + XML

[duduFigueiredo 0]

Eu tava dando uma pesquizada no F1(help) do flash,

e descubri um tutorial ensinando a usar "Style Sheets" do CSS, nos textos do flash,

dai eu resolvi fazer esse tutorial, que é só uma breve explicação de como

inserir um texto no flash usando XML e CSS style sheets.

 

Nivel: intermediário

Versão: só para MX2004

----------------------------------------------------------------------------------------------

// CSS

 

- Abra o Bloco-de-Notas(ou o seu editor de texto favorito) e digite o seguinte código:

 

titulo {

  color: #CC3300;

  font: Verdana;

  font-size: 17px;

  font-weight: bold;

  display: block;

}

 

intro {

  color: #333333;

  font: Verdana;

  font-weight: bold;

  display: inline;

  font-size: 10px;

}

 

base {

  color: #333333;

  font: Verdana;

  font-size: 9px;

  display: inline;

}

 

a:link {

  color: #CC3300;

  font-weight: bold;

}

 

a:hover {

  text-decoration: underline;

}

- Agora salve o arquivo como xml_styles.css

 

----------------------------------------------------------------------------------------------

//XML

 

- Abra o Bloco-de-Notas novamente e digite o seguinte:

 

<titulo>+Título</titulo>

<base><intro>Introdução </intro> -- Texto texto texto texto texto <a href='http://dudu.nopeter.com'>link</a>......</base>

<br>

<br>

<titulo>+Título</titulo>

<base><intro>Introdução </intro> -- Texto texto texto texto texto <a href='http://dudu.nopeter.com'>link</a>......</base>

- Na hora de salvar, slve como news.xml e seleciono o tipo de codificação como UTF-8. obs: salve na mesma pasta em que você salvou o arquivo .css.

 

----------------------------------------------------------------------------------------------

//Flash

- Crie um campo de texto dinâmico,(com tamanho +- 300x200) no campo "Instance Name" coloque: news_txt, selecione a opção "Render text as HTML"(botão com o simbolo <>) e selecione a opção "Multiline"

 

- Agora clique no 1º frame e coloque a seguinte ação:

var style_sheet = new TextField.StyleSheet();

var css_url = "xml_styles.css";

 

style_sheet.load(css_url);

style_sheet.onLoad = function(ok){

  if (ok) {

  var meuXML:XML = new XML();

  meuXML.load("news.xml");

  meuXML.onLoad = function(){

    _root.news_txt.text = meuXML

  }

  }

  news_txt.styleSheet = style_sheet;

}

- Agora salve como xml_CSS.fla na mesma pasta onde você salvou o arquivo .xml e o .css.

 

- Teste o seu swf(Ctrl+Enter) e veja o resultado.

 

Pronto, agora você pode alterar as configurações do texto, editando o arquivo xml_styles.css, e modificar o texto, editando o arquivo news.xml; no arquivo .fla use sua criatividade, use como você quiser....

 

VISUALIZAR

DOWNLOAD

 

Abraços...

[Uriel Juliatti 0]

Que tutorial maravilhoso!!!!!

[weverson 0]

Muito bom! Parabéns!

[Sofrikarm 0]

E como se faz isso com duas ciaxas de texto?

[Martin Fabichak 0]

E como se faz isso com duas ciaxas de texto?

Apenas adicione o mesmo stylesheet para outro campo de texto...

(ou entao repita tudo para criar outro stylesheet)

 

Esse tutorial em AS3 seria um pouco diferente... se quiserem posso fazer algo =)

[Marcelo Kubart 0]

E como se faz isso com duas ciaxas de texto?

Apenas adicione o mesmo stylesheet para outro campo de texto...

(ou entao repita tudo para criar outro stylesheet)

 

Esse tutorial em AS3 seria um pouco diferente... se quiserem posso fazer algo =)

 

Me diz uma coisa no flsh cs 3 como faço pra fazer isso?

 

tentei o seu tuto mas não deu certo!!

 

Muito Obrigado

[Marcelo Kubart 0]

Fiz o tuto, mas algo deu errado,

 

Aqui está o arquivo compactado: http://www.goufer.com.br/texto.rar

 

Se alguém puder me ajudar

 

Muito obrigado!

[brcontainer 16]

Esse tutorial em AS3 seria um pouco diferente... se quiserem posso fazer algo =)

Seria bem diferente ;)

 

para fazer funcionar você deve definir como ActionScript2.0 o seu flash.

Recomendo estudar AS3.