DENIS CARAVALHO (85 pts)

ZECA BALA (45 pts)

RICARDO FIGUEIRA (33 pts)

GUILHERME G.G. (137 pts)

STICKMAN (155 pts)

AMAURY BENTES (123 pts)

RICARDO TEIXEIRA (40 pts)

ILVA RUDEV (90 pts)

DAAFY (55 pts)

SASHA GUDEY (235 pts)

ALEXANDRE PORTO (1281 pts)

MUZAK (45 pts)
Treinamento PontoFlash de Flash e ActionScript

Como desabilitar o botão direito do Mouse num executável?

Como criar um exemplo desenho livre, com botão para começar a desenhar e limpar?

Como abrir, de um menu em Flash, um HTML em outro frameset?

Como validar campos num formulário flash?

Como faço para um certo objeto seguir o mouse, mas não por toda a cena?

Como fazer uma animação com um texto sendo digitado?

Como coloco um nome de instância para um movieclip criado no linkage?

Gostaria de saber pra que servem os levels quando a gente faz um load variables?

Como alterar a cor de um botão depois de clicado e ocorrido o evento?

Não conseguir determinar corretamente sua localização (hierarquia ou posição) de uma variável.

Como fazer uma timeline andar mais lenta que outra?

Qual a relação entre pixels e centímetros?

Preciso converter elementos de uma string separada por vírgulas em um Array!

Como achar o valor da Hipotenusa de um triângulo? Usando Math?
Animação no Flash

Entendendo como funciona um preloader - Segunda parte

HACKED - ANONYMOUS

Primeiros passos - Camadas e outras coisas

Event Handlers (identificadores de eventos).

Controlando alpha via actionscript

Tween Class

Scroll dinâmico no Flash 5.

Fontes no Flash - campos de texto e HTML

Labirinto - Plataforma de jogo em terceira pessoa em flash 5: 1° parte

Tracejado no Fireworks

Enviando variáveis do Flash para ASP.
Preloader marquee

Sashacircle 1

Focus

Xbox f5

Texto com mask

Desenho dinâmico

Radio button 1

Zoom e movimento

Mapa - Países com A 1

Simple mousefollow

Cyber efect

Loop menu
HOME | TUTORIAIS
Criando um Editor HTML com o MM Flash
por Ken Awamura

Por volta de 2002/2003 com a intenção de testar o Flash MX criei um pequeno editor onde utilizei alguns componentes, formatação de textos e outras funcionalidades do Flash. Resolvi tirar do baú este experimento para relembrar a programação básica com actionscript e aproveitar para registrá-lo aqui no formato de matéria/tutorial, pois ele é uma boa forma de se aprender e conhecer o ambiente de programação do Flash. Este editor foi inicialmente feito no Flash MX e esta versão está convertida para ser aberta no Flash MX 2004.

kaFlashEditor: Editor HTML desenvolvido em Flash

Nível necessário para desenvolvê-lo

Básico, não iniciante: O desenvolvedor precisa ter conhecimentos básicos do Flash como utilização de Movie Clips, da Library, base em AS, timeline, layers, etc

Principais tópicos

  • Textfields: manipulação e formatação de textos
  • Movie Clips: os ícones do editor são todos mcs, definir handlers para estes mcs, attach e remove mcs
  • Componentes: combobox, scrollbar, checkbox, etc 
  • Shared Objects: para salvar e reabrir arquivos
  • ShowSettings: para o usuário definir o limite em KB disponível em seu HD
  • Shared Library: importar componentes de uma biblioteca externa.
  • LoadVars e setInterval para pre-load de componentes.
  • Métodos:LoadVars,HitTest,setChangeHandler,setInterval,clearInterval,etc.

Etapa 1: Criar os objetos

O 1º passo é criar os elementos a serem utilizados pelo editor:

  • Os ícones: bold, underline, italic, etc são todos movie clips com a imagem interna
  • 2 comboboxes para listar fontes e tamanho de fontes: shared library
  • 1 checkbox para alternar para alternar entre o modo richtext e código html: shared library
  • 2 textfields: um do tipo input e outro dynamic
  • 1 movie clip vazio que ficará no stage chamado 'swapper' que será responsável em transferir texto richtext para texto html entre os dois textfields
  • 2 movie clips chamados respectivamente de savePanel e openPanel que serão anexados ao stage em momento oportuno

