-
Automatic picture resizing.
Hello everyone.
So here I am again stuck with another question for You guys
So I have this flash file which reads and displays a picture from file. And one thing I would like to know, is, how to set the code so any size picture fits in the frame. For example, if the picture is in larger size, it corrects it automatically in the same size as the frame its in.
The frame size is 330X230, so basically the picture should be automatically resized in that size.
Here is the file :
demo.flaphoto.jpg
-
Designer, Programmer, Musician
var imageListener:Object = new Object();
var imageLoader:MovieClipLoader = new MovieClipLoader();
//Store the width of the photo movieclip
var WIDTH:Number = photo._width;
//load the image inside the photo movieclip
imageLoader.loadClip("$_1.jpg",photo);
//assign a listener to the imageLoader MovieClipLoader
imageLoader.addListener(imageListener);
//Resize the image when the image gets loaded
imageListener.onLoadInit = function(target_mc:MovieClip){
target_mc._width = WIDTH;
target_mc._yscale = target_mc._xscale;
if(target_mc._height > WIDTH){
target_mc._height = WIDTH;
target_mc._xscale = target_mc._yscale;
}
};
Already mastering AS3. It was so fun. Now into Javascript and PHP and all its libraries
-
Designer, Programmer, Musician
Sorry i was testing with other images, replace "$_1.jpg" with "photo.jpg"
Already mastering AS3. It was so fun. Now into Javascript and PHP and all its libraries
-
Thank You for the help, but unfortunately, Im doing something wrong, and when I try to test it, the picture size seems to be right, but the position is somehow different from the movie clip "photo". After compiling the movie, The picture goes out of stage..Im not sure, what could be the problem here?
And another thing ..im having problems loading multiple pictures in that ImageLoader..I tried the code, but I get no picture loaded. (The number of pictures isn't constant, but should be changeable dynamically).
demo.fla
picture1.jpg
picture2.jpg
picture3.jpg
-
There are so many online tools for resizing photos you can easily resize any image with the great resolution
-
Originally Posted by Kevinruwan
There are so many online tools for resizing photos you can easily resize any image with the great resolution
Yes, I know, but I would need that the resizing happens in the code, so any picture that is loaded in the swf movie is resized in the same size as the frame it is in and also located in the position the frame is.
-
Designer, Programmer, Musician
Exactly. Miamii you are completely right. All the applications involving image loading, use that method, to resize the pictures accordingly. Imagine having 1,000 pictures? Are you going to use a program to resize them all? Hahaha, nope.
So i will try to help you with that. Let me download your file and i will take some of my time to help.
Already mastering AS3. It was so fun. Now into Javascript and PHP and all its libraries
-
.
Hi,
I was looking at this earlier Miamii, just put it with the original images and test it. it is CS5, I think you are able to use it?
This file has an internal array for the pictures, it could easily be made to use an external array etc etc for future use and larger amounts of images.
They might look small sometimes but they are scaled proportionally to the original image size to fit within the frame.
I made it so the buttons loop, but you can make it so they disappear from within the code if you wished.
-
Originally Posted by fruitbeard
Hi,
I was looking at this earlier Miamii, just put it with the original images and test it. it is CS5, I think you are able to use it?
This file has an internal array for the pictures, it could easily be made to use an external array etc etc for future use and larger amounts of images.
They might look small sometimes but they are scaled proportionally to the original image size to fit within the frame.
I made it so the buttons loop, but you can make it so they disappear from within the code if you wished.
Thank You, fruitbeard, its working great with those 3 pictures. But in order to display a dynamic number of pictures without indicating their names on the code, should there be a folder where the pictures would be stored and in the code, I would write the name of that folder? And also, if the names of the pictures would be picture1.jpg, picture2.jpg....would they be displayed in the swf file in that order, if their names wouldn't be written in the code, but only the name of their folder would be?
Im very thankful for Your help and patience! I know im asking so many questions and I really really appreciate Your effort in helping me out once again!
-
.
Hi Miamii,
Yes is the answer.
make a folder called images( you can change all names after you get it working if you so wish)
put all the images inside of it, create an xml file called "images.xml" and also put it in the images folder( i will put the code at the bottom)
keep the swf outside of the folder.
ok if you open the other file I sent and replace the code with this code
PHP Code:
var index:Number = 0;
var targetArea:MovieClip = photoFrame.empty;
var maxWidth:Number = 330;
var maxHeight:Number = 230;
var imagesXml:XML = new XML();
imagesXml.ignoreWhite = true;
imagesXml.load("images/images.xml");
imagesXml.onLoad = function(success)
{
if (success)
{
var myImages = imagesXml.firstChild.childNodes;
for (i = 0; i < myImages.length; i++)
{
var imageNumber = i + 1;
var imageName = myImages[i].attributes.name;
var imageURL = myImages[i].firstChild.nodeValue;
trace("Image number " + imageNumber + " is called: " + imageName + " and its URL is " + imageURL + ".");
}
}
var imageAmount:Number = myImages.length - 1;
imageLoader = new MovieClipLoader();
imageListener = new Object();
imageLoader.addListener(imageListener);
imageLoader.loadClip(myImages[index].firstChild.nodeValue,targetArea);
imageLoader.onLoadStart = function(targetArea)
{
targetArea._xscale = 100;
targetArea._yscale = 100;
};
imageLoader.onLoadProgress = function(targetArea, LoadBytes, TotalBytes)
{
// *** If using preloader bar / text
// percentage = Number(LoadBytes / (TotalBytes / 100));
};
imageLoader.onLoadComplete = function(targetArea)
{
// *** Intentionally empty
};
imageLoader.onLoadInit = function(targetArea)
{
if (targetArea._width > maxWidth)
{
targetArea.aspectRatio = targetArea._height / targetArea._width;
targetArea._width = maxWidth;
targetArea._height = Math.round(targetArea.aspectRatio * targetArea._width);
if (targetArea._height > maxHeight)
{
targetArea.aspectRatio = targetArea._width / targetArea._height;
targetArea._height = maxHeight;
targetArea._width = Math.round(targetArea.aspectRatio * targetArea._height);
}
}
else if (targetArea._width < maxWidth)
{
targetArea._width = targetArea._width;
if (targetArea._height > maxHeight)
{
targetArea.aspectRatio = targetArea._width / targetArea._height;
targetArea._height = maxHeight;
targetArea._width = Math.round(targetArea.aspectRatio * targetArea._height);
}
}
else if (targetArea._width == maxWidth)
{
targetArea._width = targetArea._width;
if (targetArea._height > maxHeight)
{
targetArea.aspectRatio = targetArea._width / targetArea._height;
targetArea._height = maxHeight;
targetArea._width = Math.round(targetArea.aspectRatio * targetArea._height);
}
else
{
targetArea._height = targetArea._height;
}
}
else if (targetArea._width == targetArea._height)
{
if (targetArea._width > maxWidth)
{
targetArea._width = maxWidth;
targetArea._height = maxHeight;
}
else
{
targetArea._width = targetArea._width;
targetArea._height = targetArea._height;
}
}
else
{
// *** Keep Original Dimensions if none of above;
targetArea._width = targetArea._width;
targetArea._height = targetArea._height;
}
targetArea.forceSmoothing = true;
targetArea._x = (photoFrame._width - targetArea._width) / 2;
targetArea._y = (photoFrame._height - targetArea._height) / 2;
};
function hideButtons()
{
if (index > 0 && index < imageAmount)
{
but_prev._visible = true;
but_next._visible = true;
}
else if (index > 0 && index >= imageAmount)
{
but_prev._visible = true;
but_next._visible = false;
}
else
{
but_prev._visible = false;
but_next._visible = true;
}
}
//hideButtons();
but_next.onPress = function()
{
index++;
if (index > imageAmount)
{
index = 0;
}
trace(myImages[index].attributes.name);
imageLoader.loadClip(myImages[index].firstChild.nodeValue,targetArea);
//hideButtons();
};
but_prev.onPress = function()
{
index--;
if (index < 0)
{
index = imageAmount;
}
trace(myImages[index].attributes.name);
imageLoader.loadClip(myImages[index].firstChild.nodeValue,targetArea);
//hideButtons();
};
};
Code:
<?xml version='1.0' encoding='utf-8'?>
<gallery>
<image name="Pic 1">images/picture1.jpg</image>
<image name="Pic 2">images/picture2.jpg</image>
<image name="Pic 3">images/picture3.jpg</image>
</gallery>
the xml file can be altered at any time keeping the same format for each new image, it does not matter to what order you put the images in it. it will automatically account for the amount of images.
I prefer the as3 way of doing the xml, its so much easier, but I'm not sure if it weorks with as2 as I havent tried.
Anyway, good luck
-
Thank You so much! The code works perfectly. Just a little thing for me that I again can't figure out by myself is when I combine in one swf the pictures who are loaded from file via XML file with the two text files, the text files are being loaded, but the but_next does not work for them anymore. I made two seperate code layers- one for text and one for pictures, the instance name for buttons is the same in both codes, but works only for image loading.
What would be the problem here?
demo.zip
-
.
Hi,
I will give you a clue what to do Miamii, you have more than one function with the same name
and you also have more than one function for more than one button, maybe combine the later ones together.
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|