A Flash Developer Resource Site

Results 1 to 14 of 14

Thread: center image within empty movie clip??

  1. #1
    perplexed by actionscript alien_landscape's Avatar
    Join Date
    Jan 2006
    Location
    UK
    Posts
    289

    center image within empty movie clip??

    Hello, I have been following this tuorial for creating a dynamic photo gallery using xml.

    right now, when loaded, the top left hand corner of each image is aligned to the 0,0 coordiante of the empty movieclip. My images vary in size and shape so I would rather that they were aligned centrally to the 0,0 coridinate. is this possible?

    I hope I've explained myself ok, any help would be greatly appreciated

    Here is the actionscript.

    Code:
    function loadXML(loaded) { 
    if (loaded) { 
    xmlNode = this.firstChild; 
    image = []; 
    description = []; 
    total = xmlNode.childNodes.length; 
    for (i=0; i<total; i++) { 
    image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue; 
    description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue; 
    } 
    firstImage(); 
    } else { 
    content = "file not loaded!"; 
    } 
    } 
    xmlData = new XML(); 
    xmlData.ignoreWhite = true; 
    xmlData.onLoad = loadXML; 
    xmlData.load("images.xml"); 
    ///////////////////////////////////// 
    listen = new Object(); 
    listen.onKeyDown = function() { 
    if (Key.getCode() == Key.LEFT) { 
    prevImage(); 
    } else if (Key.getCode() == Key.RIGHT) { 
    nextImage(); 
    } 
    }; 
    Key.addListener(listen); 
    previous_btn.onRelease = function() { 
    prevImage(); 
    }; 
    next_btn.onRelease = function() { 
    nextImage(); 
    }; 
    ///////////////////////////////////// 
    p = 0; 
    this.onEnterFrame = function() { 
    filesize = picture.getBytesTotal(); 
    loaded = picture.getBytesLoaded(); 
    preloader._visible = true; 
    if (loaded != filesize) { 
    preloader.preload_bar._xscale = 100*loaded/filesize; 
    } else { 
    preloader._visible = false; 
    if (picture._alpha<100) { 
    picture._alpha += 10; 
    } 
    } 
    }; 
    function nextImage() { 
    if (p<(total-1)) { 
    p++; 
    if (loaded == filesize) { 
    picture._alpha = 0; 
    picture.loadMovie(image[p], 1); 
    desc_txt.text = description[p]; 
    picture_num(); 
    } 
    } 
    } 
    function prevImage() { 
    if (p>0) { 
    p--; 
    picture._alpha = 0; 
    picture.loadMovie(image[p], 1); 
    desc_txt.text = description[p]; 
    picture_num(); 
    } 
    } 
    function firstImage() { 
    if (loaded == filesize) { 
    picture._alpha = 0; 
    picture.loadMovie(image[0], 1); 
    desc_txt.text = description[0]; 
    picture_num(); 
    } 
    } 
    function picture_num() { 
    current_pos = p+1; 
    pos_txt.text = current_pos+" / "+total; 
    }

  2. #2
    FK's Geezer Mod Ask The Geezer's Avatar
    Join Date
    Jul 2002
    Location
    Out In The Pasture
    Posts
    20,488
    Let's say the largest image your loading is less than 400x300. Just paste this code directly onto the empty movie clip;

    Code:
    onClipEvent(enterFrame){
    stage_width = 400;
    stage_height = 300;
    if(this.getBytesLoaded() >= this.getBytesTotal() && this.getBytesTotal() >500){
    centerw = stage_width/2;
    centerh = stage_height/2;
    this._x = centerw-(this._width/2);
    this._y = centerh-(this._height/2);
    }
    }

  3. #3
    perplexed by actionscript alien_landscape's Avatar
    Join Date
    Jan 2006
    Location
    UK
    Posts
    289
    Thanks so much for your reply Geezer, hmm I pasted that code into the first frame of my empty MC but upon testing the movie I got this error message:

    Code:
    **Error** Symbol=image, layer=Layer 1, frame=1:Line 1: Clip events are permitted only for movie clip instances
         onClipEvent(enterFrame){
    
    Total ActionScript Errors: 1 	 Reported Errors: 1
    the images remained aligned as before. am I pasting the code in the right place? I'm sorry my brain just isn't wired for actionscript.

  4. #4
    FK's Geezer Mod Ask The Geezer's Avatar
    Join Date
    Jul 2002
    Location
    Out In The Pasture
    Posts
    20,488
    Read my post again. This is not frame code. Select the empty clip and paste that into the actions panel.

  5. #5
    perplexed by actionscript alien_landscape's Avatar
    Join Date
    Jan 2006
    Location
    UK
    Posts
    289
    Oh sorry, I'm embarrassed to admit I didn't even know you could paste code directly onto a movie clip.

    OK did that, I'm no longer getting the error message and the images are aligned differently, but they are not aligning in the way that I expected. I need the centre point of the image to align exactly with the 0,0 coordinate of my empty movieclip. right now they are aligned awkwardly to the right, and seem to stay in the same position no matter where I position my MC on the stage.

    Should I have mentioned I'm using MX 2004?

    I'd really appreciate a little more help. Thanks for being patient
    Last edited by alien_landscape; 05-31-2006 at 07:09 PM.

  6. #6
    FK's Geezer Mod Ask The Geezer's Avatar
    Join Date
    Jul 2002
    Location
    Out In The Pasture
    Posts
    20,488
    You need to align the empty clip so the stage_width and height center will sit where the center of your images will appear. In my example, the stage size is 400x300, so 200 over and 150 up will place the centers of all the images you load in one spot.

    There is no other way to get anything to load with it's center over an object. All loaded content always loads with it's top left corner on the object registration point.

  7. #7
    perplexed by actionscript alien_landscape's Avatar
    Join Date
    Jan 2006
    Location
    UK
    Posts
    289
    Thank you so much Geezer, things are looking promising, all works fine with stage at 400 x 300, I'm hopeful I can now adapt this for my own dimentions.

    Thanks again, you are truly a legend

  8. #8
    FK's Geezer Mod Ask The Geezer's Avatar
    Join Date
    Jul 2002
    Location
    Out In The Pasture
    Posts
    20,488
    Just change the 400 and the 300 to whatever you want. Just remember, the stage_width things don't mean the stage of your movie. It's just a term. It only means the area you want to load images into and should be as big or slightly bigger than the biggest image dimension your going to load.

  9. #9
    Member
    Join Date
    Jul 2001
    Location
    Nairobi, Kenya
    Posts
    98
    Hello,

    So is there no way to load images/swf from the centre of the empty Mc? I.e say I have 1024 x 768 jpg and i load it into my emptyMc which is on my stage 1004 x 598, cant I have it such that it loads in the centre and crops off the sides (768 - 598) and the top/bottom (1024-1004)?

    Hope this makes sense?

  10. #10
    FK's Geezer Mod Ask The Geezer's Avatar
    Join Date
    Jul 2002
    Location
    Out In The Pasture
    Posts
    20,488
    No, you will have to use the largest numbers you know will be loaded in.

  11. #11
    Member
    Join Date
    Jul 2001
    Location
    Nairobi, Kenya
    Posts
    98
    Hi again, thanks for quick response..

    It's fine for Jpgs I can survive I guess, but iF I use the same to load an swf which has a video (loading an flv) it acts funny. Is there a solution?

    I want to load a video on my stage at the centre and also want it to Stretch to stage maintaining aspect ratio.

    So step one I need it loaded in the centre and second to stretch proportionately on stage resize. This all works great for Jpgs but now video????

    Mubin

  12. #12
    Member
    Join Date
    Jul 2001
    Location
    Nairobi, Kenya
    Posts
    98
    I used this same script onto my emptyMc

    code:

    onClipEvent (enterFrame) {
    stage_width = 1024;
    stage_height = 618;
    if (this.getBytesLoaded()>=this.getBytesTotal() && this.getBytesTotal()>500) {
    centerw = stage_width/2;
    centerh = stage_height/2;
    this._x = centerw-(this._width/2);
    this._y = centerh-(this._height/2);
    }
    }





    It doesnt work it seems to keep squeezing (the video)
    Last edited by mubinalhaddad; 07-15-2008 at 03:33 PM.

  13. #13
    Member
    Join Date
    Jul 2001
    Location
    Nairobi, Kenya
    Posts
    98
    Ok to make my video stretch to stage size i put this into video.swf file (the external video) on the frame not on flv componet.

    code:

    // set the scalemode property so that nothing 'auto-scales'
    Stage.scaleMode = "noScale";
    // set the align property so that everything aligns to the upper left
    Stage.align = "tl";
    stop();
    function init() {
    // create a custom object to register with the Stage object
    var stuff = new Object();
    // add an 'onResize' method to our custom object.
    stuff.onResize = function() {
    stretchIt();
    };
    // the function that actually does the stretching..
    function stretchIt() {
    // whenever the stage is resized do something
    var videoholderAspectRatio = _root.videoholder._width/_root.videoholder._height;
    var stageAspectRatio = Stage.width/Stage.height;
    // place the clip
    if (stageAspectRatio>=videoholderAspectRatio) {
    // long skinny stage - match videoholder width and adjust height to fit
    _root.videoholder._width = Stage.width;
    _root.videoholder._height = Stage.width/videoholderAspectRatio;
    } else {
    // tall narrow stage - match videoholder height and adjust width to fit
    _root.videoholder._height = Stage.height;
    _root.videoholder._width = Stage.height*videoholderAspectRatio;
    }
    }
    // register our custom object with the Stage object.
    Stage.addListener(stuff);
    // stretch the clip when we init
    stretchIt();
    }
    // call the init function
    init();




    Now this works when i open my main file but only when i resize my browser not initially.. Any way around it?

    Mubin

  14. #14
    Member
    Join Date
    Jul 2001
    Location
    Nairobi, Kenya
    Posts
    98

    It's possible

    Quote Originally Posted by Ask The Geezer
    No, you will have to use the largest numbers you know will be loaded in.
    Hi,

    http://www.mikewalsen.com/

    I think it should be possible thi site has done it or could you explain how they do it? Try resizing the browser the image gets cropped from top bottom...

    Mubin

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center