常連

Adobe Animate CC で後からフレームレートを変更した場合、1フレームあたりの表示時間が短くなるため、当然早送り再生されたようになってしまいます。

例えば、15FPSで作っていたものを後から60FPSに変更した際に、タイマーをベースとしてその間のフレーム間を引き延ばすようなことを後から行うことはできますでしょうか？

つまり、Adobe Animate CCで作ったアニメーションを、後から滑らかにすることはできますでしょうか？色々調べてみたのですが手段が見つからなかったため質問させていただきました。

よろしくお願いい致します。

Adobe Animate CC で後からフレームレートを変更したい

レスポンシブサイトを作っており質問です。
スマホでボタンを1度タップするとhoverが効いて２回目のタップでリンクへ飛ぶのですがそれは
@media (max-width: 767px) {
a:hover img {
opacity:1.0;
}
これで対応できたのですが、下にある内容でどうすれば１度のタップでリンクへ飛ばすことができるのでしょうか？
html
<a class="btn btn-white" href="shopnews.html">新着情報をもっと見る</a>

css
.btn {
position: relative;
z-index: 2;
margin-bottom: 20px;
border-radius: 0;
text-transform: uppercase;
font-size: 12px;
line-height: 12px;
padding: 15px 20px;
overflow: hidden;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}

.btn:after {
position: absolute;
z-index: -1;
top: 0;
left: 50%;
width: 0;
height: 100%;
opacity: 0;
content: "";
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: all 0.2s;
transition: all 0.2s;
}

.btn:hover:after {
width: 101%; 
opacity: 1; 
}

.btn:hover {
background-color: transparent; 
}

.btn:focus {
outline: 0;
}

.btn i {
display: inline-block;
line-height: 43px;
text-align: center; 
border-left: 1px solid #fff;
padding-left: 20px;
margin: -15px 0 -15px 20px;
}
.btn-white {
border: 1px solid #777;
background-color: transparent;
}
.btn-white a {
color: #777 !important;
}

.btn-white i {
border-left-color: #777;
}

.btn-white:after {
background-color: #777;
}

.btn-white:hover {
border-color: #777;
background-color: transparent; 
color: #fff;
}

.btn-white:hover i {
border-left-color: #fff;
}

ご教授お願いします。

スマホでリンクボタンが2回タップしないと飛ばない

### 前提・実現したいこと

AnimateCCで作成したcanvasアニメーションを1枚のHTMLに複数配置しています。
これを対象のcanvasが画面内に入ったタイミングでそれぞれスタートさせたいです。
配置されるcanvasの数や位置はページによって異なりますが、
できれば配置されるcanvas数に関係なく一括でコントロールできるようにしたいです。

### 発生している問題・エラーメッセージ

1枚のHTMLに複数のcanvasを配置することはできたのですが、
全てロードのタイミングで同時にスタートしてしまいます。

### 該当のソースコード

```HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>sample</title>

<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="assetsratio_pc.js"></script>
<script src="assetsratio_sp.js"></script>
<script src="measuresratio.js"></script>
<script src="top.js"></script>
<script src="common.js"></script>

</head>
<body>

		<div id="animation_container0">
			<canvas id="canvas0" width="260" height="260"></canvas>
			<div id="dom_overlay_container0"></div>
		</div>
		
		
		<div style="height: 1000px">他のコンテンツ</div>
		
		<div id="animation_container1">
			<canvas id="canvas1" width="844" height="460"></canvas>
			<div id="dom_overlay_container1"></div>
		</div>
		
		<div style="height: 1000px">他のコンテンツ</div>
		
		<div id="animation_container2">
			<canvas id="canvas2" width="345" height="397"></canvas>
			<div id="dom_overlay_container2"></div>
		</div>
	
</body>
</html>
```
▼top.js
```JavaScript
    
var stage;
var canvas0, stage0, exportRoot0, anim_container0, dom_overlay_container0, fnStartAnimation0;
var canvas1, stage1, exportRoot1, anim_container1, dom_overlay_container1, fnStartAnimation1;
var canvas2, stage2, exportRoot2, anim_container2, dom_overlay_container2, fnStartAnimation2;
 
function init0() {
	canvas0 = document.getElementById("canvas0");
	anim_container0 = document.getElementById("animation_container0");
	dom_overlay_container0 = document.getElementById("dom_overlay_container0");
	var comp=AdobeAn.getComposition("F0BA06869C574E0F86857DBBA02CE764");
	var lib0=comp.getLibrary();
	handleComplete0({},comp);
}

function init1() {
	canvas1 = document.getElementById("canvas1");
	anim_container1 = document.getElementById("animation_container1");
	dom_overlay_container1 = document.getElementById("dom_overlay_container1");
	var comp1=AdobeAn.getComposition("3F7DA3D3BA86453D9104575D4B4ABC7E");
	var lib1=comp1.getLibrary();
	handleComplete1({},comp1);
}

function init2() {
	canvas2 = document.getElementById("canvas2");
	anim_container2 = document.getElementById("animation_container2");
	dom_overlay_container2 = document.getElementById("dom_overlay_container2");
	var comp2=AdobeAn.getComposition("32FC0171A22445EC84C8E9BEBB26ED91");
	var lib2=comp2.getLibrary();
	handleComplete2({},comp2);
}

function handleComplete0(evt,comp) {
	//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
	var lib0=comp.getLibrary();
	var ss0=comp.getSpriteSheet();
	exportRoot0 = new lib0.measuresratio();
	stage = new lib0.Stage(canvas0);	
	stage.addChild(exportRoot0);
	//Registers the "tick" event listener.
	fnStartAnimation0 = function() {
		createjs.Ticker.setFPS(lib0.properties.fps);
		createjs.Ticker.addEventListener("tick", stage);
	}	    
	//Code to support hidpi screens and responsive scaling.
	//AdobeAn.makeResponsive(false,'both',false,1,[canvas0,anim_container0,dom_overlay_container0]);	
	AdobeAn.compositionLoaded(lib0.properties.id);
	fnStartAnimation0();
}

function handleComplete1(evt,comp) {
	//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
	var lib1=comp.getLibrary();
	var ss1=comp.getSpriteSheet();
	exportRoot1 = new lib1.assetsratio_pc();
	stage1 = new lib1.Stage(canvas1);	
	stage1.addChild(exportRoot1);
	//Registers the "tick" event listener.
	fnStartAnimation1 = function() {
		createjs.Ticker.setFPS(lib1.properties.fps);
		createjs.Ticker.addEventListener("tick", stage1);
	}	    
	//Code to support hidpi screens anwd responsive scaling.
	//AdobeAn.makeResponsive(false,'both',false,1,[canvas1,anim_container1,dom_overlay_container1]);	
	AdobeAn.compositionLoaded(lib1.properties.id);
	fnStartAnimation1();
}

function handleComplete2(evt,comp) {
	//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
	var lib2=comp.getLibrary();
	var ss2=comp.getSpriteSheet();
	exportRoot2 = new lib2.assetsratio_sp();
	stage2 = new lib2.Stage(canvas2);	
	stage2.addChild(exportRoot2);
	//Registers the "tick" event listener.
	fnStartAnimation2 = function() {
		createjs.Ticker.setFPS(lib2.properties.fps);
		createjs.Ticker.addEventListener("tick", stage2);
	}	    
	//Code to support hidpi screens anwd responsive scaling.
	//AdobeAn.makeResponsive(false,'both',false,1,[canvas2,anim_container2,dom_overlay_container2]);	
	AdobeAn.compositionLoaded(lib2.properties.id);
	fnStartAnimation2();
} 
```
▼common.js
```JavaScript
$(function(){
	scrollAnimation();
	var $win = $(window);
	$win.on("load", function() {
		init0();
		init1();
		init2();
	});
});

/* ==========================================================
!Scroll Animation
========================================================== */
function scrollAnimation(){
	var AnimTrigger = $('[data-timing="scroll"]'); //アニメーショントリガー
	var windowHeight = $(window).height(); //ウインドウの高さ

	// ロードした際に可視範囲に入っていたら実行される
	$(window).on('load',function(){
		AnimTrigger.each(function(){
			var imgPos = $(this).offset().top; //「AnimTrigger」の位置

			if (imgPos < windowHeight){
				$(this).addClass("aniOn");
			}
		});
	});

	// スクロールした際に「AnimTrigger」ごとに、以下に記述する内容が実行される
	$(window).scroll(function (){
		var scroll = $(window).scrollTop(); //スクロールした量

		AnimTrigger.each(function(){
			var imgPos = $(this).offset().top; //「AnimTrigger」の位置

			//アニメーションする条件＝「画面の下から1/5まできた時点でアニメーション」
			//if (scroll > imgPos - windowHeight + windowHeight/5){
				if (scroll > imgPos - windowHeight/2){
				$(this).addClass("aniOn");
			}
		});
	});
}
```

### 試したこと

canvasの他にcss animationで特定要素が画面に入ったらアニメーション効果をつけて出現する
ギミックを実装しており、そのために特定要素が画面に入ったら特定のclassを付与する関数`scrollAnimation()`は用意してあります。
その関数の中でclass付与するところに単純に init0(); init1(); init2(); を入れてみたりもしましたが、
loadのタイミングの方では発火せず、scrollのところではスクロール中何度も呼び出されてしまって大変なことになってしまいました。。


### 補足情報（FW/ツールのバージョンなど）

<script src="assetsratio_pc.js"></script>
<script src="assetsratio_sp.js"></script>
<script src="measuresratio.js"></script>

こちらはAnimateCCが書き出したcanvasアニメーション本体のJSをそのまま読み込んでいるだけになります。


AnimateCC、CreateJS、Canvasともにこれまで全く経験ありません。今回始めて扱うものになりますので
初歩的なことが分かってないと思いますが、どなたかご教授いただけますと助かります。。。

複数のcanvasアニメーションを画面内に入ったタイミングでスタートさせたい

お世話になります。ググっても出てこないため質問させてください。
SVGアニメーションを作成したく、After effects → Bodymovinでjsonファイルまで出来上がりました。
調べるとlottieを使ってこのjsonファイルをSVGアニメーションとしてHTMLへ表示させるみたいなのですが、
jsonからではなく、SVGファイル(xxx.svg)としてSVGアニメーションを表示させたいです。

目的はノーコードサイト作成ツール(Studio)を使用しているため、HTML、CSS、Javascriptを入力することができません。

どうにかしてjsonファイルからSVGファイルに変換する方法はないでしょうか？
jsonファイルはアップロードできず、
SVGファイルならアップロードができるので、それでアニメーションも動くようにしたいです。

何卒よろしくお願いいたします。

After effects → BodymovinでできたjsonファイルをSVGファイルに変換する方法

はじめまして。色々と試しましたが解決しませんでしたのでこちらに書き込みさせていただきます。解決方法がわかる方がいらっしゃいましたら、ご教示の程よろしくお願いいたします。
### 前提・実現したいこと
・AnimateCCからパブリッシュしたHTML5canvasです。
・仕様としては、ページに複数のボタンがあり、マウスオーバーでバルーンの説明が出て、クリックするとページ遷移するというものです。
・タッチデバイスの場合は一度タッチしてバルーンが表示され、表示されている状態であれば遷移するという仕組みです。

### 発生している問題・エラーメッセージ
・IE11でjabascriptが正常に動作しません。
・IE11以外はほとんどのブラウザで動作に問題なし。（Windows-Edge、chrome、firefox／Mac-safari、iPadOS-safari）
・マウスオーバーで表示されるはずのものが初めから全て表示されていて、さらにリンクが効かないという状態です。
・マウスオーバーでポインターは指マークになるのでボタンとしての認識はしている様子です。
・IE11のコンソールエラーは特になし

### 該当のソースコード

```javascript
そのままでは長すぎてアップできませんでした。
```
```html
<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>test4</title>

<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="test4.js"></script>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
	canvas = document.getElementById("canvas");
	anim_container = document.getElementById("animation_container");
	dom_overlay_container = document.getElementById("dom_overlay_container");
	var comp=AdobeAn.getComposition("5FDE7BC209A410479D9DAFAC7D0A4B75");
	var lib=comp.getLibrary();
	var loader = new createjs.LoadQueue(false);
	loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});
	loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});
	var lib=comp.getLibrary();
	loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt, comp) {
	var img=comp.getImages();	
	if (evt && (evt.item.type == "image")) { img[evt.item.id] = evt.result; }	
}
function handleComplete(evt,comp) {
	//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
	var lib=comp.getLibrary();
	var ss=comp.getSpriteSheet();
	var queue = evt.target;
	var ssMetadata = lib.ssMetadata;
	for(i=0; i<ssMetadata.length; i++) {
		ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
	}
	exportRoot = new lib.test0625();
	stage = new lib.Stage(canvas);
	stage.enableMouseOver();	
	//Registers the "tick" event listener.
	fnStartAnimation = function() {
		stage.addChild(exportRoot);
		createjs.Ticker.framerate = lib.properties.fps;
		createjs.Ticker.addEventListener("tick", stage);
	}	    
	//Code to support hidpi screens and responsive scaling.
	AdobeAn.makeResponsive(false,'both',false,1,[canvas,anim_container,dom_overlay_container]);	
	AdobeAn.compositionLoaded(lib.properties.id);
	fnStartAnimation();
}
</script>

</head>
<body onload="init();" style="margin:0px;">
	<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1024px; height:768px">
		<canvas id="canvas" width="1024" height="768" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
		<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1024px; height:768px; position: absolute; left: 0px; top: 0px; display: block;">
		</div>
	</div>
</body>
</html>
```



### 試したこと

・IE11がjavascript有効になっているかどうか
　→デフォルトで有効になっている。
・「’」が「｀」になっていないかなどを確認　→特になし
・ユーザーエージェントでEdgeを指定　→同じ結果
・IE11がHtml5canvas対応ブラウザかどうか。→IE9より対応している
・IE11に対応していないjavascriptの仕様などを確認。
→手書き部分では使用していないのですが、Animateが自動的に書き出している部分で使用している可能性はあります。

https://teratail.com/questions/186126?link=qa_related_pc
こちらを参考にメタタグを入れてみましたが変化なしでした。

### 補足情報（FW/ツールのバージョンなど）
Windows10
問題の出ているInternet explorer11のバージョン
11.900.18362.0

Adobe Animate バージョン20.03

IE11でjavascriptが正常に動作しません。

### 実現したいこと

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-04-28/dc0f7cc7-b4bb-4511-b220-57d988cd4fbc.jpeg)

