How to proportionally resize an image
When the width of height of an image object is changed, the image is scaled to fill the new size of the object. If the changes to the width and height of an image are not in proportion this can lead to the image looking stretched and distorted. In this lesson I will show how images can be resized proportionately so that they retain their original appearance, though smaller or larger.
The pointer tool can be used to resize images proportionally. When the pointer tool is in use and an object has been selected, resize handles (the small grey squares which indicate that an object is selected) appear at the corners and edges of the object. By clicking and dragging on these handles, the object is resized by moving the edge or corner clicked on to adjust the width and/or height of the selected object.
If the Shift key is held down whilst moving the handle, then the proportions of the object will be preserved. For example, if I hold Shift and drag the bottom edge upwards to reduce the size by half, then the right edge will automatically move to the left to reduce the width of the object by the same amount.
An image will have been resized proportionately if the aspect ratio (the ratio between the width and height of the image) is preserved, that is if:
oldwidth / oldheight = newwidth / newheight
This can also be rewritten as:
oldwidth / newwidth = oldheight / newheight
So in order to preserve the aspect ratio when scaling an image, the width and height must both be scaled by the same factor. When the height is doubled, so to must be the width.
The following script command takes the long id of an image, and a scale factor, and applies it to the original width and height of the image:
command scaleImage pImageID, pScale local tWidth, tHeight put the formattedWidth of pImageID into tWidth put the formattedHeight of pImageID into tHeight put tWidth * pScale into tWidth put tHeight * pScale into tHeight lock screen set the width of pImageID to tWidth set the height of pImageID to tHeight unlock screen end scaleImage
You may wish to set a particular width or height on an image whilst maintaining the original proportions. In such a case you can calculate the appropriate height or width by determining the ratio between the original and the desired width/height and applying that to both.
The following script command demonstrates this for a given width:
command setWidthProportional pImageID, pWidth local tRatio, tHeight put (the formattedWidth of pImageID) / pWidth into tRatio put (the formattedHeight of pImageID) / tRatio into tHeight lock screen set the width of pImageID to pWidth set the height of pImageID to tHeight unlock screen end setWidthProportional
Note that this command can be easily modified to accept a specified height, and calculate the appropriate width:
command setHeightProportional pImageID, pHeight local tRatio, tWidth put (the formattedHeight of pImageID) / pHeight into tRatio put (the formattedWidth of pImageID) / tRatio into tWidth lock screen set the width of pImageID to tWidth set the height of pImageID to pHeight unlock screen end setHeightProportional
You may be creating an application where you wish to display an image within a limited area smaller than the image size. In order to fit an image fully within a given area whilst still maintaining the original aspect ratio, unless the ratio of the image is the same as the new area, the image must either:
a) stretch across the full width of the area, but with a shorter height, or
b) stretch across the full height, but with a shorter width.
To determine which, we must calculate the proportional height given the new width, and also the proportional width given the new height. If the calculated side of one of these new areas is greater than allowed then we use the other new area.
The following script command takes as parameters the long id of an image, a miximum width, and a maximum height and resizes the image proportionally to fit within:
command setAreaProportional pImageID, pWidth, pHeight local tProportionalWidth, tProportionalHeight, tRatio put (the formattedWidth of pImageID) / pWidth into tRatio put (the formattedHeight of pImageID) / tRatio into tProportionalHeight put (the formattedHeight of pImageID) / pHeight into tRatio put (the formattedWidth of pImageID) / tRatio into tProportionalWidth if tProportionalHeight > pHeight then lock screen set the width of pImageID to tProportionalWidth set the height of pImageID to pHeight unlock screen else lock screen set the width of pImageID to pWidth set the height of pImageID to tProportionalHeight unlock screen end if end setAreaProportional