Preloading, scaling & moving movieclips [fla: CS3 AS2]

1

[fla: CS3 AS2]

Hi, I was wondering if anyone on here can help me fix a gallery I’m building.

Basically, my aim is this:

Click on a thumbnail and the corresponding image is preloaded BEFORE scaling and moving smoothly from the thumbnail position to a target position.
(the thumbnail is actually the container for the loaded image, and therefore also moves to the target)

I have got everything to work, except that the thumbnail moves whilst the image is still loading. This problem defeats the purpose of the gallery, and I’m starting to get blurry vision now!:sen:

I hope I have made everything clear, but since this is quite difficult to explain, I have attached the fla and images.

*You will need to simulate download in flash for the current preloader to work.

Any help on this would be awesome.

Cheers in advance

//P.s. much of the script was (heavily) adapted from an fla I found somewhere, in which the images are arranged into a circle. If anybody knows who scripted that, please let me know, because I like to give credit where credit is due.

2

see if this gets you closer

////////////////////////////////////////////////////digits/////////////////////////////////////////////////////
//////////////////////////////////////////////////////2008/////////////////////////////////////////////////////


// write script for: if the image (holder's?) position is not equal to either the start point, or the target point, then the image (holder?) should not be selectable.
//fix preloader: image should not start moving until loaded.
//check if image dimensions are correct once image is scaled up.
_lockroot = true;

_level0.createEmptyMovieClip("gallery",this.getNextHighestDepth());

var theFmt:TextFormat = new TextFormat();
theFmt.align = "center";
theFmt.size = 40;
theFmt.color = 0xFF0000;

for (i=0; i<3; i++) {
	var spacing:Number = 80;
	//var thumbX = i*spacing;
	var thumbY = _level0.gallery.container0._y+(i*spacing);

	_level0.gallery.attachMovie("container","container"+i,i);
	//_level0.gallery["container"+i].imageHolder._alpha = false;
	_level0.gallery["container"+i]._y = thumbY;

	//initial y position of thumbnails:
	_level0.gallery.container0._y = 100;
//
	_level0.gallery["container"+i].createTextField("t",1000,1,1,70,70);
	
	_level0.gallery["container"+i].t.border = true;
	_level0.gallery["container"+i].t.borderColor = 0xFF0000;
	//_level0.gallery["container"+i].t.text = i;
	_level0.gallery["container"+i].i = i;
	_level0.gallery["container"+i].t.setTextFormat(theFmt);

	_level0.gallery["container"+i].moveAndScale = false;
	_level0.gallery["container"+i].x = _level0.gallery["container"+i]._x;
	_level0.gallery["container"+i].y = _level0.gallery["container"+i]._y;
	_level0.gallery["container"+i].xScale = _level0.gallery["container"+i]._xscale;
	_level0.gallery["container"+i].yScale = _level0.gallery["container"+i]._yscale;
	_level0.gallery["container"+i].depth = _level0.gallery["container"+i].getDepth();


	var clipLoader:MovieClipLoader = new MovieClipLoader();
	var preloader:Object = new Object();

	clipLoader.addListener(preloader);

	preloader.onLoadProgress = function(target, bytesLoaded, bytesTotal) {
		var percLoaded:Number = Math.floor((bytesLoaded/bytesTotal)*100);

		target.createTextField("percentText",target.getNextHighestDepth(),110,90,100,50);
		var percentTextFormat:TextFormat = new TextFormat();
		percentTextFormat.align = "center";
		percentTextFormat.size = 50;
		percentTextFormat.color = 0xFF0000;
		target.percentText.text = percLoaded+" %";
		target.percentText.setTextFormat(percentTextFormat);
		target.percentText.selectable = false;

		if (percLoaded<100) {
			target.percentText._visible = true;
		} else if (percLoaded>=100) {
			target.percentText._visible = false;
			target._parent.onEnterFrame = move
			
		}
	};

	_level0.gallery["container"+i].onPress = function() {

		if (this.moveAndScale == true) {
			this.moveAndScale = false;
		} else {
			this.moveAndScale = true;
		}
	};



	_level0.gallery["container"+i].onRelease = _level0.gallery["container"+i].onReleaseOutside=function (target) {
		if (this.moveAndScale == true) {
			this.imageHolder._xscale /= 4;
			this.imageHolder._yscale /= 3;
			this.swapDepths(this.getNextHighestDepth());
			this.targetX = this._width*2;
			this.targetY = 0;
			//find out how to set the targetXScale and targetYScale values to 100% of the images size.
			this.targetXScale = 250;
			this.targetYScale = 166.5;
			clipLoader.loadClip("photography/"+this.i+".jpg",this.imageHolder);
		} else {
			this.imageHolder._xscale *= 4;
			this.imageHolder._yscale *= 3;
			this.swapDepths(this.depth);
			this.targetX = this.x;
			this.targetY = this.y;
			this.targetXScale = this.xScale;
			this.targetYScale = this.yScale;
			this.imageHolder.unloadMovie();
		}
	};

}
function move() {

	this._x += (this.targetX-this._x)/5;
	this._y += (this.targetY-this._y)/5;

	if (this._x == this.targetX) {
		this._xscale += (this.targetXScale-this._xscale)/5;
		this._yscale += (this.targetYScale-this._yscale)/5;
	} else {
		this._xscale += (this.targetXScale-this._xscale)/3;
		this._yscale += (this.targetYScale-this._yscale)/3;
	}
}
3

