PAINEL DE TORNEIO

Veremos como construir um painel de torneio com diversas informações ocupando um pequeno espaço da tela.

Passo 1

Para economizarmos tempo, preparei o arquivo inicial com as imagens, botões, layers nomeadas, etc. Faça o download do arquivo fonte:

Arquivo fonte

Passo 2

Salve o arquivo “Painel de Torneio (Inicial).fla” como “Painel de Torneio.fla” para manter a cópia original em caso de problemas.

Passo 3

Na layer Rótulos, crie keyframes (Insert > Timeline > Keyframe; F7) nos frames 1, 2, 8 a 13.

Passo 4

Através do Painel Properties, nomeie os 8 keyframes criados como: Apresentação, Enxadristas, Classificação, Rodada1, Rodada2, Rodada3, …, Rodada5

Passo 5

Clique no frame 1 da layer Texto 1 (dentro da pasta Título, que por sua vez está dentro da pasta Apresentação) e arraste uma instância do símbolo graphic “Título do Torneio” para o Stage, posicionando-o em X: 276 Y: 154.

Passo 6

Clique no frame 1 da layer Texto 2 (dentro da pasta Título, que por sua vez está dentro da pasta Apresentação) e arraste uma instância do símbolo graphic “Etapa” para o Stage, posicionando-o em X: 330 Y: 177.

Passo 7

Clique no frame 1 da layer Texto 3 (dentro da pasta Título, que por sua vez está dentro da pasta Apresentação), clique na Text Tool (T), a seguir no Stage, digitando o seguinte texto: “10 de Fevereiro de 2007″, pocisionando como segue:

Passo 8

Clique no frame 1 da layer Texto 4 (dentro da pasta Título, que por sua vez está dentro da pasta Apresentação), clique na Text Tool (T), a seguir no Stage, digitando o seguinte texto: “Inscrições Gratuitas até 07Fe2007″, pocisionando como segue:

Passo 9

Clique no frame 1 da layer BI que está logo abaixo da layer Texto 4 e arraste uma instância do Botão Invisível da Library para o Stage. Redimensione e reposicione este botão como mostrado a seguir:

Obs.: este será o botão invisível que, quando clicado, levará o usuário ao site da Academia de Xadrez.

Passo 10

Clique no frame 1 da layer Link (está abaixo da layer BI), clique na Text Tool (T), a seguir no Stage, digitando o seguinte texto: “www.academiadexadrez.com”, pocisionando como segue:

Obs.: se achar necessário, clique na coluna do olho na layer BI para deixar o Botão Invisível “invisível” para não atrapalhar seu trabalho de edição.

Passo 11

Clique no frame 1 da layer Logo que está logo abaixo da layer Link e arraste uma instância do LOGO_06 da Library para o Stage. Reposicione-o como mostrado a seguir:

Ao final destes procedimentos, deve ter obtido algo parecido com isso:

Passo 12

Clique no frame 1 da layer Base (está logo abaixo da layer Resultados, que por sua vez está dentro da pasta Rodadas) e arraste uma instância do objeto graphic Base Maior da Library para o Stage. Reposicione-o como mostrado a seguir:

Passo 13

Na mesma layer, clique no frame 13 e tecle F5 para estender a Base Maior até o mesmo.

Passo 14

Dentro da pasta Abas, procure pela layer Apresentação. Clique no primeiro frame desta layer e arraste uma instância do objeto graphic “Base Menor” da Library para o Stage. Reposicione-o e mude sua cor como mostrado a seguir:

Passo 15

Repita esse procedimento para as layers Enxadristas, Classificação, Rodada 1, Rodada 2, …, Rodada 5, posicionando as abas como segue:

Enxadristas
X: 125 Y: 69

Classificação
X: 155 Y: 69

Rodada 1
X: 295 Y: 308

Rodada 2
X: 325 Y: 308

Rodada 3
X: 355 Y: 308

Rodada 4
X: 385 Y: 308

Rodada 5
X: 415 Y: 308

Ao final deve ter algo parecido com a figura a seguir:

Passo 16

Clique no frame 1 da layer “Letra” que está acima da layer “Apresentação” e a seguir na ferramenta Text Tool (T), para inserirmos a legenda dentro da primeira aba. Clique em qualquer lugar do Stage e digite “A”. Posicione, através do Panel Properties essa letra na seguinte posição:

Passo 17

Siga o mesmo procedimento para as layers “Letra” que estão acima das layers “Enxadristas” e “Classificação” as letras “E” e “C” nas seguintes posições:

Enxadristas (E)
X: 132 Y: 55

Classificação (C)
X: 162 Y: 55

Passo 18

Analogamente (o nome da layer agora é “Número”) vamos identificar as abas inferiores com os números das rodadas:

Rodada 1 (1)
X: 302 Y: 300

Rodada 2 (2)
X: 332 Y: 300

Rodada 3 (3)
X: 362 Y: 300

Rodada 4 (4)
X: 392 Y: 300

Rodada 5 (5)
X: 422 Y: 300

