Universidade do Vale do Paraíba Colégio Técnico Antônio Teixeira Fernandes Disciplina Programação Orientada a objetos II. Material III-Bimestre Caixa de Combinação,Caixa de Lista, Botão de Rádio, Botão de verificação,Painel de rolagem Barra de Rolagem, Manipulando dados dos objetos de interface, Controlando as propriedades de um filme. Criando Funções e procedimentos. Prof. Responsáveis Wagner Santos C. de Jesus

2 Objetos de controle Objeto Caixa de Lista Caixa de Combinação Barra de Rolagem Botão de Rádio Botão de Verificação Métodos e propriedades de controleEvento

3 Icones que representam os objetos * Os objetos acima mencionados permitem que o usuário possua maior facilidade no contato com uma interface desenhada em uma aplicação.

4 Caixa de lista PropriedadesValor LabelsDetermina títulos da caixa DataDetermina dados da caixa Select MultipleInformação booleana que determina o tipo de seleção da caixa de texto. Change HandlerFunção a ser executada mediante a seleção da caixa.

5 Adicionando dados em uma lista Método : addItem() – em tempo de execução. Exemplo : _root.lista.addItem("Banana"); _root.lista.addItem("Laranja"); _root.lista.addItem("Abacaxi");

6 Capturando informações de uma lista Método : getvalue() – Selecionadas pelo usuário. Exemplo : str1 = _root.lista.getValue();

7 Capturando os elementos por intermédio de índices.(Lista) Método : getItemAt( ) – com a propriedade Label ou Data. Exemplo : items = _root.lista.getItemAt(0).Label;

8 Contando o número de elementos em uma lista. Método : getLength() Exemplo : tam = _root.lista.getLength() ;

9 Retornando o número do índice selecionado. Método : getSelectedIndex() Exemplo : x = _root.lista.getSelectedIndex(); str1 = _root.lista.getItemAt(x).Label;

10 Removendo elementos de uma caixa de lista. Método :removeItemAt( ); removeAll(); remove todos os itens. Exemplo : _root.lista.removeItemAt(1); _root.lista.removeAll(); // Todos Elementos

11 Caixa de Combinação PropriedadesValor Editable Determina se poderá haver ou não edição da caixa.(boolean) LabelsDetermina títulos da caixa DataDetermina dados da caixa Row CountO número de linhas exibidas na caixa de combinação Change HandlerFunção a ser executada mediante a seleção da caixa.

12 Observação : Todos os métodos válidos para a caixa de lista também são equivalentes para a caixa de combinação.

13 Caixa de Verificação PropriedadesValor Label Mensagem frontal da caixa Initial Value Determina se a caixa irá aparecer marcada ou não (boolean) Label PlacementDetermina se o marcador irá aparecer a esquerda ou direita da caixa. Change HandlerFunção a ser executada mediante a seleção da caixa.

14 Capturando informações da caixa de verificação. Método : getValue() – retorna true caso a caixa seja selecionada ou falso caso contrário. Exemplo : if(_root.chk.getValue()) trace(Ok); else trace(Não Selecionado !!);

15 colocando informação na caixa de verificação. Método : setValue( ) – Marca a caixa ou desmarca usando um valor booleano. Exemplo : _root.chk.setValue(true);

16 PropriedadesValor Label Mensagem frontal dos botões Initial State Determina o estado do botão (boolean) Group NameNome do grupo de botões. DataDetermina dados da lista dos botões. Label Placement Determina se o marcador irá aparecer a esquerda ou direita da caixa. Usando botões de rádio

17 Capturando seleção de botões de rádio. Método : getValue() – retornar o índice correspondente a opção selecionada no botão. Exemplo : indice = _root.radioGroup.getValue();

18 Habilitando um botão de rádio em tempo de execução. Método : setState( ); Exemplo : _root.r1.setState(true); Onde r1; nome da instância individual do objeto.

19 Polimorfismo Grande parte dos métodos do ActionScript podem ser aplicados a vários objetos, esse conceito e denominado polimorfismo ou seja (herança de um método). Objeto ] Caixa de Texto Botão de comando Caixa de Lista Caixa combinação Botão de rádio Caixa de verificação setEnabled(boolean)

20 Exemplo para desabilitar uma caixa de lista Método : setEnabled( ); Exemplo : _root.lista.setEnabled(false);

21 Usando barra de rolagem setSize() : Envia um valor que determina o tamanho da barra de rolagem. Exemplo : _root.scroll.setSize(100); setHorizontal() : Booleano que determina se a barra irá ficar na horizontal ou vertical; (true/false). Exemplo : _root.scroll.setHorizontal (true);

22 Determinando limite da barra de rolagem. Método : setScrollProperties(,, ); : Tamanho do indicador da barra. : Limite inferior do deslocamento da barra. : Limite superior do deslocamento da barra. Exemplo : _root.scroll.setScrollProperties (3, 0, 100);

23 Capturando informação da barra de rolagem Método : getScrollPosition() – retorna um número correspondente a posição da barra de rolagem. Exemplo : _root.texto =_root.scroll.getScrollPosition();

24 Funções e Procedimento Uma função nada mais é do que um pequeno fragmento de código que retorna um valor; o procedimento funciona exatamente da mesma forma mas não retorna nenhum tipo de valor.

25 Funcionamento das Funções e Procedimentos Chamada (função) Ou Procedimento Camada Implementação Função Resultado Função Procedimento

26 Comando function Permite criar uma função ou um procedimento. Sintaxe: function ( ) { [return ] } function ( ) { }

27 Exemplo : function function somatoria(valores) { soma = 0; for(i=0;i<=valores.length-1;i++){ soma+=Number(valores[i]); } return soma; }

28 Exemplo da chamada da function on (press) { num = new Array(1,2,3); trace(_root.somatoria(num)); }

29 Associando um evento na alteração de um objeto em tempo de execução Objeto setChangeHandler() Função (FDU) Estimulo(Usuário Final)

30 Exemplo: setChangeHandler() lista.setChangeHandler("funcao"); function funcao() { trace(Execução da função ); }

31 Camadas No ambiente do Flash, muitas vezes se faz necessário associar em layers(camadas) para que se possa desenvolver programas com maior flexibilidade de manutenção e dividir as rotinas escritas em uma aplicação.

32 Para criar uma nova camada basta seguir as informações abaixo. Clique da direita com o mouse na opção Camada 1 Selecionar Inserir Camada

33 Aplicando rotinas em uma camada Selecione a camada a ser usada. Implementação do código

34 Quadros Para se criar em uma aplicação onde temos várias telas para serem chamadas durante a execução da aplicação é necessário criarmos os quadros (pictures). Inserir um quadro é necessário para se criar animações e novas telas; usando a linha de tempo.

35 Criando um novo Quadro Linha de tempo Quadro Chave

36 Criando um quadro chave Selecione a opção do menu. Clique da direita do mouse.

37 Realizando troca de quadros Método: gotoAndStop( | ); : Determina o número do quadro a ser apresentado na cena. : Poderá ser usado como opção o nome do quadro.

38 Aplicação do método : gotoAndStop() on (press) { _root.gotoAndStop (2); } on (press) { _root.gotoAndStop (1); }

39 Movimento de quadros Quadro-1 Quadro-2 Quadro-n Temporizador 12 qps

40 Parando a movimentação dos quadros. Método : stop() – interrompe a transição de um quadro para outro. (deve ser colocado no palco). Exemplo : stop();

41 Carregando URL Aplicação ActionScript Navegador de Internet (Browser)

42 Carregando uma página em ActionScript Método : getURL() – Carrega uma página direto de um programa AS. Exemplo : _root.getURL ( [,janela],[metodo]); url – Caminho da página janela – Qual janela do browser será exibida. Método – Post ou Get para envio de dados para uma página.

43 Exemplo : getURL() on (press) { _root.getURL (" }

44 Trabalho com cores Criando uma instância da classe Color() : -Instância vem a ser a criação de um objeto. Exemplo : cor = new Color(Objeto);

45 Tabela de cores R(Red)G(Green)B(Blue)Cor 000Preto ff00Vermelho 0ff0Verde 00ffAzul ff Branco

46 Colocando a cor em objeto. Método : setRGB() – colocar cor em um objeto usando parâmetro hexadecimal. Exemplo : cor = new Color(filme); cor.setRGB(0xff0000);

47 Observação Durante a execução do programa não existe a possibilidade de instanciar novamente a classe Color(); para que isso seja possível é necessário criar um conceito denominado de Transformação.

48 Aplicando Transformação de cores Método : setTransform() : definição da cor usando valor decimal. Exemplo : cor.setTransform(objetocor);

49 Parâmetros de transformação PropriedadeFuncionalidade ra Porcentagem do componente vermelho(-100 a 100) rb Deslocamento do componente vermelho (-255 a 255) ga Porcentagem de componente verde (-100 a 100) gb Deslocamento do componente verde(-255 a 255) ba Porcentagem de componente azul (-100 a 100) bb Deslocamento do componente azul (-255 a 255) aa Porcentagem do canal alpha (-100 a 100) ab Deslocamento do canal alpha (-255 a 255)

50 Aplicando : setTransform() filme Objeto (Cor) Objeto (Transformação) Definir parâmetros Transformação Transforma a cor setTransform()

51 Exemplo on (release) { // cria um objeto de cor cor = new Color (_root.filme); // cria um objeto de transformação novaCor = new Object(); // define os parâmetros de transformação novaCor.ra = 100; novaCor.rb = 255; //R novaCor.ga = 100; novaCor.gb = 0; //G novaCor.ba = 100; novaCor.bb = 0; //B // transforma a cor do clipe cor.setTransform(novaCor); }

52 Modificando propriedade de um objeto em tempo de execução setStyleProperty Objeto setStyleProperty Modificando propriedades Efeito

53 Propriedades PropriedadeValor selectionCor (Hexadecimal) textFontTipo da fonte

54 Exemplos Muda a cor da barra de rolagem de uma caixa de lista. Exemplo : listBox.setStyleProperty("selection",0xff0000); Muda o tipo da fonte dos botões de radio. Exemplo: radioGroup.setStyleProperty("textFont", Arial Black);

55 Painel de Rolagem PropriedadesValor Scroll Content Símbolo da biblioteca a ser exibido. Horizontal ScrollAtiva a barra de rolagem Horizontal (auto/true/false) Vertical ScrollAtiva a barra de rolagem vertical (auto/true/false) Drag ContentPermite movimentar a imagem arrastando o mouse(true/false).

56 Colocando um símbolo na biblioteca Selecione a opção do menu Selecione a opção Importar

57 Selecione o arquivo (jpg) da caixa de dialogo abaixo Selecione o arquivo a ser importado

58 Click da direita do mouse na figura. Selecione a opção converte símbolo

59 Selecione as opções marcadas Escreva o nome do símbolo a ser criado. Selecione a opção para vincular o símbolo ao programa.

60 Observação Feitos os passos anteriores a figura do palco deve ser apagada.

61 Vinculando símbolos ao ScrollPane ScrollPane setScrollContent() Biblioteca(símbolos)

62 Aplicando Símbolos da bibilioteca Método : setScrollContent( ) : Insere uma figura a um objeto ScrollPane. Exemplo : _root.scrollPane.setScrollContent("sala")

63 Programa Exemplo on (press) { _root.scrollPane.setScrollContent("sala") }