Bewegen en zoomen movieclip op achtergrond

[killabb]

Beste mensen,

Ik ben bezig met een experimentje om een movieclip op de achtergrond te laten zoomen en bewegen.
Dit alles moet gebeuren op een muisklik op de movieclip zelf.

Het zoomen werkt, en heel goed!
Het bewegen naar de muisklik ook maar dit werkt niet zoals ik het wil.

De movieclip beweegt naar het punt waarop de movieclip is uitgelijnd (weet even niet hoe dit heet).
Daarnaast schuift de movieclip uit de stage en dit is ook niet de bedoeling.

Heeft misschien iemand hier een idee over?

Ter verduidelijking mijn AS:

import mx.transitions.Tween;
import mx.transitions.easing.*;
var scaleTo = 140;
// Schalen tot bovenstaand percentage (%)
// FUNCTIONS
function tween() {
new Tween(bg, "_xscale", Regular.easeOut, 100, scaleTo, 3, true);
new Tween(bg, "_yscale", Regular.easeOut, 100, scaleTo, 3, true);
}
bg.onRelease = tween;
var mouse_listener:Object = new Object();
mouse_listener.onMouseDown = function() {
var bgX_tween:Tween = new Tween(bg, "_x", None.easeNone, bg._x, _xmouse, 2, true);
var bgY_tween:Tween = new Tween(bg, "_y", None.easeNone, bg._y, _ymouse, 2, true);
};
Mouse.addListener(mouse_listener);


Bij voorbaat dank!
Groetjes!

--
Edit

Uiteindelijk wil ik dit gaan gebruiken voor de site van mijn band!

[Lippuzz]

je wilt het midden van de MC naar de exacte locatie van je muis hebben?

in dat geval moet je de height en de width van je movie mee bereken in de positie van waar je je MC heen wil laten gaan.

dus in de tween zet je:


_root._xmouse - (bg._width/2)
_root._ymouse - (bg._height/2)


ipv

_xmouse
_ymouse


als ik je probleem goed begrijp zou dit de oplossing moeten zijn

[killabb]

Bedankt maar dit was het helaas niet :(
Als ik dit aanpas dan verplaatst de movieclip zich naar het lijkt een orientatiepunt rechtsonderin.

Ik zal de situatie uitleggen misschien wordt het duidelijker.
Ik wil iets maken zoals je kan zien bij deze template:
http://www.flashtemplate.us/004/snav/snav.htm

Zoals gezegd heb ik een achtergrond afbeelding, deze zoomt al in op de muisklik en hij beweegt maar niet zoals de bedoeling is.

De code staat al in de post hierboven.

Is het een mogelijkheid om de tween beperkingen te geven zoals if (hitTest zijkant scene){stop tween;}
Of denk ik compleet verkeerd en moet ik alles anders doen?

BVD!
Groetjes!
8)

[slickshots]

je moet het registration point aanpassen naar het midden.

[killabb]

Het registration point staat in het midden...
Ik heb de .fla ook even bijgevoegd.
Misschien is het dan duidelijker ?

Zoals gezegd is het een begin voor de nieuwe site van mijn band.;)
Vandaar de vage foto :P

[killabb]

Niemand die weet hoe ik het voor elkaar kan krijgen?

[Lippuzz]

het probleem is dat het regisratiepunt zich moet verplaatsen nadat je geklitk hebt. ik neem aan dat het punt waar je klikt het middem punt moet worden. ik zal is kijken of ik het ff snel gefixt krijg.

btw; waarom moet de mc constan op 100 beginnen met de sclae, dat krijg je een tik in de tween... :)


// edit:

bedoel je zo iets?


import mx.transitions.Tween;
import mx.transitions.easing.*;
var scaleTo = 140;

var X:Number = bg._x;
var Y:Number = bg._y;

