Vamos explorar um dos vários métodos que podem ser usados para
autorizar um arquivo ActionScript swf para comunicar-se para a frente e
para trás a uma base de dados SQL, armazenando e recuperando dados na tabela.
Esta funcionalidade é útil para simples aplicações de internet, que exigem um
acesso livre para fontes de dados externas. Vamos mostrar
uma aplicação dinâmica que permite aos usuários criar um nome que será
armazenado e recuperado por uma base de dados.
Antes de você começar
Na ordem, para que você tenha a aplicação funcionando, você precisará de
um servidor na web ou ter acesso a um deles (Apache, IIS, etc.) logo com a última versão do PHP e uma base de dados SQL. Para instalação em um servidor
“tudo em um”, por favor, veja XAMMP
(Windows) ou MAMP
(Mac OS). Não use esses servidores de instalação “tudo em um” para fins
produtivos, pois existem sérios riscos de segurança. Só use estes pacotes de
hospedagem somente para teste e desenvolvimento.
A base de dados consiste em uma tabela nomeada Taglist contendo dois
registros: ID (auto incrementado) e Nome. Segue aqui um link para um arquivo
SQL usado para configurar a base de dados. Você pode usar o PHPmyAdmin ou
executar as consultas SQL nesse arquivo diretamente no seu servidor SQL.
Download
consulta.SQL (Clique com o botão direito> Salvar destino como)
Conceitos da Programação Orientada ao Objeto
A programação orientada ao objeto em AS3 compõe as classes.
A melhor maneira de compreender quais classes seria pensar de todos os objetos
que compõem sua cena. Por exemplo, nesse tutorial nós iremos precisar de alguns
objetos; um nametag, uma barra de entrada, um objeto para enviar informação e
um objeto para receber informação. Todos estes objetos se transformarão
exemplos das classes. Uma outra característica das classes são suas
propriedades e métodos. Propriedades são os valores de um objeto tais como suas
coordenadas de localidade, visibilidade, alpha, etc. Métodos são funcionais se
um objeto com a habilidade de executar uma ação definida. Os métodos são,
primeiramente, as funções que são escritas dentro da classe de objeto.
Passo 1: Configurando um novo projeto
Vamos começar criando um novo arquivo FLA, vá
em: File > New (obviamente, selecione ActionScript 3)
Salve o projeto em uma nova pasta de sua preferência e,
dentro desta, crie uma outra chamada “src”, esta terá todas suas classes
de projetos. Quando terminar pegue uma cópia do GreenSock da classe TweenLite
para AS3 e copie na pasta “gs” dentro da pasta raiz (obtenha isso do projeto
final. Faça o download acima ou clique aqui. ). Quando você
terminar, a estrutura da pasta deverá ser igual ao abaixo. O nome do arquivo
parece familiar no diretório src completo? Eles são nomeados depois as classes
são usadas no projeto.
Passo 2: A classe do documento
Nosso próximo passo será criar a Classe do Documento. O documento classe é um objeto que liga
todas as outras classes a serem juntadas. O documento classe pode ser considerado
um modelo usado para mostrar como todas suas classes são conectadas. O
documento classe permitirá que você já não dependa do código utilizado no anteriormente
na linha do tempo (por exemplo: frame 1 ActionScript). Crie um
novo arquivo ActionScript em: File>New.
Digite o seguinte código dentro do novo arquivo
ActionScript que foi criado e salve como Main.as. Note que o nome do arquivo
“Main” tem que ser o mesmo nome do construtor da função Main(). O construtor é onde
você pode digitar o script executável. É
de boa prática para não sobrecarregar o construtor com o código e simplesmente
usar referências a funcionar lá dentro. Funções podem ser criadas fora das
funções do construtor, finalizando com o Curly Brace (isso será aprofundado
melhor depois). Variáveis devem ser colocadas após a classe pública ser
definida, a fim de serem referenciadas em toda a classe. É possível que as
variáveis que existam junto com o construtor, mas não podem ser referenciadas
de fora da função.
package src {
import flash.display.MovieClip;
public class Main extends MovieClip {
public function Main() {
}
}
}O atalho para a classe do documento deve ser especificado no
arquivo FLA, temos que configurar isso na propriedade de inspetor (também mudar
as dimensões do FLA e o seu frame rate).
Passo 3: Embutindo objetos essenciais
Os nametags serão opcionalmente campos de texto com uma fonte desejada
para o título da tag e o nome da tag. Na ordem para usar uma fonte customizada,
nós embutimos eles com a livraria e criamos a classe para referenciar a
livraria de objetos. Primeiro crie uma pasta com a pasta “src” nomeada como
“fonts”.
Dê um clique com o botão direito do mouse na biblioteca e selecione uma
nova fonte. Você terá que repetir este processo da mesma forma para as outras
letras utilizando uma classe nome diferente.
Crie um novo arquivo
ActionScript e digite o código abaixo. Esse definirá a estrutura classe da
fonte. Isso será útil no futuro para outra adição de código.
package src.fonts {
import flash.text.Font;
public class HelveticaBold extends Font {
public function HelveticaBold() {
}
}
}
Aplique as configurações seguintes. Note que a classe é a localização do
arquivo fonte class (por exemplo: /src/fonts/YourFont.as) não adicione a extensão”.as”
no final.
Passo 4: Criando o name tag do objeto.
Crie um novo arquivo
ActionScript e digite o código abaixo e salve dentro da pasta “src”.
Certifique-se de que o nome do arquivo está de acordo com a classe nome.
package src{
import flash.display.Sprite;
import flash.text.Font;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import src.fonts.*;
public class NameTag extends Sprite {
private var bgObj:Sprite;
private var boldFont:Font;
private var regFont:Font;
private var boldFormat:TextFormat;
private var regFormat:TextFormat;
private var staticLabel:TextField;
private var nameField:TextField;
public function NameTag() {
}
}
}Note
que o name tag caracteriza um conjunto de variáveis que estabelecem tipos de
dados diferentes. O bgObj será o background e os elementos gráficos do name tag,
boldFont e regFont irão referenciar os novos exemplos de fontes na livraria,
boldFormat e regFormat serão os formatos de textos atribuídos aos seguintes
campos do texto para o título e o nome. Você pode querer saber por que algumas variáveis
são pessoais e algumas públicas, a razão é porque nós não queremos algumas
variáveis para ser mudadas ou acessadas por outros objetos no projeto, isso é
de boa prática e podia impedir erros que podem ocorrer se uma ou mais variáveis
são alteradas sem permissão. Variáveis públicas são expostas para outras
classes, só exponha variáveis que precisam ser acessadas. Depois você verá como
nós podemos modificar uma variável pedindo ao formulário da permissão a
utilização da classe e ajuste de métodos.
Vamos criar a função que será chamada, no construtor para
configurá-la, de bgObj. Coloque o código abaixo antes do construtor (veja os
comentários do código).
private function createBg():void {
// Constructs background/graphic elements
bgObj = new Sprite();
with (bgObj.graphics) {
beginFill(0x1199D5, 1);
drawRoundRect(0,0,200,140,30,30);
endFill();
beginFill(0xFFFFFF,1);
drawRect(0,40,200,85);
endFill();
}
addChild(bgObj);
}Agora
precisamos escrever uma função que iremos criar campos de texto e fórmulas no name
tag (veja os comentários nos códigos).
private function createLabels():void {
// Creates nametag title
boldFont = new HelveticaBold();
boldFormat = new TextFormat();
with (boldFormat) {
font=boldFont.fontName;
bold=true;
size=24;
}
staticLabel = new TextField();
with (staticLabel) {
autoSize=TextFieldAutoSize.LEFT;
defaultTextFormat=boldFormat;
embedFonts=true;
textColor=0xFFFFFF;
selectable=false;
text="HELLO"
x=this.width/2-staticLabel.width/2;
}
addChild(staticLabel);
// Creates name tag name field
regFont = new MarkerFelt();
regFormat = new TextFormat();
with (regFormat) {
font=regFont.fontName;
size=20;
}
nameField = new TextField();
with (nameField) {
autoSize=TextFieldAutoSize.CENTER;
defaultTextFormat=regFormat;
embedFonts=true;
selectable=false;
maxChars = 12;
width=200;
text="";
x=100-nameField.width/2;
y=65;
}
addChild(nameField);
}A variável
nameField é pessoal e nós vamos precisar ver e mudar o seu valor no fly. Nós
vamos precisar usar os métodos get (obter) e set (ajustar, configurar) para
acessar a variável. Coloque o código abaixo dentro da classe nametag.
public function set NameField(fieldValue:String):void {
// Provides access for setting the name field of a tag
with (nameField) {
text=fieldValue;
x=100-nameField.width/2;
y=65;
}
}
public function get NameField():String {
// Provides read-only access to the name field
return nameField.text;
}A
ultima função é opcional mas adiciona um “charme” para as tags e isso irá fazê-los
parecer sobrepor menos quando nós temos
mais de um nametag no estágio.
private function castShadow():void {
// Adds drop shadow filter to name tag
var dropShadow:DropShadowFilter = new DropShadowFilter();
with (dropShadow) {
distance=4;
alpha=0.1;
blurX=10;
blurY=10;
}
this.filters=[dropShadow];
}Enfim, ao ligar as funções até o construtor, primeiro
precisamos importar as classes das quais estas funções dependem. Adicione o seguinte:
import flash.filters.DropShadowFilter;
import flash.utils.setInterval;
import flash.utils.clearInterval;
import src.fonts.*;
import gs.TweenLite;
import gs.easing.*;Agora no construtor de funções, adicione o código abaixo. Você
pode ver que as funções estão chamadas explicitamente.
// Contructs the visual elements of the NameTag
createBg();
createLabels();
castShadow();
// Tweens the NameTag instance
with (this) {
scaleX=0.5;
scaleY=0.5;
}
TweenLite.to(this, 1, {scaleX:1, scaleY:1, ease:Expo.easeOut});Passo 5: criando o input bar
O input bar é construído de um jeito muito igual ao das
classes name tags (você pode ver imediatamente que os nomes das variáveis são
similares), a não ser que inclua uma tecla da submissão e um campo de texto para
uma entrada de usuário. A última parte do código inclui um evento personalizado
que envia uma notificação quando o botão enviar é clicado. Esta notificação é
mandada para qualquer classe (nosso documento classe irá escutar este evento).
Crie um novo arquivo ActionScript e copie o código seguinte e salve dentro da
pasta “src” (veja os comentários do código).
package src{
import flash.display.Sprite;
import flash.text.Font;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFieldType;
import flash.text.TextFormat;
import flash.filters.DropShadowFilter;
import flash.events.MouseEvent;
import flash.events.Event;
import src.fonts.*;
public class InputBar extends Sprite {
private var bgObj:Sprite;
private var boldFont:Font;
private var regFont:Font;
private var boldFormat:TextFormat;
private var regFormat:TextFormat;
private var staticLabel:TextField;
private var nameField:TextField;
private var submitBtn:Sprite;
public static const ON_SUBMIT:String = "Submitted";
public function InputBar(objW:Number, objH:Number) {
// Contructs the visual elements of the InputBar
createBg(objW, objH);
createLabels();
castShadow();
}
private function createBg(objW:Number, objH:Number):void {
// Constructs background/graphic elements
bgObj = new Sprite();
with (bgObj.graphics) {
beginFill(0x1199D5, 1);
drawRoundRect(0,0,230,30,20,20);
endFill();
beginFill(0xFFFFFF, 1);
drawRect(220,0,objW - 230, 30);
endFill();
}
addChild(bgObj);
}
private function createLabels():void {
// Creates menu title/label
boldFont = new HelveticaBold();
boldFormat = new TextFormat();
with (boldFormat) {
font=boldFont.fontName;
bold=true;
size=20;
}
staticLabel = new TextField();
with (staticLabel) {
autoSize=TextFieldAutoSize.LEFT;
defaultTextFormat=boldFormat;
embedFonts=true;
textColor=0xFFFFFF;
selectable=false;
text="HELLO, my name is";
x=20;
}
addChild(staticLabel);
// Creates menu input field
regFont = new MarkerFelt();
regFormat = new TextFormat();
with (regFormat) {
font=regFont.fontName;
size=18;
}
nameField = new TextField();
with (nameField) {
autoSize=TextFieldAutoSize.LEFT;
defaultTextFormat=regFormat;
embedFonts=true;
selectable=true;
type=TextFieldType.INPUT;
maxChars = 12;
width=200;
text="your name";
x=230;
y=2;
}
addChild(nameField);
// Creates submit button
submitBtn = new Sprite();
with (submitBtn.graphics) {
beginFill(0x1199D5, 1);
drawRoundRect(0,0,60,30,20,20);
endFill();
beginFill(0xFFFFFF, 1);
drawRect(0,0,10,30);
endFill();
}
submitBtn.x=this.width-submitBtn.width;
addChild(submitBtn);
var submitLabel:TextField = new TextField();
with (submitLabel) {
autoSize=TextFieldAutoSize.LEFT;
defaultTextFormat=boldFormat;
embedFonts=true;
textColor=0xFFFFFF;
selectable=false;
text="+";
x=submitBtn.width/2-submitLabel.width/2+4;
y=submitBtn.height/2-submitLabel.height/2-2;
}
submitBtn.addChild(submitLabel);
// Listens for mouse down on submit button
submitBtn.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
}
private function castShadow():void {
// Adds drop shadow filter to name tag
var dropShadow:DropShadowFilter = new DropShadowFilter();
with (dropShadow) {
distance=4;
alpha=0.1;
blurX=10;
blurY=10;
}
this.filters=[dropShadow];
}
public function get NameField():String {
// Provides read-only access to the input name field
return nameField.text;
}
public function set NameField(fieldValue:String):void {
// Provides access for setting the input name field of a tag
with (nameField) {
text=fieldValue;
}
}
private function onDown(evt:MouseEvent):void {
// Send notifications when submit button has been selected
dispatchEvent(new Event(ON_SUBMIT));
}
}
}Passo 6: Recebendo dados
Enfim, para se comunicar com uma base de dados
e recuperar dados de uma tabela específica, nós precisamos escrever um ActionScript
URLRequest para um arquivo PHP que irá retornar os valores de uma consulta SQL.
A seguinte classe foi projetada para aceitar uma string contendo um atalho URL
para o arquivo PHP e armazenar os valores dentro de uma ordem (veja os
comentários do código).
package src{
import flash.display.Sprite;
import flash.net.URLRequest;
import flash.net.URLRequestMethod;
import flash.net.URLLoader;
import flash.net.URLLoaderDataFormat;
import flash.events.Event;
public class ReceiveData extends Sprite {
public static const UPDATED_LIST:String = "Updated";
public var tagList:Array; // Array to store external value into
private var loader:URLLoader = new URLLoader();
public function ReceiveData(Destination:String) {
// Modified from source 1 (see Main.as)
// Ask for data from a specified source
var urlRequest:URLRequest=new URLRequest(Destination);
//urlRequest.method=URLRequestMethod.GET;
// Read returned values from external source as variables
loader.dataFormat=URLLoaderDataFormat.VARIABLES;
// Listen for completion
loader.addEventListener(Event.COMPLETE, onComplete);
loader.load(urlRequest);
// End of source 1 Modification
}
private function onComplete(evt:Event):void {
// Stop listening for completion
loader.removeEventListener(Event.COMPLETE, onComplete);
trace(evt.target.data);
// Update array with new values from external source
tagList = new Array();
// will be changed to for loop
with (tagList) {
push(evt.target.data.name1);
push(evt.target.data.name2);
push(evt.target.data.name3);
push(evt.target.data.name4);
push(evt.target.data.name5);
push(evt.target.data.name6);
push(evt.target.data.name7);
push(evt.target.data.name8);
push(evt.target.data.name9);
}
// Send notification upon completion of array
dispatchEvent(new Event(UPDATED_LIST));
}
}
}*
Publicado originalmente em http://www.xvisionstudios.com/xvlearning/index.html
De 0 a 10, o quanto você recomendaria este artigo para um amigo?