Groups | Blog | Home
all groups > flash actionscript > october 2007 >

flash actionscript : Positining loader clip


dsmflash
10/8/2007 10:42:11 PM
Hello (again),

I am building a gallery for a photographer.

The setup: one large mc loader on mainstage (myLoader_mc). Several movie clip
thumbnails contained in one large movie clip. You click on the thumbnail, large
image loads into myLoader_mc. I am using a purchased component from extend
studios for my transitions.

The problem: my jpgs are of different height and width. I want to keep using
the same movie clip to load the images (myLoader_mc) but position the loader
with different x and y coordinates for each loaded image so that it is centered
on the stage. I am using the following script but the loader clip is stuck in
the position defined by the first thumbnail. the script is in layer 1, frame 1
of the movie clip containing all of the thumbnail movie clips.

th1_mc.onRelease = function(){
_parent.myLoader_mc.loadMovie("/assets/family/1b.jpg");
myLoader_mc._x = 162;
myLoader_mc._y = 5;
}
th2_mc.onRelease = function(){
_parent.myLoader_mc.loadMovie("/assets/family/2b.jpg");
myLoader_mc._x = 282;
myLoader_mc._y = 5;
}

The image loaded by thumbnail 2 is stuck in position on thumbnail 1. Need to
change this dynamically no matter which thumb is clicked.

I had also tried creating different empty movie clips to accomodate each
different sized jpg, but I could not get the previous loader clip to unload
when another thumbnail was clicked. The previos clip would just stay on the
stage. I was using this AS:

th1_mc.onRelease = function(){
_parent.myLoader_mc.unload;
_parent.myLoader_mc.loadMovie("/assets/family/1b.jpg");

}

Any help is appreciated and I hope I have explained this clearly enough. If
you help me solve this, i will toast my next drink to you.


--------------------------------------------------------------------------------

clbeech
10/8/2007 11:28:19 PM
construct function with a MovieClipLoader instance that you can use to load the
images, instead of using loadMovie. Why? you might ask, because the MCL class
has event listeners and handlers you can invoke to perform functions,
particularly once the mc has been instantiated on the timeline, whereas
previous to that time, you cannot calculate a position on an unkown width and
height (ie. the image). By constructing the MCL within a function, you will be
able to call to the function and pass a parameter String for any image, from
any button. Someting like this:


stop();

var mcl = new MovieClipLoader();
var lstn = new Object();
mcl.addListener(lstn);

function loadImage(img:String) {
var mc = _level0.createEmptyMovieClip('mc', 0);
lstn.onLoadInit = function() {
mc._x += (Stage.width - mc._width) /2;
mc._y += (Stage.height - mc._height) /2;
}
mcl.loadClip(img, mc);
}

// -------- buttons

th1_mc.onPress = function() {
loadImage('/assets/family/1b.jpg');
}

th2_mc.onPress = function() {
loadImage('/assets/family/2b.jpg');
}

// ... etc.
dsmflash
10/9/2007 2:07:51 AM
I tried it and the images that are narrow are still stuck to the left tied to
the upper left reg point. I really don't know what to do at this point. I
don't think flash will let you center images of different sizes in the same
clip. Maybe in the future. I'm just going to put another sized clip in frame
to and do a go to and play. Right when you think flash can do anything, right?
clbeech
10/9/2007 2:26:27 AM
hmmm ... it should have worked, let's see, I do it all the time, try changing
the function coding to:


stop();
var mc = this.createEmptyMovieClip('mc', 0);
var clip = mc.createEmptyMovieClip('clip', 0);
mc._x = Stage.width/2;
mc._y = Stage.height/2;

var mcl = new MovieClipLoader();
var lstn = new Object();
mcl.addListener(lstn);

function loadImage(img:String) {
lstn.onLoadInit = function(target) {
target._x -= target._width/2;
target._y -= target._height/2;
}
mcl.loadClip(img, mc.clip);
}
dsmflash
10/9/2007 2:43:23 AM
i tried the first code again, and it centers it perfectly. now i just need to
figure out how to get my transitions in there. i'm using a third party
component. however, i'm just happy about being able to center different sized
images in the came clip. I'm still a little confused by the code, but its
pretty cool.
Can i attach the progress bar component to he movie clip?

thanks for your help.
dsmflash
10/9/2007 3:39:23 AM
I just realized that its loading my image into the movie clip where my
thumbnails are. i want the images to load into a clip on the main timeline
which is myLoader_mc. the images are loading into a clip in the same clip as
the thumbnails. i'm solving one problem and getting another. does your code go
in the thumbnail movie clip or main timeline? also how do you give the
generated movie clip an instance name because i need to attach my component
instance to a movie clip instance.

thanks
clbeech
10/9/2007 4:55:24 AM
good deal, I thought I was off my rocker for a minute there! LOL!! :)

yse you can target a different clip (eg. myLoader_mc) instead of the generic
mc I'd created there. But I would leave the generic mc instance but change it
to a child of the myLoader_mc, which I assume is registered at 0,0 within the
frame-space that you're working in, this way you're adjusting the loaded clip's
position and not that of the original instance. so change this line in the
'loadImage' function to:

var mc = myLoader_mc.createEmptyMovieClip('mc', 0);

also by doing so within the function, each time a new image is loaded it will
'replace' the instance at level 0, not requiring you to remove the previously
loaded image (nifty ;)

and yes, you can create a loader bar, which is just another one of the handy
features of using the MCL class. It has a handler called 'onLoadProgress'
which updates on each data write to disk, so depending on how you have you're
loader bar set up (and what instance names and method of indication and so
forth) you can use the handler to calc the downloaded percentage and update the
pbar. So now I'll add this function to the updated function code, and you will
need to determine how to hook it up to your pbar.



function loadImage(img:String) {
var mc = myLoader_mc.createEmptyMovieClip('mc', 0);

lstn.onLoadProgress = function(lb:Number, tb:Number) {
var pct =Math.round(lb/tb*100);
pbar._xscale = pct; //update the pbar here with something like this
}

lstn.onLoadInit = function(clip:MovieClip) {
clip._x += (Stage.width - clip._width)/2;
clip._y += (Stage.height - clip._height)/2;
}

mcl.loadClip(img, myLoader_mc.mc);
}
dsmflash
10/9/2007 4:56:03 PM
Now nothing loads. I don't think this is possible. I'm just going to create
different movie clips in different frames and stick to a go to and play and
load movie scheme. I got in over my head on this one.

thanks
clbeech
10/9/2007 5:18:45 PM
hold on, don't give up, you're almost there :) just cause it doesn't work at
the moment doesn't mean it won't, there's just something that's out-of-wack.
This is definitely possible, I have an example of something similar:
http://www.beechstudios.com/galleryLoader.zip

Though this loads things a little differently, but the principles are the same
(but this is totally code driven also);

Can you post your file, and I'll take a look ;)
dsmflash
10/9/2007 6:04:45 PM
Nice gallery. However, the code gave me a headache and I had to take some
aspirin. I found a loader component and some good effects for about $90 and
I'm going to go that route. I don't have the time to figure all this out. I'm
strictly a designer and have no clue as to code, whether AS or otherwise.
Thanks for your time.
clbeech
10/9/2007 6:38:46 PM
You're welcome, although I'm sorry to hear that, you were very close.

the code in that particular example was meant to drive the whole thing, you'll
notice there nothing in the Library, so yeah, it's a little complex.

Dont' give up on Flash though, using the timeline alone has enough benfit to
make it a very good option, it's been around a long, long time, won't be going
out anytime soon, and more and more sites are being developed using Flash and
Rich Media. Goodk Luck though, deep breath ... and relax :)

dsmflash
10/9/2007 7:02:31 PM
Well, I guess we could put some closure to this thing, I don't like loose ends.
Not that i will ever remember any of it but here's my code:

stop();


var mcl:MovieClipLoader = new MovieClipLoader(); // create a new
MovieClipLoader object
_root.loader2_mc._visible = false; // make the container MC invisible

var lis = new Object(); // create an event listener object
lis.onLoadInit = function() {
mc._x += (Stage.width - mc._width) /2;
mc._y += (Stage.height - mc._height) /2;
}
_root.loader2_mc.visible = true; // make the loaded content visible
_root.loaderfx.initEffect(); // initialize the effect
_root.loaderfx.startEffect(); // start the effect


mcl.addListener(lis); // add the listener object to the MovieClipLoader
mcl.loadClip(img, mc); // load the image

th1_mc.onPress = function() {
loadImage('/assets/family/2b.jpg');
}

th2_mc.onPress = function() {
loadImage('/assets/family/4b.jpg');
}

Much to my amazement (ha, ha) nothing happens. this is just from a generic
test file as i deleted the original. i have a component attached to it and what
i have done is blended the code the knuckleheads at extend studio gave me and
what you have given me, which has turned into Actionstein.
does it matter if you use "lst" or "lis"? Was wondering about that.
Anyway, all i was asking was to load images of different sizes into the same
movie clip and have them all centered.
clbeech
10/10/2007 1:20:18 AM
OH!!! so close, just missing a few things. Sorry I've been busy the last few
hours.

I'd like to know the code for the two functions: initEffect() and
startEffect() , and what are they suppose to do.
Next, where is this code located, on the main timeline? or in an MC?

just one biggy here though, there's no 'loadImage()' function ... must have
gotten lost in transit :) also I'm just guessing without knowing the code,
that the two 'Effects' should be in the onLoadInit handler.

So really man, it's still close, not really that much left to do just get 'er
hooked together. so the way I see it now, the code should look like this:


stop();

var mcl = new MovieClipLoader();
var lstn = new Object();
mcl.addListener(lstn);

function loadImage(img:String) {
var mc = myLoader_mc.createEmptyMovieClip('mc', 0);
myLoader_mc.mc._visible = false;

//work out a preloader here ... later ...
lstn.onLoadProgress = function(lb:Number, tb:Number) {
var pct =Math.round(lb/tb*100);
pbar._xscale = pct; //update the pbar here with something like this
}

lstn.onLoadInit = function(clip:MovieClip) {
clip._x += (Stage.width - clip._width)/2;
clip._y += (Stage.height - clip._height)/2;
clip.visible = true;
initEffect(); //not sure this one needs to be in each load, need to see
the code
startEffect();
}

mcl.loadClip(img, myLoader_mc.mc);
}

function initEffect() {
//...code here for the effect initilize method?
}

function startEffect() {
//...code here for the effect start method?
}

// -------- buttons

th1_mc.onPress = function() {
loadImage('/assets/family/1b.jpg');
}

th2_mc.onPress = function() {
loadImage('/assets/family/2b.jpg');
}

// ... etc.
AddThis Social Bookmark Button