Animate CC 變形浮動視窗與重複變形

發佈於Animate CC 網頁動畫與JS互動

更新於 2025/02/04發佈於 2020/02/05閱讀時間約 2 分鐘

在變形操作時若需要固定變形數值，就需要在變形浮動視窗上才能輸入固定變形數值，且可以搭配『重製選取範圍並變形』按鈕，進行多次的重複變形。

1.重複縮放

繪製矩形框(一般矩形工具繪製請群組)，選取並至【變形】控制板上(視窗>變形)按下限制鎖定按鈕(等寬高)，再輸入欲放大的寬度值，並直接按下變形控制版右下角的【重製選取範圍並變形】按鈕，即可複製出新的放大內容。

raw-image

繼續按下變形控制版右下角的【重製選取範圍並變形】按鈕，就可以繼續重複縮放複製。

2.重複原地旋轉複製

繪製橢圓框(一般橢圓工具繪製請群組)，選取並至【變形】控制板上輸入欲旋轉的角度值，並直接按下變形控制版右下角的【重製選取範圍並變形】按鈕，即可複製出新的旋轉內容。

raw-image

繼續按下變形控制版右下角的【重製選取範圍並變形】按鈕，就可以繼續重複旋轉複製。

3.改變旋轉中心重複旋轉

繪製橢圓框(一般橢圓工具繪製請群組)，使用自由變形工具直接更改變形中心，再至【變形】控制板上輸入欲旋轉的角度值，並直接按下變形控制版右下角的【重製選取範圍並變形】按鈕，即可複製出新的旋轉內容。

raw-image

繼續按下變形控制版右下角的【重製選取範圍並變形】按鈕，就可以繼續重複旋轉複製。

相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果

哩老師的沙龍Animate CC 網頁動畫與JS互動動畫基礎

留言

留言分享你的想法！

哩老師的沙龍

29會員

129內容數

多媒體設計的專業能力養成過程，除了有效率學習軟體之外，更重要的是各個軟體間的整合應用! Photoshop、Illustrator、Dreamweaver、Animate、CSS、Bootstrap響應式網頁等，相關的整合應用有機會皆會與大家分享喔~

哩老師的沙龍的其他內容

2020/02/05

Animate CC 動畫類型

1. 基本四大類型 AnimateCC的基礎動畫可分為基本四大類型，逐格動畫、形狀補間動畫、傳統(移動)補間動畫、(新的)移動補間動畫，全都是要成為 Animate CC動畫得心應手的必備動畫基礎。 (1)逐格動畫　　　製作方式:依序在要設定內容的時間點上插入關鍵影格，設定更改內容即可。 (2)

2020/02/05

Animate CC 動畫類型

1. 基本四大類型 AnimateCC的基礎動畫可分為基本四大類型，逐格動畫、形狀補間動畫、傳統(移動)補間動畫、(新的)移動補間動畫，全都是要成為 Animate CC動畫得心應手的必備動畫基礎。 (1)逐格動畫　　　製作方式:依序在要設定內容的時間點上插入關鍵影格，設定更改內容即可。 (2)

2020/02/05

Animate CC 時間軸與各種影格

要構成動畫的二大元素『時間』與『動畫內容』，在Animate中都是仰賴時間軸控制版，動畫內容即是以圖層來構成，而動畫時間的控制就得仰賴時間軸上的『影格』，來進行動畫設計製作與記錄。 1.時間軸 Adobe Animate CC 中的「時間軸」會隨著時間的經過，在圖層與影格中組織並控制文件內容。就像影

2020/02/05

Animate CC 時間軸與各種影格

要構成動畫的二大元素『時間』與『動畫內容』，在Animate中都是仰賴時間軸控制版，動畫內容即是以圖層來構成，而動畫時間的控制就得仰賴時間軸上的『影格』，來進行動畫設計製作與記錄。 1.時間軸 Adobe Animate CC 中的「時間軸」會隨著時間的經過，在圖層與影格中組織並控制文件內容。就像影

2020/02/05

Animate CC 設計漸層文字動畫素材

建立文字打散後的漸層編輯應用，設定製作出文字倒影與陰影素材，進而隨後表現其動畫效果。 STEP1. 在深色背景上建立白色文字並打散二次成圖像，各向上、下複製出另二份文字圖像共三份。首先選取第二份文字，使用油漆桶工具為第二份文字填入黑白線性漸層(請確認使用油漆桶工具於文字上點一下倒入整體漸層)，

2020/02/05

Animate CC 設計漸層文字動畫素材

建立文字打散後的漸層編輯應用，設定製作出文字倒影與陰影素材，進而隨後表現其動畫效果。 STEP1. 在深色背景上建立白色文字並打散二次成圖像，各向上、下複製出另二份文字圖像共三份。首先選取第二份文字，使用油漆桶工具為第二份文字填入黑白線性漸層(請確認使用油漆桶工具於文字上點一下倒入整體漸層)，

你可能也想看

蝦皮開箱｜TOMICA 吉伊卡哇烏薩奇兔兔小車

TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空，一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮，突然發現幾家商場都又開始重新上架，價格也都回到正常水準，估計是官方又再補了一批貨，想都沒想就立刻下單！同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷！

#吉伊卡哇#開箱#蝦皮分潤計畫

2025/05/13

蝦皮開箱｜TOMICA 吉伊卡哇烏薩奇兔兔小車

TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空，一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮，突然發現幾家商場都又開始重新上架，價格也都回到正常水準，估計是官方又再補了一批貨，想都沒想就立刻下單！同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷！

#吉伊卡哇#開箱#蝦皮分潤計畫

2025/05/13

阿千看世界

2025年綜合所得稅繳稅教學：線上申報、信用卡回饋、拆單攻略！

每年4月、5月都是最多稅要繳的月份，當然大部份的人都是有機會繳到「綜合所得稅」，只是相當相當多人還不知道，原來繳給政府的稅！可以透過一些有活動的銀行信用卡或電子支付來繳，從繳費中賺一點點小確幸！就是賺個１%~2%大家也是很開心的，因為你們把沒回饋變成有回饋，就是用卡的最高境界所得稅線上申報

#2025所得稅#綜合所得稅#繳稅有回饋

2025/05/03

阿千看世界

2025年綜合所得稅繳稅教學：線上申報、信用卡回饋、拆單攻略！

每年4月、5月都是最多稅要繳的月份，當然大部份的人都是有機會繳到「綜合所得稅」，只是相當相當多人還不知道，原來繳給政府的稅！可以透過一些有活動的銀行信用卡或電子支付來繳，從繳費中賺一點點小確幸！就是賺個１%~2%大家也是很開心的，因為你們把沒回饋變成有回饋，就是用卡的最高境界所得稅線上申報

#2025所得稅#綜合所得稅#繳稅有回饋

2025/05/03

哩老師的沙龍

Illustrator CC 旋轉再次變形構圖

STEP1. 首先繪製中央黃色刻度，請選取黃色長方形，使用旋轉工具，按住『Alt』移動旋轉中心至參考線中心上，於跳出的選轉設定面版上設定旋轉角度：-12.5，按下『拷貝』，再繼續按下『Ctrl』+『D』旋轉複製出所有刻度線。 STEP2. 選取左側白色長方形，使用旋轉工具，按住『Alt』移動旋

#工具與應用

2020/02/20

哩老師的沙龍

Illustrator CC 旋轉再次變形構圖

STEP1. 首先繪製中央黃色刻度，請選取黃色長方形，使用旋轉工具，按住『Alt』移動旋轉中心至參考線中心上，於跳出的選轉設定面版上設定旋轉角度：-12.5，按下『拷貝』，再繼續按下『Ctrl』+『D』旋轉複製出所有刻度線。 STEP2. 選取左側白色長方形，使用旋轉工具，按住『Alt』移動旋

#工具與應用

2020/02/20

哩老師的沙龍

Animate CC 控制動態網頁畫面切換

利用影片片段安排要控制的動畫內容，以及各個設定互動控制的按鈕元件，再搭配正確的互動控制程式碼片段，即可完成具動畫效果的畫面切換內容。 Step 1. 場景左側由遮色片控制顯示範圍的所有頁面元件實體名稱為【all_mc】，另外五個按鈕元件實體名稱依序為【b1_btn ~

#javaScript互動

2020/02/15

哩老師的沙龍

Animate CC 控制動態網頁畫面切換

利用影片片段安排要控制的動畫內容，以及各個設定互動控制的按鈕元件，再搭配正確的互動控制程式碼片段，即可完成具動畫效果的畫面切換內容。 Step 1. 場景左側由遮色片控制顯示範圍的所有頁面元件實體名稱為【all_mc】，另外五個按鈕元件實體名稱依序為【b1_btn ~

#javaScript互動

2020/02/15

哩老師的沙龍

Animate CC 按鈕與動畫互動切換

目標動畫效果:應用影片片段元件與傳統補間動畫，以及多個影片片段元件的組合，包括遮色片動畫技巧，最後結合按鈕元件的使用與停止動作行為，完成互動按鈕的動態效果。使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔內場景上各個動畫素材均已各自轉換為

#javaScript互動

2020/02/15

哩老師的沙龍

Animate CC 按鈕與動畫互動切換

目標動畫效果:應用影片片段元件與傳統補間動畫，以及多個影片片段元件的組合，包括遮色片動畫技巧，最後結合按鈕元件的使用與停止動作行為，完成互動按鈕的動態效果。使用動畫技巧:影片片段元件、傳統補間動畫、遮色片動畫。 Step1. 範例檔內場景上各個動畫素材均已各自轉換為

#javaScript互動

2020/02/15

哩老師的沙龍

Animate CC 按鈕元件

在Animate CC 是以HTML5+Canvas的格式發佈成網頁檔動畫與互動控制時，其中互動控制是以JavaScript架構來達成(非ActionScript)，而可以接受JavaScript控制的元件有【影片片段元件】與【按鈕元件】，二者差別在於【按鈕元件】有預設

#javaScript互動

2020/02/15

哩老師的沙龍

Animate CC 按鈕元件

在Animate CC 是以HTML5+Canvas的格式發佈成網頁檔動畫與互動控制時，其中互動控制是以JavaScript架構來達成(非ActionScript)，而可以接受JavaScript控制的元件有【影片片段元件】與【按鈕元件】，二者差別在於【按鈕元件】有預設

#javaScript互動

2020/02/15

哩老師的沙龍

Animate CC 畫線與色塊變形繪圖動畫

【檢視範例】【下載範例】應用形狀補間動畫的物件變形特點，再搭配遮色片功能，不需要藉助任何的元件與濾鏡效果，即可完美演繹目標內容的動態呈現。目標動畫效果:應用形狀補間動畫完成畫線條動畫，以及搭配遮色片呈現內容出現的效果，並細膩設定物件變形與時間點控制，達成繪圖動畫的目地。使用動畫技巧:形狀補間

#遮色片動畫

2020/02/07

哩老師的沙龍

Animate CC 畫線與色塊變形繪圖動畫

【檢視範例】【下載範例】應用形狀補間動畫的物件變形特點，再搭配遮色片功能，不需要藉助任何的元件與濾鏡效果，即可完美演繹目標內容的動態呈現。目標動畫效果:應用形狀補間動畫完成畫線條動畫，以及搭配遮色片呈現內容出現的效果，並細膩設定物件變形與時間點控制，達成繪圖動畫的目地。使用動畫技巧:形狀補間

#遮色片動畫

2020/02/07

哩老師的沙龍

Animate CC 動畫類型

1. 基本四大類型 AnimateCC的基礎動畫可分為基本四大類型，逐格動畫、形狀補間動畫、傳統(移動)補間動畫、(新的)移動補間動畫，全都是要成為 Animate CC動畫得心應手的必備動畫基礎。 (1)逐格動畫　　　製作方式:依序在要設定內容的時間點上插入關鍵影格，設定更改內容即可。 (2)

#AnimateCC動畫類型#動畫基礎

2020/02/05

哩老師的沙龍

Animate CC 動畫類型

1. 基本四大類型 AnimateCC的基礎動畫可分為基本四大類型，逐格動畫、形狀補間動畫、傳統(移動)補間動畫、(新的)移動補間動畫，全都是要成為 Animate CC動畫得心應手的必備動畫基礎。 (1)逐格動畫　　　製作方式:依序在要設定內容的時間點上插入關鍵影格，設定更改內容即可。 (2)

