Jump to content
filip_e

Calendário dinâmico

Recommended Posts

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

Share this post


Link to post
Share on other sites
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,


Ricardo Castelhano

-----------------------

FullStack Developer

Technical Manager

Trainer

Share this post


Link to post
Share on other sites
melSpeedl.ine

aqui o nosso filip_e é sempre a abrir...

mais um tutorial...

continua o optimo trabalho doutor..

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.