Forums: Flash:

 

Photo Enlarge Problem

first
 

Glutonious 2005.05.13, 02:13PM — Photo Enlarge Problem

Hey guys hope you're all doing well. I've run into a new problem recently on my website and on my clients website. Maybe you guys could help me.

My company: http://esteki.ca

My Current Client: http://www.havinn.com


Basically what i'm trying to do is recreate his website into a Flash Website. I created this site in HTML and he's been a good long term client of mine, and I don't want to let them down.

The problem is basically that I have a portfolio section that I want to change a bit, so that when the user hovers his mouse over one of the pics, it does a bit of an ENLARGE>BOUNCE then when the mouse is removed REDUCESIZE>BOUNCE into normal position and when someone clicks it, I want the site to open into a pop up window within my flash document over my site and it will give some detail description about the project, clients name, etc, and with the option to LAUNCHSITE>NEW WINDOW and it will close if you select that option and my site will resume normal status.


Now i've played around with some combo coding of AS2 and XML feed as well as some PHP for the seperate window process. I think I went too far and now i've totally confused myself and I can't seem to do shit but swear heavily at my computer and drink spiked Iranian Tea. lol HELP !! Crash

Any tiny suggestion that can perhaps show me a path where I can trouble shoot the rest to figure it out on my own as a learning experience or anything will be really appreciated. Thanks again guys/gals. big grin

Chim chimney chim chimney chim chim cha roo
quote
 

JLM 2005.05.13, 05:44PM —

The links did not seem to do much but maybe I am too impatient

anyway I made you some code as a start 


depth = 1;

no = 12;

space = 5;

l = 50;

scale = 2;

startsX = startsY=20;

rows = 4;

var bout = mx.transitions.easing.Bounce.easeOut;

while (depth<no) {

	with (createEmptyMovieClip("m"+depth, depth++)) {

		_x = startsX+(space+l*scale)*(depth%rows);

		_y = startsY+(space+l*scale)*(Math.round(depth/rows)-1);

		beginFill(0, 50);

		lineTo(l, 0);

		lineTo(l, l);

		lineTo(0, l);

		lineTo(0, 0);

		endFill();

	}

	mc = _root["m"+depth];

	mc.onRollOver = bounceUp;

	mc.onPress = function() {

		loadMovie(this._name, -1);

	};

}

function bounceUp() {

	this.tx = new mx.transitions.Tween(this, "_xscale", bout, this._xscale, 100*scale, 6, false);

	this.ty = new mx.transitions.Tween(this, "_yscale", bout, this._yscale, 100*scale, 6, false);

	this.onRollOver = null;

	this.onRollOut = bounceDn;

	this.tx.onMotionFinished = function() {

	};

	//this._xscale=200;

	//this._yscale=200;

}

function bounceDn() {

	this.tx = new mx.transitions.Tween(this, "_xscale", bout, this._xscale, 100, 6, false);

	this.ty = new mx.transitions.Tween(this, "_yscale", bout, this._yscale, 100, 6, false);

	this.onRollOut = null;

	this.onRollOver = bounceUp;

	this.tx.onMotionFinished = function() {

	};

	//this._xscale=100;

	//this._yscale=100;

}

It is probably not what you want but shows using bounce tweens in MX04 using AS1.

JLM

quote
 

JLM 2005.05.13, 07:23PM —

seems to be working now maybe I had too much open earlier. Like the movement not sure my post would have helped you much.

quote
 

Glutonious 2005.05.14, 04:38AM —

So like first I read it and said wtf. oof

But then I tested it out and referenced the code to try and understand, and I got it. not worthy:

Now i'm playing around with it and it made me hard. I got a stiffy dude. bounce

Thank you so much ! That's a friggin awesome start brother. I'm gonna comment the fuck out of the code, as soon as I finish applying it to my website and test it, i'll post a link. love banana

Chim chimney chim chimney chim chim cha roo
quote
 

JLM 2005.05.15, 12:33AM —

Er I had another look and got this 


depth = 0;

no = 30;

space = 5;

lx = 50;

ly=35;

scale = 2;

startsX =lx+space; 

startsY=ly+space;

rows = 6;

bSpeed=6;

var bout = mx.transitions.easing.Bounce.easeOut;

objs=[];

arr=new Array(rows);

i=0;

fraction=5/6;

cols=Math.round(no/rows);

while(i<arr.length){arr[i++]=new Array(cols);}

while (depth<no) {

	with (createEmptyMovieClip("m"+ depth, depth) ){

		objs.push(mc=_root[_name]);

		mc.no=depth;

		mc.rowNo=(depth%rows);

		mc.colNo=(Math.round((depth-Math.round(rows/2))/rows));

		arr[mc.rowNo][mc.colNo]=mc;

		_x = startsX+(space+lx*scale)*mc.rowNo+lx/2;

		_y = startsY+(space+ly*scale)*mc.colNo+ly/2;

		beginFill(0, 50);

		moveTo(-lx,-ly);

		lineTo(lx, -ly);

		lineTo(lx, ly);

		lineTo(-lx, ly);

		lineTo(-lx, -ly);

		endFill();	

		depth++;	

	}

	mc.onRollOver = bounceUp;

	mc.onPress = function() {

		_root.loadMovie(this._name+".jpg", -1);

	};

}



MovieClip.prototype.bounceSmall=bounceSmall;

MovieClip.prototype.bounceRestore=bounceRestore;

MovieClip.prototype.bounceLarge=bounceLarge;

function bounceUp() {

	this.bounceLarge();

	arr[this.rowNo-1][this.colNo-1].bounceSmall();

	arr[this.rowNo-1][this.colNo+1].bounceSmall();

	arr[this.rowNo+1][this.colNo-1].bounceSmall();

	arr[this.rowNo+1][this.colNo+1].bounceSmall();

	arr[this.rowNo-1][this.colNo].bounceSmall();

	arr[this.rowNo+1][this.colNo].bounceSmall();

	arr[this.rowNo][this.colNo-1].bounceSmall();

	arr[this.rowNo][this.colNo+1].bounceSmall();

}

function bounceDn() {

	this.bounceRestore();

	arr[this.rowNo-1][this.colNo-1].bounceRestore();

	arr[this.rowNo-1][this.colNo+1].bounceRestore();

	arr[this.rowNo+1][this.colNo-1].bounceRestore();

	arr[this.rowNo+1][this.colNo+1].bounceRestore();

	arr[this.rowNo-1][this.colNo].bounceRestore();

	arr[this.rowNo+1][this.colNo].bounceRestore();

	arr[this.rowNo][this.colNo-1].bounceRestore();

	arr[this.rowNo][this.colNo+1].bounceRestore();

}

function bounceLarge(){

	t.htmlText="<font face='_sans' Size='20'>Photo Gallery, Picture "+this._name+" </font>";

	this.tx = new mx.transitions.Tween(this, "_xscale", bout, this._xscale, 100*scale*fraction, bSpeed, false);

	this.ty = new mx.transitions.Tween(this, "_yscale", bout, this._yscale, 100*scale*fraction, bSpeed, false);

	this.onRollOver = null;

	this.onRollOut = bounceDn;

}

function bounceRestore() {

	this.tx = new mx.transitions.Tween(this, "_xscale", bout, this._xscale, 100, bSpeed, false);

	this.ty = new mx.transitions.Tween(this, "_yscale", bout, this._yscale, 100, bSpeed, false);

	this.onRollOut = null;

	this.onRollOver = bounceUp;

}

function bounceSmall() {

	this.tx = new mx.transitions.Tween(this, "_xscale", bout, this._xscale, 100*fraction/scale, bSpeed, false);

	this.ty = new mx.transitions.Tween(this, "_yscale", bout, this._yscale, 100*fraction/scale, bSpeed, false);

	this.onRollOut = null;

	this.onRollOver = bounceUp;

}

createTextField("t",depth++,lx/2+space/2,mc._y+1.5*ly+space,300,100);

t.html=true

t.htmlText="<font face='_sans' Size='20'>Photo Gallery</font>";

t.selectable=false;

quote
 

JLM 2005.05.15, 02:03AM —

I was thinking maybe it is better like this 


depth = 0;

no = 30;

space = 5;

lx = 50;

ly=35;

scale = 2;

startsX =lx+space; 

startsY=ly+space;

rows = 6;

bSpeed=6;

var bout = mx.transitions.easing.Bounce.easeOut;

objs=[];

arr=new Array(rows);

i=0;

fraction=1;//5/6;

cols=Math.round(no/rows);

while(i<arr.length){arr[i++]=new Array(cols);}

