Tiểu luận phát triển ứng dụng web GIỚI THIỆU ADOBE EDGE ANIMATE

B n có th download mi n phí Adobe Edge t ạo nội dung ển cảnh ễn phí Adobe Edge từ ừ Adobe Creative Cloud ho c qua đ a ch ặp ị trí theo đơn vị phần trăm ỉnh Easing http://html.adobe.com/e

M c l c ục lục ục lục

I Gi i thi u: ới thiệu: ệu: 3

1 Adobe Edge Animate là gì? 3

2 Adobe Edge Animate hi u qu trên nhi u n n t ng ệu: ả trên nhiều nền tảng ều nền tảng ều nền tảng ả trên nhiều nền tảng 3

3 Adobe Edge Animate đã qua giai đo n th nghi m ạn thử nghiệm ử nghiệm ệu: 3

II Giao di n ệu: 3

1 Màn hình kh i đ ng ởi động ộng 3

2 Màn hình chính 4

III M t vài ví d : ộng ục lục 8

1 Ví d 1: Nh ng thao tác c b n ục lục ững thao tác cơ bản ơ bản ả trên nhiều nền tảng 8

2 Ví d 2: Ch nh các thu c tính c a đ i t ục lục ỉnh các thuộc tính của đối tượng ộng ủa đối tượng ối tượng ượng ng 9

a T o n i dungạo nội dung ội dung 9

b Thêm chữ 9

c Importing Graphics 9

d T ch c các Elementsổ chức các Elements ức các Elements 10

3 Ví d 3: Hi u ng b ng keyframe ục lục ệu: ứng bằng keyframe ằng keyframe 10

a T o Keyframeạo nội dung 10

b Thêm hi u ng chuy n c nhệu ứng chuyển cảnh ức các Elements ển cảnh ảnh 10

c Đi u ch nh Easingều chỉnh Easing ỉnh Easing 11

d Ch nh hi u ng cho cái bóngỉnh Easing ệu ứng chuyển cảnh ức các Elements 11

e Tái s d ng Keyframeử dụng Keyframe ụng Keyframe 11

f Tái s d ng Transitionử dụng Keyframe ụng Keyframe 12

4 Ví d 4: T o hi u ng nhanh h n v i Pin ục lục ạn thử nghiệm ệu: ứng bằng keyframe ơ bản ới thiệu: 12

a Ch n hi u ng:ọn hiệu ứng: ệu ứng chuyển cảnh ức các Elements 12

b Hi u ng xu t hi nệu ứng chuyển cảnh ức các Elements ất hiện ệu ứng chuyển cảnh 12

c Làm cho hi u ng tr nên tinh t h nệu ứng chuyển cảnh ức các Elements ở nên tinh tế hơn ế hơn ơn 13

d Hi u ng thoátệu ứng chuyển cảnh ức các Elements 13

5 Ví d 5: Thay đ i kích th ục lục ổi kích thước ưới thiệu: c 14

a Tr ng thái Scalableạo nội dung 14

b Resize trong khi thi t kế hơn ế hơn 14

c V trí theo đ n v ph n trămị trí theo đơn vị phần trăm ơn ị trí theo đơn vị phần trăm ần trăm 14

d Kích thước theo đơn vị phần trămc theo đ n v ph n trămơn ị trí theo đơn vị phần trăm ần trăm 15

e V trí tị trí theo đơn vị phần trăm ươnng đ iối 15

f Đ nh vi trị trí theo đơn vị phần trăm ước theo đơn vị phần trămc hình nhảnh 15

g Ép bu c thay đ iội dung ổ chức các Elements 16

6 Ví d 6: M r ng ục lục ởi động ộng 16

a Triggers 16

b Actions 17

c Nhãn 17

d Khung code 17

e T o ra b đ m s l n l pạo nội dung ội dung ế hơn ối ần trăm ặp 18

7 Ví d 7: Tái s d ng ục lục ử nghiệm ục lục 19

