textField alpha is wrong on stage

1

I beg your deepest tolerance for my newB’ness. I have gotten sooo close to getting this thing to work but I need help. The basic problem is that I have a text caption (two textFields, one acting as a dimmable background and the second including the displayed text) that when added to the stage takes on the default alpha value (1) and is not changed when I address it in mouse_over and mouse_out events.

Some background… What I want to accomplish is:

  1. a horizontally scrolling image gallery
  2. reads image source, caption title, link and page data from an XML file,
  3. is re-usable on several web pages (both swf and xml) as it can identify the current page and dynamically display images appropriate to that page from the xml file
  4. On image mouse over the image should resize (get bigger) and should pop up the text caption for the image (this is where I am stuck!!!)
  5. on image click should take the visitor to a new url

I have cobbled this together from several tutorials and am not a developer… please be gentle…

I sense I have gone terribly, terribly wrong with the textField stuff… if not with other things too… Anyway back to the problem. The caption pops up on the stage at the bottom of the image (where it should be) at run time but at full alpha (1) even though I set it to 0 earlier… I suspect this means I am not loading these objects correctly (but I don’t know where I’ve gone wrong). Then inside the MOUSE_OVER and MOUSE_OUT events I can’t change the opacity attribute… which makes me suspect I am not addressing these objects correctly (but I don’t know where I have gone wrong here either)… (sigh)…

Here is the AS3 code… the xml file, sample images and the Tweener as’s are in the attached zip. Thank you for ANY suggestions you can give!!!

Sincerely,
Scott

import caurina.transitions.*;

//load xml
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

var xmlPath:String = “test.xml”;
xmlLoader.load(new URLRequest(xmlPath));
trace("loading xml from: " + xmlPath);

function LoadXML(e:Event):void
{
trace(“xml loading complete”);
xmlData = new XML(e.target.data);
buildScroller(xmlData.image);
}

var scroller:MovieClip = new MovieClip();
var speed:Number;
var padding:Number = 20;
var thumbSmall:Number = 1;
var thumbLarge:Number = 1.1;
this.addChild(scroller);
scroller.y = scroller.x = padding;

//build scroller from xml
function buildScroller(imageList:XMLList):void
{
trace(“building Scroller”);
var goodImage:Number = 0;
var myURLRoot:String = ‘http://www.myDomain.com/’;

//Get Current URL 
import flash.external.ExternalInterface;
var pageURL:String = ExternalInterface.call('window.location.href.toString');
trace("the current page is: " + pageURL);

//Loop through xml list adding items
for (var item:uint = 0; item < imageList.length(); item++)
{
    var thisOne:MovieClip = new MovieClip();

    //outline
    var blackBox:Sprite = new Sprite();
    blackBox.graphics.beginFill(0x000033);
    blackBox.graphics.drawRect( -1, -1,260, 372);
    blackBox.alpha = 1;
    thisOne.addChild(blackBox);
    thisOne.blackBox = blackBox;

    thisOne.x = thisOne.myx = (258 + padding) * goodImage;
    thisOne.itemNum = item;
    thisOne.title = imageList[item].attribute("title");
    thisOne.link = imageList[item].attribute("url");
    thisOne.src = imageList[item].attribute("src");
    thisOne.page = imageList[item].attribute("page");
    
    //Check page
    //if (myURLRoot + thisOne.page == pageURL)  This is remarked out to make the file work on my desktop w/out being on the server
    if (thisOne.page == pageURL) //pageURL is 'null' when working on the desktop
    {
        trace("Web page name = " + thisOne.page);
        trace("page check is correct");
        goodImage++;  // This keeps track of how many images/movieClips should be loaded
        trace("the goodImage # is: " + goodImage);

        //image container
        var thisThumb:Sprite = new Sprite();

        //add image
        var ldr:Loader = new Loader();
        var urlReq:URLRequest = new URLRequest(thisOne.src);
        trace("loading thumbnail "+item+" into Scroller: " + thisOne.src);
        ldr.load(urlReq);

        //add textfield background
        var textBack:TextField = new TextField();
        textBack.background = true;
        textBack.backgroundColor = 0x444444;
        textBack.width = 240;
        textBack.height = 40;
        textBack.x = 10
        textBack.y = 330
        textBack.alpha = 0;

        // add text on background
        var myFormat:TextFormat = new TextFormat();
        myFormat.size = 15;
        myFormat.align = TextFormatAlign.CENTER;
        
        var myText:TextField = new TextField();
        myText.defaultTextFormat = myFormat;
        myText.text = thisOne.title;
        myText.multiline = true;
        myText.wordWrap = true;
        myText.selectable = false;
        myText.width = 225;
        myText.height = 40;
        myText.textColor = 0xffffff;
        myText.x = 15 
        myText.y = 330
        myText.alpha = 0;
        
        //assign event listeners for Loader
        ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
        ldr.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
        thisThumb.addChild(ldr);
        thisOne.addChild(thisThumb);
        
        //add text caption layers
        thisOne.addChild(textBack);
        thisOne.addChild(myText);
        
        //create listeners for this thumb
        thisOne.buttonMode = true;
        thisOne.addEventListener(MouseEvent.MOUSE_OVER, overScrollerItem);
        thisOne.addEventListener(MouseEvent.MOUSE_OUT, outScrollerItem);
        thisOne.addEventListener(MouseEvent.CLICK, clickScrollerItem);
        
        //add item
        scroller.addChild(thisOne);
    }
    else
    {
        trace("XML page name = " + myURLRoot + thisOne.page);
        trace("Current page = " + myURLRoot + pageURL);
        trace("page check is not correct.  Moving on to next image.");
    }
}

scroller.addEventListener(Event.ENTER_FRAME, moveScrollerThumbs);
trace("termination of build scroller");

}

function overScrollerItem(e:MouseEvent):void
{
//trace(“over” + e.currentTarget.name);
Tweener.addTween(e.currentTarget, { scaleX:thumbLarge, scaleY:thumbLarge, x:e.currentTarget.myx - e.currentTarget.width * Math.abs(thumbSmall - thumbLarge)/2, y: -e.currentTarget.width * Math.abs(thumbSmall - thumbLarge)/2, time:1 } );
Tweener.addTween(e.currentTarget.blackBox, { alpha:1, time: 1 } );
Tweener.addTween(e.currentTarget.textBack, { alpha:1, time: 2 } );
Tweener.addTween(e.currentTarget.myText, { alpha:1, time: 2 } );
}

function outScrollerItem(e:MouseEvent):void
{
//trace(“out” + e.currentTarget.name);
Tweener.addTween(e.currentTarget, { scaleX:thumbSmall, scaleY:thumbSmall, x:e.currentTarget.myx, y:0, time:1 } );
Tweener.addTween(e.currentTarget.blackBox, { alpha:.2, time: 1 } );
Tweener.addTween(e.currentTarget.textBack, { alpha:0, time: 2 } );
Tweener.addTween(e.currentTarget.myText, { alpha:0, time: 2 } );
}

function clickScrollerItem(e:MouseEvent):void
{
//trace("clicked item " + e.currentTarget.itemNum + " - visit url: " + e.currentTarget.link);
var urlRequest:URLRequest = new URLRequest(e.currentTarget.link);
try
{
navigateToURL(urlRequest);
}
catch (e:Error)
{
// handle error here
trace(e);
}
}

function completeHandler(e:Event):void
{
trace("thumbnail complete "+e.target.loader.parent.parent.name);
//size image into scroller
resizeMe(e.target.loader.parent, 260, 370, true, true, false);
Tweener.addTween(e.target.loader.parent.parent, { alpha:1, time: .5 } );
}

function errorHandler(e:IOErrorEvent):void
{
trace(“thumbnail error=”+e);
}

//The resizing function
// parameters
// required: mc = the movieClip to resize
// required: maxW = either the size of the box to resize to, or just the maximum desired width
// optional: maxH = if desired resize area is not a square, the maximum desired height. default is to match to maxW (so if you want to resize to 200x200, just send 200 once)
// optional: constrainProportions = boolean to determine if you want to constrain proportions or skew image. default true.
function resizeMe(mc:DisplayObject, maxW:Number=398, maxH:Number=570, constrainProportions:Boolean=true, centerHor:Boolean=true, centerVert:Boolean=true):void
{
maxH = maxH == 0 ? maxW:maxH;
mc.width = maxW;
mc.height = maxH;
if (constrainProportions)
{
mc.scaleX < mc.scaleY ? mc.scaleY = mc.scaleX:mc.scaleX = mc.scaleY;
}
if (centerHor)
{
mc.x = (maxW - mc.width) / 2;
}
if (centerVert)
{
mc.y = (maxH - mc.height) / 2;
}
}

function moveScrollerThumbs(e:Event):void
{
if (mouseY > scroller.y && mouseY < scroller.y + scroller.height)
{//vertically over scroller
if (mouseX < stage.stageWidth / 2 - padding * 2 && mouseX > 0)
{//left of stage explicitly
speed = -(mouseX - (stage.stageWidth/2 - padding2)) / 8;
}
else if (mouseX > stage.stageWidth/2 + padding2 && mouseX < stage.stageWidth)
{//right of stage explicitly
speed = -(mouseX - (stage.stageWidth/2 + padding*2)) / 8;
}
else
{
speed = 0;
}
scroller.x += speed;

    //scroller limits
    if (scroller.x &lt;  -  scroller.width + stage.stageWidth - padding)
    {//if scrolled too far left
        scroller.x =  -  scroller.width + stage.stageWidth - padding;
    }
    else if (scroller.x &gt; padding)
    {//if scrolled to far right
        scroller.x = padding;
    }
}

}