Passo 19

Clique no frame 1 da layer AS, tecle F9 para abrir o Panel Actions e digite o seguinte código:

Com isso finalizamos a apresentação. Vamos agora desenvolver a seção Enxadristas.

Passo 20

Na pasta Enxadrista 1, clique no frame 2 da layer Foto e tecle F7 para criar um keyframe. Siga o mesmo procedimento para as layers Nick, Nome, País, Rating.

Passo 21

Clique no frame 2 da layer Foto onde acabamos de criar o keyframe e arraste uma instância de “adams” para o Stage, posicionando-o em como segue:

Passo 22

Clique no frame 2 da layer Nick onde acabamos de criar o keyframe, clique em qualquer lugar no Stage e digite “ADAMS”. A seguir, clique fora do texto com o mouse e clique sobre ele novamente para posicioná-lo como segue:

Passo 23

Clique no frame 2 da layer Nome onde acabamos de criar o keyframe, clique em qualquer lugar no Stage e digite “Michael Adams”. A seguir, clique fora do texto com o mouse e clique sobre ele novamente para posicioná-lo como segue:

Passo 24

Clique no frame 2 da layer País onde acabamos de criar o keyframe, clique em qualquer lugar no Stage e digite “Inglaterra”. A seguir, clique fora do texto com o mouse e clique sobre ele novamente para posicioná-lo como segue:

Passo 25

Clique no frame 2 da layer Rating onde acabamos de criar o keyframe, clique em qualquer lugar no Stage e digite “2755″. A seguir, clique fora do texto com o mouse e clique sobre ele novamente para posicioná-lo como segue:

Passo 26

Siga os procedimentos análogos para Enxadrista 2 com as seguintes configurações no frame 3:

- Foto: anand
- Nick: ANAND (X: 147 Y: 270)
- Nome: Viswanathan Anan
- País: Índia
- Rating: 2792

Passo 27

Siga os procedimentos análogos para Enxadrista 3 com as seguintes configurações no frame 4:

- Foto: kasim
- Nick: KASIMDZHANOV (X: 105 Y: 270)
- Nome: Rustam Kasimdzhanov
- País: Uzbequistão
- Rating: 2683

Passo 28

Siga os procedimentos análogos para Enxadrista 4 com as seguintes configurações no frame 5:

- Foto: kasparov
- Nick: KASPAROV (X: 128 Y: 270)
- Nome: Rustam Kasimdzhanov
- País: Uzbequistão
- Rating: 2849

Passo 29

Siga os procedimentos análogos para Enxadrista 5 com as seguintes configurações no frame 6:

- Foto: kramnik
- Nick: KRAMNIK (X: 134 Y: 270)
- Nome: Vladimir Kramnik
- País: Rússia
- Rating: 2769

Passo 30

Siga os procedimentos análogos para Enxadrista 6 com as seguintes configurações no frame 7:

- Foto: morozevich
- Nick: MOROZEVICH (X: 117 Y: 270)
- Nome: Alexander Morozevich
- País: Rússia
- Rating: 2758

Passo 31

Na pasta Navegação, clique no frame 3 da layer Recua e arraste uma instância do símbolo Button rounded grey play (X: 400 Y: 280). Use o Modify > Transform > Flip Horizontal para inverter o sentido da seta. A seguir clique no frame 7 e tecle F5 para estender os frames desta layer.

Passo 32

Na pasta Navegação, clique no frame 2 da layer Avança e arraste uma instância do símbolo Button rounded grey play (X: 431 Y: 280). A seguir clique no frame 6 e tecle F5 para estender os frames desta layer.

Passo 33

Na pasta Navegação, clique no frame 3 da layer BI acima da layer Avança e arraste uma instância do símbolo Botão Invisível (X: 384 Y: 267). A seguir clique no frame 7 e tecle F5 para estender os frames desta layer.

Passo 34

Na pasta Navegação, clique no frame 2 da layer BI acima da layer Recua e arraste uma instância do símbolo Botão Invisível (X: 416 Y: 267). A seguir clique no frame 6 e tecle F5 para estender os frames desta layer.

Vamos agora preparar as abas desta seção…

Passo 35

Clique na layer Apresentação (dentro da Pasta Abas), clique no frame 2, tecle F6, clique na aba que surgiu no Stage e configure, no Panel Properties, a propriedade Color como None. A seguir, clique no frame 13 e tecle F5.

Passo 36

Clique no frame 13 da layer Letra que está acima da layer Apresentação e tecle F5 para estender os frames até ele.

Passo 37

Clique no frame 2 da layer BI que está acima da layer Letra e tecle F7 para criar um keyframe. Arraste uma instância do Botão Invisível (X: 97 Y: 49) para este keyframe. A seguir, selecione o frame 13 desta layer e tecle F5.

Vamos agora configurar a aba Enxadristas…

Passo 38

Clique no frame 8 da layer Enxadristas (3 layers abaixo da layer Apresentação que acabamos de configurar) e tecle F6 para copiar o keyframe. A seguir, selecione o frame 13 e tecle F5.

Passo 39

Clique no frame 2 da mesma layer, tecle F6 e altere a propriedade Color, no Panel Propertie para Tint (#CCCCCC).

Passo 40

Clique no frame 13 da layer Letra (que está acima da layer Enxadrista) e tecle F5.

Passo 41

Arraste uma instância do Botão Invisível para o frame 1 da layer BI (acima da layer Letra do passo anterior) e posicione em X: 127 Y: 49. Clique no frame 8 e tecle F6. A seguir no frame 13 e tecle F5. Selecione o frame 2 e crie um keyframe em branco teclando F7.

Vamos agora configurar a aba Classificação…

Passo 42

Clique no frame 9 da layer Classificação (3 layers abaixo da layer Enxadristas que acabamos de configurar) e tecle F6 para copiar o keyframe. A seguir, selecione o frame 13 e tecle F5.

Passo 43

Clique no frame 8 da mesma layer, tecle F6 e altere a propriedade Color, no Panel Propertie para Tint (#CCCCCC).

Passo 44

Clique no frame 13 da layer Letra (que está acima da layer Classificação) e tecle F5.

Passo 45

Arraste uma instância do Botão Invisível para o frame 1 da layer BI (acima da layer Letra do passo anterior) e posicione em X: 157 Y: 49. Clique no frame 9 e tecle F6. A seguir no frame 13 e tecle F5. Selecione o frame 8 e crie um keyframe em branco teclando F7.

Vamos configurar a aba Rodada 1…

Passo 46

Clique no frame 10 da layer Rodada 1 (está dentro da pasta Abas) e tecle F6. A seguir, selecione o frame 13 e tecle F5.

Passo 47

Clique no frame 9 da mesma layer, tecle F6 e altere a propriedade Color, no Panel Propertie para Tint (#CCCCCC).

Passo 48

Clique no frame 13 da layer Número (que está acima da layer Rodada 1) e tecle F5.

Passo 49

Arraste uma instância do Botão Invisível para o frame 1 da layer BI (acima da layer Letra do passo anterior) e posicione em X: 297 Y: 295. Clique no frame 10 e tecle F6. A seguir no frame 13 e tecle F5. Selecione o frame 9 e crie um keyframe em branco teclando F7.

Passo 50

Configure as outras rodadas de maneira análoga à anterior. Você pode se basear onde estão os keyframes observando a figura:

Posições dos Botões Invisíveis das Rodadas:

Rodada 2 (X: 327 Y: 295)
Rodada 3 (X: 357 Y: 295)
Rodada 4 (X: 387 Y: 295)
Rodada 5 (X: 417 Y: 295)

A codificação para navegar através dos enxadristas vamos inserir posteriormente, ok? Vamos configurar a seção Classificação…

Passo 51

Na layer Título (está na pasta Cabeçalho Comum), clique no frame 8 e tecle F7, então arraste uma instância do símbolo graphic Título de Torneio para o Stage (X: 270 Y: 105). Clique no frame 13 e a seguir tecle F5.

Passo 52

Siga procedimento análogo para posicionar uma instância do símbolo graphic Etapa (X: 324 Y: 127).

Passo 53

Na pasta classificação, preencha as respectivas layers com Static Texts posicionando o texto como segue:

Observação: acostume-se a colocar cada objeto em sua respectiva layer, pois é a melhor maneira de se trabalhar.

Passo 54

Crie um keyframe nos frames número 8 das layers BI, Link e Logo que estão dentro da pasta Classificação e arraste uma instância do LOGO_06 da Library para o frame 8 da layer Logo (X: 91 Y: 85). Digite o texto “www.academiadexadrez.com” no frame 8 da layer Link (X: 101 Y: 276). Arraste um Botão Invisível para o frame 8 da layer BI, redimensionando-o para W: 170 H: 205 e reposicione para X: 91 Y: 85. A seguir, selecione os frames 13 destas 3 layers (clique no primeiro, segure o Shift e clique no último) e tecle F5.

Passo 55

Descendo um pouco mais, encontramos a layer Título e Resultados, que está sob a pasta Rodadas. Crie keyframes nos frames 9 dessas layers e em cada uma digite o texto correspondente:

Siga o mesmo procedimento nos frames 10 a 13 e insira, respectivamente, o seguinte conteúdo:

Passo 56

Vamos renomear os Botões Invisíveis através do Panel Properties com seus respectivos nomes:

apresentacao_bt
enxadristas_bt
classificacao_bt
r1_bt
r2_bt
r3_bt
r4_bt
r5_bt
academia_bt (BI do logotipo)

Passo 57

Volte para a layer AS e digite o seguinte código no primeiro frame:

Faça uma cópia deste código nos frames 2 a 13 da layer As.

Passo 58

No frame 2 da layer AS, acrescente ao final do código as seguintes linhas de comando:

Nos frames 3 a 6, acrescente:

E no frame 7, apenas:

Pronto, já pode gerar o swf e navegar pelo painel.