Etapa 2: Organizar a biblioteca

Organizar a Library. Veja figura a seguir:

Organização da Library em Folders

Etapa 3: Organizar a timeline

Uma vez criados os objetos a serem utilizados pelo editor, podemos organizar a Timeline. Eu particularmente gosto de criar layers para cada porção de AS relativa aos objetos. Veja a figura a seguir:

Organização da Timeline em Layers e Folders

Note que para os principais objetos no stage existe uma layer na timeline onde será incluso o seu AS específico.

Etapa 4: Preparar o stage

Organizar os objetos no stage. Veja figura a seguir:

Organização do Stage e seus Objetos

Os pontos brancos no stage são os movie clips importados pela biblioteca externa no arquivo components.swf

Shared Libraries: a grande vantagem em se utilizar compartilhamento de bibliotecas está na otimização de recursos. Um componente tipo scrollbar quando renderizado ao formato .swf tem em média uns 15kb. Normalmente em um projeto você terá vários arquivos .swf e se em cada um destes arquivos for utilizado um scrollbar interno cada arquivo terá o tamanho em kb de um scrollbar mais o restante relativo ao arquivo, portanto se você definir um arquivo que funcione como uma biblioteca comum à todos os demais arquivos, você utiliza somente 1 scrollbar e o compartilha com os demais .swfs de seu projeto. Isto vale para outros componentes também. No exemplo foi criado o arquivo components.fla. Especificamente para o caso deste editor, utilizar esta técnica não seria necessária visto que trata-se de 1 arquivo somente, porém como exercício e boa prática foi utilizado o shared library aqui.

Shared Libraries > Visão Geral: como vimos para este editor utilizamos dois arquivos .swf:

  • components.swf: a nossa biblioteca central, portanto este contém o ScrollBar, ComboBox e o CheckBox. Nele, basta definir a propriedade linkage dos componentes como Export for Actionscript e Export in the first frame

  • kaFlashEditor.swf: este consumirá instâncias dos componentes localizados no arquivo components.swf. Para isso basta criar movie clips vazios e definir sua propriedade linkage como Import for runtime sharing
Deste modo o Flash Player faz com que os movie clips vazios carreguem uma instância do componente para o seu interior. Basicamente o player te poupa o trabalho de criar lógicas de load movies com targets em movie clips, automatizando este processo à você. Na minha opinião esta é uma grande funcionalidade que deve ser utilizada sempre que possível.

Etapa 5: Actionscript para formatação do texto

Actionscript para os ícones: bold, underline, italic, unformat, bullet list, alinhamentos, indentação e cores. Todos eles são movie clips, portanto teremos que criar um handler para cada um deles que chamará uma única função de formatação. Esta função está na layer chamada Format.

function Format(arg, tag) {
   //see swapper mc
   ini = Selection.getBeginIndex();
   end = Selection.getEndIndex();
   var myFormat = new TextFormat();
   switch (tag) {
      case "Bold" : myFormat.bold = true; break;
      case "Under" : myFormat.underline = true; break;
      case "Italic" : myFormat.italic = true; break;
      case "Bullet" : myFormat.bullet = true; break;
      case "Aleft" : myFormat.align = "left"; break;
      case "Center" : myFormat.align = "center"; break;
      case "Aright" : myFormat.align = "right"; break;
      case "Iright" : myFormat.blockIndent = "20"; break;
      case "Ileft" : myFormat.blockIndent = "-20"; break;
      case "Black" : myFormat.Color = "0xF000000"; break;
      case "Green" : myFormat.Color = "0x336600"; break;
      case "Red" : myFormat.Color = "0x990000"; break;
      case "Blue" : myFormat.Color = "0x336699"; break;
      case "Orange" : myFormat.Color = "0xFF6600"; break;
      case "Normal" :
         myFormat.bold = myFormat.underline=myFormat.italic=myFormat.bullet=myFormat.blockIndent=false;
         myFormat.Color = "0x000000";
         myFormat.align = "left";
         break;
      default : //trace("no case option found");
   }
   arg.setTextFormat(ini, end, myFormat);
}

