Cursores animados e personalizados no Director MX 2004

Introdução

Olá pessoal do MX Studio, nesse meu primeiro artigo vamos aprender a fazer um cursor animado e personalizado no Director MX 2004. Aqui vou trabalhar com uma ?imitação bem barata? do que seria uma ampulheta, mas vocês podem trabalhar com as formas que vocês quiserem!

Pré-Requisitos

Para acompanhar o andamento desse artigo é necessário conhecimento básico na ferramenta Director.

Objetivo

O Objetivo aqui é de fazer com que o leitor possa, no final desse artigo, poder trabalhar e desenvolver seus próprios cursores personalizados sejam eles animados ou não.

Conteúdo

O primeiro passo para a criação do nosso cursor consiste
em você desenvolver o seu cursor “frame a frame” (todos
os estágios em arquivos separados). Vamos trabalhar com Bitmap
(*.bmp) – 16×16 pixels. Você pode usar um software de edição
de imagens de sua preferência.

Agora precisamos importar no Director a seqüência de Bitmaps
que desenvolvemos! – File\Import – Selecione todos os
estágios do cursor e clique no botão Import.
No quadro de importação selecione a opção
“Same Settings for Remaing Image”, e deixe marcada
apenas a opção “Dither”

on startMovie
cursor [9]
end

Esse código diz que quando o seu projeto iniciar é para
o cursor padrão ser o cursor que se encontra no Cast
na posição 9 – Cuidado, pois esse número
vai variar de acordo com o seu projeto, o seu cursor personalizado pode
estar em outra posição no Cast, mas basta conferir e alterar.

Considerações Finais

A personalização de projetos é o que vem diferenciando
o mercado nos dias de hoje, e com os clientes finais cada vez mais exigentes
e interados no assundo, quanto maior o nosso leque de opções,
melhor… Tendo isso em vista, espero ter conseguido fazer com que vocês
tenham aprendido um pouco mais dessa ferramenta maravilhosa que é
o Director.

Um grande abraço e até mais…

Autor: Gabriel Cinquini – Colunista de Director do Portal MXSTUDIO

Qualquer dúvida envie um email para gabriel@altamidia.com.br
ou acesse o nosso fórum

E

ai galera do MXSTUDIO, desculpa a demora essa semana foi meio conturbada

he he he, deixando as desculpas de lado vamos dar continuidade ao nosso

tutorial de desenvolvimento de multimidia está é a parte

3 do nosso exemplo.

Anteriormente vimos como criar e setar

os botões do multimidia agora vamos dar ações para

esses botões.

Vamos dar inicio ao tutor, para darmos

continuidade ao nosso multimidia vamos adicionar ao nosso cast mais algumas

imagens, para isso basta fazer o download do pacote imagens que se encontra

na seção de downloads do site ou clicando aqui

. Bem feito isso vamos adicionar ao nosso movie a imagem chamada linha

e posiciona-la conforme figura abaixo, observem é acrescentado

um member no score com o nome de linha.

Bem até ai já tinhamos visto

não há mistério, após posicionada a nossa

figura linha na sprite linha do score vamos criar um frame de animação,

para criar uma frame de animação basta clicar no botão

direito do mouse em cima da sprite em seguida clicar na opção

Insert Keyframe pronto criamos nosso frame agora vamos

dar inicio a animação. Bem para animação de

deslocamento precizaremos de um ponto de inicio e um ponto de término,

já temos nosso ponto de término que seria a posição

da nossa linha no movie vamos criar nosso ponto de inicio, para isso clique

no primeiro frame da nossa sprite vamos agora deslocar utilizando as setinhas

direcionais do teclado pra esquerda até que a imagem saia da tela.

Pronto!

Ao clicar no botão play nosso multimidia

irá iniciar, mais como haviamos definido uma action de stop não

acontecerá nada pois o filme está parado, para resolver

isso vamos criar nossa primeira behavior de controle iremos adicionar

uma ação ao nosso botão, o que é muito simples

vamos selecionar o botão do correspondente ao icone do Director

com o botão direito do mouse clique na opção behaviors,

na janela que aparece vamos construir nossa action.

Observe:

Na janela que aparece dê um nome

para a ação por exemplo Director que seria relacionado ao

botão, o proximo passo é adicionar um comando pra essa ação

tipo como ela vai funcionar, como vou ativa-la, clicando pressionando

uma tecla… para isso vamos clicar no sinal de + em

seguida na opção desejada no nosso exemplo usamos a opção

mouse down como mostra a figura ao lado.

em

