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
})
1 Correct answer
25
Replies
AdChoices