a Chuy n đ i thành symbolển cảnh ổ chức các Elements 19

b T o ra các Instancesạo nội dung 19

c Ch nh s a Symbolsỉnh Easing ử dụng Keyframe 19

d Đi u khi n vi c phát l iều chỉnh Easing ển cảnh ệu ứng chuyển cảnh ạo nội dung 20

IV TÀI LI U THAM KH O ỆU THAM KHẢO ẢO 22

Adobe Edge Animate

I Gi i thi u: ới thiệu: ệu:

1 Adobe Edge Animate là gì?

Adobe Edge Animate, thường được gọi là Adobe Edge, là công cụ cho ng được gọi là Adobe Edge, là công cụ cho ọn hiệu ứng:c g i là Adobe Edge, là công c cho ụng Keyframephép thi t k thành ph n đ ng trên web s d ng các chu n HTML5, ế hơn ế hơn ần trăm ội dung ử dụng Keyframe ụng Keyframe ẩn HTML5, JavaScript và CSS3

Ph n m m này đần trăm ều chỉnh Easing ược gọi là Adobe Edge, là công cụ cho c phát tri n b i Adobe System Phiên b n m i ển cảnh ở nên tinh tế hơn ảnh ớc theo đơn vị phần trăm

nh t là 1.0 đất hiện ược gọi là Adobe Edge, là công cụ cho c phát hành vào ngày 24/09/2012 Ngôn ng dùng đ vi t ữ ển cảnh ế hơn

ra nó là C++ N n t ng mà ph n m m này ch y đều chỉnh Easing ảnh ần trăm ều chỉnh Easing ạo nội dung ược gọi là Adobe Edge, là công cụ cho c là Microsoft

Windows và MacOS X B n có th download mi n phí Adobe Edge t ạo nội dung ển cảnh ễn phí Adobe Edge từ ừ Adobe Creative Cloud ho c qua đ a ch ặp ị trí theo đơn vị phần trăm ỉnh Easing

http://html.adobe.com/edge/animate/

S dĩ Adobe Edge v n còn mi n phí là do công ty mu n đáp l i s ở nên tinh tế hơn ẫn còn miễn phí là do công ty muốn đáp lại sự ễn phí Adobe Edge từ ối ạo nội dung ự đóng góp to l n c a c ng đ ng ngớc theo đơn vị phần trăm ủa cộng đồng người dùng trong quá trình phát triển các ội dung ồng người dùng trong quá trình phát triển các ường được gọi là Adobe Edge, là công cụ cho i dùng trong quá trình phát tri n các ển cảnhphiên b n beta c a Edge.ảnh ủa cộng đồng người dùng trong quá trình phát triển các

2 Adobe Edge Animate hi u qu trên nhi u n n t ng ệu: ả trên nhiều nền tảng ều nền tảng ều nền tảng ả trên nhiều nền tảng

Adobe nói r ng Edge “đằng Edge “được thiết kế và thử nghiệm để làm việc hiệu ược gọi là Adobe Edge, là công cụ cho c thi t k và th nghi m đ làm vi c hi u ế hơn ế hơn ử dụng Keyframe ệu ứng chuyển cảnh ển cảnh ệu ứng chuyển cảnh ệu ứng chuyển cảnh

qu trên các n n t ng Android và iOS, các thi t b tích h p WebKit và các ảnh ều chỉnh Easing ảnh ế hơn ị trí theo đơn vị phần trăm ợc gọi là Adobe Edge, là công cụ cho trình duy t máy tính cá nhân ph bi n nh Firefox, Chrome, Safari, và ệu ứng chuyển cảnh ổ chức các Elements ế hơn ưInternet Explorer 9” Vì Web di đ ng ngày càng đội dung ược gọi là Adobe Edge, là công cụ cho c nhi u ngều chỉnh Easing ường được gọi là Adobe Edge, là công cụ cho ử dụng Keyframe ụng Keyframei s d ngtrong vài năm g n đây, Adobe đã quy t đ nh c n ph i đem đ n cho ngần trăm ế hơn ị trí theo đơn vị phần trăm ần trăm ảnh ế hơn ường được gọi là Adobe Edge, là công cụ cho i dùng Web di đ ng m t tiêu chu n hình nh đ ng làm vi c trên thi t b di ội dung ội dung ẩn HTML5, ảnh ội dung ệu ứng chuyển cảnh ế hơn ị trí theo đơn vị phần trăm

đ ng “tr n tru” nh trên máy tính cá nhân.ội dung ơn ư

3 Adobe Edge Animate đã qua giai đo n th nghi m ạn thử nghiệm ử nghiệm ệu:

Ch ngay trong ngày đ u tiên phát hành b n th nghi m Adobe Edge ỉnh Easing ần trăm ảnh ử dụng Keyframe ệu ứng chuyển cảnh

đã đ t m c h n 50.000 lạo nội dung ức các Elements ơn ược gọi là Adobe Edge, là công cụ cho ảnh ều chỉnh Easingt t i v , đi u này cho th y đây là m t công ều chỉnh Easing ất hiện ội dungngh r t h a h n Nh ng b n cũng đ ng mong đ i nó “làm m a làm gió” ệu ứng chuyển cảnh ất hiện ức các Elements ẹn Nhưng bạn cũng đừng mong đợi nó “làm mưa làm gió” ư ạo nội dung ừ ợc gọi là Adobe Edge, là công cụ cho ư

ch sau m y ngày ra m t, Edge là bỉnh Easing ất hiện ắt, Edge là bước chân đầu tiên Adobe đặt vào nền ước theo đơn vị phần trămc chân đ u tiên Adobe đ t vào n n ần trăm ặp ều chỉnh Easing

t ng HTML5 Adobe đang mu n ti p nh n “đánh giá và ph n h i sẽ giúp ảnh ối ế hơn ận “đánh giá và phản hồi sẽ giúp ảnh ồng người dùng trong quá trình phát triển các Adobe xây d ng các tính năng c n thi t và lên l trình phát tri n cho ự ần trăm ế hơn ội dung ển cảnhEdge” Nh ng m t đi u có th ch c ch n là n u Edge thành công trong ư ội dung ều chỉnh Easing ển cảnh ắt, Edge là bước chân đầu tiên Adobe đặt vào nền ắt, Edge là bước chân đầu tiên Adobe đặt vào nền ế hơn

vi c thuy t ph c các nhà phát tri n và ngệu ứng chuyển cảnh ế hơn ụng Keyframe ển cảnh ường được gọi là Adobe Edge, là công cụ cho i dùng Web, Adobe sẽ h tr ỗ trợ ợc gọi là Adobe Edge, là công cụ cho các tiêu chu n khác ngoài HTML5 đ t o các ng d ng game và video ẩn HTML5, ển cảnh ạo nội dung ức các Elements ụng Keyframe

ph c t p.ức các Elements ạo nội dung

1 Màn hình kh i đ ng ởi động ộng

- Project Command: t o m i m t d án, m d án có s n.ạo nội dung ớc theo đơn vị phần trăm ội dung ự ở nên tinh tế hơn ự ẵn.

- Recent Project List: các d án g n đâyự ần trăm

- Resource Tabs: các tài nguyên đ tham kh o, h c t pển cảnh ảnh ọn hiệu ứng: ận “đánh giá và phản hồi sẽ giúp

2 Màn hình chính

+ File: New, Open , Open Recent, Close, Close All, Save, Save As…, Revert, Publish Setting…, Publish, Preview in Browser, Import…, Exit

+ Edit: Undo, Redo, Cut, Copy, Paste, Paste Special, Duplicate, Select All, Transform, Delete, Keyboard Shortcuts…

+ View: tùy ch nh hi n thỉnh Easing ển cảnh ị trí theo đơn vị phần trăm

