画面の解像度に基づいてEdgeアニメーションのサイズを変更しようとしています。1080p以上の高解像度画面用に高解像度のものを作成しましたが、プロジェクトはかなり複雑なので、すべてをやり直すことなく、Edgeとは異なるサイズでアニメーションをエクスポートする方法があるかどうか疑問に思いました。小さい画面の場合は数回。
6 に答える
親に基づいてスケーリングするのに役立つこれも今ありますbScaleToParent
:
AdobeEdge.loadComposition('MyComp', 'EDGE-985368975', {
scaleToFit: "both",
centerStage: "horizontal",
minW: "0",
maxW: "undefined",
width: "1540px",
height: "3004px",
bScaleToParent: true
}, {dom: [ ]}, {dom: [ ]});
これは役に立ちました: https://forums.adobe.com/message/6939673#6939673
これを解決するために、 CSS3transform:scale
をメディアクエリと組み合わせて使用します。
私は DIV またはフレームでそれを実行しようとし、CSS ズーム オプションを使用します。ここにいくつかのヒントがあります
これは素晴らしい解決策であることがわかりました。Resize トリガーをステージに追加します。このコードを内部に貼り付けます。
if ($(window).width() < 960) {
if ($(window).width() < 600) {
sym.stop("layout400");
} else {
sym.stop("layout600");
}
} else {
sym.stop("layout960");
}
次に、タイムラインに、layout960、layout600、layout400 という名前の 3 つの異なるラベルを作成します。これで、毎回 Edge がリロードされるのを回避し、Edge Docks をスキップできます (少なくともレスポンシブの場合)。
hi res ファイルを開き、すべてを div にグループ化し、その div を目的の幅と高さにサイズ変更します。画像ファイルがある場合は、適切なサイズで保存して、品質の悪いブラウザのサイズ変更を回避してください。各バージョンを保存して、サーバー上の別の場所にアップロードします。
次に、これをドキュメントのヘッドに入れます。
<script>
if ( (960 < screen.width < 1024) && (640 < screen.height < 768) ) {
window.location = 'www.YOURURL.com/ipad';
}
else if ( (screen.width < 960) && (screen.height < 640) ) {
window.location = 'www.YOURURL.com/iphone';
}
</script>
これは、iPad または iPhone の画面解像度に基づいてリダイレクトされますが、好きなように調整できます。