on on of my pages I have 5 thumbnail images that I've turned into buttons (b1-b5). What I want is to click on an image button and display a large version on the screen then then I click on the large image it goes away. Both the thumbnail and large images are loaded dynamic. each thumbnail button sends it's consponding large image address to a function when pressed. This is the code that I have. in this example "home_img1" = images/home01.jpg (var loaded at runtime from a html text file. the buttons (and all page 1 content) are "nested" 1 level in a mc named "pg1" but this code in on the root timeline. btw this is a actionscript 2 project.
pg1.b1.onRelease = function()
{
loadPic(home_img1);
trace("load "+home_img1);
};
pg1.b2.onRelease = function()
{
loadPic(home_img2);
trace("load "+home_img2);
};
pg1.b3.onRelease = function()
{
loadPic(home_img3);
trace("load "+home_img3);
};
pg1.b4.onRelease = function()
{
loadPic(home_img4);
trace("load "+home_img4);
};
pg1.b5.onRelease = function()
{
loadPic(home_img5);
trace("load "+home_img5);
};
function loadPic(myPic) {
loadMovie(myPic, lg_pic.lg_cont1);
trace(myPic + "_loaded");
lg_pic.lg_cont1.onRelease = function() { //everything seems to work fine to this point then nothing
unloadMovie(lg_pic.lg_cont1)
trace("remove image");
};
};
I wnat to be able to click the on the large image that came up and have it go away. What Im' I doing wrong ??
thanks
Joel
You are assigning the onRelease to the object that exists before the image is loaded, not the one that replaces it afterwards. Use the MovieClipLoader class to wait until the object is loaded before assigning the onRelease to it.
If you are not familiar with using the MovieClipLoader class with a listener for load completion, look up MovieClipLoader.addListener in the help documentation and you will find an example there that shows how to set it up.
You're using MovieClip.loadMovie() which loads an external asset into a MovieClip. It's a method of the MovieClip class.
http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=Part2_ AS2_LangRef_1.html
Here's how you use it:
someExistingMovieclip.loadMovie("somefile.png");
What you appear to want to do is MovieClip.attachMovie() which will take a MovieClip with a linkage ID from the library to attach it to a specified MovieClip.
Although..
You specified a MovieClips path, e.g.: lg_pic.lg_cont1. Does this item already exist? Are you trying to "duplicate" something that already exists? If so then you want MovieClip.duplicateMovieClip(). Examples are provided in the links.
Feel free to include more info on your issue, like if it exists in the library, already on the screen or external to the file.
Ned,
thanks for pointing me in the right direction, I got that part figured out and it's all working now I just can't figure out where/how to add my Fade in/out (in RED) this is what I have. I had to disable all my other navigation cause you could click cause if the user click on it it would do it's thing but still leave the image displayed. Anyway the fade in/out is what I'm stunped with.
Thanks
[CODE]
stop();
//Main Nav bar buttons
_root.b0.b.enabled = 1;
_root.b1.b.enabled = 1;
_root.b2.b.enabled = 1;
_root.b3.b.enabled = 1;
_root.b4.b.enabled = 1;
_root.b5.b.enabled = 1;
_root.b6.b.enabled = 1;
//
// Image Thumbnail buttons
pg1.b1.onRelease = function()
{
loadPic(home_img1);
trace(home_img1);
};
pg1.b2.onRelease = function()
{
showMe(home_img1);
trace(home_img1);
};
pg1.b3.onRelease = function()
{
showMe(home_img1);
trace(home_img1);
};
pg1.b4.onRelease = function()
{
showMe(home_img1);
trace(home_img1);
};
pg1.b5.onRelease = function()
{
showMe(home_img1);
trace(home_img1);
};
function loadPic(myPic)
{// disable main navigation
_root.b0.b.enabled = 0;
_root.b1.b.enabled = 0;
_root.b2.b.enabled = 0;
_root.b3.b.enabled = 0;
_root.b4.b.enabled = 0;
_root.b5.b.enabled = 0;
_root.b6.b.enabled = 0;
//disable thumb buttons
_root.pg1.b1.enabled = 0;
_root.pg1.b2.enabled = 0;
_root.pg1.b3.enabled = 0;
_root.pg1.b4.enabled = 0;
_root.pg1.b5.enabled = 0;
// Setup empty clip
this.createEmptyMovieClip("image_mc",this.getNextHighestDepth());
var mclListener:Object = new Object();
mclListener.onLoadInit = function(target_mc:MovieClip)
{
target_mc._x = 201;
target_mc._y = 110;
// FADE IN
new Tween(target_mc, "_alpha", Strong.easeOut, 0, 100, 0.5, true);
//
var w:Number = target_mc._width;
var h:Number = target_mc._height;
target_mc.lineStyle(10,0xD1D8E0);
target_mc.lineTo(w,0);
target_mc.lineTo(w,h);
target_mc.lineTo(0,h);
target_mc.lineTo(0,0);
target_mc.onRelease = function()
{
// FADE OUT
new Tween(image_mc, "_alpha", Strong.easeOut, 100, 0, 0.5, true);
//
image_mcl.unloadClip(target_mc);
//re-enable main navigation
_root.b0.b.enabled = 1;
_root.b1.b.enabled = 1;
_root.b2.b.enabled = 1;
_root.b3.b.enabled = 1;
_root.b4.b.enabled = 1;
_root.b5.b.enabled = 1;
_root.b6.b.enabled = 1;
//re-enable thumb buttons
_root.pg1.b1.enabled = 1;
_root.pg1.b2.enabled = 1;
_root.pg1.b3.enabled = 1;
_root.pg1.b4.enabled = 1;
_root.pg1.b5.enabled = 1;
};
};
//Load pic into empty clip
var image_mcl:MovieClipLoader = new MovieClipLoader();
image_mcl.addListener(mclListener);
image_mcl.loadClip(myPic,image_mc);
}
*****************************************************
Thanks
Joel
Sinious,
Thanks for the reply. originaly I created a empty_mc (lg_cont1) and had it in another mc (lg_pic) where I had an overlay border. After following Neds advice and looking at the MovieClipLoader class more closely I saw where it seem to be just as easy to just create the mc when I needed it an draw a border around it on load, when just delete the whole thing when it wasn't needed any more. Then I wouldn't have to deal with hiding it when it wasn't being used. All my pic are being loaded dynamicaly referenced to by vars loaded from a html text file at runtime. at some point I'm going to swtich over to XML for all the images I use. I checked into attachMovieClip earlier but from what i saw it had to be already in your lib to use that. I've got tons of pics used throughout the site that will change from time to time and I certinly didn't want to embed them in the swf so I decided against attachMovie . I'm a animator/AE guy most of the time and a noob to this flash/actionscript stuff. I can usually figure out just enough to take way too long and get me in trouble, but I think I'm begining to get some of the concepts.
I posted the script (above) where it is now. It all works but I want the images to fade in/out. I've seen examples ot the Tween class being used to do this but I can't get the syntax, object, or something in the right place to get it to work.
thanks
Joel
Your tweens look somewhat ok. Get any errors from them? I presume you're importing the Tween class and its easing counterpart so you don't get errors.
Outside that make sure the properties of the object you're about to tween are set up to make sense. For example if some objects alpha is already 100, don't tween it to 100 or it won't look like it's doing anything.
You'd want to:
target_mc._alpha = 0; // make sure its alpha=0
new Tween(target_mc, "_alpha", Regular.easeInOut, 0, 100, 0.5, true);
Same thing with fading out. Make sure to set it to 100.
Outside that on your "onRelease" event you're removing the image with image_mcl.unloadClip(this); (remember you're already inside target_mc, so you don't say target_mc, you say 'this'). But you try to tween it. That tells you that you need to wait until it fades out before you remove it or it will just disappear.
That invites you to look into TweenEvent. You can set up the tween to call another method once it's complete and THEN you get rid of the image and load another image.
edit:
In all honesty you should look up mx.utils.Delegate; because "scope" is an extremely ridiculos subject when it comes to coding in AS2. You need to know where exactly the code is firing off. Most people get into a lot of trouble because they think it's all executing from the frame script they wrotes scope, but it's not.
e.g.:
_root.createEmptyMovieClip('moo_mc', 1);
moo_mc.attachMovie('someLibraryID');
trace(moo_mc); // traces moo_mc
moo_mc.onPress = function() { trace(moo_mc); } // traces undefined
Inside that function it's a whole different "scope". You're not at the level of the frame script anymore. You're inside that onPress events object, or inside moo_mc. And there is no "moo_mc" inside of itself. That's why AS2 sucks balls, amongst other things.
To make it work, I know once I press moo_mc I am inside it. So 'this' will refer to itself.
moo_mc.onPress = function() { trace(this); } // traces moo_mc
Stupid AS2..
Yes I have these lines in my frame 1 code that loads the vars ...
[CODE]
Stage.scaleMode = "noScale"
Stage.align = "TC"
import mx.transitions.Tween;
import mx.transitions.easing.*;
stop();
_root.current_p = 1;
_root.g_page = 0;
_root.page = 0;
_root.flag = 0;
magnet = 400;
magic = 6;
loadVariablesNum("inc/text.html", 0);
trace(_root.page)
[/CODE]
I asume if I import them there that they are avaliable any time? I don't have to import on the same frame do I ?
I've been messing with it for a while and still can't get the tweens to work. If I set the alpha = 0 before the tween then I get nothing on screen, I can tell it's there cause the mouse works in the area where the image goes and my traces are all firing. So I'm not sure what I'm missing.
Joel
All,
thanks for your help on this.
Putting the "imports" on the same frame as the script instead of _root frame 1 of the fla fixed the fadeIn. Go figure, that seems very odd, does that mean that everytime I want to use the tween class that I have to import the class for that frame of script ?? why wouldn't that be a global thing ?? anyway....
then adding a onMotionFinish() function cured the clip being deleted before it had time to fade out.
I posted the end product below.
I'm not really sure if I have all the scope stuff right but it works. for example I don't understand why I could use "this", "target_mc", or "image_mc" in the
var myFadeOut = new Tween(this, "_alpha", Strong.easeOut, 100, 0, 1, true);
section and they all worked. is one "more" correct that the other and why ?? ..
yet only image_mc works in the removeMovieClip section.
myFadeOut.onMotionFinished = function() {
image_mc.removeMovieClip();
Just one more question. Is there any "clean-up" I need to do, like deleting anything else etc ??
thanks again for your help
Joel
[CODE]
import mx.transitions.Tween;
import mx.transitions.easing.*;
stop();
_root.b0.b.enabled = 1;
_root.b1.b.enabled = 1;
_root.b2.b.enabled = 1;
_root.b3.b.enabled = 1;
_root.b4.b.enabled = 1;
_root.b5.b.enabled = 1;
_root.b6.b.enabled = 1;
//
pg1.b1.onRelease = function()
{
loadPic(home_img1);
// "home_img1" is var loaded at runtime, holds url of the image
};
pg1.b2.onRelease = function()
{
loadPicMe(home_img2);
};
pg1.b3.onRelease = function()
{
loadPic(home_img3);
};
pg1.b4.onRelease = function()
{
loadPic(home_img4);
};
pg1.b5.onRelease = function()
{
loadPic(home_img5);
};
// START
function loadPic(myPic)
{// disable main navigation
_root.b0.b.enabled = 0;
_root.b1.b.enabled = 0;
_root.b2.b.enabled = 0;
_root.b3.b.enabled = 0;
_root.b4.b.enabled = 0;
_root.b5.b.enabled = 0;
_root.b6.b.enabled = 0;
//disable thumb buttons
_root.pg1.b1.enabled = 0;
_root.pg1.b2.enabled = 0;
_root.pg1.b3.enabled = 0;
_root.pg1.b4.enabled = 0;
_root.pg1.b5.enabled = 0;
// Setup empty clip
this.createEmptyMovieClip("image_mc",this.getNextHighestDepth());
var mclListener:Object = new Object();
mclListener.onLoadInit = function(target_mc:MovieClip)
{
target_mc._x = 201;
target_mc._y = 110;
target_mc._alpha = 0;
var w:Number = target_mc._width;
var h:Number = target_mc._height;
target_mc.lineStyle(10,0xD1D8E0);
target_mc.lineTo(w,0);
target_mc.lineTo(w,h);
target_mc.lineTo(0,h);
target_mc.lineTo(0,0);
// FADE IN
new Tween(target_mc, "_alpha", Strong.easeOut, 0, 100, 1, true);
//
target_mc.onRelease = function()
{
// FADE OUT and remove clip
var myFadeOut = new Tween(this, "_alpha", Strong.easeOut, 100, 0, 1, true);
myFadeOut.onMotionFinished = function() {
image_mc.removeMovieClip();
trace("fade out complete");
};
//re-enable navigation
_root.b0.b.enabled = 1;
_root.b1.b.enabled = 1;
_root.b2.b.enabled = 1;
_root.b3.b.enabled = 1;
_root.b4.b.enabled = 1;
_root.b5.b.enabled = 1;
_root.b6.b.enabled = 1;
//re-enable thumb buttons
_root.pg1.b1.enabled = 1;
_root.pg1.b2.enabled = 1;
_root.pg1.b3.enabled = 1;
_root.pg1.b4.enabled = 1;
_root.pg1.b5.enabled = 1;
};
};
//Load pic into empty clip
var image_mcl:MovieClipLoader = new MovieClipLoader();
image_mcl.addListener(mclListener);
image_mcl.loadClip(myPic,image_mc);
}
// END
Your var myFadeOut.... and then myFadeOut.onMotionFinished isn't working. I told you about the horrific 'scope' issues of AS2. Inside the onMotionFinished, why don't you do this:
trace(image_mg); // if it worked it would say image_mc, if not UNDEFINED
You need to assign the listener, BTW, or it won't fire off.
Bottom line, trace() is your friend. Sprinkle it everywhere in your code. trace() everywhere you go so you can watch your code execute. More importantly where you "think" something should exist, trace() it and if it doesn't return undefined, it exists.
For example, trace anything on your onMotionFinished function above. See if it's even firing off.
"Your var myFadeOut.... and then myFadeOut.onMotionFinished isn't working"
It's all working fine here. I was just wondering about the whole scope thing and why I was able to use "this", "target_mc", or "image_mc" in the "var myFadeOut = new Tween(this, "_alpha", Strong.easeOut, 100, 0, 1, true);" statement and only "image_mc" would work in the onMotionFinished function.
anyway it's all working, I don't fully understand the why and how it's all working, but I'm moving on.
Thanks
Joel
It's the terrible nature of AS2. Variables should never exist outside their scope.
e.g.
function foo() {
var a = "Hello";
}
foo(); // 'a' is created in the function but once it exits it's gone
trace(a); // undefined
That's obvious to understand. The function runs, creates a variable inside the function but when the function exists the variable is discarded.
Now, as a convenience the look ahead compiler will let you get away with something like this:
function foo()
{
var a = "something"; // at timeline scope in a frame script but inside a function so 'a' will be nuked at the end
myButton.onPress = function() {
// inside myButton function which has nothing to do with foo()s scope so it shouldn't exist
myButton.a = a; // assign a property to myButton (which should be 'this') and set it to "something"
// just using myButton here (from inside itself) should error, it makes no sense, but flash "fixes" it for you
};
}
foo();
trace(a); // undefined
myButton.onPress();
trace(a); // undefined
trace(myButton.a); // "something"
AS2 is just wacky with this stuff. Even though you go in and out of scopes the compiler figures out what you meant (sometimes) and lets you think that it was kosher to do what you did when in general programming it isn't.
Ditch it and run to AS3 as soon as possible. You're only 6 or so years off
. Not much of this wacky scope crap exists anymore.
sinious wrote:
Ditch it (AS2) and run to AS3 as soon as possible. You're only 6 or so years off
. Not much of this wacky scope crap exists anymore.
Yea, the only reason I'm using AS2 is because this project was originally done by someone else in AS2. Unforunatley the fla is poorly documented and I've spent more time trying to figure out how to make what he did do what I want than I would have if I had just start from scratch porting it to AS3. Thanks for your help
Joel
North America
Europe, Middle East and Africa
Asia Pacific