+ Modify: s p x p, canh v trí, gom nhóm các thành ph nắt, Edge là bước chân đầu tiên Adobe đặt vào nền ế hơn ị trí theo đơn vị phần trăm ần trăm

+ Timeline: thao tác v i timelineớc theo đơn vị phần trăm

+ Windows

+ Help

- Thanh công cụng Keyframe

+ Selection Tool (V): công c ch n.ụng Keyframe ọn hiệu ứng:

+ Transform Tool (Q): công c thay đ i kích thụng Keyframe ổ chức các Elements ước theo đơn vị phần trămc, hình dáng

+ Crop Tool (C): công c c t đ i tụng Keyframe ắt, Edge là bước chân đầu tiên Adobe đặt vào nền ối ược gọi là Adobe Edge, là công cụ cho ng

+ Rectangle Tool (M): công c vẽ hình ch nh t.ụng Keyframe ữ ận “đánh giá và phản hồi sẽ giúp

+ Rounded Rectangle Tool (R): công c vẽ hình ch nh t góc tròn.ụng Keyframe ữ ận “đánh giá và phản hồi sẽ giúp + Ellipse Tool (O): công c vẽ hình ê-líp.ụng Keyframe

+ Text Tool (T): công c nh p ch ụng Keyframe ận “đánh giá và phản hồi sẽ giúp ữ

+ Background Color: màu n n c a đ i tều chỉnh Easing ủa cộng đồng người dùng trong quá trình phát triển các ối ược gọi là Adobe Edge, là công cụ cho ng

+ Border Color: màu vi n c a đ i tều chỉnh Easing ủa cộng đồng người dùng trong quá trình phát triển các ối ược gọi là Adobe Edge, là công cụ cho ng

+ Layout Defaults for New Elements: đ nh d ng m c đ nh cho các ị trí theo đơn vị phần trăm ạo nội dung ặp ị trí theo đơn vị phần trăm

đ i tối ược gọi là Adobe Edge, là công cụ cho ng m i.ớc theo đơn vị phần trăm

- Khung thu c tính (Properties): ch a các thu c tính c a đ i tội dung ức các Elements ội dung ủa cộng đồng người dùng trong quá trình phát triển các ối ược gọi là Adobe Edge, là công cụ cho ng

- Khung bài h c (Lesson): ch a các bài h c c b n đ ti p c n Adobe ọn hiệu ứng: ức các Elements ọn hiệu ứng: ơn ảnh ển cảnh ế hơn ận “đánh giá và phản hồi sẽ giúp Edge.

- Khung thành ph n (Element): các thành ph n c a trang web.ần trăm ần trăm ủa cộng đồng người dùng trong quá trình phát triển các

- Khung th vi n (Library): ch a các thành ph n làm ngu n cho ư ệu ứng chuyển cảnh ức các Elements ần trăm ồng người dùng trong quá trình phát triển các

- Khung timeline: ch a các control xem trức các Elements ước theo đơn vị phần trămc hi u ng, hi n th các ệu ứng chuyển cảnh ức các Elements ển cảnh ị trí theo đơn vị phần trămthành ph n và các thu c tính thay đ i theo th i gian, bi u di n tr cần trăm ội dung ổ chức các Elements ờng được gọi là Adobe Edge, là công cụ cho ển cảnh ễn phí Adobe Edge từ ự quan th i gian c a các hi u ng.ờng được gọi là Adobe Edge, là công cụ cho ủa cộng đồng người dùng trong quá trình phát triển các ệu ứng chuyển cảnh ức các Elements

Đ c bi t khung này có các nút:ặp ệu ứng chuyển cảnh

+ Auto-Keyframe Mode: ghi nh n thay đ i giá tr c a thu c tính ận “đánh giá và phản hồi sẽ giúp ổ chức các Elements ị trí theo đơn vị phần trăm ủa cộng đồng người dùng trong quá trình phát triển các ội dung

tr c ti p trên timeline.ự ế hơn

+ Auto-Transition Mode: t t o ra hi u ng gi a các keyframe.ự ạo nội dung ệu ứng chuyển cảnh ức các Elements ữ+ Toggle Pin: ghim kho ng th i gian đ t o hi u ng.ảnh ờng được gọi là Adobe Edge, là công cụ cho ển cảnh ạo nội dung ệu ứng chuyển cảnh ức các Elements

+ Easing: ki u hi u ng.ển cảnh ệu ứng chuyển cảnh ức các Elements

III M t vài ví d : ộng ục lục

1 Ví d 1: Nh ng thao tác c b n ục lục ững thao tác cơ bản ơ bản ả trên nhiều nền tảng

Ví d này sẽ giúp b n bi t cách t o ra m t hình ch nh t và làm nó ụng Keyframe ạo nội dung ế hơn ạo nội dung ội dung ữ ận “đánh giá và phản hồi sẽ giúp chuy n đ ngển cảnh ội dung

Bước theo đơn vị phần trămc 1: Ch n công c hình ch nh t ọn hiệu ứng: ụng Keyframe ữ ận “đánh giá và phản hồi sẽ giúp trên thanh công cụng Keyframe

Bước theo đơn vị phần trămc 2: Vẽ m t hình ch nh t góc trên bên trái c a trang webội dung ữ ận “đánh giá và phản hồi sẽ giúp ở nên tinh tế hơn ủa cộng đồng người dùng trong quá trình phát triển các

Bước theo đơn vị phần trămc 3: B m vào nút Pin trên thanh Timelineất hiện

Bước theo đơn vị phần trămc 4: Kéo Playhead đ n v trí 0:01 (1 giây)ế hơn ị trí theo đơn vị phần trăm

Khi b n kéo cái playhead thì bi u tạo nội dung ển cảnh ược gọi là Adobe Edge, là công cụ cho ng pin màu xanh v n l i.ẫn còn miễn phí là do công ty muốn đáp lại sự ở nên tinh tế hơn ạo nội dung

Bước theo đơn vị phần trămc 5: Di chuy n hình ch nh t đ n góc dển cảnh ữ ận “đánh giá và phản hồi sẽ giúp ế hơn ước theo đơn vị phần trămi bên ph i c a trang ảnh ủa cộng đồng người dùng trong quá trình phát triển các web

Bước theo đơn vị phần trămc 6: B m vào mi ng màu xám khung Propertiesất hiện ế hơn ở nên tinh tế hơn

Bước theo đơn vị phần trămc 7: Đ i màu và nh n Enterổ chức các Elements ất hiện

Bước theo đơn vị phần trămc 8: Nh n Space đ xem hi u ng ất hiện ển cảnh ệu ứng chuyển cảnh ức các Elements

2 Ví d 2: Ch nh các thu c tính c a đ i t ục lục ỉnh các thuộc tính của đối tượng ộng ủa đối tượng ối tượng ượng ng

a T o n i dung ạo nội dung ội dung

Bước theo đơn vị phần trămc 1: Ch n công c hình ch nh t có góc tròn ọn hiệu ứng: ụng Keyframe ữ ận “đánh giá và phản hồi sẽ giúp trên thanh công

c ụng Keyframe

Bước theo đơn vị phần trămc 2: Vẽ m t hình gi a trang webội dung ở nên tinh tế hơn ữ

Đ i tối ược gọi là Adobe Edge, là công cụ cho ng b n vẽ sẽ là m t th <div> có style đi u ch nh b ng CSS3 ạo nội dung ội dung ẻ <div> có style điều chỉnh bằng CSS3 ều chỉnh Easing ỉnh Easing ằng Edge “được thiết kế và thử nghiệm để làm việc hiệu

B n có th đi u ch nh b ng khung Propertiesạo nội dung ển cảnh ều chỉnh Easing ỉnh Easing ằng Edge “được thiết kế và thử nghiệm để làm việc hiệu

