Flash & Math Moving Clouds

Herrow :smiley:

I’m trying to use this tut from Flash & Math generating realistic moving clouds the two layer effect:

http://www.flashandmath.com/intermediate/cloudsfast/

Here is the test site:

http://dracvsfrank.com/test

I want the clouds to be moving transparent above the image. I also want the clouds to stretch the length of the image 1024x300. The problem is that the clouds don’t generate when I remove the code for the background in the .fla file. See attached file and code below.

import com.flashandmath.dg.GUI.MovingClouds;

var posX:Number=50;
var posY:Number=20;

var clouds1:MovingClouds = new MovingClouds(1024,300,2,3,false);
clouds1.x = posX;
clouds1.y = posY;
clouds1.alpha = 0.4;

var clouds2:MovingClouds = new MovingClouds(1024,300,1,1,false);
clouds2.x = posX;
clouds2.y = posY;
clouds2.alpha = 1;

////when I try to remove this to have transparent bg the clouds do not render////

var blueBackground:Shape = new Shape();
blueBackground.graphics.beginFill(0x000000);
blueBackground.graphics.drawRect(0,0,1024,300);
blueBackground.graphics.endFill();
blueBackground.x = posX;
blueBackground.y = posY;
blueBackground.alpha = 1;

this.addChild(blueBackground);

this.addChild(clouds2);
this.addChild(clouds1);

Below is the HTML source code.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml” lang=“en” xml:lang=“en”>
<head>
<title>Drac VS Frank</title>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<link rel=“stylesheet” type=“text/css” href=“DracVSFrank.css”>
</head>
<body>
<div id=“flashContent”>
<object classid=“clsid:d27cdb6e-ae6d-11cf-96b8-444553540000” width=“1024” height=“300” id=“layeredclouds” align=“middle”>
<param name=“movie” value=“layeredclouds.swf” />
<param name=“quality” value=“high” />
<param name=“bgcolor” value="#ffffff" />
<param name=“play” value=“true” />
<param name=“loop” value=“true” />
<param name=“wmode” value=“transparent” />
<param name=“scale” value=“showall” />
<param name=“menu” value=“true” />

            &lt;param name="devicefont" value="false" /&gt;
            &lt;param name="salign" value="" /&gt;
            &lt;param name="allowScriptAccess" value="sameDomain" /&gt;
            &lt;!--[if !IE]&gt;--&gt;
            &lt;object type="application/x-shockwave-flash" data="layeredclouds.swf" width="1024" height="300"&gt;
                &lt;param name="movie" value="layeredclouds.swf" /&gt;
                &lt;param name="quality" value="high" /&gt;
                &lt;param name="bgcolor" value="#ffffff" /&gt;
                &lt;param name="play" value="true" /&gt;

                &lt;param name="loop" value="true" /&gt;
                &lt;param name="wmode" value="transparent" /&gt;
                &lt;param name="scale" value="showall" /&gt;
                &lt;param name="menu" value="true" /&gt;
                &lt;param name="devicefont" value="false" /&gt;
                &lt;param name="salign" value="" /&gt;
                &lt;param name="allowScriptAccess" value="sameDomain" /&gt;
            &lt;!--&lt;![endif]--&gt;
                &lt;a href="[http://www.adobe.com/go/getflash](http://www.kirupa.com/forum/view-source:http://www.adobe.com/go/getflash)"&gt;

                    &lt;img src="[http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif](http://www.kirupa.com/forum/view-source:http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif)" alt="Get Adobe Flash player" /&gt;
                &lt;/a&gt;
            &lt;!--[if !IE]&gt;--&gt;
            &lt;/object&gt;
            &lt;!--&lt;![endif]--&gt;
        &lt;/object&gt;
    &lt;/div&gt;
&lt;/body&gt;

</html>

Any advice will be appreciated. Thanks!

:frankenstein: