Welcome Guest!

If you do not have an account yet on The Web Squeeze forums, please Register! It’s FREE and there are many benefits:

  • Receive Fast Advice
  • Learn Programming Languages
  • Get Professional Website Reviews
  • Quick Troubleshooting Assistance

> Centering Images In Flash

This is a discussion on Centering Images In Flash, within the Flash & Multimedia section. This forum and the thread "Centering Images In Flash" are both part of the Designing Your Website category.

 
 Reply to this topicStart new topic
> Centering Images In Flash
LivingDeadBeat
post Mar 19 2008, 07:04 AM
Post #1


Fresh Squeezed
**

Group: Members
Posts: 17
Joined: 14-February 08
From: North Devon
Member No.: 70
Hey peeps, hope all is well,

Does anyone know how i might centre an image in flash. I have a image scroller which resizes images. This works fine but if the image is a slightly different apsect ratio it will align to the left.

Here is the code which i believe resizes each image:

CODE
function watchClip(target_mc:MovieClip){
    var watcher:MovieClip = this.createEmptyMovieClip("watcher_mc",this.getNextHighestDepth());
    watcher.onEnterFrame = function(){
        if(target_mc._width != 0){
            target_mc._width = 170;
            target_mc._yscale = target_mc._xscale;
            if(target_mc._height > 110){
                target_mc._height = 110;
                target_mc._xscale = target_mc._yscale;
            }
            this.removeMovieClip();
        }
    };
}


how would i then centre each image with its container? Nothing seems to be simple in bloody flash.

If you want to see the flash bar here is the site (I did NOT design the templates!)

scroller

Any help would be appreciated.

Tom


--------------------
"Extraordinary claims require extraordinary evidence" - Carl Sagan
Go to the top of the page
 
+Quote Post
JustinStudios
post Mar 19 2008, 09:51 AM
Post #2


Rapid Squeezer
****

Group: Members
Posts: 156
Joined: 15-February 08
From: US of A
Member No.: 150
What the script does above is creates a new Movie Clip and resizes that movie clip in order to fit properly. In order to center the image you would have to know the exact width and length of each image and perform a calculation to place the x/y value at _x = _x / 2 and _y = _y /2 . The problem with this is the fact that flash has a real problem centering external images of different size in a movie clip. It seems quite easy to center an image on a stage or on a very large movie script, but when the MC and the image are the same size it can be a problem.

The solution?