Bước theo đơn vị phần trămc 3: Trên khung Properties, b m vào bi u tất hiện ển cảnh ược gọi là Adobe Edge, là công cụ cho ng n i gi a Width vàối ữHeight

Bước theo đơn vị phần trămc 4: Đ t l i giá tr W là 220 và H là 130ặp ạo nội dung ị trí theo đơn vị phần trăm

b Thêm chữ

Bước theo đơn vị phần trămc 1: Ch n công c Text ọn hiệu ứng: ụng Keyframe

Bước theo đơn vị phần trămc 2: B m vào gi a hình ch nh t đã vẽ và nh p vào dòng ch ất hiện ữ ữ ận “đánh giá và phản hồi sẽ giúp ận “đánh giá và phản hồi sẽ giúp ữ

“Hello World”

Bước theo đơn vị phần trămc 3: T t Text Editor điắt, Edge là bước chân đầu tiên Adobe đặt vào nền

Bước theo đơn vị phần trămc 4: Ch n ch và s d ng Smart Guides đ canh gi a ch trong ọn hiệu ứng: ữ ử dụng Keyframe ụng Keyframe ển cảnh ữ ữhình

c Importing Graphics

B n có th import các hình nh có đuôi là png, jpg, gif, svg và chúng ạo nội dung ển cảnh ảnh

được gọi là Adobe Edge, là công cụ cho c đ t dặp ước theo đơn vị phần trămi trường được gọi là Adobe Edge, là công cụ cho ng Asset trong khung Library

Bước theo đơn vị phần trămc 1: Kéo file background.jpg t Library vào trang web và th vào ừ ảnh

t a đ (0, 0)ọn hiệu ứng: ội dung

Các b n có th th y hình n n v a t o che ph h t toàn b ch và hìnhạo nội dung ển cảnh ất hiện ều chỉnh Easing ừ ạo nội dung ủa cộng đồng người dùng trong quá trình phát triển các ế hơn ội dung ữ

vẽ S a l i b ng cách s p x p l i trong khung Element Th t hi n th ử dụng Keyframe ạo nội dung ằng Edge “được thiết kế và thử nghiệm để làm việc hiệu ắt, Edge là bước chân đầu tiên Adobe đặt vào nền ế hơn ạo nội dung ức các Elements ự ển cảnh ị trí theo đơn vị phần trăm

c a chúng gi ng nh là th t trong stack (ngăn x p - LIFO)ủa cộng đồng người dùng trong quá trình phát triển các ối ư ức các Elements ự ế hơn

Bước theo đơn vị phần trămc 2: Trong khung Elements, kéo thành ph n “background” <div> ần trăm

xu ng phía dối ước theo đơn vị phần trămi thành ph n “RoundRect” <div>ần trăm

d T ch c các Elements ổ chức các Elements ức các Elements

B n có th đ i thành ph n cha c a m t thành ph n khác b ng cách ạo nội dung ển cảnh ổ chức các Elements ần trăm ủa cộng đồng người dùng trong quá trình phát triển các ội dung ần trăm ằng Edge “được thiết kế và thử nghiệm để làm việc hiệu kéo th ảnh

thành ph n “RoundRect” <div>ần trăm

3 Ví d 3: Hi u ng b ng keyframe ục lục ệu: ứng bằng keyframe ằng keyframe

Ví d này hụng Keyframe ước theo đơn vị phần trămng d n v các hi u ng c b n trong Edge Animate B nẫn còn miễn phí là do công ty muốn đáp lại sự ều chỉnh Easing ệu ứng chuyển cảnh ức các Elements ơn ảnh ạo nội dung

sẽ h c đọn hiệu ứng: ược gọi là Adobe Edge, là công cụ cho c cách t o ra các Keyframe và hi u ng chuy n c nh, đi u ạo nội dung ệu ứng chuyển cảnh ức các Elements ển cảnh ảnh ều chỉnh Easing

