...

View Full Version : [F8] 1)Scrolling thumbnail problem. 2)URL link.



TheMexican
05-15-2008, 03:20 AM
Hiya-

Take a look:
http://www.roy-trainer.com/HelenNewman/HelenNewman.html

Do you see the first thumbnail of the shirt? Why is there that big gap/gutter to the left of it? I'm getting the same thing on the last button as well(last thumbnail to the right). How do i get rid of the big gap/gutter?

/**********import classes**********/
import mx.transitions.*;
import mx.transitions.easing.*;
/**********declare variables and instances**********/
var nextX = 52;
/**********create objects**********/
var xmlPhotos:XML = new XML();
var initThumb:Object = new Object();
/**********handle events**********/
xmlPhotos.onLoad = function() {
for (var i:Number = 0; i<xmlPhotos.firstChild.childNodes.length; i++) {
initThumb.photo = (xmlPhotos.firstChild.childNodes[i].attributes.photo);
initThumb.desc = (xmlPhotos.firstChild.childNodes[i].childNodes[0].firstChild.nodeValue);
makeAThumb(i);
nextX += 99;
}
setInterval(_root,"scroller",50);
};
initThumb.onRollOver = function() {
thumbScaleX = new Tween(this, "_xscale", Bounce.easeOut, 100, 120, .5, true);
thumbScaleY = new Tween(this, "_yscale", Bounce.easeOut, 100, 120, .5, true);
};
initThumb.onRollOut = function() {
thumbScaleX.yoyo();
thumbScaleY.yoyo();
};
initThumb.onRelease = function() {
txtTitle.text = this.photo;
txtDesc.text = this.desc;
mcLargePhoto.loadMovie("images/large/"+this.photo+".png");
};
/**********functions**********/
function makeAThumb(num) {
thumbName = "mcThumb"+num;
mcScroller.attachMovie("thumb",thumbName,num,initT humb);
mcScroller[thumbName].mcPhoto.loadMovie("images/thumbs/"+mcScroller[thumbName].photo+".png");
mcScroller[thumbName]._x = nextX;
mcScroller[thumbName]._y = 0;
mcScroller[thumbName]._xscale = 100;
mcScroller[thumbName]._yscale = 100;
}
function scroller() {
//if (this._ymouse>mcScroller._y) {
var scrollSpeed = (this._xmouse-Stage.width/2)/10;
if (Math.abs(scrollSpeed)<1) {
scrollSpeed = 0;
}
mcScroller._x -= scrollSpeed;
if (mcScroller._x>0) {
mcScroller._x = 0;
} else if (mcScroller._x<Stage.width-mcScroller._width) {
mcScroller._x = Stage.width-mcScroller._width;
}
}
/**********set properties**********/
xmlPhotos.ignoreWhite = true;
/**********run now**********/
xmlPhotos.load("photos.xml");
this.createEmptyMovieClip("mcScroller",this.getNex tHighestDepth());
mcScroller._x = 0;
mcScroller._y = 485;




2)URL website link.

How in XML do i create a URL link for each? And where do i place the code in flash?:

<?xml version="1.0" encoding="utf-8"?>
<photos>
<image photo="Anac">
<caption>HERE LIES THE COPY FOR ANAC.</caption>
</image>
</photos>


Thank you for any help you can throw my way.

gnomeontherun
05-15-2008, 08:55 PM
Yes I see the thumbnail, and is the large gap from the edge of the window or the edge of the black box?

It seems to be aligning just fine to the edge of the black box with just a little padding to the right or left of the strip.

TheMexican
05-15-2008, 09:07 PM
Hiya-

Well when I do a test movie on my computer; the first thumbnail of the shirt is cut-off by half. While the last thumbnail of the girl has a big gap.

I changed the var nextX to '0'. That helped the first thumbnail but created an even larger gap on the last thumbnail.

your thoughts?




Yes I see the thumbnail, and is the large gap from the edge of the window or the edge of the black box?

It seems to be aligning just fine to the edge of the black box with just a little padding to the right or left of the strip.

gnomeontherun
05-15-2008, 09:27 PM
Well the orientation of a newly created movieclip is at the center. So you need to recalculate by offsetting them by 50px or whatever half of an image width is.

I do see the problem now only after resizing my browser, otherwise it scales.

TheMexican
05-15-2008, 10:28 PM
Hi-

By image width...do you mean the thumbnail? Because the width of each thumbnail is 99.


For example:
/**********declare variables and instances**********/
var nextX = 50;<-----Is this what you mean?
/**********create objects**********/
var xmlPhotos:XML = new XML();
var initThumb:Object = new Object();
/**********handle events**********/
xmlPhotos.onLoad = function() {
for (var i:Number = 0; i<xmlPhotos.firstChild.childNodes.length; i++) {
initThumb.photo = (xmlPhotos.firstChild.childNodes[i].attributes.photo);
initThumb.desc = (xmlPhotos.firstChild.childNodes[i].childNodes[0].firstChild.nodeValue);
makeAThumb(i);
nextX += 99;<----This is the width of my thumbnail.
}
setInterval(_root,"scroller",50);
};
initThumb.onRollOver = function() {
thumbScaleX = new Tween(this, "_xscale", Bounce.easeOut, 100, 120, .5, true);
thumbScaleY = new Tween(this, "_yscale", Bounce.easeOut, 100, 120, .5, true);
};
initThumb.onRollOut = function() {
thumbScaleX.yoyo();
thumbScaleY.yoyo();
};
initThumb.onRelease = function() {
txtTitle.text = this.photo;
txtDesc.text = this.desc;
mcLargePhoto.loadMovie("images/large/"+this.photo+".png");
};


Well the orientation of a newly created movieclip is at the center. So you need to recalculate by offsetting them by 50px or whatever half of an image width is.

I do see the problem now only after resizing my browser, otherwise it scales.

TheMexican
05-15-2008, 11:46 PM
OH I see!

I went into the thumbnail MC and moved it over 50 pixels from the registration mark.
But now there is an even gap on the first and last thumbnail.
Also, when I rollover the thumbnail it overlaps the thumbnail next to it.

http://www.roy-trainer.com/HelenNewman/HelenNewman3.html

Your thoughts?

:o

gnomeontherun
05-15-2008, 11:58 PM
Something like this would have the image slide slightly to the left as it expands too.

initThumb.onRollOver = function() {
thumbScaleX = new Tween(this, "_xscale", Bounce.easeOut, 100, 120, .5, true);
thumbPositionX = new Tween(this, "_x", Bounce.easeOut, 0, 10, .5, true);
thumbScaleY = new Tween(this, "_yscale", Bounce.easeOut, 100, 120, .5, true);
};

TheMexican
05-16-2008, 12:24 AM
Ok here's what I put:

initThumb.onRollOver = function() {
thumbScaleX = new Tween(this, "_xscale", Bounce.easeOut, 100, 120, .5, true);
thumbPositionX = new Tween(this, "_x", Bounce.easeOut, 0, 10, .5, true);
thumbScaleY = new Tween(this, "_yscale", Bounce.easeOut, 100, 120, .5, true);
};
initThumb.onRollOut = function() {
thumbScaleX.yoyo();
thumbScaleY.yoyo();
thumbPositionX();
};


When I rollover the thumbnails they disappear and bunch up in the left corner.

gnomeontherun
05-16-2008, 12:29 AM
That is because of the 0, 10 numbers in the Tween. Hmmm... lets put this instead. It should calculate based on the position of the clip instead of from the left of the container. I guess I just didn't know exactly how they were functioning!


var moveX = this._x + 10;
thumbPositionX = new Tween(this, "_x", Bounce.easeOut, this._x, moveX, .5, true);

TheMexican
05-16-2008, 12:41 AM
/**********declare variables and instances**********/
var nextX = 0;
var moveX = this._x + 10;
/**********create objects**********/
var xmlPhotos:XML = new XML();
var initThumb:Object = new Object();
/**********handle events**********/
xmlPhotos.onLoad = function() {
for (var i:Number = 0; i<xmlPhotos.firstChild.childNodes.length; i++) {
initThumb.photo = (xmlPhotos.firstChild.childNodes[i].attributes.photo);
initThumb.desc = (xmlPhotos.firstChild.childNodes[i].childNodes[0].firstChild.nodeValue);
makeAThumb(i);
nextX += 99;
}
setInterval(_root,"scroller",50);
};
initThumb.onRollOver = function() {
thumbScaleX = new Tween(this, "_xscale", Bounce.easeOut, 100, 120, .5, true);
thumbPositionX = new Tween(this, "_x", Bounce.easeOut, this._x, moveX, .5, true);
thumbScaleY = new Tween(this, "_yscale", Bounce.easeOut, 100, 120, .5, true);
};

gnomeontherun
05-16-2008, 12:45 AM
Nope, keep it together (and try to put your code in the
tags for us)

[CODE]/**********declare variables and instances**********/
var nextX = 0;
/**********create objects**********/
var xmlPhotos:XML = new XML();
var initThumb:Object = new Object();
/**********handle events**********/
xmlPhotos.onLoad = function() {
for (var i:Number = 0; i<xmlPhotos.firstChild.childNodes.length; i++) {
initThumb.photo = (xmlPhotos.firstChild.childNodes[i].attributes.photo);
initThumb.desc = (xmlPhotos.firstChild.childNodes[i].childNodes[0].firstChild.nodeValue);
makeAThumb(i);
nextX += 99;
}
setInterval(_root,"scroller",50);
};
initThumb.onRollOver = function() {
var moveX = this._x + 10; /* Put it here so that it gets the currently rolled over thumb as a reference */
thumbScaleX = new Tween(this, "_xscale", Bounce.easeOut, 100, 120, .5, true);
thumbPositionX = new Tween(this, "_x", Bounce.easeOut, this._x, moveX, .5, true);
thumbScaleY = new Tween(this, "_yscale", Bounce.easeOut, 100, 120, .5, true);
};

