SIMULADOS & TUTORIAIS

Documentos relacionados
Banner Flutuante. Dreamweaver

Barra de ferramentas padrão. Barra de formatação. Barra de desenho Painel de Tarefas

Crie um novo documento de mais ou menos 300x300Selecione a ferramenta Elipse tool (elipse U)

Banco de Dados BrOffice Base

Autor: Cícero Carlos Barbosa Silva

Aula 09 - Atualização de uma tabela dinâmica. Aula 09 - Atualização de uma tabela dinâmica. Sumário. Atualizando a tabela dinâmica

Microsoft Office PowerPoint 2007

1Conhecendo o Flash O B J E T I V O S

MANUAL DE UTILIZAÇÃO DO WEBMAIL SBC

Manual do Usuário. Minha Biblioteca

LIÇÃO 1 - GRAVANDO MACROS

SIMULADOS & TUTORIAIS

Book Flash CS6.indb 8 10/01/ :37:42

Universidade Federal de Santa Maria UFSM Centro de Tecnologia CT. Power Point. Básico

Construtor de sites SoftPixel GUIA RÁPIDO - 1 -

ANDRÉ APARECIDO DA SILVA APOSTILA BÁSICA SOBRE O POWERPOINT 2007

GUIA MUDANÇA E FORMATAÇÃO DE SERVIDOR - MILLENNIUM

Turma. PowerPoint 2003

Agente Administrativo do MTE

Fluxo de trabalho do Capture Pro Software: Indexação de OCR e separação de documentos de código de correção

TELA PRINCIPAL. Exibe uma lista de configurações de efeitos disponíveis. A visualização pode ser filtrada por: Aplicação, Cliente e Categoria.

Tabela e Gráficos Dinâmicos Como estruturar dinamicamente dados no Excel

Fluxo de trabalho do Capture Pro Software: Indexação de código de barras e separação de documentos

Lidar com números e estatísticas não é fácil. Reunir esses números numa apresentação pode ser ainda mais complicado.

SIMULADOS & TUTORIAIS

Índice: CMS 3 O que é Content Management System? Clientes 4 O que é o Cliente? 4 Configurando o i-menu/i-view para trabalhar. com o CMS.

Criando Quiz com BrOffice.impress

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4

JAVA NETBEANS PGOO Prof. Daniela Pires Conteúdo

O Windows 7 é um sistema operacional desenvolvido pela Microsoft.

O EDITOR DE APRESENTAÇÕES POWER POINT

Índice Static Text (texto estático) Dynamic Text (Texto Dinâmico) Input Text Exercício...8

GUIA MUDANÇA E FORMATAÇÃO DE SERVIDOR - SLIM

3. No painel da direita, dê um clique com o botão direito do mouse em qualquer espaço livre (área em branco).

SIMULADOS & TUTORIAIS

Guia de Início Rápido

Google Drive: Acesse e organize seus arquivos

Disciplina: Programas de Edição de Textos Professora: Érica Barcelos

ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia.zip novembro 1996 Tutorial - Autoria em World Wide Web

Serviço Técnico de Informática. Curso Básico de PowerPoint

Microsoft Word INTRODUÇÃO

Aula 03 PowerPoint 2007

SIMULADOS & TUTORIAIS

MICROSOFT VISIO 2013 MODELOS ELABORANDO ORGANOGRAMAS

Criando uma agenda simples com NetBeans 6.5

Roteiro 2: (Planilhas Eletrônicas) - Função procv / manipulação de formulários

Iniciação à Informática

ÍNDICE... 2 INTRODUÇÃO... 4

CRIANDO TEMPLATES E LEGENDAS

ÍNDICE... 3 INTRODUÇÃO A série... 4

Montar planilhas de uma forma organizada e clara.

IMPORTANTE: O sistema Off-line Dr.Micro é compatível com os navegadores Mozilla Firefox e Internet Explorer.

Planilhas Eletrônicas

COLÉGIO ESTADUAL PAULO LEMINSKI APOSTILA SOBRE O BROFFICE IMPRESS

Janelas e seus elementos

Clique no menu Iniciar > Todos os Programas> Microsoft Office > Publisher 2010.

Word 1 - Introdução Principais recursos do word A janela de documento Tela principal

CAPÍTULO 35 Como utilizar os componentes ColdFusion

SIMULADOS & TUTORIAIS

Professor: Macêdo Firmino Disciplina: Sistemas Operacionais de Rede

