Topic: wmode for transparency not working

Hi

I'm trying to set the background transparency for the SWF object using wmode in the HTML as lots have people have suggested here. Unfortunately, if I include this line in the HTML, the object fails to display at all. Can't see anything. Nada. Just the page I'm trying to embed it in. I have the pro SWF object in place and the code I am using is

var fo = new FlashObject("viewer.swf", "viewer", "100%", "100%", "8", "#333333");   

        fo.addVariable("xmlURL", "BandW_gallery.xml");
        fo.addParam("wmode", "transparent");
        fo.write("flashcontent");

Would really appreciate some ideas
Ta
Kaiser

Re: wmode for transparency not working

Please post the URL for your gallery.

Mike Richards
SimpleViewer Support Team.

Re: wmode for transparency not working

Mike

First of all, sorry - I realise I have posted this in the wrong forum. I'm actually using Postcard Viewer not Simple.

The URL is www.bigbluebird.co.uk

There are several galleries here. The B&W gallery has the wmode line added and no photos display - just the background graphic of the website. All others have the wmode line commented out and work OK.

While we're at it (as I see you'r a moderator!) Do you happen to have a modification to make the pics zoom to maximum extent rather than a set value? I found a post regarding this from 2006 but the instructions don't make sense (to me) - I think some of the action scripts have changed since then maybe? Anyway, I'm plouhing through the code trying to work it out but Friday was the first time I looked at any .as!

thanks
Kaiser

Last edited by kaiser (2009-09-28 15:51:07)

Re: wmode for transparency not working

If you turn on the fo.addParam("wmode", "transparent"); in the other galleries do they also stop working?


Do you happen to have a modification to make the pics zoom to maximum extent rather than a set value?

Have you tried zoomOutToFit?


XML Parsing Error: not well-formed
Location: http://www.bigbluebird.co.uk/BandW_gallery.xml
Line Number 21, Column 22:    <caption>Sugarloaf & Guanabarra Bay from Corcovado</caption>

----------------------------^

you cant you an ampersand in the XML unless you add it as follow.

<caption><![CDATA[Sugarloaf &amp; Guanabarra Bay from Corcovado]]></caption>
Mike Richards
SimpleViewer Support Team.

Re: wmode for transparency not working

Mike

The same problem happens for all galleries. I have uncommented the line in the Rio de Janeiro gallery now published and both this and the B&W gallery fail to load properly. I also edited the xml file for the B&W gallery and took out the offending '&'.

It occurred to me that perhaps the wmode line is making the whole thing transparent, rather than just the background. Is that possible?

Regarding the zoom thing, sorry wasn't too clear on that. What I actually want is a ZoomInToFit so that each photo, when clicked, zooms to the full extent of the stage.

Thanks
K.

Re: wmode for transparency not working

I may have found one of the issues you have 2 <body> and </head> tags.

This is how your page looks now:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!--  Created with the CoffeeCup HTML Editor 2008  -->
<!--           http://www.coffeecup.com/           -->
<!--         Brewed on 15/10/2008 20:49:01         -->
<head>
  <title>BigBlueBird.co.uk</title>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
</head>
<body vlink="#800080" alink="#0000ff" link="#0000ff" bgcolor="#2d2d2d"><!-- Beginning of Client Side Image Map -->
<img style="Z-INDEX: 100; POSITION: absolute" height="667" alt="" src="MainGraphic_BandW.jpg" width="1000" usemap="#BandWMap" border="0">
<map name="BandWMap">
  <area name="Rio" shape="RECT" coords="43,636,166,663" href="Rio.html"  alt="" title="">

  <area name="NewEngland" shape="RECT" coords="225,636,336,661" href="NewEngland.html"  alt="" title="">
  <area name="Birds" shape="RECT" coords="404,637,455,661" href="Birds.html"  alt="" title="">
  <area name="Galapagos" shape="RECT" coords="550,637,639,663" href="Galapagos.html"  alt="" title="">
  <area name="BandW" shape="RECT" coords="726,637,778,662" href="BandW.html"  alt="" title="">
  <area name="About" shape="RECT" coords="876,636,942,662" href="About.html"  alt="" title="">
</map>

<!-- End of Client Side Image Map -->

<script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">    
    /* hide from ie on mac \*/
    html {
        height: 100%;
        overflow: hidden;
    }

    #flashcontent {
        height:505px;
        width:1015px;
        margin:0px;
        border:0px;
        padding:20px;
        position:absolute;
        top:147px;
        left:0px;

    }
    /* end hide */

    body {
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: #363636;
        color:#ffffff;
        font-family:sans-serif;
        font-size:40;
    }
    a {
        color:#cccccc;
    }

</style>
</head>
<body>
    <div id="flashcontent">PostcardViewer requires JavaScript and the Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash here.</a> </div>    
    <script type="text/javascript">
        var fo = new FlashObject("viewer.swf", "viewer", "100%", "100%", "8", "#363636");    

        //Optional Configuration
        //fo.addVariable("langOpenImage", "Open Image in New Window");
        //fo.addVariable("langAbout", "About");
        fo.addVariable("xmlURL", "BandW_gallery.xml");
        fo.addParam("wmode", "transparent");

        fo.write("flashcontent");    
    </script>    

</body>
</html>

This is how it should look:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!--  Created with the CoffeeCup HTML Editor 2008  -->
<!--           http://www.coffeecup.com/           -->
<!--         Brewed on 15/10/2008 20:49:01         -->
<head>
  <title>BigBlueBird.co.uk</title>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
  <script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">    
    /* hide from ie on mac \*/
    html {
        height: 100%;
        overflow: hidden;
    }

    #flashcontent {
        height:505px;
        width:1015px;
        margin:0px;
        border:0px;
        padding:20px;
        position:absolute;
        top:147px;
        left:0px;

    }
    /* end hide */

    body {
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: #363636;
        color:#ffffff;
        font-family:sans-serif;
        font-size:40;
    }
    a {
        color:#cccccc;
    }

</style>
</head>
<body vlink="#800080" alink="#0000ff" link="#0000ff" bgcolor="#2d2d2d"><!-- Beginning of Client Side Image Map -->
<img style="Z-INDEX: 100; POSITION: absolute" height="667" alt="" src="MainGraphic_BandW.jpg" width="1000" usemap="#BandWMap" border="0">
<map name="BandWMap">
  <area name="Rio" shape="RECT" coords="43,636,166,663" href="Rio.html"  alt="" title="">

  <area name="NewEngland" shape="RECT" coords="225,636,336,661" href="NewEngland.html"  alt="" title="">
  <area name="Birds" shape="RECT" coords="404,637,455,661" href="Birds.html"  alt="" title="">
  <area name="Galapagos" shape="RECT" coords="550,637,639,663" href="Galapagos.html"  alt="" title="">
  <area name="BandW" shape="RECT" coords="726,637,778,662" href="BandW.html"  alt="" title="">
  <area name="About" shape="RECT" coords="876,636,942,662" href="About.html"  alt="" title="">
</map>

<!-- End of Client Side Image Map -->

    <div id="flashcontent">PostcardViewer requires JavaScript and the Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash here.</a> </div>    
    <script type="text/javascript">
        var fo = new FlashObject("viewer.swf", "viewer", "100%", "100%", "8", "#363636");    

        //Optional Configuration
        //fo.addVariable("langOpenImage", "Open Image in New Window");
        //fo.addVariable("langAbout", "About");
        fo.addVariable("xmlURL", "BandW_gallery.xml");
        fo.addParam("wmode", "transparent");

        fo.write("flashcontent");    
    </script>    

</body>
</html>
Mike Richards
SimpleViewer Support Team.

Re: wmode for transparency not working

Mike

As you might have gathered I'm new at this! I tidied up the code and it didn't solve the problem but now I understand a little more so thanks. I spent some more time playing around and found the wmode line was actually resulting in the flash object being placed behind my background image. I had no success fixing this by setting the Z-Index of the flash (probably because I dodn't do it right) but I did manage to solve the problem by setting the Z-Index of the background image to a negative number. So that's wrapped up and thanks for your help....

Now, regarding the Zoom In probelm. I think I have nearly worked this out. Pretty sure I need to make some mods to the ViewArea.as file and I can figure out the maths but I'm having trouble working out how to access the following parameters:

Image width
Image height
Stage width
Stage height

Do I need to pull these in from anothe .as and how do I do that? Any hints?

Re: wmode for transparency not working

Glad you got the page working.

Off the top of my head I'm not sure the image size is stored in PostcardViewer. I believe just the grid size is used which is square and defaults to 800px. You can open each doc and run a search for width or height to see what comes up. You can get the Stage width and height with Stage.width and Stage.height.

Mike Richards
SimpleViewer Support Team.

Re: wmode for transparency not working

OK. Is it possible to configure postcardviewer to take a ZoomInPerc value for each image? Perhaps it is possible to make it read that variable from the image caption line rather than the main header in gallery.xml?

Last edited by kaiser (2009-09-30 17:29:53)

Re: wmode for transparency not working

you could add your own width and height tags to the xml if that's how you want to do it. Thinking about it mLoader_mc._width and mLoader_mc._height should be the image size, you could trace them to double check.

Mike Richards
SimpleViewer Support Team.