CURSORES PERSONALIZADOS 2
Introdução
Com o Flash5, ganhou-se a capacidade de criar Cursores personalizados. Com uma pequena
quantidade de código podes substituir o ponteiro do rato por qualquer coisa que queiras. O que
possibilita tudo isto é o objecto "Mouse".
Tutorial
Mouse visivel, Mouse invisivel
O que é que o objecto Mouse tem a ver com os cursores personalizados? Na realidade, tudo!
Na linguagem orientada a objectos do Flash5 nada refere que o cursor consiga por si ser
personalizado. Mas o objecto "Mouse" tem a capacidade de ser alterado entre dois estados,
"hide" (esconder) e "show" (exibir). Ou seja, com um simples código consegues alterar o
estado do cursor do rato entre visivel e invisivel.
Para que serve esconder o cursor do rato? Claro que isso causaria a impossibilidade de
navegar em interfaces que necessitem de cliques do rato em locais especificos, então o
utilizador ficaria à espera que alguma coisa acontecesse para os orientar. Ok, é aqui que o
conceito "Cursor Personalizado" aparece.
© 2002 VISUALWORK Produções Multimedia, Lda. Todos os direitos reservados. Qualquer reprodução, incluindo fotocópia, só pode ser feita com autorização expressa da VISUALWORK.
FLASHWEBTRAINING.com, truquesedicas.com e respectivos logos são marcas registadas da VISUALWORK Produções Multimedia, Lda.
Cursor personalizado simples
Como o Flash 5 consegues esconder o cursor do rato, podes criar os teus próprios cursores,
ponteiros ou o que tu quiseres para o substituir. Qualquer coisa que esteja numa instance de
um Movie Clip poderá ser o teu cursor. Tudo isto com uma grande facilidade.
A partir da versão 5 do Flash é possível associar scripts a Movie Clips através dos ClipEvents,
podemos criar um simples cursor colocando no instance de um Movie Clip as seguintes actions:
onClipEvent (load) {
Mouse.hide();
startDrag ("", true);
}
O código acima diz ao Flash para fazer duas coisas quando o Movie Clip é carregado. Primeiro
diz ao rato para desaparecer através da instrução "Mouse.hide()" - deixa de haver cursor do
rato standard. A seguir através da action "startDrag("",true)" o Flash sabe automaticamente
que deve começar a arrastar o Movie Clip que contém o script, O valor "true" diz ao Movie Clip
para o centro deste estar sempre junto do ponto do cursor do rato (embora invisivel o ponto
do rato existe). Assim este Movis Clip a ser o teu cursor do rato. Fácill, não é?
Cursor! Anulado novamente!
Ok, isto trabalha bem, portanto, para que hei-de continuar a ler? Bem, se só vais precisar de
um cursor personalizado para clicar em alguns botões e só com um estado, então já está,
perfeito. Mas se calhar vais precisar de arrastar alguma coisa ou possivelmente queres que
tenha comportamentos diferentes conforme o contexto, por isso vamos continuar.
Tentemos uma pequena experiência, altera o interface do exemplo anterior incluíndo um Movie
Clip standard arrastável.
Isto não resulta! Talvez a solução seria escrever-mos um script que deixe de arrastar o
primeiro cursor enquanto arrasta a pasta e volte a arrastar o primeiro Movie Clip quando a
pasta for largada, mas não é isso que vamos fazer, a solução é muito mais perfeita.
A Macromedia refere dois métodos para criar cursores personalizados, vamos então ver o
segundo ao qual vamos chamar-lhe "método alternativo". Depois de veres este método vais
chamar-lhe "a melhor maneira de personalizar cursores".
Siga aquele rato!
O que se passa de errado com o primeiro método de criar cursores personalizados é um
problema que persiste desde Flash 4 - não consegues arrastar dois objectos ao mesmo tempo.
© 2002 VISUALWORK Produções Multimedia, Lda. Todos os direitos reservados. Qualquer reprodução, incluindo fotocópia, só pode ser feita com autorização expressa da VISUALWORK.
FLASHWEBTRAINING.com, truquesedicas.com e respectivos logos são marcas registadas da VISUALWORK Produções Multimedia, Lda.
In Flash4, one way around this sort of problem might have been to track the position of a
hidden 'map' movieclip being dragged by the system cursor and to use scripting to dynamically
position objects based on the 'map' position. But that's a lot of work to go through just for a
fancy cursor in this case right? Don't worry. Again, Flash5's extended scripting language has
you covered.
No Flash 4, uma maneira de contornar este problema era através de um botão escondido com
a opção "Track as Button" activada dentro de um Movie Clip que era arrastado e então através
de scripting posicionava-se dinamicamente os objectos em função da posição do Movie Clip
arrastado. Mas isto é muito trabalho para colocar no sitio certo um cursor "caprichoso".
Felizmente as melhorias do scripting no Flash 5 resolvem esta situação.
Substitui o script do teu Movie Clip "cursor" pelo seguinte:
onClipEvent (load) {
Mouse.hide();
}
onClipEvent (mouseMove) {
this._x = _root._xmouse;
this._y = _root._ymouse;
updateAfterEvent();
}
Deves estar a dizer "Isto resulta mesmo!", se não estás a dizer isto em relação ao teu Movie,
vê onde está o erro no ficheiro i_cursor_personalizado_03.fla.
Como é que isto funciona? - Este script tira partido das novas capacidades do scripting do
Flash 5, a capacidade de obter a localização das coordenadas do cursor em qualquer altura
(mesmo que o cursor esteja escondido) através das propriedades "_xmouse" e "_ymouse"
relativamente à "_root" (coordenadas do stage principal).
So, in the code above, we again hide the mouse but then instead of dragging our movieclip we
set its position to equal that of the _root._xmouse and _root._ymouse coordinates. Since we
are no longer dragging the cursor clip, it's free to now point, click, and drag other objects as
you see fit.
Então, no código a cima, continuamos a esconder o rato mas em vez de o arrastar-mos
posiciona-mo-lo nas coordenadas do rato através dos valores indicados em "_root._xmouse" e
"_root._ymouse". Estes valores são actualizados através do EventClip "mouse Move"
responsável por fazer correr o script dentro dele sempre que o rato se mova.
Personalidades Multiplas dos cursores
Até agora estive-mos a ver questões básicas de cursores personalizados, a próxima questão é
"Porque hei-de mudar o cursor logo no inicio do meu filme?" - Esta é uma boa questão, pois
© 2002 VISUALWORK Produções Multimedia, Lda. Todos os direitos reservados. Qualquer reprodução, incluindo fotocópia, só pode ser feita com autorização expressa da VISUALWORK.
FLASHWEBTRAINING.com, truquesedicas.com e respectivos logos são marcas registadas da VISUALWORK Produções Multimedia, Lda.
não sabemos quais são as intenções nem a altura em que cada um pretende esconder o cursor
standard, ou seja, tudo depende do projecto que se está a conceber.
Uma das caracteristicas mais interessantees dos cursores é que podem responder às coisas
que apontam ou clicam - é uma ferramenta contextual. Ao usares o teu programa de pintura é
natural que o teu cursor se mantenha igual quando mudas de ferramentas como brush, lasso
ou marquee? Certamente que dizes que não é normal. Estas mudanças contextuais são para
pessoas que aproveitam os interfaces para ter uma deixa para diferenciar áreas. Isto é o que
tu consegues com os cursores personalizados sem grande confusão.
Exemplo com várias funcionalidades e pouco código
Abre o ficheiro i_cursor_personalizado_04.fla para acompanhar a explicação do código deste
exemplo.
Vamos dar um olhada ao script abaixo, todo ele associado ao MovieClip "cursor":
onClipEvent (load) {
Mouse.hide();
left = 50;
right = 500;
top = 50;
bottom = 350;
}
O ClipEvent "load" começa por esconder o rato e a seguir atribui valores a quatro variáveis que
serão usadas para criar os limites por onde o objecto pode ser arrastado.
onClipEvent (mouseMove) {
this._x = _root._xmouse;
this._y = _root._ymouse;
for (objects in _root) {
if (_root[objects].hitTest(_x, _y, true)) {
over = objects;
}
}
if (over == "pasta") {
gotoAndStop (2);
} else if (over.substr(0, 2) == "cp") {
gotoAndStop (3);
} else if (over == "resetbutton") {
gotoAndStop (4);
} else {
gotoAndStop (1);
}
© 2002 VISUALWORK Produções Multimedia, Lda. Todos os direitos reservados. Qualquer reprodução, incluindo fotocópia, só pode ser feita com autorização expressa da VISUALWORK.
FLASHWEBTRAINING.com, truquesedicas.com e respectivos logos são marcas registadas da VISUALWORK Produções Multimedia, Lda.
updateAfterEvent();
}
O evento "mouseMove" posiciona o cursor no "_x" e "_y" do rato. O ciclo "for" verifica se o
nossso cursor está em cima de algum objecto localizado na "_root" e aplica o "hitTest" que se
verdadeiro atribui "over=objects". Isto permite fazer condições de verificação a todos os
"objectos" em vez de verificar um a um. Quando o rato detecta que está em sobre a pasta, a
paleta de cor, ou no botão de reset a timeline do cursor avança para a frame que tem o cursor
cotextualizado a esse objecto.
onClipEvent (mouseDown) {
if (over == "pasta") {
startDrag (_root.pasta, false, left, top, right, bottom);
} else if (over == "cpyellow") {
myColor = new Color("_root.pasta.corpasta");
myColor.setRGB(0xffcc66);
} else if (over == "cpblue") {
myColor = new Color("_root.pasta.corpasta");
myColor.setRGB(0x99cccc);
} else if (over == "cpgreen") {
myColor = new Color("_root.pasta.corpasta");
myColor.setRGB(0x669933);
} else if (over == "resetbutton") {
myColor = new Color("_root.pasta.corpasta");
myColor.setRGB(0x999999);
} else {
gotoAndStop (1);
}
}
onClipEvent (mouseUp) {
stopDrag ();
}
Os eventos "mouseDown" e "mouseUp" são responsáveis pela realização das funcionalidades
associadas aos objectos :
Arrastar da pasta, atribuição de nova cor à pasta, fazer o reset da cor da pasta. Repara que os
eventos "mouseMove" e "mouseDown" têm as a condição "else" que chama o Movie Clip
"cursor" e diz para alterar a seta por defeito se não estiver em cima de nenhum objecto de
clicar.
© 2002 VISUALWORK Produções Multimedia, Lda. Todos os direitos reservados. Qualquer reprodução, incluindo fotocópia, só pode ser feita com autorização expressa da VISUALWORK.
FLASHWEBTRAINING.com, truquesedicas.com e respectivos logos são marcas registadas da VISUALWORK Produções Multimedia, Lda.