dcsimg
A Flash Developer Resource Site

Results 1 to 7 of 7

Thread: Using a flash button to activate a Javascript to change a DIV content

  1. #1
    Junior Member
    Join Date
    Feb 2008
    Posts
    10

    Using a flash button to activate a Javascript to change a DIV content

    Greetings

    Sorry for the long title, but I wanted you to know what you were in for. Actually I've seen similar topics but try as I might, I can't tweek the examples to work for me.

    Here is what I have. OK... still new with AS, but I have a Website were you change the content of a DIV with a link. You do this with Javascript:
    Code:
    function switchContent(obj) {
    
    		obj = (!obj) ? 'content1' : obj;
    
    		var contentDivs = document.getElementById('center').getElementsByTagName('div');
    		for (i=0; i<contentDivs.length; i++) {
    			if (contentDivs[i].id && contentDivs[i].id.indexOf('content') != -1) {
    				contentDivs[i].className = 'hide';
    			}
    		}
    		document.getElementById(obj).className = '';
    	
    	}
    Then I set the DIV's like so:

    Code:
    <div id="center">
      	<!--start content1 - home -->
        <div id="content1">
          Content for  id "content1" Goes Here    </div>
          <!--end content1 - home -->
          <!--start content2 - info -->
        <div id="content2" class="hide">
        Content for  id "content2" Goes Here    </div>
          <!--end content2 - info -->
          <!--start content3 - work -->
        <div id="content3" class="hide">Content for  id "content3" Goes Here</div>
          <!--end content3 - work -->
          <!--start content4 - contact -->
        <div id="content4" class="hide">Content for  id "content4" Goes Here</div>
          <!--end content4 - contact -->  
        <!--start bottom -->
        <div id="bottom"></div>
          <!--end bottom -->
      </div>
      <!--end content -->
    Now getting this to work with a basic link like so:

    Code:
    <a href="#" onClick="switchContent('content3'); return false;">link2</a>
    ...is no sweat, BUT when I try to place my custom Flash SWF button file in there, no dice.

    I've found a way to do this using ExternalInterface. However I'm unsure about the way to call it.

    If my Javascript is a a function called 'switchContent' saved in a file named 'switchContent.js' saved in a directory named 'Scripts' saved in a directory that contains the html file, what should the AS look like then?

    on (press) {
    import flash.external.ExternalInterface;
    ExternalInterface.call("switchContent", "center");
    }

    OR...

    on (press) {
    import flash.external.ExternalInterface;
    ExternalInterface.call("switchContent", "content");
    }

    btw, I've tried both and neither are working currently.

    OR... should I just put the javascript in the head tag?

    And am I right in putting the AS in the first frame of a actions layer on the main timeline of my movieclip button? HELP!!!

    Thanks in advance.

  2. #2
    Will moderate for beer
    Join Date
    Apr 2007
    Location
    Austin, TX
    Posts
    6,801
    The on(event) syntax is no longer present in as3. Even if it were, you have your import statements in the wrong place.

    try something like this in the script for the main movie.
    Code:
    import flash.external.ExternalInterface;
    
    movbutton.addEventListener(MouseEvent.MOUSE_DOWN, movClick);
    
    function movClick(event:MouseEvent = null):void{
      if (ExternalInterface.available){
        ExternalInterface.call("switchContent", "content2");
      }
    }
    The big gotcha with ExternalInterface that trips lots of people up is that it doesn't start working until the swf and html are actually on a server somewhere (testing it from local hard drive probably won't work).

  3. #3
    Junior Member
    Join Date
    Feb 2008
    Posts
    10

    Thanks for the suggestion

    D-oh! I should have known that. I've had that issue before testing locally.

    OK... like I said i'm new to AS3, so I should have guessed that the older examples wouldn't work in AS3.

    I tried what you suggested and got an error in Flash when I tested the clip:
    1120: Access of undefined property movbutton.

    Where and how should I define that?

    I still uploaded to my server and tested with no result.

  4. #4
    Will moderate for beer
    Join Date
    Apr 2007
    Location
    Austin, TX
    Posts
    6,801
    movbutton should be replaced with whatever the actual name of your button is. This assumes that the button is a child of the main movie, has an instancename, and you have "automatically declare stage instances" set.

    I may have had a few other errors in there since I didn't actually code up this example. Here's an example I actually did code up which shows ExternalInterface
    http://suckatmath.com/personal/xeyes.html

    That's a somewhat more advanced example as the javascript is injected through the flash, but the principles are the same.

  5. #5
    Junior Member
    Join Date
    Feb 2008
    Posts
    10
    ok... changed it, tried it, failed.

    However I didn't get an error on the flash this time.

    The buttons for the different DIVs are : home_btn (content1), info_btn (content2), work_btn (content3, and contact_btn (content4).

    Is it something with the null? The error on the webpage was less than helpful, but look if you want to. The "info" button it the only one I've tried the code on so far.

  6. #6
    Will moderate for beer
    Join Date
    Apr 2007
    Location
    Austin, TX
    Posts
    6,801
    That actually works fine for me. Clicking info changes the main content, and throws no errors.

    Firefox 2 windows xp, flashplayer 9.0.115

    What error did you see? and what was the null that you referred to?

    Since you have four different buttons, you'll probably want to consolidate your function to decide which content to open based on which button was clicked. You can do this with a dictionary or by setting a property on your buttons. Here's how it would work with a dictionary:

    Code:
    import flash.external.ExternalInterface;
    import flash.utils.Dictionary;
    
    var contentDic:Dictionary = new Dictionary();
    
    home_btn.addEventListener(MouseEvent.MOUSE_DOWN, navClick);
    contentDic[home_btn] = "content1";
    
    info_btn.addEventListener(MouseEvent.MOUSE_DOWN, navClick);
    contentDic[info_btn] = "content2";
    
    work_btn.addEventListener(MouseEvent.MOUSE_DOWN, navClick);
    contentDic[work_btn] = "content3";
    
    contact_btn.addEventListener(MouseEvent.MOUSE_DOWN, navClick);
    contentDic[contact_btn] = "content4";
    
    function navClick(event:MouseEvent):void{
      if (ExternalInterface.available){
        ExternalInterface.call("switchContent", contentDic[event.currentTarget]);
      }
    }

  7. #7
    Junior Member
    Join Date
    Feb 2008
    Posts
    10

    huh?

    What the....
    You're kidding?

    IE 7 Vista Home Premium (please tell me it isn't stupid vista. I am trying soooo hard not to be a hater)

    Not sure about the flash player but I have CS3 installed soooo....

    I'm stumped.

    Thanks for the tip about the dictionary. I haven't tried one before but this looks like a good start.

    OH... and the "null" was part of the page error. Line 1, Char 109, error 'null' is null (duh) or not an object, Code 0 ???
    Last edited by freshrod; 04-27-2008 at 09:57 PM.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center