O segredo está em estabelecer os pontos iniciais e finais do texto a ser formatado. O objeto a ser formatado é o textfield chamado myTxt e o ícone(movie clip) passará à função Format o tipo de formatação desejada. (bold, italic,etc). Cada movie clip (bold, italic,etc) terá um handler semelhante de acordo com o seguinte padrão

onClipEvent (mouseDown) {
   if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
      _root.Format(_parent.myTxt, "Bold");
   }
}

nota: nada impede de você utilizar botões no lugar de movie clips.

Etapa 6: Modos de Visualização

O movie clip swapper: sua função é atualizar os dois textfields, myTxt e sourceTxt, sendo o myTxt do tipo input e o sourceTxt do tipo dynamic. Para o sourceTxt foi atribuído um nome de variável sourceTxtOutput. A atualização dos textos é necessária pois queremos mostrar ao usuário tanto o texto no modo rich text e no modo html view e é feito do seguinte modo:

onClipEvent (enterFrame) {
   _root.sourceTxtOutput = _root.myTxt.htmlText;
   //or _root.sourceTxt.text = _root.myTxt.htmlText;
}

O usuário alterna os modos de visualização através do CheckBox chamado chkBxSource portanto um handler para ele também torna-se necessário:

chkBxSource.setChangeHandler("ViewSource");
function ViewSource() {
   if (chkBxSource.getValue() == true) {
      myTxt._x = -1000;
      myScroll.setScrollTarget(sourceTxt);
      sourceTxt._x = 8;
   }
   else {
      myTxt._x = 8;
      myScroll.setScrollTarget(myTxt);
      sourceTxt._x = -1000;
   }
}

Não sei se é um bug na minha versão do MX, mas não foi possível colocar um label no checkbox tipo: view source ou ver código. chkBxSource.label = "View Source";  em runtime.

Etapa 7: Salvando o Texto

O movie clip savePanel será o responsável por executar esta tarefa. Utilizamos aqui o Shared Objects cuja funcionalidade principal é armazenar e ler dados no computador do usuário. No caso iremos armazenar o conteúdo e um nome do arquivo. O local de armazenamento é pré-definido pelo Flash Player e é único, por questões de segurança. Um cookie, por exemplo fica armazenado no folder de arquivos temporários de internet, já o Shared Objects se localiza no Documents and Settings/Application Data/Macromedia/Flash Player/#SharedObjects/Nome do WebSite.

Path do Shared Objects

O arquivo é salvo no formato arquivo.sol onde .sol é a extensão utilizada pelo Shared Objects e arquivo é um nome qualquer digitado pelo usuário. O conteúdo e seu nome será salvo no formato de array da seguinte maneira:

var myNames = sharedObject.getLocal("fileNames", "/");
files = myNames.data.arr[0];
x.useHandCursor = false;
save.useHandCursor = false;
myArr = [files];
save.onRelease = function() {
   myArr.push(fileName);
   var myNames = sharedObject.getLocal("fileNames", "/");
   myNames.data.arr = [myArr];
   myNames.flush();
   var myFile = sharedObject.getLocal(fileName, "/");
   myFile.data.Content = _root.myTxt.htmlText;
   myFile.flush();
   removeMovieClip("_level0.savePanel");
};
x.onRelease = function() {
   removeMovieClip("_level0.savePanel");
};

Etapa 8: Abrindo um arquivo

Novamente utiliza-se o Shared Objects, porém com uma lógica capaz de ler os dados do arquivo.sol e trazer o seu conteúdo para o stage. A interface está no movie clip openPanel e possui a seguinte lógica:

var myNames = sharedObject.getLocal("fileNames", "/");
files = myNames.data.arr[0];
open.useHandCursor = false;
x.useHandCursor = false;
open.onRelease = function() {
   var myLocal = sharedObject.getLocal(fileName, "/");
   _root.myTxt.htmlText = myLocal.data.Content;
   _root.sourceTxtOutput = _root.myTxt.text;
   removeMovieClip("_level0.openPanel");
};
x.onRelease = function() {
   removeMovieClip("_level0.openPanel");
};



O movie clip openPanel mostrará os nomes disponíveis e o usuário digita o nome desejado para abrí-lo.

Etapa 9: Extras

Até aqui foi visto a funcionalidade básica do editor e mais ou menos o que eu queria fazer com ele em relação ao meu experimento, porém coloquei alguns extras que servem como base caso alguém tenha interesse em aprimorar o editor.

O movie clip System Fonts: caso você queira preencher o combobox fontNameBox com as fontes que o usuário possui no seu computador, a lógica existente neste movie clip será útil.

onClipEvent (mouseDown) {
   if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
      myStr += "<font color='#336699'>About your System</font>"+"\n";
      myStr += "Has Audio Encoder? : "+System.capabilities.hasAudioEncoder+"\n";
      myStr += "Has Accessibility? : "+System.capabilities.hasAccessibility+"\n";
      myStr += "Has Audio? : "+System.capabilities.hasAudio+"\n";
      myStr += "Language : "+System.capabilities.language+"\n";
      myStr += "Flash Player Manufacturer : "+System.capabilities.manufacturer+"\n";
      myStr += "Your OS : "+System.capabilities.os+"\n";
      myStr += "Pixel Aspect Ratio : "+System.capabilities.pixelAspectRatio+"\n";
      myStr += "Screen Color : "+System.capabilities.screenColor+"\n";
      myStr += "Screen DPI : "+System.capabilities.screenDPI+"\n";
      myStr += "Screen Resolution X : "+System.capabilities.screenResolutionX+"\n";
      myStr += "Screen Resolution Y : "+System.capabilities.screenResolutionY+"\n";
      myStr += "Lowest supported Flash Player version : "+System.capabilities.version+"\n";
      myStr += "Has Video Encoder? : "+System.capabilities.hasVideoEncoder+"\n\n";
      myfonts = TextField.getFontList();
      myStr += "<font color='#336699'>Available Fonts in your System</font>"+"\n";
      myStr += myfonts.join("\n");
      myStr += "\n\n<font color='#336699'>Server String</font> : "+System.capabilities.serverString+"\n\n";
      _root.myTxt.htmlText = "<font face='verdana'>"+myStr+"</font>";
   }
}

O movie clip Save Settings: aqui o usuário poderá controlar o quanto ele quer disponibilizar no seu HD para salvar os dados. Inclusive o usuário poderá definir este limite como zero/none.

onClipEvent (mouseDown) {
   if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
      System.showSettings(1);
   }
}

Pre-load dos componentes externos: Como está sendo utilizado componentes que estão externos ao arquivo kaFlashEditor.swf, mais exatamente eles estão no arquivo components.swf, foi feito um pre-load do components.swf utilizando o objeto LoadVars e o método setInterval.

//frame 0
myLoadVars = new LoadVars();
myLoadVars.load("components.swf");

//frame3
function advance() {
   _root.play();
}
var intervalID;
intervalID = setInterval(advance, 3000);
stop();

Finalizando

Definitivamente não se trata de um editor completo, porém não era esse o objetivo. O mais importante é que ao desenvolvê-lo adquire-se uma boa base em Actionscript e enxerga-se melhor a potencialidade e a estrutura do Macromedia Flash. Lembrando que ele foi inicialmente feito no MX e não no MX2004 portanto a partir deste protótipo é possível aprimorá-lo muito mais. Como exercício seria interessante abordar os seguintes tópicos:

  • Utilizar AS OOP: Actionscript Orientado à Objetos com a versão 2.0
  • Organizar o código em Classes, Métodos e Propriedades
  • Utilizar o componente TextArea no lugar dos textfields
  • Aprimorar a interface com o usuário: savePanel, openPanel
  • Salvar o conteúdo em um Banco de Dados
  • Formatar textos com CSS e torná-lo mais web standard

Um abraço,

Download do Editor: www.kenawamura.com



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
1 comentário


Comentário de ronaldo
| 22/11/2010 - 11:08 |


O link do download está quebrado ._. Foda-se