mc deslizante não cabe no flash

[Danielbase 0]

Fala Pessoal!!!

Bom, eu sei que existem diversos tópicos sobre esse menus e movie clipes deslizantes. Mas com esse problema ei não encontrei nenhum.

 

Vamos ao problema, eu tenho uma galeria de 60 imagens cada uma com 202px de largura que devem deslizar de acordo com a posição do mouse. até ai tudo bem, ja fiz isso outras vezes exceto pelo fato da quantidade de imagens e o tamanho delas (520x202px), oq logo de cara ja deixaria o filme muito pesado. Então pensei na seguinte solução: Fiz 6 swfs para serem carregados de dentro do mc que seria o tal (deslizante). Porém o tamanho (largura) desse mc (deslizante) ficaria no total com as 60 imagens seria de 12120px e ultrapassa o limite do flash.

 

Então fica a pergunta: Como fazer esse galeria de fotos deslizante que é gigante funcionar dentro do flash sendo que tb tem que ser leve de carregar? HEHE Complicado né, se alguém puder ajudar agradeço muito!!

 

Ai o código que vai no mc deslizante:

 

onClipEvent(load) {

nScreenWidth = 12120;

nMaxRate = 15;

// nPixels determines the speed of the slider movement

function moveLeft(nPixels) {

this._x -= nPixels;

if (this._x < 0-nScreenWidth) {

this._x = 0;

}

}

function moveRight(nPixels) {

this._x += nPixels;

if (this._x > 0) {

this._x = 0-nScreenWidth;

}

}

}

 

 

onClipEvent(enterFrame) {

// move slider with speed dependent on mouse position

if (_root._xmouse < nScreenWidth/2 && _root._xmouse > 0) {

moveRight(nMaxRate - _root._xmouse * nMaxRate/(nScreenWidth/2));

} else {

if (_root._xmouse > nScreenWidth/2 && _root._xmouse < nScreenWidth) {

moveLeft(_root._xmouse * nMaxRate/(nScreenWidth/4) - nMaxRate);

}

}

}

[carneirinho 7]

Seria melhor você fazer um movieclip padrão pra carregar as imagens dentro, n caso as iamgens carregariam de fora, ai você faz um script para duplicar os thumbs lado a lado de acordo com o numero de imagens que você precisa carregar, ele ja duplica os moviclips instantaneamente e começa a partir dai a carregar as imagens dentro, isso ficaria bem mais leve

[Danielbase 0]

Seria melhor você fazer um movieclip padrão pra carregar as imagens dentro, n caso as iamgens carregariam de fora, ai você faz um script para duplicar os thumbs lado a lado de acordo com o numero de imagens que você precisa carregar, ele ja duplica os moviclips instantaneamente e começa a partir dai a carregar as imagens dentro, isso ficaria bem mais leve

Valeu a força Cara, é exatamente isso que eu gostaria de fazer... Será que você pode me ajudar? ou pelo menos conhece algum tutorial para eu aprender?Obrigado

[carneirinho 7]

Da pra ajudar sim, qual é o tamanho da imagem que vai no thumb?Pra isso seria melhor tb usar xml ou variaveis externas pro flahs montar de acordo com esses dados, me passa o tamanho da sua imagem

[Danielbase 0]

Da pra ajudar sim, qual é o tamanho da imagem que vai no thumb?Pra isso seria melhor tb usar xml ou variaveis externas pro flahs montar de acordo com esses dados, me passa o tamanho da sua imagem

Então, cada imagem tem 202px (largura) x 520px (altura) e são 60 que tem que rolar nesse esquema de mc deslizante... tá difícil!!!!!!!

 

Valeu a ajuda!"

[carneirinho 7]

Nossa, mas isso é o tamanho da miniatura ou vai carregar direto a imagem inteira?Se for a iamgem inteira a gente monta um script pra isso ja.

 

abraço

[Danielbase 0]

Nossa, mas isso é o tamanho da miniatura ou vai carregar direto a imagem inteira?Se for a iamgem inteira a gente monta um script pra isso ja.abraço

Pois é, é a imagem inteira mesmo... não vai rolar preview em miniatura, ou seja a imagem nem precisa ser um btn pq ela não vai abrir nada.O tamanho total desse mc com as 60 imagens é 12120px ai num tem flash que aguente! Será que rola de carregar essas imagens de fora e elas ainda funcionarem na animação do mc deslizante?Valew!

[carneirinho 7]

Entã, vamos fazer um script que não dependar de um valor fixo de thumbs, faz assim, cria um retangulo no tamanho de 206 x 524, você seleciona ele e salva como movieclip, da o nome pra ele de "thumb", coloca o ponto de registro dele no canto superior direito antes de salvar como movieclip, e coloca o linkage dele pra "thumb" tb, depois deleta ele do palco, ele vai ficar guardado na bilbioteca, feito isso você usa cria um movieclip no palco, e no primeiro frame desse movieclip você coloca a ação:

 

attachMovie("thumb", "thumb1", 1");

 

isso deverá colocar aquele movieclip que você criou anteriormente dentro desse movieclip, a idéia é duplicar esses thumbs lado a lado, de acordo com o total de fotos que você tem, e com outra ação vamos carregar cada imagem que você fez, dentro de cada thumb, e atribuir as ações que precisamos, depois a gente faz uma conta louca pra fazer ele deslizar pros lados.

 

por enquanto faça isso ai que te falei e assim que der certo posta ai pra gente ir continuando, é melhor eu ir te explicando e você ir aprendendo do que eu te passar o código pronto ou arrumar seu código e quando você precisar inserir foto ou tirar foto, vai dar um nó no saco pra arrumar a agonia toda hora.

 

abraço

[Danielbase 0]

Entã, vamos fazer um script que não dependar de um valor fixo de thumbs, faz assim, cria um retangulo no tamanho de 206 x 524, você seleciona ele e salva como movieclip, da o nome pra ele de "thumb", coloca o ponto de registro dele no canto superior direito antes de salvar como movieclip, e coloca o linkage dele pra "thumb" tb, depois deleta ele do palco, ele vai ficar guardado na bilbioteca, feito isso você usa cria um movieclip no palco, e no primeiro frame desse movieclip você coloca a ação:

 

attachMovie("thumb", "thumb1", "1");

isso deverá colocar aquele movieclip que você criou anteriormente dentro desse movieclip, a idéia é duplicar esses thumbs lado a lado, de acordo com o total de fotos que você tem, e com outra ação vamos carregar cada imagem que você fez, dentro de cada thumb, e atribuir as ações que precisamos, depois a gente faz uma conta louca pra fazer ele deslizar pros lados.

 

abraço

Beleza cara, rolou o Thumb dentro do mc tranquilo... agora você quer que eu duplique os thumbs lado a lado? essa parte eu não entendi muito bem como fazer, é para colocar mais 59 instancias do mc_thumb no palco?

 

Tô colocando o passo a passo desse tutorial nesse link para podermos andar juntos.

 

Valeu!!!!

[carneirinho 7]

Puts, você fez certo mas eu expliquei errado, era pra criar o thumb com o ponto de registro no superior esquerdo e eu coloquei "direito", mas tudo bem, é só entrar no movieclip thumb, selecionar o retangulo e colocar na posição 0 e 0 no H e W nas propriedades.

 

Arrumando essa c** que eu fiz, vamos fazer o que você esta dizendo mesmo, vamos duplicar os movieclips lado a lado, mas isso com uma variavel, vamos criar uma variavel no palco e colocar o valro pra ela de 60 que serão os 60 thumbs que vamos duplicar, depois disso com um for, a gente coloca os 60 thumbs no palco lado a lado com um espaçamento, pra esse osicionamento a gente usa a largura dele x o valor do loop, tipo se ele tiver 200 px de largura, a gente coloca pra posição dele ser 200 * 0, no segudno 200 * 1, depois 200 * 2, até ele chegar nos 60, olha o script abaixo e me fale o que não entendeu:

var total:Number = 60;
espacamento = 5;
for(i = 0; i < total; i ++){
var mc:MovieClip = attachMovie("thumb", "thumb" + i, i);
mc._x = (mc._width * i) + (espacamento * i);
}

abraço

[Danielbase 0]

Puts, você fez certo mas eu expliquei errado, era pra criar o thumb com o ponto de registro no superior esquerdo e eu coloquei "direito", mas tudo bem, é só entrar no movieclip thumb, selecionar o retangulo e colocar na posição 0 e 0 no H e W nas propriedades.Arrumando essa c** que eu fiz, vamos fazer o que você esta dizendo mesmo, vamos duplicar os movieclips lado a lado, mas isso com uma variavel, vamos criar uma variavel no palco e colocar o valro pra ela de 60 que serão os 60 thumbs que vamos duplicar, depois disso com um for, a gente coloca os 60 thumbs no palco lado a lado com um espaçamento, pra esse osicionamento a gente usa a largura dele x o valor do loop, tipo se ele tiver 200 px de largura, a gente coloca pra posição dele ser 200 * 0, no segudno 200 * 1, depois 200 * 2, até ele chegar nos 60, olha o script abaixo e me fale o que não entendeu:

var total:Number = 60;espacamento = 5;for(i = 0; i < total; i ++){var mc:MovieClip = attachMovie("thumb", "thumb" + i, i);mc._x = (mc._width * i) + (espacamento * i);}

abraço

Cara, perfeito!!!! Por incrível que pareça eu estou realmente entendendo o que está acontecendo!!!!Eu alterei só o valor do espaçamento pra adptar ao projeto. Agora é que vem a parte onde as imagens são chamadas né? eu tenho que coloca-las na mesma pasta desse arquivo? elas estão nomeadas de 01.jpg a 60.jpg...Bom tá tudo dando certo até aqui... o arquivo deste passo esta aquiobs.: Tô impressionado com a sua prontidão!!! Valeu mesmo!

[carneirinho 7]

carregar a imagem é o de menos, isso você pode fazer imagem em nome sequencial, tipo imagem1.jpg, imagem2.jpg, pra isso você abre o movieclip thumb, cria mais um frame e coloca la um movieclip vazio com o nome de instancia de loader, coloca na posição 2 e 2 do movielclip, se reparou eu pedi pra você criar o retangulo 4 px maior em altura e largura, justamente pra poder centralizar a imagem nele, assim sobra 2 px de cada lado. agora no for coloca assim:

 

var total:Number = 60;

espacamento = 5;

for(i = 0; i < total; i ++){

var mc:MovieClip = attachMovie("thumb", "thumb" + i, i);

imagem = "imagem" + i + ".jpg";

mc._x = (mc._width * i) + (espacamento * i);

mc.loader.loadMovie(imagem);

}

 

com isso suas imagens ja carregarão dentro dos quadrados, agora vamos fazer o controle da barra, faça uma função na timeline principal que te retorne o tamanho desse movieclip e chame ela depois do for, então a função no primeiro frame será essa:

 

function rolar(){

trace(images._width);

}

 

esse images você da de nome de instancia pro movieclip que carrega os thumbs, e pra chamar essa função é só colocar no final do for:

 

var total:Number = 60;

espacamento = 5;

for(i = 0; i < total; i ++){

var mc:MovieClip = attachMovie("thumb", "thumb" + i, i);

imagem = "imagem" + i + ".jpg";

mc._x = (mc._width * i) + (espacamento * i);

mc.loader.loadMovie(imagem);

}

_root.rolar();

 

vou almoçar enquanto você da esse gas ai, quando terminar da um toque

 

 

 

Só ma coisa de errado, retire a função que você colocou na timeline principal e coloque ela no primeiro frame do movieclip vazio, no lugar de attachMovie("thumb", "thumb1", "1"); , só agora reparei que colocou no lugar errado, senão os thumbs ficarão soltos no palco principal, se colcoar no movieclip, assim que a gente arrastar o movieclip, ele ja arrasta tudo o que ta dentro dele, com isso os thumbs. só corrija isso

[Danielbase 0]

carregar a imagem é o de menos, isso você pode fazer imagem em nome sequencial, tipo imagem1.jpg, imagem2.jpg, pra isso você abre o movieclip thumb, cria mais um frame e coloca la um movieclip vazio com o nome de instancia de loader, coloca na posição 2 e 2 do movielclip, se reparou eu pedi pra você criar o retangulo 4 px maior em altura e largura, justamente pra poder centralizar a imagem nele, assim sobra 2 px de cada lado. agora no for coloca assim:

 

var total:Number = 60;c

espacamento = 5;

for(i = 0; i < total; i ++){

var mc:MovieClip = attachMovie("thumb", "thumb" + i, i);

imagem = "imagem" + i + ".jpg";

mc._x = (mc._width * i) + (espacamento * i);

mc.loader.loadMovie(imagem);

}

 

com isso suas imagens ja carregarão dentro dos quadrados, agora vamos fazer o controle da barra, faça uma função na timeline principal que te retorne o tamanho desse movieclip e chame ela depois do for, então a função no primeiro frame será essa:

 

function rolar(){

trace(images._width);

}

 

esse images você da de nome de instancia pro movieclip que carrega os thumbs, e pra chamar essa função é só colocar no final do for:

 

var total:Number = 60;

espacamento = 5;

for(i = 0; i < total; i ++){

var mc:MovieClip = attachMovie("thumb", "thumb" + i, i);

imagem = "imagem" + i + ".jpg";

mc._x = (mc._width * i) + (espacamento * i);

mc.loader.loadMovie(imagem);

}

_root.rolar();

 

vou almoçar enquanto você da esse gas ai, quando terminar da um toque

 

 

 

Só ma coisa de errado, retire a função que você colocou na timeline principal e coloque ela no primeiro frame do movieclip vazio, no lugar de attachMovie("thumb", "thumb1", "1"); , só agora reparei que colocou no lugar errado, senão os thumbs ficarão soltos no palco principal, se colcoar no movieclip, assim que a gente arrastar o movieclip, ele ja arrasta tudo o que ta dentro dele, com isso os thumbs. só corrija isso

Então cara, acredito que fiz tudo certo. Renomeei as imagens de imagem1.jpg até imagem60.jpg e coloquei o mc vazio instanciado como "loader" dentro do "mc thumb" em uma nova camada no frame 1 pq quando eu coloquei no 2 o mc ficou em looping e piscando... fiz errado? Bom, conrrigi o local do as que estava na timeline principal para dentro do mc vazio que carrega os thumbs e dei nome de instancia de "images" para esse mc...

 

coloquei as imagens na mesma pasta e elas foram carregadas dentro do flash. Mas ocorreu um problema, o flash esta pedindo uma imagem0.jpg e por isso o primeiro retangulo não carrega imagem nenhuma pois acredito que ele esteja esperando essa imagem0.

 

Outra coisa que esta acontecendo é o seguinte, quando eu mando testar o filme o trace responde com o width total, mas o flash da uma travada e manda a seguinte mensagem, "um script que esta sendo executado esta deixando o sistema muito lento, deseja continuar a executar esse script?" eu fiz algo errado?

 

tá aqui o arquivo! se precisar eu coloco as imagens num zip!

Vou almoçar tb cara! volto daqui a pouquinho! foi mal todo esse trabalho!

[carneirinho 7]

o mc_vazio dois não pode ter nada, esquece aquele attachMovie que esta nele, deixa somente um frame nele e sem nada dentro, isso ja vai resolver, o que o tornava lento é qeu você deixou o movieclip sem o stop(). e com o loadMovie, então os 60 duplicados ficavam chamando o loadMovie o tempo todo, sobre ele começar com 0, é porque o for inicia no zero, o que você pode fazer é colocar o for rpa iniciar com 1, e terminar com <=60, testa ai

[Danielbase 0]

o mc_vazio dois não pode ter nada, esquece aquele attachMovie que esta nele, deixa somente um frame nele e sem nada dentro, isso ja vai resolver, o que o tornava lento é qeu você deixou o movieclip sem o stop(). e com o loadMovie, então os 60 duplicados ficavam chamando o loadMovie o tempo todo, sobre ele começar com 0, é porque o for inicia no zero, o que você pode fazer é colocar o for rpa iniciar com 1, e terminar com <=60, testa ai

Beleza Funcionou, mas ainda num ta deslizando... Tá assim o arquivo.Valew, abraço!

[carneirinho 7]

Melhor você deixar a seguinte action:

 

var total:Number = 60;
espacamento = 5;
for(i = 0; i < total; i ++){
var mc:MovieClip = attachMovie("thumb", "thumb" + i, i);
imagem = "imagem" + (i + 1) + ".jpg";
mc._x = (mc._width * i) + (espacamento * i);
mc.loader.loadMovie(imagem);
}
_root.rolar();

Porque assim você não sofre aquele espaço vazio da primeira.

 

Pelo o que vi da ação sem testar, é uma action que conforme a posição do mouse ele vai deslizando pra esquerda ou pra direita, mas com vários ifs desnecessários, então vamos fazer um calculo pra ele rolar, a idéia seria pegar o centro do palco, então conforme se desliza do meio pra direita, o movieclip desliza pra esquerda, e se usar do meio do palco pra esquerda o movieclip vai deslizar pra direita certo?

Podemos começar fazendo um calculo que ele nos de frações a partir do meio, por exemplo, quando o mouse estiver no meio do palco ele nos da o valor zero, se ir pra direita ele da valor positivo e se for pra esquerda nos da um valor negativo, entende?

Ai podemos aplicar esse valor pra diminuir do _x que ele esta, pra isso temos que calcular a posição do mouse meos a largura do Stage dividido por dois, coloque esse script no primeiro frame e veja o que ele retorna conforme você passa o mouse na tela e pelo amor de Deus, me diga se esta seguindo o raciocínio e entendendo o código:

 

onEnterFrame = function(){
	trace(_root._xmouse - (Stage.width / 2));
}

[Danielbase 0]

Melhor você deixar a seguinte action:

 

var total:Number = 60;espacamento = 5;for(i = 0; i < total; i ++){var mc:MovieClip = attachMovie("thumb", "thumb" + i, i);imagem = "imagem" + (i + 1) + ".jpg";mc._x = (mc._width * i) + (espacamento * i);mc.loader.loadMovie(imagem);}_root.rolar();

Porque assim você não sofre aquele espaço vazio da primeira.

 

Pelo o que vi da ação sem testar, é uma action que conforme a posição do mouse ele vai deslizando pra esquerda ou pra direita, mas com vários ifs desnecessários, então vamos fazer um calculo pra ele rolar, a idéia seria pegar o centro do palco, então conforme se desliza do meio pra direita, o movieclip desliza pra esquerda, e se usar do meio do palco pra esquerda o movieclip vai deslizar pra direita certo?

Podemos começar fazendo um calculo que ele nos de frações a partir do meio, por exemplo, quando o mouse estiver no meio do palco ele nos da o valor zero, se ir pra direita ele da valor positivo e se for pra esquerda nos da um valor negativo, entende?

Ai podemos aplicar esse valor pra diminuir do _x que ele esta, pra isso temos que calcular a posição do mouse meos a largura do Stage dividido por dois, coloque esse script no primeiro frame e veja o que ele retorna conforme você passa o mouse na tela e pelo amor de Deus, me diga se esta seguindo o raciocínio e entendendo o código:

 

onEnterFrame = function(){	trace(_root._xmouse - (Stage.width / 2));}

HEHE!!!! Por enquanto to entendendo sim cara!!!!

 

Bom, o trace retornou valores positivos do meio do palco para a direira e negativos para esquerda. O valores máximos que obtive foram -275 (esquerda) e 274 (direita). é isso mesmo né?

[carneirinho 7]

Isso ai mesmo, só que assim, 275 ou -275 é um valor muito alto pra gente colcoar num loop pra ele andar, concorda?Então o melhor é dividir esse valor pra que ele fique mais quebrado, vamos criar uma variavel pra pegar esse resultado e desse resultado a gente divide por 20 ou outro valor pra dar uma quebrada nisso, assim quando ele pegar um valor muito alto como 275, ele andara no máximo 13 px por loop, e quando estiver mais próximo ao centro ele anda menos, então faremos assim:

 

onEnterFrame = function(){
	fracao = (_root._xmouse - (Stage.width / 2)) / 20;
	trace(fracao);
	images._x += fracao;
}

Você vai notar que ele ja vai deslizar de acordo com a posição do mouse, só que ta andando sentido contrário, como queremos que ele ande na direção contrária, podemos multiplicar por -1, você lembra que na matemática menos x menos da mais né?então aplique essa regra na fração:

 

onEnterFrame = function(){
	fracao = (_root._xmouse - (Stage.width / 2)) / 20;
	fracao = fracao * -1;
	trace(fracao);
	images._x +=  fracao;
}

feito isso só vai faltar fazer um limitador que é coisa fácil, testa ai

[Danielbase 0]

Tô Boquiaberto!!!!!!! impressionante como você simplificou o código!

 

Agora, esse limitador é um "if" que vai tirar o onEnterFrame quando o mc thumbs chegar a uma certa posição????

[carneirinho 7]

Isso ai, ele terá duas limitações, ele poderá executar esse script quando for menor que zero porque ele só vai inicialmente pra esquerda então o x dele semper será negativo, e na outra ponta você vai ter que somar o tamanho do movieclip menos o tamanho do palco, que é o total da area que ele pode rolar, então você pode colocar tudo naquela função rolar, ficaria mais ou menos assim:

 

function rolar() {

limite = -(images._width-Stage.width);

// aqui você colocar o if dando a limitação, junto com o enterframe que estava embaixo, acima ta a conta do maior.

}

 

ve ai se você consegue esse if