Animate CC - Screen moves with mouse effect?

programming flash
1

Hello,

how can I create effect like this one in Adobe Animate CC? (HTML5)

Is there any tutorial for this?

2

mesta - in short, that isn’t really possible. The parallax effect needs both CSS as well as JavaScript. How comfortable are you with both?

:slight_smile:

3

I’m comfortable with CSS but not with JavaScript.

I just found this so it looks like it is possible :slight_smile:

4

Did the sample file help you out? The reason I mentioned what I did earlier is that Animate CC provides limited interactivity. It is great for placing objects on stage and animating them, but for a large chunk of what’s next, you’ll have to write your own JavaScript. If the sample doesn’t help you out, let me know - I can try to find some pointers to help you out :slight_smile:

5

Well - it didn’t help.

I found a way do do this by using this tutorial. The problem is my website is not responsive. The example site I mentioned above has a nice responsivness built in.

How do I add responsivness to my site?

6

Animate Commons has free extensions. a parallax, responsive and flexible layouts

http://animatecommons.com/

7

Hi there,
As this thread doesn’t seem much active and answer hasn’t come up yet, and as animatecommons isn’t up to date anymore (it won’t work in Animate CC 2018, sorry @somnamblstt), here is my bit :
I managed to use this for parallax on the X axis but I can’t seem to implement Y since I don’t have much knowledge of Animate CC coding syntax.

Here is the code, would someone be able to add Y parallax to it ?

