MXStudio » Flash » Zoom com botão

Zoom com botão



ZOOM

Neste tutorial aprenderemos como aplicar zoom numa imagem, objeto,etc usando o ActionScript 2.0. Ao passar o mouse sobre o botão a imagem aumenta, ao mover o mouse para fora dele, a imagem volta a ficar pequena.

Download (arquivo fonte )Passo 1

Crie um novo documento Flash, navegue até Modify > Document (Ctrl+J) e configure Width com 330 px e Height com 440 px. Altere o Frame Rate definindo-o como 20 fps (Frames per Second).

Obs.: escolhi estes valores para altura e largura devido à imagem escolhida. Uma dica: se trabalhar com uma imagem diferente, escolha a mesma largura dela e uma altura um pouco maior para incluir o botão, ok?

Passo 2

Dê um clique duplo na layer 1 para renomeá-la como fundo. Inclua uma nova layer e nomeie-a zoom. Coloque um fundo qualquer para ilustrar (por exemplo um retângulo com a cor de sua preferência).

Passo 3

Trave a layer fundo clicando na coluna na direção do cadeado, selecione a layer zoom, navegue até File > Import > Import to Stage (Ctrl+R) e importe uma imagem qualquer (ou um objeto).

Passo 4

Com a imagem ainda selecionada, pressione F8 no teclado (para converter em Símbolo) e a converta em um Movie Clip.

Passo 5

Abra o Properties Panel (Ctrl+F3) e nomeie a instância do MovieClip (chamaremos de MC daqui por diante) como zoom.

Passo 6

Dê um clique duplo na instância do MC (zoom) ou clique com o botão direito do mouse e opte por Edit in Place.

Passo 7

Clique no frame 120, pressione F6, abra o Action Script Panel (F9) e digite o comando:

stop();

Passo 8

Selecione o logotipo do frame 1 e escolha a Free Transform Tool (Q) e diminua a imagem.

Passo 9

Clique novamente no frame 1 e no Properties Panel (Ctrl+F3) configure Tween como Motion.

Passo 10

Volte para a Scene 1 e insira uma nova layer nomeando-a como botão.

Passo 11

Clique sobre o frame 1 da layer botão, selecione a Text Tool (T) e escreva Zoom. Com o texto ainda selecionado, pressione a tecla F8 para convertê-lo em um botão.

Passo 12

Com o botão ainda selecionado, abra o Action Script Panel (F9) e digite o seguinte código:

on (rollOver) {
_root.mouse_over_zoom = true;
} on (rollOut) {
_root.mouse_over_zoom = auxiliar;
Passo 13

Insira uma nova layer nomeando-a como AS. Selecione o primeiro frame, abra o Action Script Panel (F9) e digite o seguinte código:

_root.zoom.onEnterFrame = function() { // Este zoom é o MC e não o botão!
if (mouse_over_zoom) {
_root.zoom.nextFrame();
} else {
_root.zoom.prevFrame();
}
};

Passo 14

Teste seu filme (Ctrl+Enter).

Download (arquivo fonte )


4 Comments to Zoom com botão

  1. HUGO's Gravatar HUGO
    Abril 20, 2008 at 3:29 pm | Permalink

    muito bom meu amigo isso sempre é bem vindo, valeus mesmo em …..

  2. fefe113's Gravatar fefe113
    Dezembro 19, 2008 at 10:02 am | Permalink

    Não esta dando certo……..
    aparece uma msn assim:

    **Error** Scene=Scene 1, layer=BOTAO, frame=1:Line 4: Syntax error.
    _root.mouse_over_zoom = true;

    Total ActionScript Errors: 2 Reported Errors: 2

    PLEASE HELP ME!

  3. celso's Gravatar celso
    Junho 9, 2009 at 12:14 pm | Permalink

    Tem apenas um erro e descobri qual, falta um colchete no final do primeiro código. Passo 12:

    on (rollOver) {
    _root.mouse_over_zoom = true;
    } on (rollOut) {
    _root.mouse_over_zoom = auxiliar;}

  4. WilL's Gravatar WilL
    Outubro 21, 2009 at 3:25 pm | Permalink

    Muito bom .. poderia me dar um help ?
    Não estou conseguindo colocar actions em botões, eu selecionoo botão e abro o painel de actions, mas tem uma mensagem no lugar onde se digita o scrip: “Current selection cannot have actions applied to it.”. Oq está acontecendo?

Deixe um Comentario

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="">

Francisco

Últimos Artigos do Autor