Hi All,
I am trying to play around with the demo file provided in the 'Quick Start: GSAP and Adobe Animate CC' article;
https://greensock.com/animatecc-quickstart
All I am trying to do is successfully add an additional symbol into the timeline and apply any animation to it in the js file.
Here's what I am doing:
1. Create new layer - 'Layer 1'
2. Create new symbol (a red rectangle) - 'test'
3. Select symbol ('test') and drag onto stage with 'Layer 1' selected.
4. Duplicate existing .from in tl and change symbol name to be 'test'
5. Watch in despair as ad display blank
I cannot for the life of me get this to work without receiving the error 'Uncaught Cannot tween a null target.' along with a blank ad. It seems that the symbol isn't being referenced in the js file.
Here is the original js he uses;
//set scope activation object
var root = this,
tl;
//prevent children of mc from dispatching mouse events
root.cta_mc.mouseChildren = false;
root.cta_mc.on("mouseover", function(){this.gotoAndPlay(1);});
root.cta_mc.on("mouseout", function(){this.gotoAndStop(0);});
root.logo_mc.on("mouseover", function(){
TweenMax.to(this, 1.25, {scaleX:1.05, scaleY:1.05, ease:Elastic.easeOut});
});
root.logo_mc.on("mouseout", function(){
TweenMax.to(this, 1.25, {scaleX:1, scaleY:1, ease:Elastic.easeOut});
});
//gsap timeline
tl = new TimelineMax();
tl.from(root.headline_mc, 1, {y:"500", ease:Back.easeOut});
tl.from(root.tagline_mc, .5, {y:"510", ease:Back.easeOut}, "-=.5");
tl.from(root.logo_mc, .75, {scaleX:0, scaleY:0, alpha:0, ease:Back.easeOut}, "-=.25");
tl.to(root.cta_mc, .75, {scaleX:.85, scaleY:.85, repeat:-1, yoyo:true, repeatDelay:0.25, ease:Expo.easeInOut});
I am just adding a tl.from above the first tl.from (See below);
//set scope activation object
var root = this,
tl;
//prevent children of mc from dispatching mouse events
root.cta_mc.mouseChildren = false;
root.cta_mc.on("mouseover", function(){this.gotoAndPlay(1);});
root.cta_mc.on("mouseout", function(){this.gotoAndStop(0);});
root.logo_mc.on("mouseover", function(){
TweenMax.to(this, 1.25, {scaleX:1.05, scaleY:1.05, ease:Elastic.easeOut});
});
root.logo_mc.on("mouseout", function(){
TweenMax.to(this, 1.25, {scaleX:1, scaleY:1, ease:Elastic.easeOut});
});
//gsap timeline
tl = new TimelineMax();
//Added new symbol ref in line below
tl.from(root.test, 1, {y:"500", ease:Back.easeOut});
tl.from(root.headline_mc, 1, {y:"500", ease:Back.easeOut});
tl.from(root.tagline_mc, .5, {y:"510", ease:Back.easeOut}, "-=.5");
tl.from(root.logo_mc, .75, {scaleX:0, scaleY:0, alpha:0, ease:Back.easeOut}, "-=.25");
tl.to(root.cta_mc, .75, {scaleX:.85, scaleY:.85, repeat:-1, yoyo:true, repeatDelay:0.25, ease:Expo.easeInOut});
Can anyone point me in the right direction, or point out to me what I am doing wrong?
Thanks!!
Tom