// Schalen tot bovenstaand percentage (%)
// FUNCTIONS
function tween() {
new Tween(bg, "_xscale", Regular.easeOut, 100, scaleTo, 3, true);
new Tween(bg, "_yscale", Regular.easeOut, 100, scaleTo, 3, true);
}

bg.onRelease = function() {

theX = _root._xmouse - X;
theY = _root._ymouse - Y;

var bgX_tween:Tween = new Tween(bg, "_x", None.easeNone, bg._x, bg._x-theX, 2, true);
var bgY_tween:Tween = new Tween(bg, "_y", None.easeNone, bg._y, bg._y-theY, 2, true);

tween()
};


//Mouse.addListener(mouse_listener);

[killabb]

Heel erg gaaf zo!
TNX alvast!
Kan je me ook nog even uitleggen wat je nu precies doet want ik wil er natuurlijk wel van leren he ;)

Nu hoef ik alleen nog maar te zeggen dat hij stopt als hij de zijkanten/boven/onderkant van de stage raakt, kan dit via hitTest (aangezien je het had over orientatiepunt veranderen)?
Of moet ik dan een movieclip maken en dan hitTest gebruiken?

Bedoel je met die 100% dat ik die beter op 99% kan zetten?
Of is die klik in de tween alleen bij de tweede keer klikken, want straks moet je een tweede keer klikken om weer terug uit te zoomen.

Nogmaals TNX!!

[Lippuzz]

var X:Number = bg._x;
var Y:Number = bg._y;


deze code zorgt er voor dat de huidige positei van de x


theX = _root._xmouse - X;
theY = _root._ymouse - Y;


dit stukje rekent de positie uit van de x en de y ten opzichte van dat midden punt.

het verschil is wat er bewogen moet worden in de mc omdat je dat naar het midden wel laten komen.

dus als je klikt terwijl de muis 10 van het midden is, dan moet de MC 10 naar LINKS, dus de bg._x moet met 10 vermindert worden.


nu ik dit type bedenk ik me dat je het op een nog betere manier kunt doen, namelijk je berekent de muis positie ten opzichte van het midden van de stage:


var X:Number = Stage.width/2;
var Y:Number = Stage.height/2;



het maakt dan niet uit waar je registratiepunt is en je kunt je MC positioneren hoe je wilt..


Voor het raken van de kanten gebruik je niet de hittest maar de eigenschappen van de MC en de Stage. Dit combineer je met if-loops;

je krijgt dan zoiets:



import mx.transitions.Tween;
import mx.transitions.easing.*;
var scaleTo = 140;


var X:Number = Stage.width/2;
var Y:Number = Stage.height/2;

var overflowX:Number = (bg._width - Stage.width)/2;
// kijken hoe ver de MC buiten je stage komt aan elke kant;
var overflowY:Number = (bg._height - Stage.height)/2;
// ook voor de boven en onderkant;
var maxX:Number = (Stage.width/2)+overflowX;
var maxY:Number = (Stage.height/2)+overflowY;
var minX:Number = (Stage.width/2)-overflowX;
var minY:Number = (Stage.height/2)-overflowY;

// Schalen tot bovenstaand percentage (%)
// FUNCTIONS

function tween() {
theX = _root._xmouse-X;
theY = _root._ymouse-Y;

var bgX_tween:Tween = new Tween(bg, "_x", None.easeNone, bg._x, bg._x-theX, 2, true);
var bgY_tween:Tween = new Tween(bg, "_y", None.easeNone, bg._y, bg._y-theY, 2, true);
new Tween(bg, "_xscale", Regular.easeOut, 100, scaleTo, 3, true);
new Tween(bg, "_yscale", Regular.easeOut, 100, scaleTo, 3, true);

bgX_tween.onMotionChanged = function() {

if (bg._x>maxX) {
bgX_tween.stop();
}
if (bg._x<minX) {
bgX_tween.stop();
}
};
bgY_tween.onMotionChanged = function() {
if (bg._y>maxY) {
trace("ddd")
bgY_tween.stop();
}
if (bg._y<minY) {

bgY_tween.stop();
}
};


}