ch nh hi u ng thông qua Easing và cách s d ng copy/paste đ t o ra ỉnh Easing ệu ứng chuyển cảnh ức các Elements ử dụng Keyframe ụng Keyframe ển cảnh ạo nội dungchuy n đ ng nhanh h nển cảnh ội dung ơn

a T o Keyframe ạo nội dung

Bước theo đơn vị phần trămc 1: di chuy n Playhead đ n 0:01ển cảnh ế hơn

Bước theo đơn vị phần trămc 2: Ch n “E” trong trang webọn hiệu ứng:

Bước theo đơn vị phần trămc 3: Ch n nút ọn hiệu ứng: c a t a đ Y trong khung Propertiesủa cộng đồng người dùng trong quá trình phát triển các ọn hiệu ứng: ội dung

M t cái keyframe cho Top ội dung sẽ xu t hi n trên thanh Timelineất hiện ệu ứng chuyển cảnh

Bước theo đơn vị phần trămc 4: kéo Playhead đ n v trí 0:00ế hơn ị trí theo đơn vị phần trăm

Bước theo đơn vị phần trămc 5: thêm m t keyframe khác cho Y (gi ng bội dung ối ước theo đơn vị phần trămc trên)

Bước theo đơn vị phần trămc 6: Đ i giá tr c a Y thành -90ổ chức các Elements ị trí theo đơn vị phần trăm ủa cộng đồng người dùng trong quá trình phát triển các

Bước theo đơn vị phần trămc 7: B m nút ất hiện ho c phím Space đ ch y th hi u ng.ặp ển cảnh ạo nội dung ử dụng Keyframe ệu ứng chuyển cảnh ức các Elements

B n sẽ th y là ch E b t đ u ngoài sau đó nh y đ n v trí hi n t i ạo nội dung ất hiện ữ ắt, Edge là bước chân đầu tiên Adobe đặt vào nền ần trăm ở nên tinh tế hơn ảnh ế hơn ị trí theo đơn vị phần trăm ệu ứng chuyển cảnh ạo nội dunglúc 1 giây

Keyframe t i 0:01 là m t hình thoi r ng ạo nội dung ội dung ỗ trợ đi u này cho th y nó có giáều chỉnh Easing ất hiện

tr khác v i giá tr c a keyframe trị trí theo đơn vị phần trăm ớc theo đơn vị phần trăm ị trí theo đơn vị phần trăm ủa cộng đồng người dùng trong quá trình phát triển các ước theo đơn vị phần trămc nó

b Thêm hi u ng chuy n c nh ệu ứng chuyển cảnh ức các Elements ển cảnh ảnh

Khi hai keyframe có giá tr khác nhau thì ta có th thêm transition vào ị trí theo đơn vị phần trăm ển cảnh

đ chuy n t t t giá tr này sang giá tr kia.ển cảnh ển cảnh ừ ừ ừ ị trí theo đơn vị phần trăm ị trí theo đơn vị phần trăm

Bước theo đơn vị phần trămc 1: B m ph i vào m t trong hai cái keyframe và ch n Create ất hiện ảnh ội dung ọn hiệu ứng:Transition

Transition sẽ xu t hi n, nó là m t d i màu trong su t n i hai ất hiện ệu ứng chuyển cảnh ội dung ảnh ối ối

keyframe v i nhau.ớc theo đơn vị phần trăm

Bước theo đơn vị phần trămc 2: B m nút ất hiện ho c phím Space đ ch y th hi u ng.ặp ển cảnh ạo nội dung ử dụng Keyframe ệu ứng chuyển cảnh ức các Elements

Chúng ta sẽ th y ch E t t ch y xu ng.ất hiện ữ ừ ừ ạo nội dung ối

c Đi u ch nh Easing ều chỉnh Easing ỉnh Easing

M i transition đ u có m t Easing giúp đi u ch nh ki u hi u ng.ỗ trợ ều chỉnh Easing ội dung ều chỉnh Easing ỉnh Easing ển cảnh ệu ứng chuyển cảnh ức các Elements