// Animate Commons Custom Build
!function(t){if(!t.AnimateCommons){var e=t.AnimateCommons=function(t){this.context=t};e.prototype={getCanvasId:function(){return this.getCanvas().id},_addCanvasWrapper:function(){if(!this._getCanvasWrapper()){var t=document.createElement(“div”),e=this.getCanvas();t.className=“canvas-wrapper”,t.style.width=t.style.height=“100%”,t.style.overflow=“hidden”,t.style.position=“relative”,e.parentNode.insertBefore(t,e),t.appendChild(e)}},_getCanvasWrapper:function(){return-1!=this.getCanvas().parentNode.className.indexOf(“canvas-wrapper”)?this.getCanvas().parentNode:null},getParent:function(){return this.context.parent?n(this.context.parent):null},getAllParents:function(){for(var t=this.context.parent,e=;t;)e.push(t),t=t.parent;return e},getStage:function(){for(var t=this,e=this.getParent();e;)t=e,e=e.getParent();return t},getCanvas:function(){return this.getStage().context.canvas},getComposition:function(){return n.getComposition(this.context)},getGlobalScaleFactor:function(){for(var t=this.getAllParents(),e=this.context.scaleX,n=this.context.scaleY,i=0;i<t.length-1;i++)e*=t[i].scaleX,n*=t[i].scaleY;return{scaleX:e,scaleY:n}},enableFpsMeter:function(t){function e(t){a.begin(),o.call(this,t),a.end()}var n=t||1e3;if(!this.getComposition().get(“fpsStats”)){var i=function(){function t(t,e,n){return t=document.createElement(t),t.id=e,t.style.cssText=n,t}function e(e,n,i){var a=t(“div”,e,“padding:0 0 3px 3px;text-align:left;background:”+i),o=t(“div”,e+“Text”,“font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px;color:”+n);for(o.innerHTML=e.toUpperCase(),a.appendChild(o),e=t(“div”,e+“Graph”,“width:74px;height:30px;background:”+n),a.appendChild(e),n=0;74>n;n++)e.appendChild(t(“span”,“”,“width:1px;height:30px;float:left;opacity:0.9;background:”+i));return a}function i(t){for(var e=h.children,n=0;n<e.length;n++)e[n].style.display=n===t?“block”:“none”;c=t}function a(t,e){t.appendChild(t.firstChild).style.height=Math.min(30,30-30e)+“px”}var o=self.performance&&self.performance.now?self.performance.now.bind(performance):Date.now,s=o(),r=s,l=0,c=0,h=t(“div”,“stats”,“width:80px;opacity:0.9;cursor:pointer”);h.addEventListener(“mousedown”,function(t){t.preventDefault(),i(++c%h.children.length)},!1);var p=0,d=1/0,g=0,u=e(“fps”,“#0ff”,“#002”),f=u.children[0],v=u.children[1];h.appendChild(u);var m=0,x=1/0,C=0,u=e(“ms”,“#0f0”,“#020”),y=u.children[0],b=u.children[1];if(h.appendChild(u),self.performance&&self.performance.memory){var w=0,P=1/0,A=0,u=e(“mb”,“#f08”,“#201”),M=u.children[0],S=u.children[1];h.appendChild(u)}return i(c),{REVISION:14,domElement:h,setMode:i,begin:function(){s=o()},end:function(){var t=o();if(m=t-s,x=Math.min(x,m),C=Math.max(C,m),y.textContent=(0|m)+" MS (“+(0|x)+”-“+(0|C)+”)",a(b,m/200),l++,t>r+n&&(p=Math.round(1e3l/(t-r)),d=Math.min(d,p),g=Math.max(g,p),f.textContent=p+" FPS (“+d+”-“+g+”)“,a(v,p/100),r=t,l=0,void 0!==w)){var e=performance.memory.usedJSHeapSize,i=performance.memory.jsHeapSizeLimit;w=Math.round(9.54e-7e),P=Math.min(P,w),A=Math.max(A,w),M.textContent=w+" MB (“+P+”-“+A+”)",a(S,e/i)}return t},update:function(){s=this.end()}}};“object”==typeof module&&(module.exports=i);var a=new i;a.setMode(0),a.domElement.style.position=“absolute”,a.domElement.style.left=“0px”,a.domElement.style.top=“0px”,document.body.appendChild(a.domElement);var o=this.getComposition().stage.context.stage.handleEvent;this.getComposition().stage.context.stage.handleEvent=e.bind(this.getComposition().stage.context.stage),this.getComposition().set(“fpsStats”,!0)}},highDpi:function(){var t=this.getStage().context,e=this.getCanvas(),i=this.getComposition(),a=n.getDevicePixelRatio(),o=e.getAttribute(“width”),s=e.getAttribute(“height”);e.setAttribute(“width”,Math.round(oa)),e.setAttribute(“height”,Math.round(sa)),e.style.width=o+“px”,e.style.height=s+“px”,t.scaleX=t.scaleY=a,i.devicePixelRatio=a,i.scaleFactor=a},autoScale:function(e,i){function a(){var n=o._getCanvasWrapper(),a=t.getComputedStyle(n),s=a.width.replace(“px”,“”)/d,r=a.height.replace(“px”,“”)/g;p=Math.min(s,r),o.getComposition().scaleFactor=p,h.style.width=dp+“px”,h.style.height=gp+“px”,h.width=dpl,h.height=gpl,c.scaleX=c.scaleY=pl,c.update(),h.style.position=“absolute”,e.hcenter&&(h.style.left=“50%”,h.style[“margin-left”]=h.width/l/-2+“px”),e.vcenter&&(h.style.top=“50%”,h.style[“margin-top”]=h.height/l/-2+“px”),“function”==typeof i&&i(p)}var o=this;if(!this.getComposition().isAutoScale){!e&&(e={});var s={hcenter:!0,vcenter:!0,highDpi:!0};for(var r in e)s[r]=e[r];e=s;var l=e.highDpi?n.getDevicePixelRatio():1;document.getElementsByTagName(“html”)[0].style.height=“100%”,document.getElementsByTagName(“body”)[0].style.height=“100%”,this._addCanvasWrapper();var c=this.getStage().context,h=this.getCanvas(),p=1,d=h.width,g=h.height,u=!0;t.addEventListener(“resize”,function(){u&&setTimeout(function(){a(),u=!0},10),u&&setTimeout(function(){a(),u=!0},500),u=!1}),setTimeout(function(){a(),u=!0},10),this.getComposition().isAutoScale=!0}}};var n=t.AC=function(t){return new e(t)},i=function(t){this.id=t.id,this.canvas=t.canvas,this.stage=t.stage,this.isAutoScale=t.isAutoScale||!1,this.scaleFactor=t.scaleFactor||1,this.devicePixelRatio=t.devicePixelRatio||1,this.variables=t.variables||{},this.store={}};i.prototype.set=function(t,e){for(var n=t.split(”.“),i=this.store,a=0;a<n.length;a++){var o=n[a];a===n.length-1?i[o]=e:i=i[o]=i[o]?i[o]:{}}},i.prototype.get=function(t){for(var e=t.split(”."),n=this.store,i=0;i<e.length;i++){var a=e[i];n=“object”==typeof n?n[a]:n}return n},n._compositions={},n.getComposition=function(t){var e=n(t),a=e.getStage(),o=n._compositions[a.getCanvasId()];return o||(o=n._compositions[a.getCanvasId()]=new i({id:e.getCanvasId(),canvas:a.getCanvas(),stage:a})),o},n.isMobile=function(){return navigator.userAgent.match(/Android/i)||navigator.userAgent.match(/iPhone|iPad|iPod/i)||navigator.userAgent.match(/Opera Mini/i)||navigator.userAgent.match(/IEMobile/i)||!1},n.getDevicePixelRatio=function(){var e=1;return void 0!==t.screen.systemXDPI&&void 0!==t.screen.logicalXDPI&&t.screen.systemXDPI>t.screen.logicalXDPI?e=t.screen.systemXDPI/t.screen.logicalXDPI:void 0!==t.devicePixelRatio&&(e=t.devicePixelRatio),e=e>=1&&10>=e?e:1},n.applyDefaults=function(t,e){for(var n in t)e[n]=t[n];return e},n.destroyChild=function(t){t.removeAllChildren(),t.removeAllEventListeners(),t.parent&&t.parent.removeChild(t),t=null,delete t}}}(window);

// Auto scale and high DPI support
AC(this).autoScale();

var that = this,
content = this,
compAC = AC(this).getComposition();

// Cache initial values
var env = {
compWidth: this.nominalBounds.width,
compHeight: this.nominalBounds.height,
level0_initialX: content.level0.x,
level2_initialX: content.level2.x,
//selectedworx.com - implementing Y moves
//level0_initialY: content.level0.y,
//level2_initialY: content.level2.y,
//enough
scaleFactor: 1
};

function throttle(fn, threshhold, scope) {
threshhold || (threshhold = 250);
var last,
deferTimer;
return function () {
var context = scope || this;

var now = +new Date,
    args = arguments;
if (last && now < last + threshhold) {
  // hold on to it
  clearTimeout(deferTimer);
  deferTimer = setTimeout(function () {
    last = now;
    fn.apply(context, args);
  }, threshhold);
} else {
  last = now;
  fn.apply(context, args);
}

};
}

stage.on(“stagemousemove”, throttle( function(evt) {

var hOffset = (evt.stageX - env.compWidth/2) * 2;
// Tween layers with distanceFactor
createjs.Tween.get(content.level0, {override:true}).to({x: env.level0_initialX - (hOffset / 25) }, 1072, createjs.Ease.cubicOut);
createjs.Tween.get(content.level2, {override:true}).to({x: env.level2_initialX - (hOffset / 20) }, 1072, createjs.Ease.cubicOut);

},100));

Nowhere on the Internets can the solution be found… this would be very helpful to the community i reckon…

Thanks in advance for any bit of advice…