Quantcast
Channel: Adobe Community : All Content - Edge Animate
Viewing all articles
Browse latest Browse all 9897

Responsive Scaling to size of Stage Not Entire Window??

$
0
0

Ok so I've been out of it for several years... But I'm back.. Trying to tackle responsive design elements.

I have an animated header I created in Edge Animate 2015.0 (latest version from the cloud): http://www.frogwebbworks.com/Header-A.html

I have selected "Responsive Scaling"... looks great but it scales to the entire window not the Stage size... That's not what I want... and I'm not sure who would want that either???

Anyhow I want it to be responsive but I want the initial size to be the size of the Stage (640px x 240px).

Am I doing something wrong or is this result what is intended?????

 

 

I tried this: Create Scale-to-Fit Projects with Adobe Edge Animate | sarahjustine.com

The sample works great... just what I want.... but when I try to open the Edge file in Edge Animate....

I get this error:

Perhaps it's because it contains obsolete code like "_edgePreload.js"??

I tried adding the provided code (shown below)  in the "compositionReady" and it doesn't work either??? http://www.frogwebbworks.com/Header-B.html

 

var stageHeight = sym.$("Stage").height();

sym.$("Stage").css({
"transform-origin":"0 0",
"-ms-transform-origin":"0 0",
"-webkit-transform-origin":"0 0",
"-moz-transform-origin":"0 0",
"-o-transform-":"0 0"
});


function scaleStage() {
var stage = sym.$("Stage");
var parent = sym.$("Stage").parent();
var parentWidth = stage.parent().width();
var parentHeight = $(window).height();
var stageWidth = stage.width();
var stageHeight = stage.height();
var desiredWidth = Math.round(parentWidth * 1);
var desiredHeight = Math.round(parentHeight * 1);
var rescaleWidth = (desiredWidth / stageWidth);
var rescaleHeight = (desiredHeight / stageHeight);
var rescale = rescaleWidth;

if (stageHeight * rescale > desiredHeight)
rescale = rescaleHeight;



stage.css("transform", "scale(" + rescale + ")");
stage.css("-o-transform", "scale(" + rescale + ")");
stage.css("-ms-transform", "scale(" + rescale + ")");
stage.css("-webkit-transform", "scale(" + rescale + ")");
stage.css("-moz-transform", "scale(" + rescale + ")");
stage.css("-o-transform", "scale(" + rescale + ")");
parent.height(stageHeight * rescale);

}


$(window).on("resize", function(){
scaleStage();
});


$(document).ready(function(){
scaleStage();
});

Viewing all articles
Browse latest Browse all 9897

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>