Imagem panorâmica

[Rodrigo26]

Boa noite pessoal,

Eu comecei com o código, porém ele arrasta a imagem.

Gostaria de alguma forma que eu pudece "passear" pelo stage com a imagem fixada no stage.

Eu subindo e descendo com o mouse vendo pedaços de uma grande imagem.

Eis o código;

this.createEmptyMovieClip("img_mc", 10); 
var my_mcl:MovieClipLoader = new MovieClipLoader(); 
my_mcl.loadClip("feiticeira.jpg", img_mc);

var mouseListener:Object = new Object();
mouseListener.onMouseMove = function() {
    img_mc._y = _ymouse;
    img_mc._x = _xmouse;
};
Mouse.addListener(mouseListener);

[Raphael Machado]

Olhe esse tópico:

[ajuda] movie clip q se move d acordo com o mouse

[Rodrigo26]

Quase mestre,

O problema é que ele arrasta a imagem com o mouse até um certo ponto.

E deixa o stage com o fundo branco.

Estou sem visão de como melhorar isso...

[Pooh]

Olá!

O problema é que ele arrasta a imagem com o mouse até um certo ponto.

E deixa o stage com o fundo branco.

Você diz que a imagem sai fora da área de Visualização ? deixando aparecer o fundo do stage ??

Se for isso, está na hora de colocarmos algum comportamento na nossa imagem!!

Quando tenho que fazer restrições ou comportamentos específicos de um objeto no meu projeto eu faço uma classe pra ele.

Vamos lá!

Fiz um projeto aki ImgPanoramica e bom por enquanto ele deu certo.

1º No meu caso utilizei uma imagem qualquer com o tamanho de preferencia maior que meu stage.

2º Essa imagem vai estar dentro do nosso Objeto, vamos chamar esse objeto de Scroller( Não me pergunte porque uso nomes em inglês, é mais pela facilidade ou é porque é melhor que chamar de "rolador" ou algo do tipo :huh: )

Com tudo em mãos vamos ao meu projeto

package  {
    
    import ImgLoader
    import Scroller
    import flash.display.*
    import flash.events.*
    
    public class Mapa extends Sprite {
        

        public var mapa:ImgLoader = new ImgLoader();
        public var holder:Scroller = new Scroller();
    
        public function Mapa() {
            
        CarregarMapa();
            
        }
    
        public function CarregarMapa()
        {
            
        mapa.load('img/mapa.jpg');
        mapa.addEventListener("ACABEI",displayMapa);
        
        }
    
        public function displayMapa(e:Event)
        {
            
        holder.addChild(mapa.display());            
        addChild(holder);
        holder.Start();
            
        }
    

    }
    
}

Essa foi minha Classe principal que eu entitulei de mapa (já que a unica coisa que me lembra uma navegação na iamgem é um mapa....) Extendi ela de Sprites ao ives de MovieClips já que so preciso da sua funcionalidade de Hierarquia (childs etc...) Nela teremos 2 classes importadas: ImgLoader que é uma classe q eu fiz como as milhares classes que carregam imagens Scroller que é nossa classe que vai receber a imagem e terá o comportamento de movimento chamamos flash.display.* pois como o foco desse tutorial não é a velocidade inclui tudo mas so vou usar alguns elementos de display e events chamamos flash.events.* fiz uma chamada geral pelo mesmo motivo do display declaramos uma variavel qualquer para carregar a imagem no meu caso "mapa" declaramos uma variavel qualquer para receber a imagem no meu caso "holder" Holder irá herdar os comportamentos da classe Scroller Após o mapa carregado

holder.addChild(mapa.display());            
addChild(holder);
holder.Start();

Adicionamos o mapa ao holder, adicionamos holder ao palco E para não haver conflitos com o fato de eu estar manipulando dados como "stageWidth" nossa Classe so passa a funcionar o Scroll após o método Start(); ser chamado. A classe Scroller:

package  {
    
    import flash.display.*
    import flash.events.*
    
    public class Scroller extends Sprite {
        
        private var velX:Number = 0;
        private var velY:Number = 0;        
        private var Frenagem:Number = .9;
        private var Acel:Number = 15;
        private var range:Number = 25;
        private var SL;
    
        public function Scroller() {    }
    
        public function Start()
        {
            
        this.parent.addEventListener(Event.ENTER_FRAME,Scroll);    
        this.addEventListener(Event.ENTER_FRAME,function(){calculaVelocidade()});
        
        }
        
        private function Scroll(e:Event){
            
        SL = this.parent.parent;
            
        var posX:Number = (SL.mouseX-(SL.stageWidth/2));
        var posY:Number = (SL.mouseY-(SL.stageHeight/2));
            
        if(posX < range && posX > -range){}else{            
        velX = (posX/25)*-1;
        }
        
        if(posY < range && posY > -range){}else{            
        velY = (posY/25)*-1;
        }
            
            
            
        }
        
        
        public function calculaVelocidade()
        {
            
            this.x += velX;
            this.y += velY;
            
            velY *= Frenagem;
            velX *= Frenagem;
            
            if(velX < 0.1 && velX > -0.1){velX = 0;}
            if(velY < 0.1 && velY > -0.1){velY = 0;}
            
            //monitramos o lado esquerdo
            if(this.x > 0){this.x = 0;}
            //monitramos o lado direito
            if(this.x < (this.width*-1)+SL.stageWidth){this.x = (this.width*-1)+SL.stageWidth;}
            //monitramos o lado superior
            if(this.y > 0){this.y = 0;}
            //monitoramos o lado inferior
            if(this.y < (this.height*-1)+SL.stageHeight){this.y = (this.height*-1)+SL.stageHeight;}
            
        }

    }
    
}

