• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Rollover scrolling menu - no buttons

Explorer ,
Feb 29, 2012 Feb 29, 2012

Copy link to clipboard

Copied

So below is my code for a project I'm working on. I'm having some trouble though. I got the code for the scrolling menus online from another forum, but I can't figure out where that was. In any case, the current version of the code allows for the scrolling to happen when I open the page displays (enter Frame). But I can't figure out how to get the scrolling to happen only when I hover over the menu. Can anyone help? I only want each one to scroll when I hover over the menu, not when I get on the page. I tried to replace the "enterFrame" part of the code, but it didn't work right. I need this done ASAP. Thanks in advanced!

import fl.transitions.Tween;

import fl.transitions.easing.*;

var mymovie = this;

var mymovieW = this.width;

var horizontalMode = 0;//1--horizontalMode; 0--verticalMode

var spaceImg = 7;//space beteen images

var fade = 0.5;

var containerPosition_x = 2;//put the container with images to the buttom of the stage

var containerPosition_y = 1;//put the container with images to the right of the stage

var yoffset = 10;//offset to adjust the position of big image on y axis

var xoffset = 10;

var numItems;

var objects;

var container:MovieClip = new MovieClip();

this.addChild(container);

var scrolling:Boolean = true;

var useFixedImageSize = 1;

var thumbnails:Array = new Array();

//load xml file

var xmlData = "Photoimages.xml";//set xml data file

var xmlObj:XMLDocument;

init();//init call -> load config XML and create objects

function init()

{

    xmlObj = new XMLDocument();

    xmlObj.ignoreWhite = true;

    var loader:URLLoader = new URLLoader();

    var request:URLRequest = new URLRequest(xmlData);

    loader.load(request);

    loader.addEventListener("complete", onComplete);

    loader.addEventListener("ioError", onIOError);

}

function onIOError(event:Event):void

{

    trace("IOERROR (maybe XML file does not exit or have an incorrect name)");

}

function onComplete(event:Event):void

{

    var loader:URLLoader = event.target as URLLoader;

    if (loader != null)

    {

        xmlObj.parseXML(loader.data);

        xmlHandler();

    }

    else

    {

        trace("Loader is not a URLLoader!");

    }

}

function xmlHandler()

{

    addObjects();

    startEngine();

}

function startEngine()

{

    container.addEventListener("enterFrame",startMovie);

}

function addObjects()

{//add objects in the scene

    objects = xmlObj.firstChild.childNodes;

    numItems = objects.length;

    for (var i=0; i<numItems; i++)

    {

        var attr = objects.attributes;

        //Set the images

        thumbnails = attr.thumb;

        init_thb(i);

    }

}

function init_thb(i)

{

    if (useFixedImageSize == 1)

    {

        var source1 = "AudioimgMc";//image mc linkage id from the library

    }

    else

    {

        source1 = "imgMc_01";

    }

    var sourceType1 = "library";

    var regName1 = "p" + i;//the registration name used in Flash

    var classDef = getDefinitionByName(source1);

    var menuItemMc = new classDef  ;

    menuItemMc.name = regName1;

    container.addChild(menuItemMc);

    var myThumbMc = container.getChildByName(regName1);

    myThumbMc.buttonMode = true;

    myThumbMc.useHandCursor = true;

    myThumbMc.mouseChildren = false;

    myThumbMc["info"] = objects;

    myThumbMc.y = (myThumbMc.height+spaceImg)*(i);

    myThumbMc.x = (bkg.width-myThumbMc.width)/containerPosition_y;

    myThumbMc.alpha = fade;

    myThumbMc.addEventListener("mouseOver",mouseRollOver);

    myThumbMc.addEventListener("mouseOut",mouseRollOut);

    myThumbMc.addEventListener("mouseDown",mousePress);

}

function mouseRollOver(e:MouseEvent)

{

    e.target.alpha = 1;

}

function mouseRollOut(e:MouseEvent)

{

    e.target.alpha = fade;

}

function mousePress(e:MouseEvent)

{

    navigateToURL( new URLRequest( e.target["info"].attributes.url ), "_blank" );

}

function startMovie(e:Event)