Bước theo đơn vị phần trămc 1: Ch n transition b ng cách nh p vào thanh trong su t k t n i ọn hiệu ứng: ằng Edge “được thiết kế và thử nghiệm để làm việc hiệu ất hiện ối ế hơn ốicác keyframe

Bước theo đơn vị phần trămc 2: ch n công c Easing ọn hiệu ứng: ụng Keyframe

Bước theo đơn vị phần trămc 3: Ch n “Ease Out and Bounce” và nh n Enter đ s d ng nó.ọn hiệu ứng: ất hiện ển cảnh ử dụng Keyframe ụng Keyframe

Bước theo đơn vị phần trămc 4: Ch y th b ng cách nh n Space ho c nút Play ạo nội dung ử dụng Keyframe ằng Edge “được thiết kế và thử nghiệm để làm việc hiệu ất hiện ặp

Ch E sẽ r t xu ng và b n y lên.ữ ớc theo đơn vị phần trăm ối ị trí theo đơn vị phần trăm ảnh

d Ch nh hi u ng cho cái bóng ỉnh Easing ệu ứng chuyển cảnh ức các Elements

Auto Keyframe Mode đi u khi n vi c t o keyframe t đ ng khi chúng ều chỉnh Easing ển cảnh ệu ứng chuyển cảnh ạo nội dung ự ội dung

ta thay đ i m t thu c tính nào đó Auto Transition Mode sẽ t đ ng t o ra ổ chức các Elements ội dung ội dung ự ội dung ạo nội dung

hi u ng chuy n khi c n thi t.ệu ứng chuyển cảnh ức các Elements ển cảnh ần trăm ế hơn

Bước theo đơn vị phần trămc 1: Click vào nút Auto Keyframe Mode đ b t nó.ển cảnh ận “đánh giá và phản hồi sẽ giúp

Bước theo đơn vị phần trămc 2: Click vào nút Auto Transition Mode đ b t nó.ển cảnh ận “đánh giá và phản hồi sẽ giúp

Bước theo đơn vị phần trămc 3: Ch n cái bóng c a ch trên web.ọn hiệu ứng: ủa cộng đồng người dùng trong quá trình phát triển các ữ

Bước theo đơn vị phần trămc 4: Di chuy n cái playhead đ n 0:01ển cảnh ế hơn

Bước theo đơn vị phần trămc 5: Trong m c Tranform khung Properties nh n vào các nút ụng Keyframe ở nên tinh tế hơn ất hiệnkeyframe đ n đ nh giá tr x và y.ển cảnh ất hiện ị trí theo đơn vị phần trăm ị trí theo đơn vị phần trăm

Bước theo đơn vị phần trămc 6: chuy n playhead v th i đi m 0:00ển cảnh ều chỉnh Easing ờng được gọi là Adobe Edge, là công cụ cho ển cảnh

Bước theo đơn vị phần trămc 7: trong khung Properties s a giá tr x thành 0.ử dụng Keyframe ị trí theo đơn vị phần trăm

Hai giá tr x và y đị trí theo đơn vị phần trăm ược gọi là Adobe Edge, là công cụ cho c khóa l i v i nhau, khi x thay đ i thì hai ạo nội dung ớc theo đơn vị phần trăm ổ chức các Elements

keyframe và transition sẽ được gọi là Adobe Edge, là công cụ cho ạo nội dungc t o ra Và b i vì các bở nên tinh tế hơn ở nên tinh tế hơn ước theo đơn vị phần trămc trên chúng ta

s d ng hi u ng n y b t lên nên nó cũng sẽ đử dụng Keyframe ụng Keyframe ệu ứng chuyển cảnh ức các Elements ảnh ận “đánh giá và phản hồi sẽ giúp ược gọi là Adobe Edge, là công cụ cho c áp d ng vào cái bóng.ụng Keyframe