while (depth<no) {

	with (createEmptyMovieClip("m"+ depth, depth) ){

		objs.push(mc=_root[_name]);

		mc.no=depth;

		mc.rowNo=(depth%rows);

		mc.colNo=(Math.round((depth-Math.round(rows/2))/rows));

		arr[mc.rowNo][mc.colNo]=mc;

		_x = startsX+(space+lx*scale)*mc.rowNo+lx/2;

		_y = startsY+(space+ly*scale)*mc.colNo+ly/2;

		mc.initX=_x;

		mc.initY=_y;

		beginFill(0, 50);

		moveTo(-lx,-ly);

		lineTo(lx, -ly);

		lineTo(lx, ly);

		lineTo(-lx, ly);

		lineTo(-lx, -ly);

		endFill();	

		depth++;	

	}

	mc.onRollOver = bounceUp;

	mc.onPress = function() {

		_root.loadMovie(this._name+".jpg", -1);

	};

}



MovieClip.prototype.bounceSmall=bounceSmall;

MovieClip.prototype.bounceRestore=bounceRestore;

MovieClip.prototype.bounceLarge=bounceLarge;

function bounceUp() {

	this.bounceLarge();

	arr[this.rowNo-1][this.colNo-1].bounceSmall(-lx,-ly);

	arr[this.rowNo-1][this.colNo+1].bounceSmall(-lx,ly);

	arr[this.rowNo+1][this.colNo-1].bounceSmall(lx,-ly);

	arr[this.rowNo+1][this.colNo+1].bounceSmall(lx,ly);

	arr[this.rowNo-1][this.colNo].bounceSmall(-lx,0);

	arr[this.rowNo+1][this.colNo].bounceSmall(lx,0);

	arr[this.rowNo][this.colNo-1].bounceSmall(0,-ly);

	arr[this.rowNo][this.colNo+1].bounceSmall(0,ly);

}

function bounceDn() {

	this.bounceRestore();

	arr[this.rowNo-1][this.colNo-1].bounceRestore();

	arr[this.rowNo-1][this.colNo+1].bounceRestore();

	arr[this.rowNo+1][this.colNo-1].bounceRestore();

	arr[this.rowNo+1][this.colNo+1].bounceRestore();

	arr[this.rowNo-1][this.colNo].bounceRestore();

	arr[this.rowNo+1][this.colNo].bounceRestore();

	arr[this.rowNo][this.colNo-1].bounceRestore();

	arr[this.rowNo][this.colNo+1].bounceRestore();

}

function bounceLarge(){

	this.tox=new mx.transitions.Tween(this, "_x", bout, this._x, this.initX, bSpeed, false);

	this.toy=new mx.transitions.Tween(this, "_y", bout, this._y, this.initY, bSpeed, false);

	this.tx = new mx.transitions.Tween(this, "_xscale", bout, this._xscale, 100*scale*fraction, bSpeed, false);

	this.ty = new mx.transitions.Tween(this, "_yscale", bout, this._yscale, 100*scale*fraction, bSpeed, false);

	this.tx.name=this._name;

	t.htmlText="<font face='_sans' Size='20'>Photo Gallery, Picture m</font>";

	this.tx.onMotionFinished = function() {

		t.htmlText="<font face='_sans' Size='20'>Photo Gallery, Picture "+this.name+" </font>";

	};

	this.onRollOver = null;

	this.onRollOut = bounceDn;

}

function bounceRestore() {

	this.tox=new mx.transitions.Tween(this, "_x", bout, this._x, this.initX, bSpeed, false);

	this.toy=new mx.transitions.Tween(this, "_y", bout, this._y, this.initY, bSpeed, false);

	this.tx = new mx.transitions.Tween(this, "_xscale", bout, this._xscale, 100, bSpeed, false);

	this.ty = new mx.transitions.Tween(this, "_yscale", bout, this._yscale, 100, bSpeed, false);

	this.onRollOut = null;

	this.onRollOver = bounceUp;

}

function bounceSmall(x,y) {

	this.tox=new mx.transitions.Tween(this, "_x", bout, this._x, this.initX+x/2, bSpeed, false);

	this.toy=new mx.transitions.Tween(this, "_y", bout, this._y, this.initY+y/2, bSpeed, false);

	this.tx = new mx.transitions.Tween(this, "_xscale", bout, this._xscale, 100*fraction/scale, bSpeed, false);

	this.ty = new mx.transitions.Tween(this, "_yscale", bout, this._yscale, 100*fraction/scale, bSpeed, false);

	this.onRollOut = null;

	this.onRollOver = bounceUp;

}

createTextField("t",depth++,lx/2+space/2,mc._y+2*ly+space,300,100);

t.html=true

t.htmlText="<font face='_sans' Size='20'>Photo Gallery</font>";

t.selectable=false;

quote
 

JLM 2005.05.15, 03:51AM —

Well I actually need a loader for muliple pictures for a friend so I thought what the heck I will use the mx2004 pictureloader with stickmans php get dir info and addin the code I have been playing with
so here it is (my var names are rather lazy but hay apart from a small bug it with setting rows, it works.)
http://www.justinfront.net/squareBounce3.swf 