seguida vamos dizer o que nossa action irá fazer vamos repetir

o processo acima só que vamos clicar no + do painel ao lado (actions).

As opções seram diversas conforme mostra a figura abaixo

depois poderemos vê-las individualmente mas para nosso exemplo iremos

usar a action de navegação pois vamos definir que ao clicar

no botão director ele nos leve para um determinado quadro dentro

do score. Para isso a primeira opção dentro do menu navigation

vai nos servir, na janela que aparecerá vc deve informar o numero

do frame inicial de sua animação ou o destino do botão

tipo quando clicar no botão do director vou cair bem em cima do

primeiro quadro da minha animação

Beleza deixei um exemplo na seção

downloads

com a animação completa da seção do director

e abaixo segue um exemplo do score dessa animação vou deixa-los

livres para criarem a animação que desejarem seguindo os

passos que mostrei nesse tutorial é claro que vcs teram um pouco

de trabalho e muitas dúvidas, nessa caso fiquem a vontade nos comentários

e qualquer coisa mandem um email

ficarei grato em responder.

UTILIZEM O FORUM TB!

ABRAÇOS A TODOS

Bem

vamos continuar nosso tutorial.

No tutorial anterior montamos nossa interface,

e conhecemos nossa primeira action no director “go the frame”

que como disse equivale ao stop do flash.

Com a interface montada vamos a segunda

parte do tutorial e acrescentar os botões de controle do multimidia,

para isso vamos conheçer mais dois intens de nossa biblioteca,

Multi-State Button ou botão de vários estados e o Rollover

Cursor Change, que seria o tipo de cursor para o mouse quando passar por

cima de alguma coisa.

Para importar a behavior Multi stage Button

basta clicar em Library> Controls > Multi State Button.

O Multi State Button button funciona igual

ao botão do flash como vamos ver no passo abaixo.

Para importar a behavior Rollover Cursor

Change basta clicar em Library> Animation>Interactive > Rollover

Cursor Change.

1° Passo:

Importar para o cast os itens mencionados

acima em nossa library. Agora vamos importar para o movie alguns elementos

de nosso cast que vamos usar como botôes no caso o simbolo de cada

programa macromedia, na seção donwloads da coluna director

estão disponíveis esses elementos.

Vamos posiciona-los conforme a indicação

da figura abaixo.:

Após o poaicionamento dos botões

vamos agora crescentar nossa Behavior Multi Stage Button e Rollover Cursor

Change, acrescentaremos primeiramente o stágio do Botão

para isso basta arrasta-lo do cast para cima da figura desejada, fazendo

com que apareça na tela um janelinha contendo as propriedades dessa

behavior como mostra a figura abaixo:

O Multi State Button é interessante

pelo seguinte, na verdade vc tem dois estágios, um quando o botão

não foi clicado e o outro quando vc clica no botão.

Primeiro Estágio: Antes

de clicar.

OFF STAGE > significa o estado do botão em sua posição

inicial.

Rollover Member > Estado em que o botão irá ficar ao

passar o mouse.

Mouse Down Member > Estado do Botão quando clicado.

Segundo Estágio: Depois

de clicar

ON STATE > Estado do Botão após o clique.

Rollover Member > Estado em que o botão irá ficar ao

passar o mouse.

Mouse Down Member > Estado do Botão quando clicado.

Bem vc irá repetir essa sequência

até o último botão, dê um play para ver como

estão se comportando os botões, o único problema

seria o cursor do mouse continua uma setinha, e não aquela velha

e conhecida mãozinha é ai que entra nossa segunda behavior

o Rollover cursor change.

Você irá repetiro o mesmo

processo acima basta arrastar a behavior pra cima do botão e esperar

a caixa de opções com a propriedade da mesma, no caso do

Rollover Curso Change vc vai ter uma série de opções

de cursor para usar no seu multimidia desde a velha mãozinha até

caneta e carinhas.

Bem até a próxima semana

com a continuação do nosso multimidia, Até Mais.

qualquer duvida : alberthcosta@globo.com

Aloha!

Bem primeiramente gostaria de me desculpar pelo meu breve afastamento,

tanto no forum quanto aqui, mais hoje iniciaremos uma série de

tutoriais que no final vão lhes mostrar como fazer um pequeno multimidia

completo no Director ok.

Bem para iniciarmos um multimidia é

necessário primeiramente ter em mente ou um esboço do multimidia

desejado, aconselho fazer o que chamamos de story board, nele você

defini-rá toda a sequência e o processo de desenvolvimento

do multimídia.

Para o nosso exercicio baixe os arquivos

na seção downloads da coluna.

Iremos utilizar uma interface simples

mais funcional, onde vamos demostrar como se fosse uma apresentação

os nossos colunistas do MXSTUDIO.

1° Passo:

Abra o Director, em seguida importe para

o seu cast os arquivos baixados, no painel Property Inspector, vamos definir

o tamanho do nosso filme, na quia movie, defina os parâmetros de

altura e largura respectivamente em 720 e 486, mude também a cor

de fundo para #E4EAF2, como mostra a figura abaixo.

Em seguida vamos montar nossa interface

a partir dos arquivos que importamos para nosso cast.

Observem que a cada elemento adicionado

no movie ganha um lugar em nossa timeline (score), quando um objeto é

adicionado ao score ele recebe i nome de sprite, a ordem de aparecimento

da sprite no movie depende da localização da mesma no score,

tipo cada linha do nosso score tem um numero que segue uma sequência

lógica, se colocar-mos uma sprite na linha 1 em seguida colocar-mos

uma sprite na segunda linha, a sprite que estiver na segunda linha vai

aparecer na frente da sprite na primeira linha, para entender melhor posicionem

as sprites de maneira com que os objetos do movie fiquem sobrepostos,

depois alternem as sprites de lugar.

Cada sprite adicionada na cena ocupa 30

quadros no score o que equivale a 30 segundos de animação,

para posicionar os elementos no movie de forma com que fiquem organizados

você pode usar linhas guias para alinha-los, no Director o uso de

linhas guias é diferente dos outros programas em que para adicionar

uma guia basta puxa-las da regua que ficam localizadas nas extremidades

da sua área de trabalho.

As guias podem ser adionadas a partir

do painel Property Inspector na guia, Guides. Nessa guia é definido

a cor, além de opções como visibilidade, snap e travamento

da guia. para adiconar-mos a nossa guia basta clicar com o botão

acionador do mouse em cima do sinal de + (escolhendo a guia horizontal

ou vertical) e arrastar para o movie, para remover basta clicar em cima

do botão remove all. nesta guia também estão localizadas

as opções do grid.

Para organizar de forma precisa os elementos

do nosso movie em devido lugar vamos fazer o seguinte, primeiramente vamos

acrescentar em nosso movie uma imgem fechada do nosso multimidia, pra

servir de base, no painel property Inspector exite uma guia sprite onde

se localiza todas as opções e propriedades da nossa sprite.

No campo name coloque “Base”

logo abaixo encontra-se um campo onde está definido 100% vamos

colocar 30%, isso ira definir a visibilidade da sprite no filme, agora

vamos trava-la clicando no cadeado localizado no canto esquerdo acima.

Isso vai fazer com que a imagem base não seja movida de lugar servindo

apenas de referência para a montagem do multimidia.

2° Passo:

Bem vamos adicionar nosso elementos ao

movie, lembrando que os objetos devem ficar igual a imagem base, feito

isso o movie deverá ficar dessa forma:

o próximo passo seria testar nosso

movie, clicando no botão play na barra de ferramentas, abaixo da

barra de menus, até ai tudo bem mais ele ficou loopando, quer dizer

temos que fazer com que ele fique parado para ser acinado apenas quando

desejar-mos, para isso precisamos definir uma action de controle, como

no flash, só que no flash utilizamos a actions ()stop; no director

vamos utilizar um comando um pouquinho maior:

Vamos a nossa primeira visão sobre

Lingo.

Mais vc me pergunta o que é lingo?

Lingo é uma linguagem de programação interna do director,

e como a maioria das liguagem é orientada a objetos. possuindo

rotinas pre-definidas, permitindo também ao usuário definir

suas próprias rotinas.

para o nosso exemplo vamos criar uma dessas

rotinas. No score existem icones como mostrei em nossa outra matéria

onde podem ser definidos tempo, transições sons e scripts

para serem adicionados em nosso movie, clicando duas vezes no primeiro

quadro do icone script, abrirá uma janelinha onde esta-rá

definida a seguinte rotina:

On exitFrame

me

(aqui voçê irá definir a função desejada)

end

no espaço acima mostrado vc irá

digitar, “go the frame” sem aspas, pronto agora é só

fechar a jenelinha e dar play novamente. Repare que agora não ocorre

o loop. A linha de comando go the frame corresponde ao stop do flash.

Bem na proxima coluna vamos dar continuidade

ao nosso multimidia com a inserção de botões e links.

em caso de dúvidas uchimata@mxstudio.com