AS3 Setting width and height of a Sprite Container
Asked Answered
H

1

9

Ok, my mind is boggling over this issue im having. I know this might seem like such an easy issue and I can't understand why I cant figure it out but none the less I can't and I've just about given up. Here's the issue:

I have a sprite container which is supposed to hold a bunch of thumbnails to videos. I am able to populate the container with all the videos and the whole works but obviously if I add a bunch of videos its going to exceed the size of the flash document so I need to add a UIScrollBar (which I did) now the scrollbars target is set to the container but isnt allowing me to scroll and if im correct this is because the container doesnt have a set height. So Im trying to set the height of this container but the second I try setting the height or even width all my thumbnails I used to be able to see are gone! It's as if the size is being set to 0 when its not I've even tried to set it to a specified size just to test and nothing. Anyways heres my code if anyone can help out I'd really appreciate it! Thanks in advance!


import fl.controls.UIScrollBar; 

var videoList:XMLList;
var numVideos:Number;
var current_Video:Number = 0;
var video_position:Number;
var video_paused:Boolean;
var xmlPlaylist:String;

//XML File setup
var playlist_xml:XML;
var myLoader:URLLoader = new URLLoader();

//Playlist setup
var thumb_width:Number;
var thumb_height:Number;
var thumbs_x:Number;
var thumbs_y:Number;
var main_container:Sprite;
var thumbs:Sprite;
var scrollbar:UIScrollBar;

//Loader Data
this.loaderInfo.addEventListener(Event.COMPLETE, loaderComplete);
function loaderComplete(e:Event):void
{
    var myQueryStrings = this.loaderInfo.parameters;
    xmlPlaylist = myQueryStrings.pList;

    myLoader.load(new URLRequest(xmlPlaylist + "?uniq=" + new Date().getTime()));
}

myLoader.addEventListener(Event.COMPLETE, processXML);
function processXML(e:Event):void {
    playlist_xml = new XML(e.target.data);

    numVideos = playlist_xml.video.length();
    videoList = playlist_xml.video;

    thumb_width = playlist_xml.@thumb_width;
    thumb_height = playlist_xml.@thumb_height;
    thumbs_x = playlist_xml.@thumbs_x;
    thumbs_y = playlist_xml.@thumbs_y;

    current_Video = Math.round(Math.random()*(numVideos-1))+1;
    current_Video--;

    startPlayer();
}

function startPlayer()
{
    makeContainers();
    callThumbs();
    setVideo(current_Video);
}

function makeContainers():void
{
    main_container = new Sprite();
    addChild(main_container);

    thumbs = new Sprite();
    thumbs.addEventListener(MouseEvent.CLICK, playVideo);
    thumbs.addEventListener(MouseEvent.MOUSE_OVER, onOver);
    thumbs.addEventListener(MouseEvent.MOUSE_OUT, onOut);
    thumbs.x = thumbs_x;
    thumbs.y = thumbs_y;

This is where the Issue is: (If i comment out this code it displays the thumbnails)


    thumbs.width = thumb_width;
    thumbs.height = (thumb_height + 11) * 3;

    thumbs.buttonMode = true;
    main_container.addChild(thumbs);

    scrollbar = new UIScrollBar();
    scrollbar.x = thumbs_x + thumb_width + 2;
    scrollbar.y = thumbs_y;
    scrollbar.setSize(25, (thumb_height + 11) * 3);
    scrollbar.visible = true;
    scrollbar.scrollTarget = thumbs;
    main_container.addChild(scrollbar);
}

function callThumbs():void
{
    for (var i:Number = 0; i (less than) numVideos; i++) //For some reason Stack Overflow isnt allowing me to put the symbol less than so i just typed it in...
    {
        var thumb_url = videoList[i].@thumb;
        var thumb_loader = new Loader();
        thumb_loader.name = i;
        thumb_loader.load(new URLRequest(thumb_url));

        thumb_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);

        thumb_loader.y = (thumb_height + 11) * i;
    }
}

function thumbLoaded(e:Event):void
{
    var my_thumb:Loader = Loader(e.target.loader);
    thumbs.addChild(my_thumb);
}

function playVideo(e:MouseEvent):void
{
    setVideo(e.target.name);
}

function onOver (e:MouseEvent):void
{
    var my_thumb:Loader = Loader(e.target);
    my_thumb.alpha = 0.5;
}

function onOut (e:MouseEvent):void
{
    var my_thumb:Loader = Loader (e.target);
    my_thumb.alpha = 1;
}

function setVideo(current_Video)
{
    var display:String = videoList[current_Video].@title;
    var video:String = videoList[current_Video].@url;

    txt_Display.text = display;
    flvPlayer.source = video;
}

stop();
Hoehne answered 27/2, 2011 at 16:27 Comment(0)
F
11

This is easy. You are creating Sprite, adding listeners, setting coordinates. The sprite is still empty. Then you set width and height, which are translating to scaleX and scaleY. On empty sprite this messes up transformation matrix and sprite will never show up. Set width, height, or scaleX/Y only on non-empty sprites.

Fecula answered 27/2, 2011 at 16:52 Comment(2)
I found one thread regarding this and what you stated was mentioned so I also tried to set the height and width after it is populated with the thumbnails and I got the same result... Any suggestion why that might be? Just so you know exactly what I did: I put the width and height into a function and called this function after the callThumbs() procedure.Hoehne
As I see, callThumbs only starts load, it isn't finished instantly. You can safely resize thumb after thumbLoaded().Fecula

© 2022 - 2024 — McMap. All rights reserved.