Calendário dinâmico

[filip_e]

Calendário dinámico

Por que TextFields e não MovieCLips?

Simples. Para figuras retangulares com preenchimento sólido, e que não vão desempenhar nenhum outro papel, a não ser exibir os textos e colocarem-se no local determinado, os TextFields bastam. O objeto Texto é um recurso poderoso do Flash, com muitos métodos, que combinados com alguns eventos e ações criam um efeito bastante impressionante e com um tamanho em kb incrivelmente pequeno. O arquivo é totalmente dinámico e não vamos utilizar nada mais que códigos! Coloque esse código no primeiro frame. Na parte de baixo do artigo o código está todo comentado.

semanas = ["segunda", "terça", "quarta", "quinta", "sexta", "sábado", "domingo"];
meses = ["jan", "fev", "mar", "abr", "mai", "jun", "jul", "ago", "set", "out", "nov", "dez"];
largDia = 15;
largSemana = 68;
largMes = 38;
largura = 500;
posx = (largura-largDia)/30;
posx_se = (largura-largSemana)/6;
posx_me = (largura-largMes)/11;
nd = new Date();
estilo = new TextFormat();
estilo.font = "arial";
estilo.color = 0xffffff;
estilo.size = 10;
estilo.align = "center";
for (i=1; i<=31; i++) {
  createTextField("diames"+i, i, posx*(i-1), 25, largDia, 18);
  with (this["diames"+i]) {
      text = i;
      background = true;
      backgroundColor = 0x006666;
      setTextFormat(estilo);
  }
  eval("diames"+nd.getDate()).backgroundColor = 0xff0000;
}
for (b=1; b<=7; b++) {
  createTextField("diasemana"+b, b+50, posx_se*(b-1), 0, largSemana, 18);
  with (this["diasemana"+b]) {
      text = semanas[b-1];
      background = true;
      backgroundColor = 0x006666;
      setTextFormat(estilo);
  }
  eval("diasemana"+nd.getDay()).backgroundColor = 0xff0000;
}
for (c=1; c<=12; c++) {
  createTextField("mensal"+c, c+100, posx_me*(c-1), 50, largMes, 18);
  with (this["mensal"+c]) {
      text = meses[c-1];
      background = true;
      backgroundColor = 0x006666;
      setTextFormat(estilo);
  }
  eval("mensal"+(nd.getMonth()+1)).backgroundColor = 0xff0000;
}
createTextField("ano", 77, 0, -25, largura, 18);
with (ano) {
  text = nd.getFullYear();
  background = true;
  backgroundColor = 0xff0000;
  setTextFormat(estilo);
}

Passo a passo

Primeiro criamos arrays que terão como conteúdo as strings que queremos que sejam exibidas no calendário

semanas = ["segunda", "terça", "quarta", "quinta", "sexta", "sábado", "domingo"];

primeiro os dias da semana*/

meses = ["jan", "fev", "mar", "abr", "mai", "jun", "jul", "ago", "set", "out", "nov", "dez"];

depois os nomes dos meses

Agora vamos declarar algumas variáveis que vão nos servir mais a frente:

largDia = 15;

valor da largura dos TextFields que exibirão os dias do mes

largSemana = 68;

valor da largura dos TextFields que exibirão os dias da semana

largMes = 38;

valor da largura dos TextFields que exibirão os meses

largura = 500;

total da largura do seu calendário

posx = (largura-largDia)/30;

esta equação simples dá o valor da disttncia entre o "zero" de cada textField que exibe os dias do mês em relação ao próximo. A vantagem de usar equações nestes casos é que não é necessário recalcular tudo quando de repente resolve alterar a largura do seu calendário, basta que altere o valor das variáveis e tudo se acomoda certinho. A equação é (largura total - largura do bloco) dividida pelo número de intervalos que existiá entre o total de blocos, como veremos adiante o total de blocos será 31, então teremos 30 intervalos

posx_se = (largura-largSemana)/6;

Aqui é exatamente o mesmo reaciocí­nio e procedimento do código acima, mudando apenas os valores, devido ao número diferente de blocos

posx_me = (largura-largMes)/11;

idem acima

nd = new Date();

Aqui é criado um objeto Date(), para que sejam utilizados alguns de seus métodos (getDate(), getMonth() e getFullYear()) na seleçãoo dos textFields que serão destacados na exibição do calendário

estilo = new TextFormat();

Criamos agora o objeto TextFormat() e utilizamos algumas de suas propriedades para deixar o texto da maneira que nos convêm

estilo.font = "arial";

escolhemos a fonte

estilo.color = 0xffffff;

a cor

estilo.size = 10;

o tamanho da fonte

estilo.align = "center";

e o alinhamento

agora vamos fazer a ação que cria e exibe os dias do mes

for (i=1; i<=31; i++) {

primeiro criamos um loop "for" que cria números de 1 em 1 até 31, que é o máximo de dias de um mes. O loop for declara um valor inicial para a variável "i" que no nosso caso é 1 e vai incrementar este valor em 1 até que seja atingido o limite especificado que é 31.

createTextField("diames"+i, i, posx*(i-1), 25, largDia, 18 );

dentro da chave de comando deste loop usamos o método "createTextField" para criar TextFields vazios, O primeiro parámetro entre os parenteses determina o nome dos TextFields, usando a concatenação da string "diames" com o valor da variável "i" que vai sendo incrementada ou seja, para i=1 á criado o TextField "diames1", e assim sucessivamente até 31. O segundo parámetro determina o "depth" (profundidade) em que será criado o textField, é necessário uma profundidade diferente para cada textField, por isso usamos novamente o valor de "i", porque em um "depth" cabe apenas um objeto. O terceiro parámetro é a posição "_x" do textField, como precisamos que cada textField seja deslocado é  direita em relação ao anterior, para que não se sobreponham, usamos o valor da variável "posx", declarada no início, multiplicada pela variável "i" menos 1, porque declaramos no loop que o valor inicial de "i" fosse 1, mas neste caso precisamos que a primeira posição seja "0"(zero) então i-1=0 e assim conseguimos uma progressão uniforme e com o mesmo incremento é  partir de zero. O quarto parámetro designa a posição "_y" dos textFields, todas iguais a 25. Quinto parrmetro, a largura do textField, aqui lido do valor de uma variável declarada no início para que possamos alterar o seu valor sem sair da bitola especificada para a largura total do nosso calendário. E finalmente o sexto parámetro que especifica a altura do nosso TextField em 18

with (this["diames"+i]) {

Aqui usamos a ação "with" para designar vários comandos com relação aos textFields determinados dentro dos parenteses. Usamos a palavra-chave "this" e em seguida usamos novamente a concatenação da string "diames" + o valor de "i", assim conseguiremos nos referir a todos os textFields, um de cada vez, cada vez que o loop cria um novo valor para "i". Como veremos mais a frente poderíamos ter usado o comando "eval" para nos referirmos aos mesmos objetos, apenas usando outra maneira de comandar*/

text = i;

determina que o conteúdo de texto dos TextFields será igual ao valor de "i" a cada loop

background = true;

determina que os TextFields terão cor de fundo

backgroundColor = 0x006666;

e determinamos que a cor será 0x006666

setTextFormat(estilo);

Aqui dizemos que os TextFields vão incorporar as propriedades do objeto TextFormat que criamos no começo

}

É fechado o comado "with"

eval("diames"+nd.getDate()).backgroundColor = 0xff0000;}

Neste caso usamos "eval" para concatenar o valor de da string "diames" e os valores conseguidos através dos métodos do objeto Date(), neste caso o método foi o getDate(), que retorna o número do dia do mês, então o TextField ao qual nos referimos é o resultado de "diames" + o dia do mes. Se hoje fosse dia 4, o resultado seria "diames4". A propriedade que especificamos para este TextField é que ele seja de uma cor diferente dos demais, para marcar o dia corrente

Todas as observações do bloco de código acima se aplicam aos 2 blocos abaixo, que criam, posicionam, e dão cor aos TextFields abaixo, menos o que determina o conteúdo de cada textField, neste caso vejamos

//Dias da semana

for (b=1; b<=7; b++) {

createTextField("diasemana"+b, b+50, posx_se*(b-1), 0, largSemana, 18 );

with (this["diasemana"+b]) {

text = semanas[b-1];

Aqui determinamos que o conteúdo dos TextFields serão elementos das arrays criadas no início do código, selecionadas a partir do valor da variável "b"-1. Pra quem não está acostumado com arrays o valor é b-1 porque toda array tem seu primeiro valor como 0 (zero), logo, "segunda" seria o valor zero da array, mas declaramos no loop que o valor inicial de "b" é 1, portanto b-1=0 e assim lemos o primeiro valor da array "semanas".

background = true;

backgroundColor = 0x006666;

setTextFormat(estilo);

}

eval("diasemana"+nd.getDay()).backgroundColor = 0xff0000;

}

idem comentários do bloco que cria os dias do mes, a não ser pelo método getDay() do objeto Date(), que retorna o valor dos dias da semana

//meses do ano

for (c=1; c<=12; c++) {

createTextField("mensal"+c, c+100, posx_me*(c-1), 50, largMes, 18 );

with (this["mensal"+c]) {

text = meses[c-1];

Neste caso o valor dos TextFields é extraído da array "meses"

background = true;

backgroundColor = 0x006666;

setTextFormat(estilo);

}

eval("mensal"+(nd.getMonth()+1)).backgroundColor = 0xff0000;

}

idem comentários do bloco que cria os dias do mes, a não ser pelo método getMonth() do objeto Date(), que retorna o valor dos meses do ano, com a particularidade de que para o flash, janeiro=0, portanto getMonth()+1, busca o textField correspondente ao mes corrente

Aqui para criar o TextField que exibe o ano corrente temos bem menos trabalho, só precisamos utilizar o método getFullYear() do objeto Date(), que retorna em quatro dígitos o ano corrente, para que seja exibido como conteúdo do TextField

createTextField("ano", 77, 0, -25, largura, 18 );

with (ano) {

text = nd.getFullYear();

background = true;

backgroundColor = 0xff0000;

setTextFormat(estilo);

}

Agora e so carregar control+enter e ver o resultado...  ;)

Este artigo já pode ser encontrado no wiki

[Grettir]

Heyas,

o tutorial esta bonito e tal, mas aconselho-te a começares a escrever sintaxe Actionscript2.0

Neste momento existem uma serie de "best practices" que deverao ser respeitadas na medida em que o Debugger e o proprio Flash Player detectam erros ou mesmo "Data Mismatch" que caso contrario simplesmente vamos ver que.......nao funciona...e depois é "ONDE ESTA O WOLLIE?" (leia-se...o problema)

Nao leves a mal, é so um pequeno conselho (que so aceitas se quiseres obviamente)

Fica bem,

[melSpeedl.ine]

aqui o nosso filip_e é sempre a abrir...

mais um tutorial...

continua o optimo trabalho doutor..

[GONCALOPES]

excelente topico, adoptei este calendario a minha pagina web, so como estou no inicio de carreira a construir sites, gostava de saber neste calendário como é possível por ex ter uma coisa agendando nesse dia e o dia aparecer sublinhar e carregar nesse dia e aparecer o que está agendando era muito útil.