{

    this.container.y += Math.cos((-stage.mouseY/stage.stageHeight)*Math.PI)*15;

        if (this.container.y > 0)

        {

            this.container.y = 0;

        }

        if (-this.container.y>(this.container.height-stage.stageHeight))

        {

            this.container.y = -(this.container.height-stage.stageHeight);

        }

}

TOPICS
ActionScript

Views

2.7K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Feb 29, 2012 Feb 29, 2012

Looks like it's starting to scroll on page launch and you say you only want that to happen if the user rolls over the item?

What's starting the scrolling is this:

function xmlHandler()

{

    addObjects();

    startEngine();

}

It adds the objects, then starts the engine which adds the enterframe listener. You might want to adjust that to:

function xmlHandler()

{

    addObjects();

    container.addEventListener(MouseEvent.MOUSE_OVER,startEngine,false,0,true);

}

Then in the startEngine() function:

function star

...

Votes

Translate

Translate
LEGEND ,
Feb 29, 2012 Feb 29, 2012

Copy link to clipboard

Copied

Looks like it's starting to scroll on page launch and you say you only want that to happen if the user rolls over the item?

What's starting the scrolling is this:

function xmlHandler()

{

    addObjects();

    startEngine();

}

It adds the objects, then starts the engine which adds the enterframe listener. You might want to adjust that to:

function xmlHandler()

{

    addObjects();

    container.addEventListener(MouseEvent.MOUSE_OVER,startEngine,false,0,true);

}

Then in the startEngine() function:

function startEngine(e:MouseEvent)

{

    container.removeEventListener(MouseEvent.MOUSE_OVER,startEngine); // cleanup

    container.addEventListener("enterFrame",startMovie);

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 29, 2012 Feb 29, 2012

Copy link to clipboard

Copied

I tried your solution but I got the following error.

ArgumentError: Error #1063: Argument count mismatch on Index_fla::AudiomovieClip_30/startEngine(). Expected 0, got 1.

Not sure why. Here is the updated code with your solution implemented. Thank you for helping me with this.

import fl.transitions.Tween;

import fl.transitions.easing.*;

var mymovie = this;

var mymovieW = this.width;

var spaceImg = 7;//space beteen images

var fade = 0.5;

var containerPosition_x = 2;//put the container with images to the buttom of the stage

var containerPosition_y = 1;//put the container with images to the right of the stage

var yoffset = 10;//offset to adjust the position of big image on y axis

var xoffset = 10;

var numItems;

var objects;

var container:MovieClip = new MovieClip();

this.addChild(container);

var scrolling:Boolean = true;

var useFixedImageSize = 1;

var thumbnails:Array = new Array();

//load xml file

var xmlData = "Audioimages.xml";//set xml data file

var xmlObj:XMLDocument;

init();//init call -> load config XML and create objects

function init()

{

    xmlObj = new XMLDocument();

    xmlObj.ignoreWhite = true;

    var loader:URLLoader = new URLLoader();

    var request:URLRequest = new URLRequest(xmlData);

    loader.load(request);

    loader.addEventListener("complete", onComplete);

    loader.addEventListener("ioError", onIOError);

}

function onIOError(event:Event):void

{

    trace("IOERROR (maybe XML file does not exit or have an incorrect name)");

}

function onComplete(event:Event):void

{

    var loader:URLLoader = event.target as URLLoader;

    if (loader != null)

    {

        xmlObj.parseXML(loader.data);

        xmlHandler();

    }

    else

    {

        trace("Loader is not a URLLoader!");

    }

}

function xmlHandler()

{

    addObjects();

    container.addEventListener(MouseEvent.MOUSE_OVER,startEngine,false,0, true);

}

function startEngine()

{

    container.removeEventListener(MouseEvent.MOUSE_OVER,startEngine);// cleanup;

    container.addEventListener("enterFrame",startMovie);

}

function addObjects()

{//add objects in the scene

    objects = xmlObj.firstChild.childNodes;

    numItems = objects.length;

    for (var i=0; i<numItems; i++)

    {

        var attr = objects.attributes;

        //Set the images

        thumbnails = attr.thumb;

        init_thb(i);

    }

}

function init_thb(i)

{

    if (useFixedImageSize == 1)

    {

        var source1 = "PhotoimgMc";//image mc linkage id from the library

    }

    else

    {

        source1 = "imgMc_01";

    }

    var sourceType1 = "library";

    var regName1 = "p" + i;//the registration name used in Flash

    var classDef = getDefinitionByName(source1);

    var menuItemMc = new classDef  ;

    menuItemMc.name = regName1;

    container.addChild(menuItemMc);

    var myThumbMc = container.getChildByName(regName1);

    myThumbMc.buttonMode = true;

    myThumbMc.useHandCursor = true;

    myThumbMc.mouseChildren = false;

    myThumbMc["info"] = objects;

    myThumbMc.y = (myThumbMc.height+spaceImg)*(i);

    myThumbMc.x = (bkg.width-myThumbMc.width)/containerPosition_y;

    myThumbMc.alpha = fade;

    myThumbMc.addEventListener("mouseOver",mouseRollOver);

    myThumbMc.addEventListener("mouseOut",mouseRollOut);

    myThumbMc.addEventListener("mouseDown",mousePress);

}

function mouseRollOver(e:MouseEvent)

{

    e.target.alpha = 1;

}

function mouseRollOut(e:MouseEvent)

{

    e.target.alpha = fade;

}

function mousePress(e:MouseEvent)

{

    //enter video code here

}

function startMovie(e:Event)

{

    this.container.y += Math.cos((-stage.mouseY/stage.stageHeight)*Math.PI)*15;

    if (this.container.y > 0)

    {

        this.container.y = 0;

    }

    if (-this.container.y>(this.container.height-stage.stageHeight))

    {

        this.container.y = -(this.container.height-stage.stageHeight);

    }

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 24, 2012 Mar 24, 2012

Copy link to clipboard

Copied

Nevermind. I figured it out. When I customized it to my code, it was asking for an event when it hit the startMovie code. I didn't realize the container.addEventListener was sending one but the function definition didn't call for one. It works now. I just added a generic evt:Event to the definition and now it works great. Thanks everyone. You guys helped a lot in figuring this out.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 25, 2012 Mar 25, 2012

Copy link to clipboard

Copied

Welcome

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 19, 2012 Apr 19, 2012

Copy link to clipboard

Copied

ok, so new problem, same code. I am using this code to create multiple scrolling menus, but have hit a snag. I have three menus, Photo, Animation, and Audio. When I hover over the Animations menu, it works great, except it cuts off the last image when it scrolls. The second issue is that when I hover from Animations to Audio, Animations continues to move. Is there a way to make it stop when I go between menues? I've changed the part that reads:

  if (useFixedImageSize == 1)

    {

        var source1 = "PhotoimgMc";//image mc linkage id from the library

    }

to read

  if (useFixedImageSize == 1)

    {

        var source1 = "AnimationimgMc";//image mc linkage id from the library

    }

and

  if (useFixedImageSize == 1)

    {

        var source1 = "AudioimgMc";//image mc linkage id from the library

    }

for the parts that they relate to. So the code for the Audio menu would read AudionimgMC and there is an object in the library with that class name. I'm sure I'm missing something but I'm not 100% what that is. I've been over the code as best as I can understand it but it's still throwing me off. The first menu I hover on still moves when I'm not on it. Is there an exit frame or something I can use to make it stop when I am not on the menu anymore? I think it has to do with enterframe code from my previous post, but I'm not sure about that. Any ideas?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 19, 2012 Apr 19, 2012

Copy link to clipboard

Copied

Sorry my time is short but beifly scanning, you cannot create a new "var source1" like you are trying. The linkage ID becomes a full "class".

Thus your instantiation should look like:

var source1:MovieClip = new PhotoimgMc();

or

var source1:MovieClip = new AnimationimgMc();

or

var source1:MovieClip = new AudioimgMc();

If the "type" of the symbol differs (like to Sprite, etc) then change MovieClip to be whatever type it is.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 19, 2012 Apr 19, 2012

Copy link to clipboard

Copied

Sinious,

Thank you for the quick reply. I tried your suggestion but it gave me the following error:

Symbol 'AnimationmovieClip', Layer 'Layer 1', Frame 1, Line 1211067: Implicit coercion of a value of type String to an unrelated type flash.display:MovieClip.
Symbol 'AnimationmovieClip', Layer 'Layer 1', Frame 1, Line 126

1067: Implicit coercion of a value of type flash.display:MovieClip to an unrelated type String.

I don't know what it means. I have objects in the library with a linkage named AnimationimgMc. It works if I leave it like it is. It just doesn't stop menus from moving when I go to another menu on the same page. Any ideas?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 19, 2012 Apr 19, 2012

Copy link to clipboard

Copied

Can you paste the relevant code on the frames that are erroring?

And if you don't want MovieClips (which play by default) to play, then add an actionscript layer to them and add the stop() command in a frame script so they don't auto-play. You'll need to play() them once you're ready though.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 19, 2012 Apr 19, 2012

Copy link to clipboard

Copied

I've uploaded the file to my FTP site. Please download it and let me know if you can help me out. I couldn't think of explaining it any easier to be honest. I'm new to AS3 and my explanations are horrible. Please let me know if you can help me out. Thank you.

http://www.anim8rs-ink.com/Index.fla.zip

Please let me know if this helps any. It's frame 3 on the main timeline.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 20, 2012 Apr 20, 2012

Copy link to clipboard

Copied

There's a missing XML on that page that apparently has image names in them. All I'm getting is your IOError from your XML error handler.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 20, 2012 Apr 20, 2012

Copy link to clipboard

Copied

My apologies. I forgot to include the XML and thumbnail files with it. I just uploaded them again. Same link. Please try again. Again, really sorry. I was in a little bit of a rush. Thank you again for the help sinious.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 20, 2012 Apr 20, 2012

Copy link to clipboard

Copied

At a quick glance it seems you're setting listeners over and over and over. Oddly in the 2 sliding image areas on left and right in services you remove an event listener so you know you can do that. But on the main frames you keep assigning the buttons (like Home, etc) over and over. This will result in adding a ton of listeners stacked up.

I added the listeners once on the second frame and removed the assignment from then on. I also moved some of the redundant import statements to frame 1. As long as you import anything on frame1 in a timeline, the rest of the timeline can use it.

The only errors I could see was due to you adding an onEnterFrame listener to those vertical sliding images but you never removed it. Once you go off the frame they kept firing off causing a spray of errors. I just adjusted it so on MOUSE_OUT it would remove the onEnterFrame and I don't get the errors anymore. I added a stopEngine() function that you can look at. I duplicated that for both of the sliders code.

This is just the index saved down to CS4, I don't know what version you use:

http://www.filehorde.com/o/Index_Fix_CS4.zip

Consider centralizing the code to external AS files and then importing those. It's a huge PITA to go into someones project who has code sprinkled all over frames hidden in clips. Some of your code is 100% identical in separate clips so if you change anything (like I did) I had to change the frame scripts in both areas.. You're making it hard on yourself.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 20, 2012 Apr 20, 2012

Copy link to clipboard

Copied

Sinious,

You are awesome. I'm actually still picking up AS3 as I go. I don't have any formal training with it. Also the code you saw I got from the internet to begin with. I was able to decipher a good amount of it, but there are things in there that I am not familar with. I really appreciate your help in this. I noticed that the scrolling isn't as smooth though. I can only assume that is from the MOUSE_OUT adjustment you spoke of. I am using CS5 by the way. I was wondering if there was a way for me to keep the smooth scrolling and use your implementation. I like the fix. It does make sense. One final question, if you don't mind. The "mousePress" function. I didn't write it. It was already in the code. The XML files have a URL attribute and I wanted to make that work for each press. Is there a way to get the URL attribute from the XML within flash? For example, as you have seen, when you are on the first image or either slider, and you click on it, can it play the video that is coded in the URL attribute of the XML file? Please let me know if that make sense. I tried a few ideas but they all result in either errors or nothing showing up. Thanks again.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 21, 2012 Apr 21, 2012

Copy link to clipboard

Copied

LATEST

All that you dream of and more can be accomplished. Just not off agency time. Play with it and any methods used that you're unfamiliar with please read up on. Cya Monday

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines