Smooth image on load in as3

781 Views Asked by At

I am new here and a complete noob when it comes to as3. Somehow I have managed to put this together with some help from different places. And now I turn to you guys :)

I need to put smoothing on my images and thumbs that Im loading from an XML file. I have tried a lot of things but can't get any of it to work and I get this error: Scene 1, Layer 'as3', Frame 1, Line 27 1120: Access of undefined property e. -> So I know var bitmapContent:Bitmap = Bitmap( e.target.content ); is the problem. but I have no idea what to use instead of e. I this i what I have so far:

import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.events.MouseEvent;
import fl.transitions.Tween;
import fl.transitions.easing.None;
import flash.display.Bitmap;


// Loads the first image//
var i =new Loader();
i.load(new URLRequest("images/1.jpg"));
mainLoader.addChild(i)


//Loads the XML file//
var picsXML:XML;
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.addEventListener(Event.COMPLETE ,  xmlLoaded);
xmlLoader.load(new URLRequest("imagelist.xml"));


//Loads images into thumbs//
function xmlLoaded(event:Event):void{
    picsXML = new XML(xmlLoader.data);
    //trace(picsXML);
    var bitmapContent:Bitmap = Bitmap( e.target.content );
    bitmapContent.smoothing = true;
    var thumbLoader:UILoader;
    for (var i:uint=0; i<picsXML.image.length(); i++)

    {
        thumbLoader=UILoader(getChildByName("thumb"+i));
        thumbLoader.load(new URLRequest("thumbs/"+picsXML.image[i].@file));
        thumbLoader.buttonMode = true;
        thumbLoader.addEventListener(MouseEvent.CLICK, thumbClicked);
        thumbLoader.addEventListener(MouseEvent.CLICK, tester); 
    }
}

//Loads large image when thumb is clicked//
function thumbClicked(event:MouseEvent){
    //var bitmapImage:Bitmap = event.target.content;
    //bitmapImage.smoothing = true;
    var thumbName:String = event.currentTarget.name;
    var thumbIndex:uint = uint(thumbName.substr(5));
    var fullPath:String = "images/"+picsXML.image[thumbIndex].@file;
    mainLoader.load(new URLRequest(fullPath));
    var myTween:Tween = new Tween(mainLoader,"alpha", None.easeNone, .3,1,18,false);

}

//Removes the first image when thumbs is clicked//
function tester(event:MouseEvent){
    if (mainLoader.contains(i)) {
        trace("hej")
     mainLoader.removeChild(i);
    }
    }
3

There are 3 best solutions below

0
On

If i get your code true problem is here: u import an external xml file which is probably contain your url's and name of pic's. U can't turn ur xml file into a bitmap.

If u want smoothing on your pictures u need to it after load ur pics or thumb's. Probably ur problem will fix like this :) Hope this will help

0
On

Functions with arguments work like this: function Name ( input arg Name : input arg Type )

Firstly, your function xmlLoaded(event:Event) cannot have an input called event but then you try to do a Bitmap( e.target.content ); so for that bitmap line to work you'd have to change your input name to e like so... xmlLoaded( e : Event );

Secondly, var bitmapContent:Bitmap = Bitmap( e.target.content ); is incorrect.

This is more correct var bitmapContent:Bitmap = img_Bytes_Loader.content as Bitmap; set a Loader's content as Bitmap not XML content (text) as Bitmap (pixels).

Anyways assuming your XML file looks like this:

<?xml version="1.0" encoding="UTF-8"?>

<Items>

    <mp3>
        <url> track1.mp3 </url>     
        <image> image1.jpg </image>
    </mp3>

    <mp3>
        <url> track2.mp3 </url>     
        <image> image2.jpg </image>
    </mp3>

</Items>

Then your code should look something like this below :

var imgLoader_XML : URLRequest;
var picLoader : Loader = new Loader();

function xmlLoaded(event:Event):void
{
    picsXML = new XML(xmlLoader.data);
    //trace(picsXML);

    imgLoader_XML = new URLRequest( picsXML.mp3[ index ].image ); //[index] could be replaced with [i] if FOR loop
    picLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, picloadComplete);
    picLoader.load (imgLoader_2);
}

public function picloadComplete(evt:Event)
{
    yourContainer.addChild(picLoader);
    yourContainer.width = 100;
    yourContainer.height = 100;
    yourContainer.alpha = 1;

}
0
On

Thanks for the inputs guys. It is greatly appreciated. I figured it out. You were right, of course I can't put smoothing on the UILoader, so I had to target the content of the UILoader and run thumbLoader.addEventListener(Event.COMPLETE, smoothing); each time an image is importet.

Here is the entire working code (maybe it can help someone else :) :

import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.events.MouseEvent;
import fl.transitions.Tween;
import fl.transitions.easing.None;
import flash.display.Bitmap;
import flash.display.Loader;


// Loads the first image//
var i =new Loader();
i.load(new URLRequest("images/1.jpg"));
mainLoader.addChild(i)


//Loads the XML file//
var picsXML:XML;
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.addEventListener(Event.COMPLETE ,  xmlLoaded);
xmlLoader.load(new URLRequest("imagelist.xml"));


//Loads images into thumbs//
function xmlLoaded(event:Event):void{
    picsXML = new XML(xmlLoader.data);
    var thumbLoader :UILoader = new UILoader(); 

    for (var i:uint=0; i<picsXML.image.length(); i++)

    {
        thumbLoader=UILoader(getChildByName("thumb"+i));
        thumbLoader.load(new URLRequest("thumbs/"+picsXML.image[i].@file));
        thumbLoader.buttonMode = true;
        thumbLoader.addEventListener(MouseEvent.CLICK, thumbClicked);
        thumbLoader.addEventListener(MouseEvent.CLICK, tester);
        thumbLoader.addEventListener(Event.COMPLETE, smoothing);
    }

}

function smoothing(e:Event):void{
            if(e.currentTarget.content is Bitmap)
            {
                Bitmap(e.currentTarget.content).smoothing = true;
            }
}

//Loads large image when thumb is clicked//
function thumbClicked(event:MouseEvent){

    var thumbName:String = event.currentTarget.name;
    var thumbIndex:uint = uint(thumbName.substr(5));
    var fullPath:String = "images/"+picsXML.image[thumbIndex].@file;
    mainLoader.load(new URLRequest(fullPath));
    mainLoader.addEventListener(Event.COMPLETE, smoothing);
    var myTween:Tween = new Tween(mainLoader,"alpha", None.easeNone, .3,1,18,false);


}

//Removes the first image when thumbs is clicked//
function tester(event:MouseEvent){
    if (mainLoader.contains(i)) {
        trace("hej")
     mainLoader.removeChild(i);
    }
    }