添付のように、2枚の画像が中央に寄っていくスライドを実装したいです。
以下、完成系のイメージです。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-05-08/ca0de835-5950-4fec-82e1-2440aa27b226.jpeg)

### 前提

スライドはswiperを使用する予定です。
（スライド自体は問題なく実装できます。）

画像を中央に寄せる動きは、「transform:translateX」を用いて実装を行おうとおもいましたが、
「transform:translateX」だと、画像ごと移動され、左右に空白ができてしまいます。

「transform:scale」も合わせて使うと左右の余白は解消されますが、
画像も拡大されてしまうので、使用はNGでおねがいしたいです。


### 該当のソースコード

```HTML
		<div class="mv">
			<h1><img src="main_ttl.png"  width="" height="" alt=""></h1>
			<div class="swiper">
				<ul class="swiper-wrapper">
					<li class="swiper-slide">
						<div class="slide right"><img src="img01.jpg" alt=""></div>
						<div class="slide left"><img src="img02.jpg" alt=""></div>
					</li>
					<li class="swiper-slide">
						<div class="slide right"><img src="img03.jpg" alt=""></div>
						<div class="slide left"><img src="img04.jpg" alt=""></div>
					</li>

				</ul>
			</div>
		</div>
```
```css
.mv .swiper-slide {
  display: flex;
}

.mv .slide {
  object-fit: cover;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.mv .slide img {
  -webkit-transition: 7s 1s ease-out;
  transition: 7s 1s ease-out;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  max-width: none;
}

.mv .swiper-slide[class*=-active] .right img {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-transform: translateX(150px);
  transform: translateX(150px);
}

.mv .swiper-slide[class*=-active] .left img {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-transform: translateX(-150px);
  transform: translateX(-150px);
}

```
```js
const mySwiper = new Swiper('.mv .swiper', {
  effect: 'fade',
  fadeEffect: {
    crossFade: true,
  },
  loop: true,
  loopAdditionalSlides: 1,
  speed: 2000,
  autoplay: {
    delay: 8000,
    disableOnInteraction: false,
    waitForTransition: false,
  },
  followFinger: false,
});

```

