# Animate CC - Screen moves with mouse effect?

**URL:** <https://forum.kirupa.com/t/animate-cc-screen-moves-with-mouse-effect/635401>\
**Category:** flash\
**Created:** [October 12, 2016, 1:08pm UTC](https://forum.kirupa.com/t/animate-cc-screen-moves-with-mouse-effect/635401 "2016-10-12T13:08:58Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![mesta](https://avatars.discourse-cdn.com/v4/letter/m/a698b9/32.png) [@mesta](https://forum.kirupa.com/u/mesta)\
**Post date:** [October 12, 2016, 1:08pm UTC](https://forum.kirupa.com/t/animate-cc-screen-moves-with-mouse-effect/635401/1 "2016-10-12T13:08:58Z")

</div>

Hello,

how can I create effect [like this one](http://www.oxtilo.pl/) in Adobe Animate CC? (HTML5)

Is there any tutorial for this?

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [October 12, 2016, 5:23pm UTC](https://forum.kirupa.com/t/animate-cc-screen-moves-with-mouse-effect/635401/2 "2016-10-12T17:23:43Z")

</div>

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

🙂

---

<div class="post-metadata">

**Author:** ![mesta](https://avatars.discourse-cdn.com/v4/letter/m/a698b9/32.png) [@mesta](https://forum.kirupa.com/u/mesta)\
**Post date:** [October 13, 2016, 6:05am UTC](https://forum.kirupa.com/t/animate-cc-screen-moves-with-mouse-effect/635401/3 "2016-10-13T06:05:40Z")

</div>

I’m comfortable with CSS but not with JavaScript.

I just found [this](http://www.tourdeanimate.com/sample/parallax-scene-red-riding-hood) so it looks like it is possible 🙂

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [October 13, 2016, 10:35pm UTC](https://forum.kirupa.com/t/animate-cc-screen-moves-with-mouse-effect/635401/4 "2016-10-13T22:35:47Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![mesta](https://avatars.discourse-cdn.com/v4/letter/m/a698b9/32.png) [@mesta](https://forum.kirupa.com/u/mesta)\
**Post date:** [October 14, 2016, 6:11am UTC](https://forum.kirupa.com/t/animate-cc-screen-moves-with-mouse-effect/635401/5 "2016-10-14T06:11:18Z")

</div>

Well - it didn’t help.

I found a way do do this by using [this tutorial](http://www.jqueryscript.net/animation/Mouse-aware-Parallax-Effect-with-jQuery-and-TweenMax-Mouse-Parallax.html). The problem is [my website](http://jdc.mesta2015.beep.pl/) is not responsive. The example site I mentioned above has a nice responsivness built in.

How do I add responsivness to my site?

---

<div class="post-metadata">

**Author:** ![somnamblstt](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/somnamblstt/32/7288_2.png) [@somnamblstt](https://forum.kirupa.com/u/somnamblstt)\
**Post date:** [December 14, 2016, 9:16pm UTC](https://forum.kirupa.com/t/animate-cc-screen-moves-with-mouse-effect/635401/6 "2016-12-14T21:16:35Z")

</div>

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

[http://animatecommons.com/](http://animatecommons.com/)

---

<div class="post-metadata">

**Author:** ![J-H\_A](https://avatars.discourse-cdn.com/v4/letter/j/58f4c7/32.png) [@J-H\_A](https://forum.kirupa.com/u/J-H_A)\
**Post date:** [March 30, 2019, 11:46am UTC](https://forum.kirupa.com/t/animate-cc-screen-moves-with-mouse-effect/635401/7 "2019-03-30T11:46:05Z")

</div>

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](http://www.tourdeanimate.com/sample/parallax-scene-red-riding-hood) 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-30_e)+“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(1e3_l/(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-7_e),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(o_a)),e.setAttribute(“height”,Math.round(s_a)),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=d_p+“px”,h.style.height=g_p+“px”,h.width=d_p_l,h.height=g_p_l,c.scaleX=c.scaleY=p_l,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](https://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…