CURSORES PERSONALIZADOS 2

Transcrição

1

2 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.

3 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.

4 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

5 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);

6 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.setrgb(0xffcc66); else if (over == "cpblue") { mycolor.setrgb(0x99cccc); else if (over == "cpgreen") { mycolor.setrgb(0x669933); else if (over == "resetbutton") { 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.