//MX 2004 AS1 bounce picture loader

//Credits: JLM At Justinfront Dot Net please retain credits with code.

//15 May 2005 version 1.0

stop();

path = '/'//put path in and use stickmans php code.

dir = new LoadVars();

dir.path = path;

response = new LoadVars();

response.onLoad = getResponse;

dir.sendAndLoad("/", response, "POST");//put stickmans php directory getter in here

gallery = [];

galleryName = [];

function getResponse(result) {

	file_count = Number(response.file_count);

	no = 0;

	for (i=1; i<file_count+1; i++) {

		currPic = response["file_"+i];

		typePic = (currPic.substr(-3, 3));

		if ((typePic == "jpg") || (typePic == "swf")) {

			no++;

			loadin = path add currPic;

			galleryName.push(currPic);

			gallery.push(loadin);

		}

	}

no++

	loadMyPictures();



}

function loadMyPictures() {

	depth = 0;

	//no = 30;

	space = 5;

	lx = 32;

	ly = 28;

	scale = 2;

	startsX = lx+space;

	startsY = ly+space;

	rows = 8;

	bSpeed = 6;

	bout = mx.transitions.easing.Bounce.easeOut;

	objs = [];

	arr = new Array(rows);

	i = 0;

	fraction = 1;

	//5/6;

	cols = Math.round(no/rows);

	while (i<arr.length) {

		arr[i++] = new Array(cols);

	}

	while (depth<no) {

		with (createEmptyMovieClip("m"+depth, depth)) {

			objs.push(mc=_root[_name]);

			mc.no = depth;

			mc.rowNo = (depth%rows);

			mc.colNo = (Math.round((depth-Math.round(rows/2))/rows));

			arr[mc.rowNo][mc.colNo] = mc;

			_x = startsX+(space+lx*scale)*mc.rowNo+lx/2;

			_y = startsY+(space+ly*scale)*mc.colNo+ly/2;

			mc.initX = _x;

			mc.initY = _y;

			with (mc.createEmptyMovieClip("pos", 0)) {

				beginFill(0, 50);

				moveTo(-lx, -ly);

				lineTo(lx, -ly);

				lineTo(lx, ly);

				lineTo(-lx, ly);

				lineTo(-lx, -ly);

				endFill();

			}

			with (mc.createEmptyMovieClip("holder", 1)) {

				_visible = false;

			}

			depth++;

		}

		mc.onRollOver = bounceUp;

		mc.onPress = function() {

			_root.loadMovie(gallery[this.no]+"", -1);

		};

	}

	function bounceUp() {

		this.bounceLarge();

		arr[this.rowNo-1][this.colNo-1].bounceSmall(-lx, -ly);

		arr[this.rowNo-1][this.colNo+1].bounceSmall(-lx, ly);

		arr[this.rowNo+1][this.colNo-1].bounceSmall(lx, -ly);

		arr[this.rowNo+1][this.colNo+1].bounceSmall(lx, ly);

		arr[this.rowNo-1][this.colNo].bounceSmall(-lx, 0);

		arr[this.rowNo+1][this.colNo].bounceSmall(lx, 0);

		arr[this.rowNo][this.colNo-1].bounceSmall(0, -ly);

		arr[this.rowNo][this.colNo+1].bounceSmall(0, ly);

	}

	function bounceDn() {

		this.bounceRestore();

		arr[this.rowNo-1][this.colNo-1].bounceRestore();

		arr[this.rowNo-1][this.colNo+1].bounceRestore();

		arr[this.rowNo+1][this.colNo-1].bounceRestore();

		arr[this.rowNo+1][this.colNo+1].bounceRestore();

		arr[this.rowNo-1][this.colNo].bounceRestore();

		arr[this.rowNo+1][this.colNo].bounceRestore();

		arr[this.rowNo][this.colNo-1].bounceRestore();

		arr[this.rowNo][this.colNo+1].bounceRestore();

	}

	function bounceLarge() {

		this.tox = new mx.transitions.Tween(this, "_x", bout, this._x, this.initX, bSpeed, false);

		this.toy = new mx.transitions.Tween(this, "_y", bout, this._y, this.initY, bSpeed, false);

		this.tx = new mx.transitions.Tween(this, "_xscale", bout, this._xscale, 100*scale*fraction, bSpeed, false);

		this.ty = new mx.transitions.Tween(this, "_yscale", bout, this._yscale, 100*scale*fraction, bSpeed, false);

		this.tx.gallery = galleryName[this.no];

		t.htmlText = "<font face='_sans' Size='20'>Photo Gallery, Picture </font>";

		this.tx.onMotionFinished = function() {

			t.htmlText = "<font face='_sans' Size='20'>Photo Gallery, Picture "+this.gallery+" </font>";

		};

		this.onRollOver = null;

		this.onRollOut = bounceDn;

	}

	function bounceRestore() {

		this.tox = new mx.transitions.Tween(this, "_x", bout, this._x, this.initX, bSpeed, false);

		this.toy = new mx.transitions.Tween(this, "_y", bout, this._y, this.initY, bSpeed, false);

		this.tx = new mx.transitions.Tween(this, "_xscale", bout, this._xscale, 100, bSpeed, false);

		this.ty = new mx.transitions.Tween(this, "_yscale", bout, this._yscale, 100, bSpeed, false);

		this.onRollOut = null;

		this.onRollOver = bounceUp;

	}

	function bounceSmall(x, y) {

		this.tox = new mx.transitions.Tween(this, "_x", bout, this._x, this.initX+x/2, bSpeed, false);

		this.toy = new mx.transitions.Tween(this, "_y", bout, this._y, this.initY+y/2, bSpeed, false);

		this.tx = new mx.transitions.Tween(this, "_xscale", bout, this._xscale, 100*fraction/scale, bSpeed, false);

		this.ty = new mx.transitions.Tween(this, "_yscale", bout, this._yscale, 100*fraction/scale, bSpeed, false);

		this.onRollOut = null;

		this.onRollOver = bounceUp;

	}

	createTextField("t", depth++, lx/2+space/2, mc._y+2*ly+space, 300, 100);

	t.html = true;

	t.htmlText = "<font face='_sans' Size='20'>Photo Gallery</font>";

	t.selectable = false;

	t.autoSize = true;

	createTextField("t2", depth++, t._x, t._y+t._height, 780, 500);

	t2.wordWrap = true;

	t2.text = "Content ";

	for (all in gallery) {

		t2.text += "  "+galleryName[all];

	}

	MovieClip.prototype.scaleTo = function(m) {

		with (this) {

			_xscale = _yscale=100;

			var p = new Object({H:_height/m._height, W:_width/m._width});

			p = (p.H>p.W) ? p.H : p.W;

			_yscale = _xscale=100/p;

			_x=m._x-_width/2, _y=m._y-_height/2;

		}

	};

	l = new MovieClipLoader();

	l.loadClip(gallery[0], objs[0].holder);

	l.onLoadComplete = function(m) {

		//loadNext

		ano = m._parent.no;

		if (ano<no) {

			l.loadClip(gallery[ano+1], objs[ano+1].holder);

		} else {

			delete this;

		}

	};

	l.onLoadStart = function (m){

        var loadProgress = l.getProgress(m);

	}

	l.onLoadProgress=function(m,am,tot){

		m._parent.pos.ta = new mx.transitions.Tween(m._parent.pos, "_alpha", "", m._parent.pos._alpha, 50-Math.round(am*25/tot), 3, false);

	};

	

	l.onLoadInit = function(m) {

		m._parent.pos.ta = new mx.transitions.Tween(m._parent.pos, "_alpha", "", m._parent.pos._alpha, 0, 12, false);

		m._parent.pos.ta.onMotionFinished=function(){

			this._parent._visible=false;

		}

		m.scaleTo(m._parent.pos);

		m._visible = true;

		m.ta = new mx.transitions.Tween(m, "_alpha", "", 0, 100, 12, false);

		ano = m._parent.no;

		if (ano==no-1) {

			m.ta.onMotionFinished = function() {

				MovieClip.prototype.bounceSmall = bounceSmall;

				MovieClip.prototype.bounceRestore = bounceRestore;

				MovieClip.prototype.bounceLarge = bounceLarge;

			};

		}

	};

}


Normally I try not to just do stuff for people and leave something for them to do but since I did actually need something I thought might as well, ps please feel free to post improvements.

JLM

quote
 

JLM 2005.05.15, 12:28PM —

It seem to work ok but looses last picture ie uploaded 13 pics of friends here and only 12 are showing.

http://www.onsalsa.com/squareBounceguilford.swf
solved I was missing a no++

quote
 

JLM 2005.05.16, 12:28AM —

Glutonious

sorry missed your pm but did not really follow it either, if you have questions please post them here so that any ideas are shared.

JLM

quote
 
first
 

Forums: Flash: Photo Enlarge Problem

 
New Post
 
You must be logged in to post