#AnimateCC動畫類型#動畫基礎

2020/02/05

哩老師的沙龍

Animate CC 變形浮動視窗與重複變形

在變形操作時若需要固定變形數值，就需要在變形浮動視窗上才能輸入固定變形數值，且可以搭配『重製選取範圍並變形』按鈕，進行多次的重複變形。 1.重複縮放繪製矩形框(一般矩形工具繪製請群組)，選取並至【變形】控制板上(視窗>變形)按下限制鎖定按鈕(等寬高)，再輸入欲放大的寬度值，並直接按下變形控制版右下

2020/02/05

哩老師的沙龍

Animate CC 變形浮動視窗與重複變形

在變形操作時若需要固定變形數值，就需要在變形浮動視窗上才能輸入固定變形數值，且可以搭配『重製選取範圍並變形』按鈕，進行多次的重複變形。 1.重複縮放繪製矩形框(一般矩形工具繪製請群組)，選取並至【變形】控制板上(視窗>變形)按下限制鎖定按鈕(等寬高)，再輸入欲放大的寬度值，並直接按下變形控制版右下

2020/02/05

哩老師的沙龍

Animate CC繪製八等分圓餅圖動畫素材

STEP1. 開啟空白網頁格式新檔，檔案尺寸800X800，依序繪製600X600一般正圓(非基本橢圓)並個別群組(CTRL+G)，繼續繪製300X300、筆畫粗細20正圓圈並個別群組(繪製時避免與大圓重疊)，最後依序繪製水平、垂直、2個45度角等四個筆畫粗細20線段(繪製時按住SHIFT)，同樣

2020/02/05

哩老師的沙龍

Animate CC繪製八等分圓餅圖動畫素材

STEP1. 開啟空白網頁格式新檔，檔案尺寸800X800，依序繪製600X600一般正圓(非基本橢圓)並個別群組(CTRL+G)，繼續繪製300X300、筆畫粗細20正圓圈並個別群組(繪製時避免與大圓重疊)，最後依序繪製水平、垂直、2個45度角等四個筆畫粗細20線段(繪製時按住SHIFT)，同樣

2020/02/05

哩老師的沙龍

Animate CC繪圖與物件重疊編輯

無群組或是非基本矩形、非基本橢圓等繪圖物件，在物件重疊時隨即自動進行圖案間編輯處理，包括填色與外框筆畫間均會互相作用。 1.填色圖案之間相加當繪製彼此重疊且無筆畫的填色相同形狀時，重疊的形狀將自動合併在一起。 2. 填色圖案之間上減下當您繪製彼此重疊無筆畫的不同填色形狀時，最上層的形狀會截掉一

2020/02/04

哩老師的沙龍

Animate CC繪圖與物件重疊編輯

無群組或是非基本矩形、非基本橢圓等繪圖物件，在物件重疊時隨即自動進行圖案間編輯處理，包括填色與外框筆畫間均會互相作用。 1.填色圖案之間相加當繪製彼此重疊且無筆畫的填色相同形狀時，重疊的形狀將自動合併在一起。 2. 填色圖案之間上減下當您繪製彼此重疊無筆畫的不同填色形狀時，最上層的形狀會截掉一

2020/02/04

哩老師的沙龍

Animate CC環境設定與開啟網頁動畫新檔

1.設定環境第一次開啟Animate cc新版本後，預設畫面為深色配色，對於深色介面，可以執行【編輯 > 偏好設定】，設定使用者介面。 2.開啟網頁動畫新檔開新檔案請由開始畫面上選取【網頁】分類，所製作出來的動畫格式才是HTML5 Canvas+javascript的網頁格式，也可以執行[ 檔

2020/02/04

哩老師的沙龍

Animate CC環境設定與開啟網頁動畫新檔

1.設定環境第一次開啟Animate cc新版本後，預設畫面為深色配色，對於深色介面，可以執行【編輯 > 偏好設定】，設定使用者介面。 2.開啟網頁動畫新檔開新檔案請由開始畫面上選取【網頁】分類，所製作出來的動畫格式才是HTML5 Canvas+javascript的網頁格式，也可以執行[ 檔

2020/02/04

追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News