Microsoft Project 2010 Professional

SUMÁRIO TUTORIAL DO HQ. 2 DICAS PEDAGÓGICAS:. 2 DOWNLOAD DA INSTALAÇÃO. 2 PASSO 1 FORMULÁRIO PARA DOWNLOAD. 2 PASSO 2 ESCOLHENDO A VERSÃO.

MANUAL DO GERENCIADOR ESCOLAR WEB

Follow-Up Acompanhamento Eletrônico de Processos (versão 3.0) Manual do Sistema. 1. Como acessar o sistema Requisitos mínimos e compatibilidade

Configuração de assinatura de

Irá abrir a página de login. Digite ali seu Nome de usuário e senha. Idioma, deixe padrão. Aperte enter ou click sobre o botão Acessar.

POWERPOINT BÁSICO. Facilitador Alisson Cleiton dos Santos Analista Programador / Professor contato@alissoncleiton.com.br

Microsoft Project 2010 Professional

Inserindo Dados no Banco de Dados Paradox.

CONHECENDO A ÁREA DE TRABALHO DO WINDOWS 7

Continuação. 32. Inserir uma imagem da GALERIA CLIP-ART

Introdução O que irá mudar? Por onde começar? Para que serve cada camada (layer)? Inserindo a ClickTag...

Manual de Instalação e OPERAÇÃO

Fotografia Digital. Aula 1

Manual do Spectacle. Boudhayan Gupta Boudhayan Gupta Tradução: André Marcelo Alvarenga

Processo de download, Instalação e Configuração do CiberTrader.

O Windows 7 é um sistema operacional desenvolvido pela Microsoft.

AULA: BrOffice Impress terceira parte. Ao final dessa aula, você deverá ser capaz de:

PowerPoint. Prof. Claudio A. B. Tiellet. Parte II

UNIVERSIDADE ESTADUAL DE CAMPINAS. Instruções para Uso do Software VISIO

Microsoft Office FrontPage 2003

Polycom RealPresence Content Sharing Suite Guia rápido do usuário

Bem-vindo ao CorelDRAW, um programa abrangente de desenho e design gráfico baseado em vetor para o profissional gráfico.

Apresentação Como acessar o sistema...3

Como Associar Veículos no Cadastro de um Cliente.

Apostila de Windows Movie Maker

Vamos criar uma nova Página chamada Serviços. Clique em Adicionar Nova.

Microsoft Access: Criar relatórios para um novo banco de dados. Vitor Valerio de Souza Campos

Curso técnico: Informática Disciplina: Aplicativos computacionais

Como instalar o Ocomon passo a passo.

Microsoft Access XP Módulo Um

Gerente de Tecnologia: Ricardo Alexandre F. de Oliveira Marta Cristiane Pires M. Medeiros Mônica Bossa dos Santos Schmid WORD 2007

Capítulo 7. Sequenciamento das Tarefas

APÊNDICES. Curso de Word Avançado Adicione um apêndice ao seu documento

Apostila de criação de website

E.E.E.B. Professor José Fernandes de Oliveira. Manual de Uso. Sistema Interno (Professores)

Apostila para uso do Power Point

SIMULADOS & TUTORIAIS

NÚCLEO DE TECNOLOGIA E EDUCAÇÃO CURSO: WINDOWS MOVIE MAKER TUTORIAL

Informática básica Telecentro/Infocentro Acessa-SP

Transcrição:

SIMULADOS & TUTORIAIS TUTORIAIS FLASH O Componente ColorPicker Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste documento no todo ou em parte por quaisquer meios, seja digital, eletrônico ou impresso sem a expressa autorização do autor por escrito. Os infratores serão punidos de acordo com a Lei. Simulados & Tutoriais Tutoriais Flash Componente ColorPicker Pag. 1

