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();
});