O que a nossa classe faz ? Fiz ela agora pra você mas ela faz exatamente o que promete. Tirando a ladainha das variáveis etc... fiz um sistema básico de aceleração, velocidade e frenagem para dar aquele ar de "movimento suave" a variavel range vai controlar um ponto o centro do mapa em que ele não sera orientado pelo mouse, assim teremos um ponto de descanso em que o mapa não vai ficar movendo davagarinho sem nunca parar. o coração dessa classe é o "calculaVelocidade" pois é nele que fiz o tratamento que lhe interessa.

//monitramos o lado esquerdo
            if(this.x > 0){this.x = 0;}
            //monitramos o lado direito
            if(this.x < (this.width*-1)+SL.stageWidth){this.x = (this.width*-1)+SL.stageWidth;}
            //monitramos o lado superior
            if(this.y > 0){this.y = 0;}
            //monitoramos o lado inferior
            if(this.y < (this.height*-1)+SL.stageHeight){this.y = (this.height*-1)+SL.stageHeight;}

Com um pouco de matemática e claro existem outros meios e outras relações matemáticas que você possa fazer para chegar no mesmo resultado, mas so me veio isso na cabeça agora... como todo objeto alinhado em 0 nos eixos X e Y, ele é alinhamento Top-Left o que facilita nosso trabalho em 2 lados do objeto: Esquerda que é so relacionar com a posição 0 top também é so relacionar com a posição 0 já Direita e Baixo pegue uma folha e desenho um quadrado menor dentro de um quadrado maior. Encoste o quadrado menor no canto superior direito do maior e faça as contas. Levei em consideração o seguinte: Largura do quadrado Maior 100 e do quadrado menor 10; Como todo sistema de navegação, a imagem maior se movimenta e a menor fica parada. Para o quadrado menor ficar no canto direito superior as poisções se encontram da seguinte maneira: QuadradoMaior.x = -90 QuadradoMenor.x = 0 Observando os valores podemos concluir que pra chegar nesse resultado é simples: A largura do noss QuadradoMaior que é 100 multiplicada por -1 para inverter, temos -100 agora somamos com a largura do quadrado menor que a nossa área de visualização temos -90 ! vualá ! o mesmo apliquei o eixo y sem problemas Afinal nossos 4 lados estão "LIMITADOS" sempre que eles aparentemente encostarem na nossa área de visualização eles param de se mexer. Com certeza a explicação da fórmula ficou confusa, mas ela é bem simples se ficar na dúvida posso fazer 1 desenho para complementar. E por fim se precisa vou disponibilizar a classe ImgLoader:

package  {
    
    import flash.events.EventDispatcher;
    import flash.events.*
    import flash.display.*
    import flash.net.URLRequest
    
    
    public class ImgLoader extends EventDispatcher  {

        
        public var carregarImg:Loader;
        public var enderecoImg:URLRequest;
        public var IMAGEM:Bitmap;

        public function ImgLoader() {}
    
        public function display(){return IMAGEM;}
    
        public function load(path:String)
        {
            
        carregarImg = new Loader();
        enderecoImg = new URLRequest(path);
        carregarImg.load(enderecoImg);
        carregarImg.contentLoaderInfo.addEventListener(Event.COMPLETE,returnLoader);
        carregarImg.contentLoaderInfo.addEventListener(Event.INIT,startLoader);
        carregarImg.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,progressLoader);        
            
        }
        
        private function startLoader(e:Event)
        {    /*O que fazer qd começar*/    }
        private function progressLoader(pe:ProgressEvent)
        {    /*O que fazer carregando*/    }
        private function returnLoader(e:Event)
        {
            
            IMAGEM = e.target.content;
            dispatchEvent(new Event("ACABEI"));

        }        
    
    }
    
}

Está copm certeza meio confuso porém foi a pressa com que digitei

Se for de ajuda para mais alguén poderei fazer algo mais detalhado

Abraços e espero ter ajudado

Editado Fevereiro 4, 2010 por Pooh

[Rodrigo26]

Confeso que só sei o básico de flash,

Isso infelizmente não sei como colocar em prática.

Tentei com a última classe que você postou, chamando o método load com a imagem em questão.

Apresentou vários erros :blink:

A base é o action Script 2.0?

Grato,