2枚の画像が中央に寄っていくスライダーの実装方法

### 実現したいこと

Adobe Animate CCのHTML5 Canvasでインタラクティブな作品を制作しています。
メニュー画面となる画面の各ボタンをムービークリップで作っており、マウスオーバーしたときに特定のムービークリップシンボルを再生するようにしたいです。

### 発生している問題・エラーメッセージ

メインタイムラインの25フレーム目（Actions:25）に以下のように書いてみたのですが機能していないように見えます。コードスニペットにある「マウスオーバーイベント」と「ムービークリップを再生」を組み合わせただけなのですが、サンプルコードであるアラートは機能しましたがそれ以外のコードはプレビュー時に反応していないように思います。エラーは出ていません。同じ要領でクリックイベントを作成したときは機能しましたが、クリックには別の機能をつけたいのです。


### 該当のソースコード

```js
this.stop();


/* マウスオーバーイベント*/
var frequency = 3;
stage.enableMouseOver(frequency);
this.BTodekake.addEventListener("mouseover", fl_MouseOverHandler_4);

function fl_MouseOverHandler_4()
{
	// カスタムコードを開始
	// このコード例では、出力パネルに "マウスオーバー" という用語が表示されます。
	//alert("マウスオーバー");
	this.BTodekake.play();
	// カスタムコードを終了
}

```

### 補足情報（FW/ツールのバージョンなど）

Adobe Animate CC　var.21.0.1
HTML5 Canvas

マウスオーバーイベントでムービークリップを再生したい

お世話になっております。

基本的な事が分からないので頓珍漢な事でしたら申し訳ございません。

FLASHの内容を変更したいと思っております。

今現在FLASHの編集は
AnimateCCを利用するとの事なのでダウンロードし
編集したいflaファイルをAnimateに持って行った所
```
ActionScript1.0はこのバージョンのAnimateではサポートされていません。
このドキュメントはActionScript3.0としてパブリッシュするよう設定されます。
また、シンボルまたはコンポーネントのインスタンスに付加されていたActionScriptコードが削除されました。
パブリッシュする前に、必ずActionScript1.0のすべてのコンテンツ（コード、コンポーネントなど）を
ActionScript3.0に変換してください。そうしないと、コンテンツはコンパイルされません。
```
と警告が表示されてしまいました。

それでAnimateCC上でActionScriptを編集したいと思っているのですが
どうやって編集するのでしょうか？

またActionScript1.0を3.0へ変換する良いやり方などございましたら
ご教授頂けないでしょうか？

お忙しいところ大変申し訳ないのですが
上記お問い合わせいたします。