A Flash Developer Resource Site

Results 1 to 12 of 12

Thread: Automatic picture resizing.

  1. #1
    Member
    Join Date
    Mar 2014
    Posts
    32

    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

  2. #2
    Designer, Programmer, Musician angelhdz's Avatar
    Join Date
    Mar 2010
    Posts
    971
    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

  3. #3
    Designer, Programmer, Musician angelhdz's Avatar
    Join Date
    Mar 2010
    Posts
    971
    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

  4. #4
    Member
    Join Date
    Mar 2014
    Posts
    32
    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

  5. #5
    Junior Member
    Join Date
    Feb 2014
    Location
    Maharagama
    Posts
    5
    There are so many online tools for resizing photos you can easily resize any image with the great resolution

  6. #6
    Member
    Join Date
    Mar 2014
    Posts
    32
    Quote Originally Posted by Kevinruwan View Post
    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.

  7. #7
    Designer, Programmer, Musician angelhdz's Avatar
    Join Date
    Mar 2010
    Posts
    971
    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

  8. #8
    . fruitbeard's Avatar
    Join Date
    Oct 2011
    Posts
    1,785
    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.

  9. #9
    Member
    Join Date
    Mar 2014
    Posts
    32
    Quote Originally Posted by fruitbeard View Post
    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!

  10. #10
    . fruitbeard's Avatar
    Join Date
    Oct 2011
    Posts
    1,785
    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 (
    0myImages.lengthi++)
            {
                var 
    imageNumber 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(targetAreaLoadBytesTotalBytes)
        {
            
    // *** 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 && index imageAmount)
            {
                
    but_prev._visible true;
                
    but_next._visible true;
            }
            else if (
    index && 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

  11. #11
    Member
    Join Date
    Mar 2014
    Posts
    32
    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

  12. #12
    . fruitbeard's Avatar
    Join Date
    Oct 2011
    Posts
    1,785
    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
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center