TUTORIAIS FLASH O Componente ColorPicker Introdução O componente ColorPicker permite que o usuário selecione uma cor a partir de uma paleta de cores. O modo padrão desse componente mostra um botão com apenas uma cor. Veja Figura 5.1 abaixo: Figura 5.1 Componente ColorPicker Quando o usuário clicar no botão, uma paleta de cores disponíveis é mostrada, juntamente com um campo texto exibindo o código hexadecimal da cor selecionada. Veja Figura 5.2 abaixo: Figura 5.2 Componente ColorPicker com paleta de cores Você pode configurar as cores que devem aparecer na paleta do ColorPicker simplesmente alterando a propriedade colors com os valores das cores que você deseja mostrar, utilizando uma matriz. Os parâmetros do componente ColorPicker Você poderá configurar manualmente os parâmetros desse componente tanto no painel Properties quanto no painel Component Inspector. Lembramos que esses mesmos parâmetros possuem correspondentes no ActionScript com os mesmos nomes, e com isso, você poderá criar aplicações mais robustas em tempo de execução. Veja que parâmetros são esses: Parâmetro enabled selectedcolor showtextfield visible Descrição Esse parâmetro é um valor booleano que indica se o componente deverá estar habilitado ou desabilitado quando a aplicação for executada. O valor padrão é true. Esse parâmetro permite-lhe selecionar a cor padrão da paleta de cores do ColorPicker. Esse parâmetro permite-lhe optar pela exibição ou não da caixa de texto que mostra o código hexadecimal da cor. O valor padrão é false. Esse parâmetro é um valor booleano que indica se o Simulados & Tutoriais Tutoriais Flash Componente ColorPicker Pag. 2

componente deverá aparecer visível ou oculto quando a aplicação for executada. O valor padrão é: true. Interação do usuário com o componente ColorPicker O componente ColorPicker permite ao usuário selecionar uma determinada cor da paleta e aplicá-la a um outro objeto dentro de sua aplicação. Por exemplo, se você quiser que o usuário personalize os elementos de sua aplicação, tais como a cor de fundo ou a cor de um texto qualquer, você poderia incluir um componente ColorPiker e aplicar a cor que o usuário selecionou. O usuário pode escolher uma cor selecionando na paleta ou digitando o código hexadecimal da cor diretamente na caixa de texto. Após selecionada a cor, você pode usar a propriedade selectedcolor e aplicar a cor ao texto ou outro objeto qualquer da aplicação. Uma instância do componente ColorPicker recebe o foco se o usuário mover o ponteiro do mouse sobre ele ou usar a tecla TAB. Quando a paleta de cores de um componente ColorPicker estiver aberta, você poderá usar as seguintes teclas para selecionar a cor desejada: Tecla Home Up Down Right Left End Descrição Move a seleção para a primeira cor da paleta. Move a seleção uma cor acima da cor atual. Move a seleção uma cor abaixo da cor atual. Move a seleção uma cor para a direita. Move a seleção uma cor para a esquerda. Move a seleção para a última cor. Além dos parâmetros especificados anteriormente, você poderá também utilizar as seguintes propriedades, métodos e eventos específicos do componente ColorPicker: As propriedades do componente ColorPicker São as seguintes as propriedades disponíveis para o componente ColorPicker: Propriedade colors editable enabled hexvalue imemode selectedcolor showtextfield textfield Descrição Permite criar uma matriz de cores personalizadas para serem mostradas na paleta de cores do componente ColorPicker. É um valor booleano que indica se o campo de texto interno do componente ColorPicker é editável ou não. O valor padrão é true. É um valor booleano que indica se o componente poderá aceitar ou não a interação do usuário. O valor padrão é true. É uma string que representa o valor da cor selecionada, em hexadecimal. É uma string que permite configurar o modo do método de entrada do editor (IME). Indica a cor atualmente selecionada na paleta de cores do componente ColorPicker. É um valor booleano que indica se o campo de texto interno do componente ColorPicker será mostrado. É uma referência ao campo de texto interno do componente ColorPicker. Os métodos do componente ColorPicker São os seguintes os métodos disponíveis para o componente ColorPicker: Método ColorPicker close getstyledefinition open Descrição Cria uma nova instância da classe ColoPicker. Oculta a paleta de cores. Recupera o estilo de mapa padrão para o componente atual. Mostra a paleta de cores. Simulados & Tutoriais Tutoriais Flash Componente ColorPicker Pag. 3

Os eventos do componente ColorPicker Eventos são ações utilizadas pelos componentes para executar tarefas específicas, de acordo com a finalidade de cada situação. Veja a seguir os eventos disponíveis para esse componente e para que servem. Evento change close enter itemrollout itemrollover open Descrição É executado quando o usuário clica em uma cor na paleta de cores do ColorPicker. É executado quando o usuário fecha a paleta de cores. É executado quando o usuário pressiona a tecla Enter após editar o campo de texto interno do componente ColorPicker. É executado quando o usuário rola o mouse fora de uma amostra da paleta de cores. É executado quando o usuário rola o mouse sobre uma amostra da paleta de cores. É executado quando o usuário abre a paleta de cores. Veja como utilizar esses recursos nos exemplos mais adiante neste capítulo e no DVD, que acompanha a presente obra. Criando aplicações com o componente ColorPicker Vejamos através de exemplos práticos como utilizar esse componente adequadamente nas suas aplicações, inclusive em conjunto com outros componentes: Exemplo 1 Nesse exemplo inserimos um componente ColorPicker a uma aplicação durante o projeto. Aqui, cada vez que uma cor é alterada no painel ColorPicker, a função alteracor() chama a função desenha_quadrado() para pintar um quadrado com a cor selecionada no ColorPicker. Vejamos então como fazer isso: 1. Crie um novo documento (ActionScript 3.0); 2. Abra o painel Components (Ctrl + F7), e arraste um componente ColorPicker para o palco; 3. Abra o painel Properties e crie uma instância para o componente e chame-a de: paleta; 4. Nomeie a camada atual de: componentes; 5. Crie uma nova camada e chame-a de: ações; 6. Selecione o primeiro frame dessa camada, abra o painel Actions (F9) e insira o seguinte código: stop(); import fl.events.colorpickerevent; var quadrado:movieclip = new MovieClip(); Desenha um quadrado vermelho. desenha_quadrado (quadrado, 0xFF0000); addchild(quadrado); paleta.addeventlistener(colorpickerevent.change, alteracor); function alteracor(event:colorpickerevent):void { desenha_quadrado (quadrado, event.target.selectedcolor); function desenha_quadrado (box:movieclip,color:uint):void { box.graphics.beginfill(color, 1); Simulados & Tutoriais Tutoriais Flash Componente ColorPicker Pag. 4

box.graphics.drawrect(100, 150, 100, 100); box.graphics.endfill(); Vejamos como funciona o código: OBS.: Em todos os exemplos do presente capítulo incluiremos o comando stop() na primeira linha do código. Esse comando tem como objetivo interromper a aplicação quando a mesma for executada, mesmo que a aplicação não possua mais de um frame na sua linha do tempo. Consideramos um bom hábito essa prática. Portanto, não comentaremos mais essa linha nos próximos exemplos. Na linha: import fl.events.colorpickerevent; Importamos a classe ColorPickerEvent para que possamos utilizar os devidos eventos desse componente. Na linha a seguir: var quadrado:movieclip = new MovieClip(); Criamos um novo movie clip chamado quadrado utilizando o construtor MovieClip(). No bloco de código a seguir: Desenha um quadrado vermelho. desenha_quadrado(quadrado, 0xFF0000); addchild(quadrado); Chamamos a função desenha_quadrado, criada mais adiante, para desenhar um quadrado com a cor vermelha. Em seguida, colocamos o respectivo movie clip no palco através do método addchild(). Na linha: paleta.addeventlistener(colorpickerevent.change, alteracor); Utilizamos o evento CHANGE do componente ColorPicker vinculado à sua instância paleta, de forma que quando uma nova cor for selecionada, a função alteracor seja executada, alterando assim a cor do quadrado. No bloco de código seguinte: function alteracor(event:colorpickerevent):void { desenha_quadrado(quadrado, event.target.selectedcolor); Criamos a função alteracor para alterar a cor do quadrado quando uma nova cor for selecionada no ColorPicker. Finalmente, no bloco de código: function desenha_quadrado(box:movieclip,color:uint):void { box.graphics.beginfill(color, 1); box.graphics.drawrect(100, 150, 100, 100); box.graphics.endfill(); Simulados & Tutoriais Tutoriais Flash Componente ColorPicker Pag. 5

Criamos a função desenha_quadrado() para criar o quadrado inicial preenchido com a cor definida no parâmetro color, quando a aplicação for executada. 7. Execute a aplicação (Ctrl + Enter) e confira o resultado com o mostrado na Figura 5.3 abaixo: Figura 5.3 Componente ColorPicker utilizado para alterar a cor de fundo de um movie clip. 8. Clique no componente e selecione uma cor qualquer. O quadrado deverá ficar com a cor selecionada. Exemplo 2 No exemplo a seguir utilizaremos o construtor ColorPicker() para criarmos esse componente em tempo de execução. Em seguida, configuraremos a propriedade colors para os valores das cores Red (0xFF0000), Green (0x00FF00) e Blue (0x0000FF) para especificar as cores que o ColorPicker deverá mostrar. Criaremos também um componente TextArea e inserimos um texto qualquer nele. A cada vez que você selecionar uma cor diferente no ColorPicker, a cor do texto do componente TextArea será alterada. Vejamos como fazer isso: 1. Crie um novo documento (ActionScript 3.0); 2. Abra o painel Components (Ctrl + F7), e arraste um componente ColorPicker para a biblioteca; 3. Arraste também um componente TextArea diretamente para a biblioteca; 4. Nomeie a camada atual de: ações; 5. Selecione o primeiro frame dessa camada, abra o painel Actions (F9) e insira o seguinte código: stop(); import fl.controls.colorpicker; import fl.controls.textarea; import fl.events.colorpickerevent; var paleta:colorpicker = new ColorPicker(); var texto1:textarea = new TextArea(); var texto2:textformat = new TextFormat(); paleta.move(100, 100); paleta.colors = [0xff0000, 0x00ff00, 0x0000ff]; paleta.addeventlistener(colorpickerevent.change, alteracor); Simulados & Tutoriais Tutoriais Flash Componente ColorPicker Pag. 6

texto1.text = " Jorge Eider Florentino da Silva é brasileiro, natural de Natal, Estado do Rio Grande do Norte. Foi funcionário do Banco do Brasil S.A. durante 21 anos, onde atuou como consultor, programador e instrutor de vários segmentos na área de informática. Possui cursos oficiais de Flash, Fireworks e Dreamweaver da Adobe. Atualmente ministra cursos de informática em várias Escolas do Estado, é consultor particular, programador e Web Designer. Freqüenta o 5º período (penúltimo) do Curso Superior de Desenvolvimento de Sistemas para a Internet na FATERN-Gama Filho. Desenvolve aplicativos e sites dinâmicos para a Internet utilizando PHP, HTML, CSS, Flash, Dreamweaver, JavaScript, Java, Photoshop, Corel Draw, entre outros. Publicou os seguintes livros: Windows 2000 Professional, CorelDraw 10, Flash 5 e Flash MX, pela Brasport, e Flash MX 2004 Professional e Flash MX 2004 Professional ActionScript 2.0, pela Campus."; texto1.setsize(200, 200); texto1.move(200,100); addchild(paleta); addchild(texto1); function alteracor(event:colorpickerevent):void { if (TextFormat(texto1.getStyle("textFormat"))) { texto2 = TextFormat(texto1.getStyle("textFormat")); texto2.color = paleta.selectedcolor; texto1.setstyle("textformat", texto2); Vejamos os comentários sobre o código: Nas linhas: import fl.controls.colorpicker; import fl.controls.textarea; import fl.events.colorpickerevent; Importamos as classes dos respectivos componentes que iremos utilizar na nossa aplicação. No bloco de código a seguir: var paleta:colorpicker = new ColorPicker(); var texto1:textarea = new TextArea(); var texto2:textformat = new TextFormat(); Criamos instâncias dos respectivos componentes e da formatação que vamos utilizar no texto, através de seus construtores: paleta, texto1 e texto2. Nas linhas seguintes: paleta.move(100, 100); paleta.colors = [0xff0000, 0x00ff00, 0x0000ff]; paleta.addeventlistener(colorpickerevent.change, alteracor); Definimos a posição do componente ColorPicker (instância: paleta) no palco utilizando o método move(). Definimos também as cores que deverão ser mostradas no ColorPicker através da propriedade colors, e por fim, utilizamos um evento CHANGE do componente, de forma que quando uma nova cor for selecionada na paleta, a função alteracor seja executada (veja o que essa função faz mais adiante). Simulados & Tutoriais Tutoriais Flash Componente ColorPicker Pag. 7

No bloco de código seguinte: texto1.text = " Jorge Eider Florentino da Silva é brasileiro, natural de Natal, Estado do Rio Grande do Norte. Foi funcionário do Banco do Brasil S.A. durante 21 anos, onde atuou como consultor, programador e instrutor de vários segmentos na área de informática. Possui cursos oficiais de Flash, Fireworks e Dreamweaver da Adobe. Atualmente ministra cursos de informática em várias Escolas do Estado, é consultor particular, programador e Web Designer. Freqüenta o 5º período (penúltimo) do Curso Superior de Desenvolvimento de Sistemas para a Internet na FATERN-Gama Filho. Desenvolve aplicativos e sites dinâmicos para a Internet utilizando PHP, HTML, CSS, Flash, Dreamweaver, JavaScript, Java, Photoshop, Corel Draw, entre outros. Publicou os seguintes livros: Windows 2000 Professional, CorelDraw 10, Flash 5 e Flash MX, pela Brasport, e Flash MX 2004 Professional e Flash MX 2004 Professional ActionScript 2.0, pela Campus."; texto1.setsize(200, 200); texto1.move(200,100); Definimos o conteúdo do componente TextArea através da propriedade text, como também o seu tamanho através do método setsize() e a sua posição no palco através do método move(). Nas linhas seguintes: addchild(paleta); addchild(texto1); Utilizamos o método addchild() para colocarmos os devidos componentes no palco. Finalmente, no bloco de código: function alteracor(event:colorpickerevent):void { if (TextFormat(texto1.getStyle("textFormat"))) { texto2 = TextFormat(texto1.getStyle("textFormat")); texto2.color = paleta.selectedcolor; texto1.setstyle("textformat", texto2); Criamos uma função chamada alteracor de forma que quando uma nova cor for selecionada no componente ColorPicker (instância paleta), o texto do componente TextArea assuma essa nova cor. 6. Execute a aplicação (Ctrl + Enter) e confira o resultado com o mostrado na Figura 5.4 a seguir: Figura 5.4 Componente ColorPicker mostrando apenas as cores que queremos utilizar para alterar a cor do texto inserido em um componente TextArea. Simulados & Tutoriais Tutoriais Flash Componente ColorPicker Pag. 8

7. Clique no componente e selecione uma das três cores disponíveis. A cor do texto do componente TextArea deverá ser alterada para a cor selecionada. Exemplo 3 Nesse exemplo criaremos uma instância de um componente ColorPicker() utilizando o seu construtor para exibir apenas oito tonalidades da cor verde. Para isso, criamos uma matriz para armazenar os códigos hexadecimais dessas cores através da propriedade colors. Vejamos como fazer isso: 1. Crie um novo documento (ActionScript 3.0); 2. Abra o painel Components (Ctrl + F7), e arraste um componente ColorPicker para a biblioteca; 3. Nomeie a camada atual de: ações; 4. No primeiro frame dessa camada insira o seguinte código: stop(); import fl.controls.colorpicker; var paleta:colorpicker = new ColorPicker(); paleta.move(50,30); paleta.colors = [ 0x001100, 0x003300, 0x005500, 0x007700, 0x009900, 0x00BB00, 0x00DD00, 0x00FF00 ]; addchild(paleta); Vejamos os comentários sobre o código: Na linha: import fl.controls.colorpicker; Importamos a classe necessária do componente ColorPicker para que possamos utilizálo adequadamente. Na linha a seguir: var paleta:colorpicker = new ColorPicker(); Criamos uma nova instância do componente ColorPicker através de seu construtor e atribuímos à variável paleta. No bloco de código abaixo: paleta.move(50,30); paleta.colors = [ 0x001100, 0x003300, 0x005500, 0x007700, 0x009900, 0x00BB00, Simulados & Tutoriais Tutoriais Flash Componente ColorPicker Pag. 9

0x00DD00, 0x00FF00 ]; Utilizamos o método move() para posicionar o componente no palco. Em seguida, criamos uma matriz com os códigos hexadecimais das cores que desejamos mostrar através do ColorPicker utilizando a propriedade colors. No nosso caso, as cores são variações da cor verde. E finalmente na linha: addchild(paleta); Utilizamos o método addchild() para colocar o respectivo componente no palco. 5. Execute a aplicação (Ctrl + Enter) e confira o resultado com o mostrado na Figura 5.5 a seguir. Figura 5.5 Componente ColorPicker mostrando diferentes tonalidades de uma cor. Exemplo 4 Nesse exemplo utilizaremos um componente ColorPicker() para exibir as cores da paleta padrão, juntamente com um componente CheckBox, em tempo de execução, de forma que quando o CheckBox estiver selecionado, a caixa de texto que informa o código hexadecimal da cor selecionada será mostrada, caso contrário, ficará oculta. Vejamos então como fazer isso: 1. Crie um novo documento (ActionScript 3.0); 2. Abra o painel Components (Ctrl + F7), e arraste um componente ColorPicker e um componente CheckBox para a biblioteca; 3. Nomeie a camada atual de: ações; 4. No primeiro frame dessa camada insira o seguinte código: stop(); import fl.controls.checkbox; import fl.controls.colorpicker; var meucb:checkbox = new CheckBox(); meucb.textfield.autosize = TextFieldAutoSize.LEFT; meucb.label = "Mostra caixa do código das cores"; meucb.move(10, 10); meucb.selected = true; addchild(meucb); meucb.addeventlistener(event.change, alteracampo); var paleta:colorpicker = new ColorPicker(); paleta.showtextfield = meucb.selected; paleta.move(meucb.x, meucb.y + meucb.height); Simulados & Tutoriais Tutoriais Flash Componente ColorPicker Pag. 10

paleta.open(); addchild(paleta); function alteracampo(event:event):void { paleta.showtextfield = meucb.selected; Vejamos como funciona o código: Nas linhas: import fl.controls.checkbox; import fl.controls.colorpicker; Importamos as classes dos respectivos componentes para que possamos utilizar os seus recursos convenientemente. Na linha a seguir: var meucb:checkbox = new CheckBox(); Criamos uma instância do componente CheckBox utilizando o respectivo construtor e associamos à variável meucb. No bloco de código seguinte: meucb.textfield.autosize = TextFieldAutoSize.LEFT; meucb.label = "Mostra caixa do código das cores"; meucb.move(10, 10); meucb.selected = true; Definimos a localização e o rótulo do CheckBox. Definimos a posição do CheckBox no palco (move), e decidimos manter o CheckBox já selecionado (selected) quando ao aplicação for executada. No bloco a seguir: meucb.addeventlistener(event.change, alteracampo); addchild(meucb); Utilizamos um evento CHANGE para o CheckBox (meucb), de forma que quando o mesmo for clicado a função alteracampo seja executada. Em seguida, utilizamos o método addchild() para colocar o respectivo componente no palco. Na linha a seguir: var paleta:colorpicker = new ColorPicker(); Criamos uma nova instância do componente ColorPicker (paleta) utilizando o respectivo construtor do componente. No bloco seguinte: paleta.showtextfield = meucb.selected; paleta.move(meucb.x, meucb.y + meucb.height); paleta.open(); addchild(paleta); Simulados & Tutoriais Tutoriais Flash Componente ColorPicker Pag. 11

Definimos que o campo de texto do componente ColorPicker será mostrado (showtextfield) quando a aplicação for executada, tendo em vista que o CheckBox estará selecionado. Definimos também a posição (move) da paleta de cores no palco e que a mesma será aberta (open) quando a aplicação for executada. Em seguida, utilizamos o método addchild() para colocar o respectivo componente no palco. E, finalmente no código a seguir: function alteracampo(event:event):void { paleta.showtextfield = meucb.selected; Criamos uma função chamada alteracampo de forma que quando for executada, mostre o campo de texto da paleta de cores do componente ColorPicker. 5. Execute a aplicação (Ctrl + Enter) e confira o resultado com o mostrado na Figura 5.6 a seguir. Figura 5.6 Componente ColorPicker utilizado conjuntamente com um componente CheckBox para mostrar/ocultar a caixa de texto que mostra o código hexadecimal da cor atual do ColorPicker. Exemplo 5 Nesse exemplo utilizaremos um componente ColorPicker em tempo de execução, de forma que quando uma cor for selecionada na paleta, seu valor hexadecimal seja mostrado no painel Output. Vejamos então como fazer isso: 1. Crie um novo documento (ActionScript 3.0); 2. Abra o painel Components (Ctrl + F7), e arraste um componente ColorPicker para a biblioteca; 3. Nomeie a camada atual de: ações; 4. No primeiro frame dessa camada insira o seguinte código: stop(); import fl.controls.colorpicker; import fl.events.colorpickerevent; var paleta:colorpicker = new ColorPicker(); paleta.move(10, 10); addchild(paleta); paleta.addeventlistener(colorpickerevent.change, mostravalor); function mostravalor (event:colorpickerevent):void { Simulados & Tutoriais Tutoriais Flash Componente ColorPicker Pag. 12

trace("cor selecionada:", event.color, "(#" + event.target.hexvalue + ")"); Vejamos como funciona o código: Nas linhas: import fl.controls.colorpicker; import fl.events.colorpickerevent; Importamos as classes necessárias para que possamos utilizar o componente adequadamente. No código seguinte: var paleta:colorpicker = new ColorPicker(); paleta.move(10, 10); addchild(paleta); Criamos uma nova instância do componente ColorPicker utilizando seu respectivo construtor. Em seguida, definimos sua posição no palco utilizando o método move(), e logo após o colocamos no palco através do método addchild(). No bloco de código: paleta.addeventlistener(colorpickerevent.change, mostravalor); function mostravalor (event:colorpickerevent):void { trace("cor selecionada:", event.color, "(#" + event.target.hexvalue + ")"); Utilizamos um evento CHANGE do componente ColorPicker vinculado à instância paleta, de forma que quando uma cor da paleta for selecionada a função mostravalor seja executada. Logo em seguida criamos essa função cuja finalidade é mostrar no painel Output o código hexadecimal dessa cor. 5. Execute a aplicação (Ctrl + Enter) e confira o resultado com o mostrado na Figura 5.7 abaixo: Figura 5.7 Componente ColorPicker utilizado para mostrar no painel Output o código hexadecimal da cor selecionada. Exercícios de Fixação 1. Se quiséssemos alterar a cor padrão do componente ColorPicker que parâmetro do painel Properties utilizaríamos? a) showcolor Simulados & Tutoriais Tutoriais Flash Componente ColorPicker Pag. 13

b) changecolor c) movecolor d) selectedcolor e) Não é permitido alterar 2. A caixa de texto que acompanha o componente ColorPicker serve para: a) Inserir o nome da cor que se deseja utilizar. b) Inserir o código decimal da cor desejada. c) Inserir o código hexadecimal da cor desejada. d) Definir as cores que deverão ser mostradas no componente. 3. Se não quisermos que a caixa de texto que acompanha o componente ColorPicker seja mostrada, que parâmetro do painel Properties devemos alterar para false? a) selectedtext b) selectedtextfield c) showtextfield d) showtext e) visibletext 4. Em um componente ColorPicker, se estivermos com a paleta de cores aberta, qual a tecla que podemos utilizar para selecionar a última cor? a) Ctrl+End b) Shift+Alt+End c) Seta direita+end d) Alt+End e) End 5. Qual a propriedade que permite ao usuário editar o conteúdo da caixa de texto de um componente ColorPicker? a) enabled b) editable c) enable d) editabled 6. Qual dos métodos abaixo é utilizado para ocultar a paleta de cores de um componente ColorPicker? a) hidden b) enter c) close d) hide 7. Qual a propriedade que devemos utilizar para mostrar uma paleta de cores de um componente ColorPicker? a) show b) showcolor c) opencolor d) open 8. O que faz o evento itemrollover de um componente ColorPicker? a) É executado quando o usuário rola o mouse sobre o componente ColorPicker. b) É executado quando o usuário rola o mouse sobre uma amostra da paleta de cores. c) É executado quando o usuário arrasta o componente ColorPicker. Simulados & Tutoriais Tutoriais Flash Componente ColorPicker Pag. 14

d) É executado quando o usuário rola o mouse para fora da paleta de cores. 9. A linha de código a seguir: paleta.colors = [0x000000, 0xffffff]; Indica que: a) Serão mostradas as cores preta e branca na paleta. b) Serão mostradas todas as cores da paleta, do preto ao branco. c) Nenhuma cor será mostrada, pois o código está errado. d) Serão mostradas as cores preta e vermelha. 10. Qual das alternativas abaixo cria uma nova instância de um componente ColorPicker chamada paleta? a) var paleta:colorpicker = newcolorpicker(); b) var paleta:colorpicker = ColorPicker(); c) var paleta:colorpicker = new ColorPicker(); d) var paleta:colorpicker = new.colorpicker(); Exercícios Propostos 1. Crie uma aplicação de forma que quando o componente ColorPicker for clicado mostre na paleta de cores dez tonalidades da cor vermelha. Veja uma sugestão para o layout desse exercício na figura abaixo: 2. Crie uma aplicação utilizando um componente ColorPicker de forma que quando a tecla ENTER for pressionada mostre em um campo de texto dinâmico o valor da cor selecionada. Veja uma sugestão para o layout desse exercício na figura abaixo: 3. Crie uma aplicação de forma que a paleta de cores mostre 5 cores aleatórias de uma matriz de 15 cores, toda vez que a aplicação for executada. Veja uma sugestão para o layout desse exercício na figura abaixo: Simulados & Tutoriais Tutoriais Flash Componente ColorPicker Pag. 15

Simulados & Tutoriais Tutoriais Flash Componente ColorPicker Pag. 16