bg.onRelease = function() {
tween()

};


//Mouse.addListener(mouse_listener);



met doe scalen bedoel ik. elke keer als je opniew klikt gaat hij ineens terug naar 100.. het zou mooi zijn wanneer dit ook getweened wordt :D

[killabb]

Dat scalen moet straks bij de tweede klik teruggaan naar 100%, dat is nu nog niet noodzakelijk.
Je code werkt, maar als ik nu op de rechterhoek klik gaat hij niet helemaal naar die hoek.
Hij vertrekt naar die hoek maar zodra hij merkt dat hij de stage raakt dan blijft hij staan.
Misschien moet de tween anders zijn?
Als ik bijvoorbeeld een tween maak in de timeline kan ik hem en vergroten en zo neerzetten dat hij niet buiten de stage komt.
Moet alles dan in die vergroot-tween misschien?
Kan de vergroot tween ook behalve vergroten dit naar een bepaald punt doen, net zoals met het orientatiepunt verplaatsen?

Ik hoop dat we het kunnen oplossen :D
En nogmaals erg bedankt voor je moeite!!

ps. Dit is trouwens de eerste keer dat ik bezig ben met tweens in actionscript en vind het wel heel erg vet dat het zo lukt!

[killabb]

Heeft niemand een idee hoe ik dit voor elkaar kan krijgen?

Ik hoop van wel :(

[killabb]

Ik heb hierbij toch een beter idee gekregen, en dan is het niet meer nodig om de tween te beperken. Dan is het juist gaaf als het wel zo ver on stage komt.
Ik zal het uiteindelijke nog wel hier posten, kunnen jullie ook zien wat er van geworden is!

(mocht je het op kunnen lossen, graag! Niet alleen voor mij maar ook voor andere mensen die dit probleem kunnen ondervinden).

groetjes!

[Lippuzz]

Als hij helemaal naar de rechhoek moet gaan komt ie weer buiten de stage...

of je moet hem dan meer gaan inzoomen. maar heb je enig idee hoeveel ja dan wel niet inzoomen? de vraag is dan of dat het gewenste effect heeft...

[killabb]

Als ik dit doe:

import mx.transitions.Tween;
import mx.transitions.easing.*;
var scaleTo = 220;

var X:Number = bg._x;
var Y:Number = bg._y;

// Schalen tot bovenstaand percentage (%)
// FUNCTIONS
function tween() {
new Tween(bg, "_xscale", Regular.easeOut, 100, scaleTo, 3, true);
new Tween(bg, "_yscale", Regular.easeOut, 100, scaleTo, 3, true);
}

bg.onRelease = function() {

theX = _root._xmouse - X;
theY = _root._ymouse - Y;

var bgX_tween:Tween = new Tween(bg, "_x", None.easeNone, bg._x, bg._x-theX, 2, true);
var bgY_tween:Tween = new Tween(bg, "_y", None.easeNone, bg._y, bg._y-theY, 2, true);

tween()
};


//Mouse.addListener(mouse_listener);


Dan heb ik het effect wat ik wilde!
Tnx Lippuz, nu kijken of ik dit ga doen of die andere manier die ik had bedacht ;)

echt tnx!!

[Lippuzz]

idd, maar dan krijg je toch dat je een zwarte rand zou kunnen krijgen, niet?

wat je ook kunt doen is het zoomen sneler laten gaan dan het schuiven. Zo raakt de MC minder snel de kant en dus stopt ie minder snel met schuiven.

nu is het andersom, gaat ie eerst schuiven, en daarna nog zoomen. maar als hij zoomt dan verandert de positie weer en zou hij misschien toch weer buiten de stage komen.

naja, iig succes ermee. ben benieuwd naar het eindresultaat