Well the solution is to find the height and the width and then solve it through that. I hard-coded in the suggested MC width and height / 2 so that is where the 85 and 55 came from.
CODE
    watcher.onEnterFrame = function(){
        if(target_mc._width != 0){
            target_mc._width = 170;
            target_mc._yscale = target_mc._xscale;
            if(target_mc._height > 110){
                target_mc._height = 110;
                target_mc._xscale = target_mc._yscale;
            }
    target_mc._x = 85 - target_mc._width/2;
    target_mc._y = 55 - target_mc._height/2;
        this.removeMovieClip();
}


That should work. If not try putting them in the if statements.

This post has been edited by JustinStudios: Mar 19 2008, 09:52 AM


--------------------
Currently Available for work: - XTHML, CSS, Flash, Actionscript, PHP, ASP, Ajax -
interested in movies? Read some of my reviews on my blog
Go to the top of the page
 
+Quote Post
LivingDeadBeat
post Mar 19 2008, 11:45 AM
Post #3


Fresh Squeezed
**

Group: Members
Posts: 17
Joined: 14-February 08
From: North Devon
Member No.: 70
QUOTE (JustinStudios @ Mar 19 2008, 10:51 AM) *
What the script does above is creates a new Movie Clip and resizes that movie clip in order to fit properly. In order to center the image you would have to know the exact width and length of each image and perform a calculation to place the x/y value at _x = _x / 2 and _y = _y /2 . The problem with this is the fact that flash has a real problem centering external images of different size in a movie clip. It seems quite easy to center an image on a stage or on a very large movie script, but when the MC and the image are the same size it can be a problem.

The solution?

Well the solution is to find the height and the width and then solve it through that. I hard-coded in the suggested MC width and height / 2 so that is where the 85 and 55 came from.
CODE
    watcher.onEnterFrame = function(){
         if(target_mc._width != 0){
             target_mc._width = 170;
             target_mc._yscale = target_mc._xscale;
             if(target_mc._height > 110){
                 target_mc._height = 110;
                 target_mc._xscale = target_mc._yscale;
             }
     target_mc._x = 85 - target_mc._width/2;
     target_mc._y = 55 - target_mc._height/2;
         this.removeMovieClip();
}


That should work. If not try putting them in the if statements.


Cheers for the reply. It doesn't work though. It only displays one image in a wierd location both if i put the above in or out of the if statements. I did actually try the above before i made this post, prob should of mentioned that, but i thought i just got the syntax wrong or something.


--------------------
"Extraordinary claims require extraordinary evidence" - Carl Sagan
Go to the top of the page
 
+Quote Post
JustinStudios
post Mar 19 2008, 01:01 PM
Post #4


Rapid Squeezer
****

Group: Members
Posts: 156
Joined: 15-February 08
From: US of A
Member No.: 150
I'm stupid... I forgot a CRUCIAL piece of code.. the + sign...

CODE
     target_mc._x += 85 - target_mc._width/2;
     target_mc._y += 55 - target_mc._height/2;


I tested it in my version works just fine for me. Of course you can play with the numbers if you want and that will change it accordingly.


--------------------
Currently Available for work: - XTHML, CSS, Flash, Actionscript, PHP, ASP, Ajax -
interested in movies? Read some of my reviews on my blog
Go to the top of the page
 
+Quote Post
LivingDeadBeat
post Mar 20 2008, 06:48 AM
Post #5


Fresh Squeezed
**

Group: Members
Posts: 17
Joined: 14-February 08
From: North Devon
Member No.: 70
QUOTE (JustinStudios @ Mar 19 2008, 02:01 PM) *
I'm stupid... I forgot a CRUCIAL piece of code.. the + sign...

CODE
     target_mc._x += 85 - target_mc._width/2;
      target_mc._y += 55 - target_mc._height/2;


I tested it in my version works just fine for me. Of course you can play with the numbers if you want and that will change it accordingly.


Cheers mate i'll give that a go


--------------------
"Extraordinary claims require extraordinary evidence" - Carl Sagan
Go to the top of the page
 
+Quote Post
LivingDeadBeat
post Mar 20 2008, 07:54 AM
Post #6


Fresh Squeezed
**

Group: Members
Posts: 17
Joined: 14-February 08
From: North Devon
Member No.: 70
QUOTE (LivingDeadBeat @ Mar 20 2008, 07:48 AM) *
Cheers mate i'll give that a go


worked perfectly.

nice one. yahoo.gif


--------------------
"Extraordinary claims require extraordinary evidence" - Carl Sagan
Go to the top of the page
 
+Quote Post
JustinStudios
post Mar 20 2008, 11:15 AM
Post #7


Rapid Squeezer
****

Group: Members
Posts: 156
Joined: 15-February 08
From: US of A
Member No.: 150
np smile.gif .

Without the + it just stacks all the images on top of each other, lol.


--------------------
Currently Available for work: - XTHML, CSS, Flash, Actionscript, PHP, ASP, Ajax -
interested in movies? Read some of my reviews on my blog
Go to the top of the page
 
+Quote Post
« Next Oldest · Flash & Multimedia · Next Newest »
 
If you found The Web Squeeze to be helpful, please donate so we can keep this site FREE, FRESH, and fortified with Web Design & Development info!
 Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No New Posts   1 rewake 187 14th February 2008 - 10:31 PM
Last post by: Jacob
No New Posts   0 Jacob 171 18th February 2008 - 08:45 AM
Last post by: Jacob
No New Posts   7 gribble 227 25th February 2008 - 10:25 AM
Last post by: thesealportalteam
No New Posts   11 ahwell 292 1st March 2008 - 10:13 AM
Last post by: ahwell
No New Posts   1 LivingDeadBeat 254 12th March 2008 - 10:00 AM
Last post by: LivingDeadBeat