Esta seção descreve as etapas para a criação de um aplicativo simples do ActionScript 3.0 usando componentes Flash e a ferramenta de autoria do Flash. O exemplo é fornecido como um arquivo FLA, com o código do ActionScript incluído na Linha do tempo, e também como um arquivo de classe externo do ActionScript, com um arquivo FLA que contém somente os componentes na biblioteca. De forma geral, é provável que você queira desenvolver aplicativos maiores usando arquivos de classe externos, para poder compartilhar código entre classes e aplicativos e facilitar a manutenção dos seus aplicativos. Para obter mais informações sobre a programação com o ActionScript 3,0, consulte
Programação do ActionScript 3.0
.
Design do aplicativo
Nosso primeiro exemplo de aplicativo com componentes do ActionScript é uma variação do aplicativo “Hello World” padrão, com um design bastante simples:
-
O aplicativo será chamado de Greetings.
-
Ele utiliza uma TextArea para exibir uma saudação que é, inicialmente, Hello World.
-
Ele utiliza um ColorPicker que permite alterar a cor do texto.
-
Ele utiliza três RadioButtons que permitem definir o tamanho do texto como pequeno, grande ou muito grande.
-
Ele utiliza uma ComboBox que permite selecionar uma saudação diferente em uma lista suspensa.
-
O aplicativo utiliza componentes do painel Componentes, e também cria elementos do aplicativo com o código do ActionScript.
A partir dessa definição, você pode começar a criar o aplicativo.
Criar o aplicativo Greetings
As etapas a seguir criam o aplicativo Greetings usando a ferramenta de autoria do Flash para criar um arquivo FLA, inserir componentes no Palco e adicionar código do ActionScript à Linha do tempo.
Criar o aplicativo Greetings em um arquivo FLA:
-
Selecione Arquivo > Novo.
-
Na caixa de diálogo Novo documento, selecione Arquivo Flash (ActionScript 3.0) e clique em OK.
Uma nova janela do Flash é aberta.
-
Selecione Arquivo > Salvar, nomeie o arquivo Flash como
Greetings.fla
e clique no botão Salvar.
-
No painel Componentes do Flash, selecione um componente TextArea e arraste-o para o Palco.
-
Na janela Propriedades, com a TextArea selecionada no Palco, digite
aTa
como nome da ocorrência e insira as seguintes informações:
-
Digite
230
como valor L (largura).
-
Digite
44
como valor A (altura).
-
Digite
165
como valor X (posição horizontal).
-
Digite
57
como valor Y (posição vertical).
-
Digite
Hello World!
para o parâmetro de texto, na guia Parâmetros.
-
Arraste um componente ColorPicker para o Palco, insira-o à esquerda da TextArea e atribua a ele um nome de ocorrência de
txtCp.
Digite as seguintes informações no Inspetor de propriedades:
-
Digite
96
como valor X.
-
Digite
72
como valor Y.
-
Arraste três componentes RadioButton para o Palco, um de cada vez, e atribua a eles os nomes de ocorrência de
smallRb
,
largerRb
e
largestRb
. Digite as seguintes informações no Inspetor de propriedades:
-
Digite
100
como valor L e
22
para o valor A de cada um deles.
-
Digite
155
como valor X.
-
Digite
120
como valor Y de smallRb,
148
para largerRb e
175
para largestRb.
-
Digite
fontRbGrp
para o parâmetro groupName de cada um deles.
-
Digite na guia Parâmetros os rótulos
Small
,
Larger
,
Largest
.
-
Arraste uma ComboBox para o Palco e atribua a ela o nome de ocorrência de
msgCb
. Digite as seguintes informações no Inspetor de propriedades:
-
Digite
130
como valor L.
-
Digite
265
como valor X.
-
Digite
120
como valor Y.
-
Na guia Parâmetros, digite
Greetings
para o parâmetro do prompt.
-
Clique duas vezes no campo de texto do parâmetro dataProvider para abrir a caixa de diálogo Valores.
-
Clique no sinal de adição e substitua o valor do rótulo por
Hello World!
-
Repita a etapa anterior para adicionar os valores de rótulos
Have a nice day!
e
Top of the Morning!
-
Clique em OK para fechar a caixa de diálogo Valores.
-
Salve o arquivo.
-
Abra o painel Ações, se ainda não estiver aberto, pressionando
F9
ou selecionando Ações no menu Janela. Clique no Quadro 1 da Linha do tempo principal e insira o seguinte código no painel Ações:
import flash.events.Event;
import fl.events.ComponentEvent;
import fl.events.ColorPickerEvent;
import fl.controls.RadioButtonGroup;
var rbGrp:RadioButtonGroup = RadioButtonGroup.getGroup("fontRbGrp");
rbGrp.addEventListener(MouseEvent.CLICK, rbHandler);
txtCp.addEventListener(ColorPickerEvent.CHANGE,cpHandler);
msgCb.addEventListener(Event.CHANGE, cbHandler);
As três primeiras linhas importam as classes de eventos usadas pelo aplicativo. Um evento ocorre quando um usuário interage com um dos componentes. As cinco linhas seguintes registram manipuladores de eventos para os eventos que o aplicativo deseja monitorar. Um evento
click
ocorre em um RadioButton quando um usuário clica nele. Um evento
change
ocorre quando um usuário seleciona uma cor diferente no ColorPicker. Um evento
change
ocorre na ComboBox quando um usuário escolhe uma saudação diferente na lista suspensa.
A quarta linha importa a classe RadioButtonGroup, de forma que o aplicativo possa atribuir um ouvinte de eventos ao grupo de RadioButtons, em vez de atribuir o ouvinte a cada botão individualmente.
-
Adicione a linha de código a seguir ao painel Ações para criar o objeto TextFormat
tf
, que o aplicativo usa para alterar as propriedades de estilo
size
e
color
do texto na TextArea.
var tf:TextFormat = new TextFormat();
-
Adicione o código a seguir para criar a função de manipulação de eventos
rbHandler
. Essa função manipula um evento
click
quando um usuário clica em um dos componentes RadioButton.
function rbHandler(event:MouseEvent):void {
switch(event.target.selection.name) {
case "smallRb":
tf.size = 14;
break;
case "largerRb":
tf.size = 18;
break;
case "largestRb":
tf.size = 24;
break;
}
aTa.setStyle("textFormat", tf);
}
Essa função usa uma instrução
switch
para examinar a propriedade
target
do objeto
event
, a fim de determinar qual RadioButton acionou o evento. A propriedade
currentTarget
contém o nome do objeto que acionou o evento. Dependendo do RadioButton no qual o usuário clicou, o aplicativo altera o tamanho do texto na TextArea para 14, 18 ou 24 pontos.
-
Adicione o código a seguir para implementar a função
cpHandler()
, que manipula uma alteração no valor do ColorPicker:
function cpHandler(event:ColorPickerEvent):void {
tf.color = event.target.selectedColor;
aTa.setStyle("textFormat", tf);
}
Essa função define a propriedade
color
do objeto TextFormat
tf
como a cor selecionada no ColorPicker, e depois chama
setStyle()
para aplicá-la ao texto na ocorrência de TextArea
aTa
.
-
Adicione o código a seguir para implementar a função
cbHandler()
, que manipula uma alteração na seleção na ComboBox:
function cbHandler(event:Event):void {
aTa.text = event.target.selectedItem.label;
}
Essa função simplesmente substitui o texto na TextArea pelo texto selecionado na ComboBox,
event.target.selectedItem.label
.
-
Selecione Controlar > Testar filme ou pressione Control+Enter para compilar o código e testar o aplicativo Greetings.
A próxima seção mostra como criar o mesmo aplicativo com uma classe ActionScript externa e um arquivo FLA que tem apenas os componentes necessários na biblioteca.
Criar o aplicativo Greetings2 com um arquivo de classe externo:
-
Selecione Arquivo > Novo.
-
Na caixa de diálogo Novo documento, selecione Arquivo Flash (ActionScript 3.0) e clique em OK.
Uma nova janela do Flash é aberta.
-
Selecione Arquivo > Salvar, nomeie o arquivo Flash como
Greetings2.fla
e clique no botão Salvar.
-
Arraste cada um dos seguintes componentes do painel Componentes para a biblioteca:
-
ColorPicker
-
ComboBox
-
RadioButton
-
TextArea
O arquivo SWF compilado utilizará todos esses ativos. Então, você precisa adicioná-los à biblioteca. Arraste os componentes para a parte inferior do painel Biblioteca. Conforme você adiciona esses componentes à biblioteca, outros ativos (como List, TextInput e UIScrollBox) são adicionados automaticamente.
-
Na janela Propriedades, em Classe do documento, digite
Greetings2
.
Se o Flash exibir um aviso informando que " não foi possível localizar uma definição para a classe do documento", ignore-o. Você definirá a classe de Greetings2 nas etapas seguintes. Essa classe define a função principal do aplicativo.
-
Salve o arquivo Greetings2.fla.
-
Selecione Arquivo > Novo.
-
Na caixa de diálogo Novo documento, selecione Arquivo ActionScript e clique em OK.
Uma nova janela de script é aberta.
-
Adicione o código a seguir à janela de script:
package {
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.text.TextFormat;
import fl.events.ComponentEvent;
import fl.events.ColorPickerEvent;
import fl.controls.ColorPicker;
import fl.controls.ComboBox;
import fl.controls.RadioButtonGroup;
import fl.controls.RadioButton;
import fl.controls.TextArea;
public class Greetings2 extends Sprite {
private var aTa:TextArea;
private var msgCb:ComboBox;
private var smallRb:RadioButton;
private var largerRb:RadioButton;
private var largestRb:RadioButton;
private var rbGrp:RadioButtonGroup;
private var txtCp:ColorPicker;
private var tf:TextFormat = new TextFormat();
public function Greetings2() {
O script define uma classe do ActionScript 3.0 denominada Greetings2. O script faz o seguinte:
-
Importa classes que serão usadas no arquivo. Normalmente, você adicionaria essas instruções
import
à medida que fizesse referência às diferentes classes no código. Mas, para abreviar o processo, este exemplo importa todas em uma só etapa.
-
Declara variáveis representando os diversos tipos de objetos componentes que serão acrescentados ao código. Outra variável cria o objeto TextFormat
tf
.
-
Define uma função de construtor,
Greetings2()
, para a classe. Nas etapas seguintes, adicionaremos linhas a essa função e outros métodos à classe.
-
Selecione Arquivo > Salvar, nomeie o arquivo como
Greetings2.fla
e clique no botão Salvar.
-
Adicione as seguintes linhas de código à função
Greeting2()
:
createUI();
setUpHandlers();
}
Agora, a função deve ter a seguinte aparência:
public function Greetings2() {
createUI();
setUpHandlers();
}
-
Adicione as linhas de código a seguir depois da chave de fechamento do método
Greeting2()
:
private function createUI() {
bldTxtArea();
bldColorPicker();
bldComboBox();
bldRadioButtons();
}
private function bldTxtArea() {
aTa = new TextArea();
aTa.setSize(230, 44);
aTa.text = "Hello World!";
aTa.move(165, 57);
addChild(aTa);
}
private function bldColorPicker() {
txtCp = new ColorPicker();
txtCp.move(96, 72);
addChild(txtCp);
}
private function bldComboBox() {
msgCb = new ComboBox();
msgCb.width = 130;
msgCb.move(265, 120);
msgCb.prompt = "Greetings";
msgCb.addItem({data:"Hello.", label:"English"});
msgCb.addItem({data:"Bonjour.", label:"Français"});
msgCb.addItem({data:"¡Hola!", label:"Español"});
addChild(msgCb);
}
private function bldRadioButtons() {
rbGrp = new RadioButtonGroup("fontRbGrp");
smallRb = new RadioButton();
smallRb.setSize(100, 22);
smallRb.move(155, 120);
smallRb.group = rbGrp; //"fontRbGrp";
smallRb.label = "Small";
smallRb.name = "smallRb";
addChild(smallRb);
largerRb = new RadioButton();
largerRb.setSize(100, 22);
largerRb.move(155, 148);
largerRb.group = rbGrp;
largerRb.label = "Larger";
largerRb.name = "largerRb";
addChild(largerRb);
largestRb = new RadioButton();
largestRb.setSize(100, 22);
largestRb.move(155, 175);
largestRb.group = rbGrp;
largestRb.label = "Largest";
largestRb.name = "largestRb";
addChild(largestRb);
}
Essas linhas fazem o seguinte:
-
Instanciam os componentes usados no aplicativo.
-
Definem o tamanho, a posição e as propriedades de cada componente.
-
Adicionam todos os componentes ao Palco usando o método
addChild()
.
-
Depois da chave de fechamento do método
bldRadioButtons()
, adicione o seguinte código ao método
setUpHandlers()
:
private function setUpHandlers():void {
rbGrp.addEventListener(MouseEvent.CLICK, rbHandler);
txtCp.addEventListener(ColorPickerEvent.CHANGE,cpHandler);
msgCb.addEventListener(Event.CHANGE, cbHandler);
}
private function rbHandler(event:MouseEvent):void {
switch(event.target.selection.name) {
case "smallRb":
tf.size = 14;
break;
case "largerRb":
tf.size = 18;
break;
case "largestRb":
tf.size = 24;
break;
}
aTa.setStyle("textFormat", tf);
}
private function cpHandler(event:ColorPickerEvent):void {
tf.color = event.target.selectedColor;
aTa.setStyle("textFormat", tf);
}
private function cbHandler(event:Event):void {
aTa.text = event.target.selectedItem.data;
}
}
}
Essas funções definem manipuladores de eventos para os componentes.
-
Selecione Arquivo > Salvar para salvar o arquivo.
-
Selecione Controlar > Testar filme ou pressione Control+Enter para compilar o código e testar o aplicativo Greetings2.
Desenvolver e executar os exemplos subseqüentes
Tendo desenvolvido e executado o aplicativo Greetings, você conta com o conhecimento básico necessário para executar os outros exemplos de código apresentados neste livro. O código relevante do ActionScript 3.0 em cada exemplo será destacado e debatido, e você deverá ser capaz de recortar e colar em um arquivo FLA, compilar e executar cada um dos exemplos deste livro.
|
|
|