Access of undefined property error in Flash using ExternalInterface

Question

I am new to flash, so the solution to this problem may be simple. Unfortunately I have been unable to find a working solution, so I am hoping you guys can help. I am developing a site using 3rd party flash - Coverflow, for an album. It looks great and you can download it here: http://www.weberdesignlabs.com/blog/2009/12/flash-10-coverflow/. My challenge is that I want to progress the albums from a Javascript call within my HTML. In my search I have discovered ExternalInterface, but I can't get it to work. When I try to export the movie I get an "Access of undefined property gotoCoverFlowItem" error.

Below follows the code contained in the Coverflow.ai file which I am trying to modify, with the modification in it. The full code can be found at the link above. I am using the Flash 10 version.

////////////////////////////////////////////
// Project: Flash 10 Coverflow
// Date: 10/3/09
// Author: Stephen Weber
////////////////////////////////////////////
package {

    ////////////////////////////////////////////
    // IMPORTS
    ////////////////////////////////////////////

    import flash.display.Sprite;
    import flash.display.BitmapData;
    import flash.display.Bitmap;
    import flash.display.GradientType;
    import flash.display.Graphics;
    import flash.display.Shape;
    import flash.display.MovieClip;
    import flash.display.BlendMode;
    import flash.display.Loader;
    import flash.events.Event;
    import flash.events.KeyboardEvent;
    import flash.events.MouseEvent;
    import flash.events.IOErrorEvent;
    import flash.geom.Matrix;
    import flash.geom.Rectangle;
    import flash.geom.ColorTransform;
    import flash.net.URLRequest;
    import flash.net.URLLoader;
    import flash.net.navigateToURL;
    import flash.display.Stage;
    import flash.utils.setTimeout;
    import flash.external.ExternalInterface;

    //TweenLite - Tweening Engine - SOURCE: http://blog.greensock.com/tweenliteas3/
    import com.greensock.*;
    import com.greensock.easing.*;
    import com.greensock.plugins.*;

    public class Coverflow extends Sprite {

        ////////////////////////////////////////////
        // VARIABLES
        ////////////////////////////////////////////

        // size of the stage
        private var sw:Number;
        private var sh:Number;

        private var background:Background;

        // padding between each cover, can be customed via xml
        private var coverflowSpacing:Number=30;

        // transition time for movement
        private var transitionTime:Number=0.75;

        // the center of the stage
        private var centerX:Number;
        private var centerY:Number;

        // store each image cover's instance
        private var coverArray:Array=new Array();

        // title of each image
        private var coverLabel:CoverflowTitle = new CoverflowTitle();

        // the slider under the image cover
        private var coverSlider:Scrollbar;

        // how many image covers
        private var coverflowItemsTotal:Number;

        // how to open the link
        private var _target:String;

        // size of the image cover
        private var coverflowImageWidth:Number;

        private var coverflowImageHeight:Number;

        //Holds the objects in the data array
        private var _data:Array = new Array();

        // the y position of the item's title
        private var coverLabelPositionY:Number;

        //Z Position of Current CoverflowItem
        private var centerCoverflowZPosition:Number=-125;

        // display the middle of the cover or not
        private var startIndexInCenter:Boolean=true;

        // which cover to display in the beginning
        private var startIndex:Number=0;

        // the slide's Y position
        private var coverSlidePositionY:Number;

        //Holder for current CoverflowItem
        private var _currentCover:Number;

        //CoverflowItem Container
        private var coverflowItemContainer:Sprite = new Sprite();

        //XML Loading
        private var coverflowXMLLoader:URLLoader;

        //XML
        private var coverflowXML:XML;

        // the image cover's white border padding
        private var padding:Number=4;

        // stage reference
        private var _stage:Stage;

        //reflection
        private var reflection:Reflect;

        //Reflection Properties
        private var reflectionAlpha:Number;

        private var reflectionRatio:Number;

        private var reflectionDistance:Number;

        private var reflectionUpdateTime:Number;

        private var reflectionDropoff:Number;

        ////////////////////////////////////////////
        // CONSTRUCTOR - INITIAL ACTIONS
        ////////////////////////////////////////////
        public function Coverflow(_width:Number, _height:Number, __stage:Stage = null):void {
            _stage=__stage;
            sw=_width;
            sh=_height;
            centerX=_width>>1;
            centerY=(_height>>1) - 20;
            loadXML();

            //Grabs Background color passed in through FlashVars
            var backgColor:String = _stage.loaderInfo.parameters["backgroundColor"];

            if(backgColor == null) {
                //Black
                backgColor = "0x000000";

                //White
                //backgColor = "0xFFFFFF";
            }

            //Creates Background MovieClip
            background = new Background();

            //Set Background To Provided Width/Height
            background.width = _width;
            background.height = _height;

            //Adds background MovieClip to DisplayList
            addChild(background);

            //Tints Background MovieClip with provided tint
            TweenPlugin.activate([TintPlugin]);
            TweenLite.to(background, 0, {tint:backgColor});

            //Grabs Background color passed in through FlashVars
            var labelColor:String = _stage.loaderInfo.parameters["labelColor"];

            //Check for value and then default
            if(labelColor == null) {
                //Black
                //labelColor = "0x000000";

                //White
                labelColor = "0xFFFFFF";
            }

            //Tint Coverflow label to color provided
            TweenLite.to(coverLabel, 0, {tint:labelColor});

            if (_stage) {
                _stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
            }
        }
        ////////////////////////////////////////////
        // FUNCTIONS
        ////////////////////////////////////////////

        private function keyDownHandler(e:KeyboardEvent):void {
            if (e.keyCode==37||e.keyCode==74) {
                clickPre();
            }
            if (e.keyCode==39||e.keyCode==75) {
                clickNext();
            }
            // 72 stand for "H" key, 191 stand for "?" key
            if (e.keyCode==72||e.keyCode==191) {

            }
        }

        // display the previous image
        private function clickPre(e:Event=null):void {
            _currentCover--;
            if (_currentCover<0) {
                _currentCover=coverflowItemsTotal-1;
            }
            coverSlider.value=_currentCover;
            gotoCoverflowItem(_currentCover);
        }

        // display the next image

        private function clickNext(e:Event=null):void {
            _currentCover++;
            if (_currentCover>coverflowItemsTotal-1) {
                _currentCover=0;
            }
            coverSlider.value=_currentCover;
            gotoCoverflowItem(_currentCover);
        }

        // loading the XML
        private function loadXML():void {

            //Loads XML passed through FlashVars
            var xml_source:String = _stage.loaderInfo.parameters["xmlPath"];

            //If XML not found through FlashVars then defaults to xml path below
            if(xml_source == null) {
                xml_source = 'xml/data.xml';
            }

            // loading the cover xml here
            coverflowXMLLoader = new URLLoader();
            coverflowXMLLoader.load(new URLRequest("xml/data.xml"));
            coverflowXMLLoader.addEventListener(Event.COMPLETE, coverflowXMLLoader_Complete);
            coverflowXMLLoader.addEventListener(IOErrorEvent.IO_ERROR, coverflowXMLLoader_IOError);

        }

        // parse the XML
        private function coverflowXMLLoader_Complete(e:Event):void {
            coverflowXML=new XML(e.target.data);
            coverflowItemsTotal=coverflowXML.cover.length();
            coverflowSpacing=Number(coverflowXML.@coverflowSpacing);
            coverflowImageWidth=Number(coverflowXML.@imageWidth);
            coverflowImageHeight=Number(coverflowXML.@imageHeight);
            coverLabelPositionY=Number(coverflowXML.@coverLabelPositionY);
            coverSlidePositionY=Number(coverflowXML.@coverSlidePositionY);
            transitionTime=Number(coverflowXML.@transitionTime);
            centerCoverflowZPosition=Number(coverflowXML.@centerCoverflowZPosition);

            //Image Border
            padding = Number(coverflowXML.@imagePadding)

            //Reflection Attributes
            reflectionAlpha=Number(coverflowXML.@reflectionAlpha);
            reflectionRatio=Number(coverflowXML.@reflectionRatio);
            reflectionDistance=Number(coverflowXML.@reflectionDistance);
            reflectionUpdateTime=Number(coverflowXML.@reflectionUpdateTime);
            reflectionDropoff=Number(coverflowXML.@reflectionDropoff);

            startIndex=Number(coverflowXML.@startIndex);
            startIndexInCenter = ([email protected]().toString()=="yes");
            [email protected]();

            for (var i=0; i<coverflowItemsTotal; i++) {

                //Make An Object To Hold Values
                var _obj:Object = new Object();

                //Set Values To Object from XML for each CoverflowItem
                _obj.image = (coverflowXML.cover[i][email protected]());
                _obj.title = (coverflowXML.cover[i][email protected]());
                _obj.link = (coverflowXML.cover[i][email protected]());
                _data[i] = _obj;

            }
            loadCover();
        }

        private function coverflowXMLLoader_IOError(event:IOErrorEvent):void {
            trace("Coverflow XML Load Error: "+ event);
        }

        // load the image cover when xml is loaded
        private function loadCover():void {

            for (var i:int = 0; i < coverflowItemsTotal; i++) {
                var cover:Sprite=createCover(i,_data[i].image);
                coverArray[i]=cover;
                cover.y=centerY;
                cover.z=0;
                coverflowItemContainer.addChild(cover);
            }

            if (startIndexInCenter) {
                startIndex=coverArray.length>>1;
                gotoCoverflowItem(startIndex);

            } else {

                gotoCoverflowItem(startIndex);

            }
            _currentCover=startIndex;
            coverSlider=new Scrollbar(coverflowItemsTotal,_stage);
            coverSlider.value=startIndex;
            coverSlider.x = (_stage.stageWidth/2) - (coverSlider.width/2);
            coverSlider.y=_stage.stageHeight-40;
            coverSlider.addEventListener("UPDATE", coverSlider_Update);
            coverSlider.addEventListener("PREVIOUS", coverSlider_Previous);
            coverSlider.addEventListener("NEXT", coverSlider_Next);
            addChild(coverSlider);

            //coverLabel.x = (sw - coverLabel.width)>>1;
            coverLabel.x = (_stage.stageWidth/2) - (coverLabel.width/2);
            coverLabel.y=coverLabelPositionY;
            addChild(coverLabel);

            addChild(coverSlider);
            addChild(coverLabel);

        }

        private function coverSlider_Update(e:Event):void {
            var value:Number=(coverSlider.value);
            gotoCoverflowItem(value);
            e.stopPropagation();
        }

        private function coverSlider_Previous(e:Event):void {
            clickPre();
        }

        private function coverSlider_Next(e:Event):void {
            clickNext();
        }

        // move to a certain cover via number
        private function gotoCoverflowItem(n:int):void {
            _currentCover=n;
            reOrderCover(n);
            if (coverSlider) {
                coverSlider.value=n;
            }
        }

        ExternalInterface.addCallback("gotoCover", gotoCoverflowItem);

        private function cover_Selected(event:CoverflowItemEvent):void {

            var currentCover:uint=event.data.id;

            if (coverArray[currentCover].rotationY==0) {
                try {
                    // open the link if user click the cover in the middle again
                    if (_data[currentCover].link!="") {
                        navigateToURL(new URLRequest(_data[currentCover].link), _target);
                    }

                } catch (e:Error) {
                    //
                }

            } else {
                gotoCoverflowItem(currentCover);

            }

        }

        // change each cover's position and rotation
        private function reOrderCover(currentCover:uint):void {
            for (var i:uint = 0, len:uint = coverArray.length; i < len; i++) {
                var cover:Sprite=coverArray[i];

                if (i<currentCover) {
                    //Left Side
                    TweenLite.to(cover, transitionTime, {x:(centerX - (currentCover - i) * coverflowSpacing - coverflowImageWidth/2), z:(coverflowImageWidth/2), rotationY:-65});
                } else if (i > currentCover) {
                    //Right Side
                    TweenLite.to(cover, transitionTime, {x:(centerX + (i - currentCover) * coverflowSpacing + coverflowImageWidth/2), z:(coverflowImageWidth/2), rotationY:65});
                } else {
                    //Center Coverflow
                    TweenLite.to(cover, transitionTime, {x:centerX, z:centerCoverflowZPosition, rotationY:0});

                    //Label Handling
                    coverLabel._text.text=_data[i].title;
                    coverLabel.alpha=0;
                    TweenLite.to(coverLabel, 0.75, {alpha:1,delay:0.2});

                }
            }
            for (i = 0; i < currentCover; i++) {
                addChild(coverArray[i]);
            }
            for (i = coverArray.length - 1; i > currentCover; i--) {
                addChild(coverArray[i]);
            }

            addChild(coverArray[currentCover]);
            if (coverSlider) {
                addChild(coverSlider);
                addChild(coverLabel);
            }
        }

        //Create CoverflowItem and Set Data To It
        private function createCover(num:uint, url:String):Sprite {

            //Setup Data
            var _data:Object = new Object();
            _data.id=num;

            //Create CoverflowItem
            var cover:CoverflowItem=new CoverflowItem(_data);

            //Listen for Click
            cover.addEventListener(CoverflowItemEvent.COVERFLOWITEM_SELECTED, cover_Selected);

            //Set Some Values
            cover.name=num.toString();
            cover.image=url;
            cover.padding=padding;
            cover.imageWidth=coverflowImageWidth;
            cover.imageHeight=coverflowImageHeight;
            cover.setReflection(reflectionAlpha, reflectionRatio, reflectionDistance, reflectionUpdateTime, reflectionDropoff);

            //Put CoverflowItem in Sprite Container
            var coverItem:Sprite = new Sprite();
            cover.x=- coverflowImageWidth/2-padding;
            cover.y=- coverflowImageHeight/2-padding;
            coverItem.addChild(cover);
            coverItem.name=num.toString();

            return coverItem;
        }

    }
}

The code I added is:

ExternalInterface.addCallback("gotoCover", gotoCoverflowItem);

Please help!

I'm not quite sure why he received a downvote... sure he posted the whole thing or whatever but that should simply require an edit by someone with such permissions, not a downvote. I'll upvote to offset this. — user562566
– user562566, Commented May 30, 2011 at 22:29

prototypical · Accepted Answer · 2011-05-30 23:37:47Z

1

Putting the ExternalInterface call at the end of the Coverflow constructor should work as desired. The current line you have is not inside a function.

I don't know what your javascript looks like, but this code requires a parameter for gotoCoverflowItem, so I am assuming you are passing the appropriate data.

I haven't gone through all the code, but keep in mind that the current code might have certain things that it does - that might not get done if you are feeding it just the index of the next cover. I do see code in the gotoColorflowItem function that updates variables for the slider and current cover based on the selection, so it might be just fine.

Also, you are most likely going to get a runtime error if you try to test this outside of a browser for any reason, so you might want to put a try/catch for that case.

The author included his wisdom on the page :

"NOTE: I would not recommend trying to learn flash with this file. There are a lot of people asking how to change text color, if you are having these requests I would suggest going through some Lynda.com Flash tutorials to get you familiar with Flash or hiring a Flash developer to help you out."

edited May 30, 2011 at 23:37

answered May 30, 2011 at 23:29

prototypical

6,7413 gold badges26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mario111 Over a year ago

Thank you for the detailed answer - as both you and Joshua stated the ExternalInterface was called from outside of the constructor, which was the problem. I put it in the constructor and it works perfectly.

Joshua Sullivan · Accepted Answer · 2011-05-30 19:30:25Z

1

Well, you can't just dump the ExternalInterface call anywhere you want to. It needs to be inside a function such as the constructor.

answered May 30, 2011 at 19:30

Joshua Sullivan

1,1298 silver badges14 bronze badges

Collectives™ on Stack Overflow

Access of undefined property error in Flash using ExternalInterface

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related