TheMexican
05-16-2008, 01:04 AM
Hiya-

I'll definitely put them in [CODE] tags.

So here's what I have now:

http://www.roy-trainer.com/HelenNewman/HelenNewman3.html

What do you think? Should I move the thumbnails back to their original position?

Thanks again for your patience and help getting me through this.

gnomeontherun
05-16-2008, 01:12 AM
Oops, change the math from +10 to -10. My apologies, I'm just sitting here and not testing anything so I make more mistakes that way! A subtracting _x will move it to the left while adding to _x will move it right.

var moveX = this._x - 10;


You will also need to include this to make the images roll back into their original position...wasn't sure if you would add that on your own or not. We just need to reverse the movement.

initThumb.onRollOut = function() {
thumbScaleX.yoyo();
thumbScaleY.yoyo();
thumbPositionX.yoyo();
};

TheMexican
05-16-2008, 01:33 AM
Cool.

Looks a lot better. What do you think?

http://www.roy-trainer.com/HelenNewman/HelenNewman3.html

Comments, Questions, Suggestions?


Thanks - I really do appreciate your help.:)

How's your XML knowledge?

gnomeontherun
05-16-2008, 01:43 AM
Cool.

Looks a lot better. What do you think?

http://www.roy-trainer.com/HelenNewman/HelenNewman3.html

Comments, Questions, Suggestions?


Thanks - I really do appreciate your help.:)

How's your XML knowledge?

My XML works...

I think a neat idea would be to make the thumbs clip smaller unless it is rolled-over. That would save some space and be a neat effect if you want.

I would also change the scroller function so that it only moves the thumbs when you are scrolling over them. You want to keep the causality of effects linked to something. Otherwise people will be confused why things are moving when they move the mouse.

Put something at the top so people know if they scroll up that the top will roll down. I still think a little tab at the top which says Panel or something would be great, because as I move the mouse around the top panel slides down when I don't expect and its a bit over sensitive.

TheMexican
05-16-2008, 01:59 AM
Ok so-

When you rollOver the thumbnails the first time it's perfect, and then all of a sudden they start spacing out and overlapping each other.

Regarding your suggestions:

*The bottom is going to be a hidden sliding panel as well(just like the top).

*That's a good idea. I found it kind of annoying myself at times that the thumbnails kept scrolling when I was trying to select.

*I was thinking about creating an opening animation showing the Top and Bottom panels sliding out and then back in. I'm hoping this will let the user know where the Navigation is.





My XML works...

I think a neat idea would be to make the thumbs clip smaller unless it is rolled-over. That would save some space and be a neat effect if you want.

I would also change the scroller function so that it only moves the thumbs when you are scrolling over them. You want to keep the causality of effects linked to something. Otherwise people will be confused why things are moving when they move the mouse.

Put something at the top so people know if they scroll up that the top will roll down. I still think a little tab at the top which says Panel or something would be great, because as I move the mouse around the top panel slides down when I don't expect and its a bit over sensitive.

gnomeontherun
05-16-2008, 06:16 AM
Hmm it appears that the thumbnails are moved as the thumnail container moves. Curious.

What if we don't use the yoyo(); function? I think it has something to do with that. So lets change them to something like this:


initThumb.onRollOver = function() {
var moveX = this._x - 10;
thumbScaleX = new Tween(this, "_xscale", Bounce.easeOut, this._xscale, 120, .5, true);
thumbPositionX = new Tween(this, "_x", Bounce.easeOut, this._x, moveX, .5, true);
thumbScaleY = new Tween(this, "_yscale", Bounce.easeOut, this._yscale, 120, .5, true);
};

initThumb.onRollOut = function() {
var moveX = this._x + 10;
thumbScaleX = new Tween(this, "_xscale", Bounce.easeOut, this._xscale, 100, .5, true);
thumbPositionX = new Tween(this, "_x", Bounce.easeOut, this._x, moveX, .5, true);
thumbScaleY = new Tween(this, "_yscale", Bounce.easeOut, this._yscale, 100, .5, true);
};

The change is because in the rollover function, we want to take the current size of the clip, so even if you roll over it and out really fast it it wont try to restart the animation from 100. The same principle is applied to the rollout function.

Basically when Tweening, grab the starting value from the current value, and then set the final value.

TheMexican
05-16-2008, 02:55 PM
Looking good...
See for yourself.

http://www.roy-trainer.com/HelenNewman/HelenNewman.html

Your smart dude...how do you know this stuff? Is there a book or tutorial you would recommend I check out? Since AS 2.0 is on its way out, I'd like to focus on 3.0

Could you help me with the XML or would you rather I post it as a thread?

Thank you my friend.

gnomeontherun
05-16-2008, 03:51 PM
I learned by just messing around with it. Honestly I don't know a whole lot, no training, but had a couple books as reference. But if you are serious about learning, get a book or two, one about Flash design and one about Actionscript. I know very little about AS3, so you should probably learn it and help the people in this forum who ask questions about it.

Probably should post XML as a new thread, it helps the forum stay organized.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum