title: Lack of output when converting to HTML 5 canvas in Flash CC
body: <p>so I've been using Flash to create an interactive graphic, even though most of the world now advises against flash. I'd done some previous experiments converting to HTML5 and seemed to work OK. </p>
  
  <p>I soon realised that actionscript on the main timeline gets commented out so managed to port all my actionscript to a class and have my movieclips load from the library.</p>
  
  <p>My project isn't complete but I got most of the functionality working and gave it a test. Nothing happened. I can see a lot of JS code and HTML but my movieclips are never loaded to the stage. Have I wasted a week of work?</p>
  
  <p>What does HTML5 canvas accept? I didn't think my code was overly complicated</p>
  
  <p>Here is my class anyway... (My .fla is just a few empty frames )</p>
  
  <pre><code>package {
  import flash.display.Stage;
  import flash.display.Sprite;
  import flash.display.MovieClip;
  import flash.events.Event;
  import flash.display.MovieClip;
  import flash.events.MouseEvent;
  
  
  
  public class App extends MovieClip {
  
      var debtcapital:Number;
      var mergers:Number;
      var equity:Number;
      var syndicated:Number;
      var globally:Number;
  
  
      var piesize:Number; 
  
      var wedge1:Number;
      var wedge2:Number;
      var wedge3:Number;
      var wedge4:Number;
  
  
  
  
  
  
  
  
      function App() {
          stop();
  
          var button:rightBtn = new rightBtn;
  
          this.addChild(button);
          button.x=390;
          button.y=90;
  
          var button2:leftBtn = new leftBtn;
  
          this.addChild(button2);
          button2.x=90;
          button2.y=90;
  
  
  
          button2.addEventListener(MouseEvent.CLICK, onClickPrevSlide);
  
      function onClickPrevSlide(event:MouseEvent):void{
      gotoAndStop(currentFrame-1);
      }
  
      button.addEventListener(MouseEvent.CLICK, onClickNextSlide);
  
      function onClickNextSlide(event:MouseEvent):void{
      gotoAndStop(currentFrame+1);
      }
  
          addEventListener(MouseEvent.CLICK, makePie);
  
      }
  
      public function makePie(e:Event):void {
  
          function valueToPercent($value:Number, $min:Number, $max:Number):Number {
          var myPercent:Number;
          var difference:Number = $max - $min;
          myPercent = (($value - $min) / difference)*360;
  
          return myPercent;
      }
  
      if(currentFrame == 1){
              debtcapital = 4131;
              mergers = 7620;
              equity = 6882;
              syndicated = 2728;
              globally = 21362;
          }
  
          if(currentFrame == 2){
              debtcapital = 6863;
              mergers = 11185;
              equity = 9925;
              syndicated = 3469;
              globally = 31442;
          }
  
          if(currentFrame == 3){
              debtcapital = 9739;
              mergers = 13344;
              equity = 10884;
              syndicated = 4930;
              globally = 38897;
          }
  
          if(currentFrame == 4){
              debtcapital = 6131;
              mergers = 4620;
              equity = 1882;
              syndicated = 7728;
              globally = 20362;
          }
  
      var firstwedge:Number = Math.round(valueToPercent(debtcapital, 0, globally));
      var secondwedge:Number = Math.round(valueToPercent(mergers, 0, globally));
      var thirdwedge:Number = Math.round(valueToPercent(equity, 0, globally));
      var fourthwedge:Number = Math.round(valueToPercent(syndicated, 0, globally));
  
      wedge1 = firstwedge;
      wedge2 = secondwedge;
      wedge3 = thirdwedge;
      wedge4 = fourthwedge;
  
          piesize = globally / 400;
  
  
          var wedge1start = -90
          var wedge1end = wedge1start + wedge1
          var wedge2end = wedge1end + wedge2
          var wedge3end = wedge2end + wedge3
          var wedge4end = wedge3end + wedge4
  
  
  
          var drawings:Sprite = new Sprite();         
  
          var coin:Coin = new Coin;
  
  
  
          this.graphics.clear();
          drawings.graphics.lineStyle(3, 0xFFFFFF);
          drawings.graphics.beginFill(0xFF0000, 0.2);
          this.drawSegment(drawings, stage.stageWidth/2, stage.stageHeight/2, piesize, wedge1start, wedge1end, 0x000000);
          this.drawSegment(drawings, stage.stageWidth/2, stage.stageHeight/2, piesize, wedge1end, wedge2end);
          this.drawSegment(drawings, stage.stageWidth/2, stage.stageHeight/2, piesize, wedge2end, wedge3end);
          this.drawSegment(drawings, stage.stageWidth/2, stage.stageHeight/2, piesize, wedge3end, wedge4end);
          this.addChild(drawings);
  
          drawings.graphics.endFill();
  
          this.addChild(coin);
          coin.x=stage.stageWidth/2;
          coin.y=stage.stageHeight/2;
  
          coin.scaleX = piesize / 140;
          coin.scaleY = piesize / 140;
          this.addChild(coin);
  
  
          this.swapChildren(drawings, coin); // swaps two objects
  
  
  
  
      }
  
  
  
      public function drawSegment(target:Sprite, x:Number, y:Number, r:Number, aStart:Number, aEnd:Number, color:uint=0x0, step:Number = 1):void {
              // More efficient to work in radians
              var degreesPerRadian:Number = Math.PI / 180;
              aStart *= degreesPerRadian;
              aEnd *= degreesPerRadian;
              step *= degreesPerRadian;
  
              // Draw the segment
              target.graphics.moveTo(x, y);
              for (var theta:Number = aStart; theta &lt; aEnd; theta += Math.min(step, aEnd - theta)) {
                  target.graphics.lineTo(x + r * Math.cos(theta), y + r * Math.sin(theta));
              }
              target.graphics.lineTo(x + r * Math.cos(aEnd), y + r * Math.sin(aEnd));
              target.graphics.lineTo(x, y);
      }
  }
  }
  </code></pre>
  
  <p>Thanks for any advice!!</p>