Hey Stringy that was exactly what I needed.
I can’t thank you enough, that was driving me crazy! Your help is much appreciated!

4

[QUOTE=digits;2354339]Hey Stringy that was exactly what I needed.
I can’t thank you enough, that was driving me crazy! Your help is much appreciated![/QUOTE]
welcome :wink:

5

Hey Stringy I don’t know if your still there, but I just noticed that once a thumb has been pressed, if it is pressed a second time it reverts to the previous, problematic functionality!

I’ll look into it, but any help would be most welcome.

Thanks again!

6

[QUOTE=digits;2354349]Hey Stringy I don’t know if your still there, but I just noticed that once a thumb has been pressed, if it is pressed a second time it reverts to the previous, problematic functionality!

I’ll look into it, but any help would be most welcome.

Thanks again![/QUOTE]
it is because your function does not delete onEnterFrame on completion-try change to

function move() {

	this._x += (this.targetX-this._x)/5;
	this._y += (this.targetY-this._y)/5;
	trace(1);
	if (Math.abs(this._x-this.targetX)<2) {
		this._x = this.targetX;
		this._xscale += (this.targetXScale-this._xscale)/5;
		this._yscale += (this.targetYScale-this._yscale)/5;
		if (this.targetXScale-this._xscale<2) {
			this._xscale = this.targetXScale;
			this._yscale = this.targetYScale;
			delete this.onEnterFrame;
                                       this.enabled = false
		}
	} else {
		this._xscale += (this.targetXScale-this._xscale)/3;
		this._yscale += (this.targetYScale-this._yscale)/3;
	}
}
7

Hey Stringy, thanks for your input… writing it like that actually stops the functionality of clicking to close the scaled-up image.

I solved the problem by modifying and simplifying the function:

function moveImage ()
{

    this._x += (this.targetX-this._x)/5;
    this._y += (this.targetY-this._y)/5;
        
    if (this._x == this.targetX)
    { 
        this._xscale += (this.targetXScale-this._xscale)/5;
        this._yscale += (this.targetYScale-this._yscale)/5;
        this.enabled = true;
        
        delete this.onEnterFrame;
    }
    else
    {
        this._xscale += (this.targetXScale-this._xscale)/3;
        this._yscale += (this.targetYScale-this._yscale)/3;
        
        if (this._y == this.targetY)
        {
            this.enabled = true;
        }
        else
        {
            this.enabled = false;
        }
    }
}

Thanks again :beer: