Animate CC Masking in the Actions Panel?

Okay had a breakthrough on this in case anyone either encounters same problem or is interested!

As previously mentioned I just want to be able to call a mask from the stage to the javascript I have in the actions panel. 

However, annoyingly when I masked on the timeline, the javascript could no longer call the symbol (in my case a movieClip but button or graphic did the same).

The breakthrough today. I managed to work that Animate was outputting the mask in the javascript it exported on publish.  However it was using it's own variable instead of using the symbol name.  And it was creating a variable called 'mask' to do this.

Example here:

// maskturn (mask)

var mask = new cjs.Shape();

mask._off = true;

mask.graphics.p("AjjF8QgtgcgognQiBiCAAi3QAAgoAHgmQAWiFBkhlQCCiBC2AAQC3AACBCBQBlBlAWCFQAHAmAAAoQAAC3iCCCQgoAngtAcQhlA+h+AAQh9AAhmg+g");

mask.setTransform(375.9,218.1);

So for every instant of the symbol I wanted to call in my JS code in actions I needed to call 'mask' not the name I had defined for it. For the record in the above code 'maskturn' was the name of the layer containing 'lineSymbol' which was the mask.

Anyway long story short, the following code fixed it.  And if you need more than on mask on the timeline, Animate CC defines the first one it encounters (higher on timeline) as mask, and then mask_1, mask_2, etc.

var pageWidth = this.bookPage.nominalBounds.width;

var pageLeft = this.bookPage.x;

var pageRight = this.bookPage.x + pageWidth;

var pageHeight = this.bookPage.nominalBounds.height;

var pageTop = this.bookPage.y;

var pageBottom = this.bookPage.y + pageHeight;

//no longer needed var lineSymbol = this.line

var dragger = this.dragger

var bookPage = this.bookPage

var bookPage2 = this.bookPage2

dragger.on("pressmove", function (evt) {

//this means that the mouse position is responsive to the size of the canvas which scales according to the size of the browser window or if viewed on iPad/iPhone

  var mousePosition = stage.globalToLocal(evt.stageX, evt.stageY);

  evt.currentTarget.x = mousePosition.x

  evt.currentTarget.y = mousePosition.y

//this makes x-coord of the line equal to that of the mouse

  mask.x=evt.currentTarget.x

//this says if the line is dragged beyond the page edge, it stays at the page edge and if the line is dragged beyond the page spine, it stays at the page spine

  if (mask.x > pageRight) {

  mask.x = pageRight;

  } else if (mask.x < pageLeft) {

  mask.x = pageLeft;

  }

//this says if the line is dragged above the page top, it stays at the top edge and if the line is dragged below the page bottom, it stays at the bottom

  if (evt.currentTarget.y > pageBottom) {

  evt.currentTarget.y = pageBottom;

  } else if (evt.currentTarget.y < pageTop) {

  evt.currentTarget.y = pageTop;

  }

  mask.x=evt.currentTarget.x

  mask.rotation = 45 * ((mask.x - pageLeft) / pageWidth);

  stage.update(); //much smoother because it refreshes the screen on pixel movement not frame

  })