Ir para o conteúdo

Calendário dinâmico

Porquê TextFields e não MovieClips?

Simples. Para figuras rectangulares 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 objecto texto é um recurso poderoso do Flash, com muitos métodos, que combinados com alguns eventos e acçõ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 mês*/

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 distancia 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 existirá 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 é exactamente o mesmo raciocí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 selecção dos textFields que serão destacados na exibição do calendário*/

estilo = new TextFormat();
/*Criamos agora o objecto 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 acção que cria e exibe os dias do mês:

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 mês. 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 parênteses 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 objecto. 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 parâmetro, 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 parênteses. 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 objectos, 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 comando "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 objecto 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 mês. 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];[/b]
/*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 é só carregar control+enter e ver o resultado.