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

Mục lục
Adobe Edge Animate
I. Giới thiệu:
1. Adobe Edge Animate là gì?
Adobe Edge Animate, thường được gọi là Adobe Edge, là công cụ cho
phép thiết kế thành phần động trên web sử dụng các chuẩn HTML5,
JavaScript và CSS3.
Phần mềm này được phát triển bởi Adobe System. Phiên bản mới nhất là
1.0 được phát hành vào ngày 24/09/2012. Ngôn ngữ dùng để viết ra nó là
C++. Nền tảng mà phần mềm này chạy được là Microsoft Windows và MacOS
X. Bạn có thể download miễn phí Adobe Edge từ Adobe Creative Cloud hoặc
qua địa chỉ />Sở dĩ Adobe Edge vẫn còn miễn phí là do công ty muốn đáp lại sự đóng
góp to lớn của cộng đồng người dùng trong quá trình phát triển các phiên
bản beta của Edge.
2. Adobe Edge Animate hiệu quả trên nhiều nền tảng
Adobe nói rằng Edge “được thiết kế và thử nghiệm để làm việc hiệu 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 trình
duyệt máy tính cá nhân phổ biến như Firefox, Chrome, Safari, và Internet
Explorer 9”. Vì Web di động ngày càng được nhiều người sử dụng trong vài
năm gần đây, Adobe đã quyết định cần phải đem đến cho ngườ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 động “trơn tru”
như trên máy tính cá nhân.
3. Adobe Edge Animate đã qua giai đoạn thử nghiệm
Chỉ ngay trong ngày đầu tiên phát hành bản thử nghiệm Adobe Edge đã
đạt mức hơn 50.000 lượt tải về, điều này cho thấy đây là một công nghệ rất
hứa hẹn. Nhưng bạn cũng đừng mong đợi nó “làm mưa làm gió” chỉ sau mấy
ngày ra mắt, Edge là bước chân đầu tiên Adobe đặt vào nền tảng HTML5.
Adobe đang muốn tiếp nhận “đánh giá và phản hồi sẽ giúp 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 Edge”. Nhưng một điều
có thể chắc chắn là nếu Edge thành công trong việc thuyết phục các nhà phát
triển và người dùng Web, Adobe sẽ hỗ trợ các tiêu chuẩn khác ngoài HTML5

để tạo các ứng dụng game và video phức tạp.
II. Giao diện
1. Màn hình khởi động
- Project Command: tạo mới một dự án, mở dự án có sẵn.
- Recent Project List: các dự án gần đây
- Resource Tabs: các tài nguyên để tham khảo, học tập
2. Màn hình chính
- Thanh menu:
+ 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ị
+ Modify: sắp xếp, canh vị trí, gom nhóm các thành phần
+ Timeline: thao tác với timeline
+ Windows
+ Help
- Thanh công cụ
+ Selection Tool (V): công cụ chọn.
+ Transform Tool (Q): công cụ thay đổi kích thước, hình dáng
+ Crop Tool (C): công cụ cắt đối tượng.
+ Rectangle Tool (M): công cụ vẽ hình chữ nhật.
+ Rounded Rectangle Tool (R): công cụ vẽ hình chữ nhật góc tròn.
+ Ellipse Tool (O): công cụ vẽ hình ê-líp.
+ Text Tool (T): công cụ nhập chữ.
+ Background Color: màu nền của đối tượng.
+ Border Color: màu viền của đối tượng.
+ Layout Defaults for New Elements: định dạng mặc định cho các đối
tượng mới.
- Khung thuộc tính (Properties): chứa các thuộc tính của đối tượng

- Khung bài học (Lesson): chứa các bài học cơ bản để tiếp cận Adobe
Edge.
- Khung thành phần (Element): các thành phần của trang web.
- Khung thư viện (Library): chứa các thành phần làm nguồn cho trang
web như font, asset, symbol.
- Khung timeline: chứa các control xem trước hiệu ứng, hiển thị các
thành phần và các thuộc tính thay đổi theo thời gian, biểu diễn trực
quan thời gian của các hiệu ứng.
Đặc biệt khung này có các nút:
+ Auto-Keyframe Mode: ghi nhận thay đổi giá trị của thuộc tính trực
tiếp trên timeline.
+ Auto-Transition Mode: tự tạo ra hiệu ứng giữa các keyframe.
+ Toggle Pin: ghim khoảng thời gian để tạo hiệu ứng.
+ Easing: kiểu hiệu ứng.
III. Một vài ví dụ:
1. Ví dụ 1: Những thao tác cơ bản
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ó
chuyển động
Bước 1: Chọn công cụ hình chữ nhật trên thanh công cụ
Bước 2: Vẽ một hình chữ nhật ở góc trên bên trái của trang web
Bước 3: Bấm vào nút Pin trên thanh Timeline
Bước 4: Kéo Playhead đến vị trí 0:01 (1 giây)
Khi bạn kéo cái playhead thì biểu tượng pin màu xanh vẫn ở lại.
Bước 5: Di chuyển hình chữ nhật đến góc dưới bên phải của trang web
Bước 6: Bấm vào miếng màu xám ở khung Properties
Bước 7: Đổi màu và nhấn Enter
Bước 8: Nhấn Space để xem hiệu ứng
2. Ví dụ 2: Chỉnh các thuộc tính của đối tượng
a. Tạo nội dung
Bước 1: Chọn công cụ hình chữ nhật có góc tròn trên thanh công cụ.

Bước 2: Vẽ một hình ở giữa trang web
Đối tượng bạn vẽ sẽ là một thẻ <div> có style điều chỉnh bằng CSS3. Bạn
có thể điều chỉnh bằng khung Properties
Bước 3: Trên khung Properties, bấm vào biểu tượng nối giữa Width và
Height
Bước 4: Đặt lại giá trị W là 220 và H là 130
b. Thêm chữ
Bước 1: Chọn công cụ Text
Bước 2: Bấm vào giữa hình chữ nhật đã vẽ và nhập vào dòng chữ “Hello
World”
Bước 3: Tắt Text Editor đi
Bước 4: Chọn chữ và sử dụng Smart Guides để canh giữa chữ trong 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
được đặt dưới trường Asset trong khung Library
Bước 1: Kéo file background.jpg từ Library vào trang web và thả vào tọa
độ (0, 0)
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 vẽ.
Sửa lại bằng cách sắp xếp lại trong khung Element. Thứ tự hiển thị của
chúng giống như là thứ tự trong stack (ngăn xếp - LIFO)
Bước 2: Trong khung Elements, kéo thành phần “background” <div>
xuống phía dưới thành phần “RoundRect” <div>
d. Tổ chứ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 kéo
thả.
Trong khung Elements, kéo thả thành phần “Text” <div> vào trong thành
phần “RoundRect” <div>
3. Ví dụ 3: Hiệu ứng bằng keyframe
Ví dụ này hướng dẫn về các hiệu ứng cơ bản trong Edge Animate. Bạn sẽ
học được cách tạo ra các Keyframe và hiệu ứng chuyển cảnh, điều chỉnh hiệu

ứng thông qua Easing và cách sử dụng copy/paste để tạo ra chuyển động
nhanh hơn
a. Tạo Keyframe
Bước 1: di chuyển Playhead đến 0:01
Bước 2: Chọn “E” trong trang web
Bước 3: Chọn nút của tọa độ Y trong khung Properties
Một cái keyframe cho Top sẽ xuất hiện trên thanh Timeline
Bước 4: kéo Playhead đến vị trí 0:00
Bước 5: thêm một keyframe khác cho Y (giống bước trên)
Bước 6: Đổi giá trị của Y thành -90
Bước 7: Bấm nút hoặc phím Space để chạy thử hiệu ứng.
Bạn sẽ thấy là chữ E bắt đầu ở ngoài sau đó nhảy đến vị trí hiện tại lúc 1
giây.
Keyframe tại 0:01 là một hình thoi rỗng điều này cho thấy nó có giá
trị khác với giá trị của keyframe trước nó.
b. Thêm hiệu ứng chuyển cảnh
Khi hai keyframe có giá trị khác nhau thì ta có thể thêm transition vào để
chuyển từ từ từ giá trị này sang giá trị kia.
Bước 1: Bấm phải vào một trong hai cái keyframe và chọn Create
Transition.
Transition sẽ xuất hiện, nó là một dải màu trong suốt nối hai keyframe
với nhau.
Bước 2: Bấm nút hoặc phím Space để chạy thử hiệu ứng.
Chúng ta sẽ thấy chữ E từ từ chạy xuống.
c. Điều chỉnh Easing
Mỗi transition đều có một Easing giúp điều chỉnh kiểu hiệu ứng.
Bước 1: Chọn transition bằng cách nhấp vào thanh trong suốt kết nối các
keyframe.
Bước 2: chọn công cụ Easing
Bước 3: Chọn “Ease Out and Bounce” và nhấn Enter để sử dụng nó.

Bước 4: Chạy thử bằng cách nhấn Space hoặc nút Play
Chữ E sẽ rớt xuống và bị nảy lên.
d. Chỉnh hiệu ứng cho cái bóng
Auto Keyframe Mode điều khiển việc tạo keyframe tự động khi chúng ta
thay đổi một thuộc tính nào đó. Auto Transition Mode sẽ tự động tạo ra hiệu
ứng chuyển khi cần thiết.
Bước 1: Click vào nút Auto Keyframe Mode để bật nó.
Bước 2: Click vào nút Auto Transition Mode để bật nó.
Bước 3: Chọn cái bóng của chữ trên web.
Bước 4: Di chuyển cái playhead đến 0:01
Bước 5: Trong mục Tranform ở khung Properties nhấn vào các nút
keyframe để ấn định giá trị x và y.
Bước 6: chuyển playhead về thời điểm 0:00
Bước 7: trong khung Properties sửa giá trị x thành 0.
Hai giá trị x và y được khóa lại với nhau, khi x thay đổi thì hai keyframe
và transition sẽ được tạo ra. Và bởi vì ở các bước trên chúng ta sử dụng hiệu
ứng nảy bật lên nên nó cũng sẽ được áp dụng vào cái bóng.
Bước 8: nhấn Play để xem thử
e. Tái sử dụng Keyframe
Bước 1: Chọn chữ E trong trang web
Bước 2: Nhấn ở phía dưới của timeline để tắt chức năng snapping
(chức năng này giúp bắt dính playhead vào các điểm cần thiết).
Bước 3: Di chuyển playhead đến vị trí mà chữ E vừa chạm đất, khoảng
0.364 giây
Bước 4: Thêm keyframe cho thuộc tính Rotation
Bước 5: Tiếp tục di chuyển playhead đến vị trí mà ký tự E nảy lên cao
nhất, khoảng 0.544 giây
Bước 6: trong khung Properties sửa giá trị của rotation thành -10
Bước 7: Di chuyển playhead đến vị trí chữ E chạm đất một lần nữa,
khoảng 0.729 giây

Bước 8: dùng chuột chọn lấy keyframe rotation đầu tiên, chỉ được chọn
một keyframe thôi nhé!
Bước 9: Copy keyframe Ctrl+C, dán keyframe Ctrl+V
Hiệu ứng nảy lên bây giờ trông sẽ tự nhiên hơn vì ký tự sẽ bị nghiêng đi.
Bước 10: Bấm play để chạy thử và bấm thêm lần nữa để chạy lại từ
đầu.
f. Tái sử dụng Transition
Transitions có thể được copy/dán một cách uyển chuyển. linh hoạt giúp
việc tạo hiệu ứng trở nên nhanh hơn.
Bước 1: Nhấn ở phía dưới của timeline để bật lại chức năng
snapping.
Bước 2: Nhấn và kéo qua cột visibility của G, D và E2 trên khung
Elements để làm chúng hiện ra.
4. Ví dụ 4: Tạo hiệu ứng nhanh hơn với Pin
a. Chọn hiệu ứng:
Bước 1: Chọn công cụ Easing
Bước 2: Chọn Ease Out và Quad
b. Hiệu ứng xuất hiện
Bước 1: Di chuyển playhead đến 0:00.250 (0.25 giây)
Bước 2: Nhắp đôi vào playhead để nó trở thành như thế này
Bước 3: Kéo cái pin đến 0:00.750 (0.75 giây – lúc đó pin sẽ hiển thị là
+0.5s)
Lúc này sẽ có một vùng màu xanh xuất hiện
Vùng xanh này sẽ biểu hiện những hiệu ứng đến trạng thái hiện tại
Bước 4: Chọn đối tượng “RoundRect” <div> ở khung Elements
Bước 5: Nhấn giữ phím Shift để di chuyển theo đường thẳng, ta kéo hình
ra khỏi trang web về bên trái.
Bước 6: Trong khung Properties, đặt giá trị của Rotate lại là 720 sau đó
chọn trang web.
Bước 7: Bấm play hoặc Space để chạy thử.

Bước 8: Bấm hoặc Enter để di chuyển playhead và activate lại vùng
làm việc.
c. Làm cho hiệu ứng trở nên tinh tế hơn
Thay đổi thời gian xoay
Bước 1: Nắm lấy Rotate keyframe và di chuyển nó sang phải đến
0:00.500 (0.5 giây).
Bước 2: Xem lại hiệu ứng
Thêm vào hiệu ứng cho chữ
Bước 3: Nhấn Enter để chắc chắn là vùng làm việc (vùng màu xanh) đã
được activate.
Bước 4: Chọn vùng màu xanh sau đó kéo nó sang phải sao cho
playhead lúc này nằm ở vị trí 0:00.750 (0.75 giây)
Bước 5: Chọn chữ “Hello World”.
Bước 6: Trong khung Properties sửa giá trị Scale thành 0.
Bước 7: Sửa giá trị Opacity thành 0.
d. Hiệu ứng thoát
Bước 1: Đầu tiên chọn công cụ Easing và chọn Ease In và Quad.
Bước 2: Nắm lấy pin và di chuyển nó đến 0:01.750 (1.75 giây)
Điều này tạo thành một vùng màu vàng
Vùng màu vàng này biểu hiện những hiệu ứng từ trạng thái hiện tại
Bước 4: Chọn chữ “Hello World”.
Bước 5: Đặt giá trị Opacity xuống 0
Bước 6: Nắm lấy vùng màu vàng và kéo về bên phải đến 0:00.500 (0.5
giây) lúc này ký hiệu pin ở tại vị trí 0:02 (2 giây)
Bước 7: Chọn “RoundRect”
Bước 8: Nhấn giữ Shift và di chuyển nó ra ngoài trang web về bên phải.
Chạy thử để xem kết quả.
5. Ví dụ 5: Thay đổi kích thước
Ví dụ này hướng dẫn các bạn làm cho các hiệu ứng bạn tạo ra phản ứng
khi cửa sổ trang web thay đổi.

Ví dụ này gồm có
• Panel 1, 2, 3 chứa các chữ chạy dọc
• Text 1 là thẻ <div> chứa text “Move Your Items” và nền.
• Text 2 là thẻ <div> chứa text “On Command” và nền.
• Red Ribbon, Banner, FremontCycles hình nền xe đạp, chữ SCALE
và dải băng đỏ.
• Panel_bg nền xanh của các dòng chữ chạy xuống.
Bạn có thể resize thử bằng trình duyệt qua tổ hợp phím Ctrl+Enter
a. Trạng thái Scalable
Bước đầu tiên để làm các thành phần này có thể thay đổi kích thước là
bạn phải thiết lập trạng thái đáp ứng của nó khi có sự thay đổi xảy ra. Trong
ví dụ này chúng ta sẽ làm cho chiều ngang thay đổi kích thước trong khi
chiều dọc không thay đổi.
Bước 1: Chọn stage trong khung Elements
Bước 2: Trong khung Properties, nhấn vào nút gạt unit để chuyển đổi
đơn vị của W từ px thành %
Giá trị của W lúc này là 100% vì thế nên nó sẽ căng ngang hết màn hình
trình duyệt với màu nền màu xanh nhạt.
(để Preview nhấn Ctrl+Enter và resize để xem kết quả)
b. Resize trong khi thiết kế
Bạn có thể kiểm tra kết quả của việc resize bằng Edge Animate được.
Khi một chiều x được chuyển thành đơn vị % thì một ký hiệu trạng thái
resize sẽ xuất hiện trên thanh thước đo, bên mép phải của trang web. Bạn
có thể di chuyển nó để xem kết quả.
Bước 1: Di chuyển ký hiệu trạng thái tới lui để xem đáp ứng của trang
web như thế nào
Bước 2: Khi xong, bạn cần trả ký hiệu đó về đúng nơi ban đầu là 800px,
nó sẽ tự động dính vào đúng vị trí khi bạn di chuyển con trỏ.
c. Vị trí theo đơn vị phần trăm
Ý tưởng chính của việc thay đổi khi resize căn cứ vào vị trí theo đơn vị

tính phần trăm của thành phần đó. Nhờ đó khi bạn thay đổi kích thước trình
duyệt thì kích thước của các thành phần cũng tự thay đổi theo kích thước
của thành phần cha nó.
Bước 1: Chọn Text1 trong khung Elements.
Bước 2: Giữ Shift và chọn tiếp Text2.
Bước 3: Trong khung Properties, đổi đơn vị tính của X thành %
Bước 4: Preview bằng cách kéo ký hiệu trạng thái (nhớ trả về trạng thái
ban đầu khi xong).
Bạn có thể thấy khi resize hai thành phần Text sẽ thay đổi vị trí khi kích
thước trình duyệt thay đổi.
d. Kích thước theo đơn vị phần trăm
Bạn cũng có thể thay đổi kích thước của một thành phần theo phần trăm
kích thước của thành phần cha nó.
Bước 1: Chọn red_ribbon từ khung Elements.
Bước 2: Trong khung Properties, chuyển đơn vị của W thành %.
Bước 3: Xem thay đổi khi resize trình duyệt bằng ký hiệu trạng thái.
Bước 4: Xem xong, trả về đúng kích thước ban đầu 800px.
e. Vị trí tương đối
Mặc định một đối tượng có vị trí tương đối với góc trên bên trái của
thành phần cha nó. Đó là lý do vì sao đối tượng đó vẫn còn bất động khi
resize.
Bạn có thể sử dụng coordinate space picker trong khung Properties để
thay đổi vị trí tương đối của đối tượng với bất kỳ góc nào của thành phần
cha. Ví dụ như một đối tượng sau, khi vị trí tương đối của nó gắn với góc
dưới bên phải thì khoảng cách của nó với góc đó sẽ không thay đổi khi ta
resize.
Bước 1: Ở khung Elements, chọn panel_bg.
Bước 2: Trong khung Properties, chọn góc dưới bên phải ở coordinate
space picker.
Bước 3: Chuyển đơn vị của W từ px thành %.

Bước 4: Chọn panel1.
Bước 5: Chọn cả ba panel1, 2, 3 bằng cách giữ Shift và chọn panel3.
Bước 6: Chọn góc phải dưới trong coordinate space picker.
Bước 7: Chuyển đơn vị của W từ px thành %.
Các thao tác trên giúp cho panel màu xanh và các chữ động sẽ có vị trí
tương đối với góc phải dưới của website.
Kiểm tra kết quả và trả về đúng vị trí 800px khi xong.
f. Định vi trước hình ảnh
Với hình ảnh thì để hiển thị một cách hoàn hảo thì cần nhiều bước chỉnh
sửa các thuộc tính khác nhau. Để dễ dàng, Edge Animate cung cấp một bộ
các thiết đặt sẵn (presets) trong việc resize.
Bước 1: Chọn thành phần FremontCycles.
Bước 2: Nhấp chọn Layout Presets picker
Bước 3: Chọn mục thứ 4 từ trên xuống là “Center Background Image” và
nhấn Apply.
Lựa chọn này sẽ resize cả hai trục x và y trong khi hình vẫn nằm chính
giữa.
Chạy thử bằng tổ hợp Ctrl+Enter.
g. Ép buộc thay đổi
Chúng ta thường muốn giới hạn lại việc resize các thành phần hay cả
trang web.
Bước 1: Chọn thành phần stage.
Bước 2: Trong khung Properties, đặt giá trị của Min W là 650px
Bước 3: Nhấp vào Max W và không chọn none nữa.
Bước 4: Nhập vào Max W giá trị 1280px
Điều này sẽ làm chiều ngang trang web chỉ từ 650px đến 1280px
Nhấn tổ hợp Ctrl+Enter và resize trình duyệt để xem kết quả.
6. Ví dụ 6: Mở rộng
Ví dụ này sẽ giúp bạn hoàn thiện tác phẩm của mình với Javascript.
Ví dụ này ba thành phần:

Text là số ở giữa hình chữ nhật
Rectangle là một hình chữ nhật
Play là nút hình tam giác
Bấm Ctrl+Enter để xem ví dụ trên trình duyệt.
Đầu tiên nút play sẽ xuất hiện, sau đó hình chữ nhật chứa số 1 sẽ xoay
tròn và biến to dần thành hình tròn.
a. Triggers
Trigger là một hàm được gọi lên vào một thời điểm nhất định. Nó được
thêm vào Timeline tại vị trí playhead.
Bước 1: Di chuyển playhead đến vị trí 0:00 (0.0 giây)
Bước 2: Nhấn Ctrl+T để tạo một trigger
Một popup sẽ xuất hiện để bạn chỉnh sửa/ thêm đoạn code của mình vào
Bên phải của popup là danh sách một vài loại code chính
Bước 3: Chọn nút “Stop” từ danh sách
Một đoạn code sẽ xuất hiện. Nội dung của đoạn trigger như sau:
sym.stop();
Bước 4: Nhấn hoặc phím Esc để đóng popup lại.
b. Actions
Action là một hàm được gọi đáp lại các sự kiện của chuột, chạm, timeline
hay các sự kiện khác.
Mỗi thành phần mà có thể có Actions thì sẽ có một nút Open Actions như
sau:
Bước 1: Trong khung Elements, chọn nút Open Actions của thành phần
“play” <div>
Bước 2: Chọn “click” từ menu.
Bước 3: Nhấn nút “Play” từ danh sách các hàm.
Nội dung của hàm Action của bạn giống như sau:
sym.play();
Bước 4: Đóng code popup
c. Nhãn

Bạn có thể thêm nhãn vào Timeline để đánh dấu vị trí cần thiết. Nhãn
này có thể sử dụng để viết code.
Bước 1: Đặt playhead tại vị trí bắt đầu của hiệu ứng chính 0:00.500 (0.5
giây).
Bước 2: Thêm nhãn bằng tổ hợp phím Ctrl+L
Bước 3: Nhập tên loop và nhấn Enter
Timeline lúc này sẽ như sau:
Timeline Actions
Timeline cũng có thể chạy các hàm để cho bạn biết điều gì đang xảy ra
với hiệu ứng của bạn.
Sự kiện hoàn thành được chạy khi playhead chạy đến cuối của timeline
Bước 1: Trên Timeline, mở Timeline Actions popup bằng cách nhấn nút
ở bên trái của dòng tiêu đề Actions
Bước 2: Chọn sự kiện “complete”
Bước 3: Chọn nút “Play from” từ danh sách các hàm
Bước 4: Thay thế số 1000 với từ “loop”
Nội dung hàm giống như sau:
sym.play(“play”);
Bước 5: Đóng code popup lại
Bây giờ bạn đã có một hiệu ứng khi bạn nhấn nút play nó sẽ chạy và lặp
lại
d. Khung code
Egde Animate cũng có một khung Code giúp bạn quản lý tất cả các code
mà bạn có trong project
Nhấn Window > Code để mở khung quản lý code
Bên trái của khung code là cây biểu diễn tổng quan về Actions và
Triggers trong project cảu bạn.
Bạn có thể dùng khung này để chỉnh sửa cũng như thêm mới code.
e. Tạo ra bộ đếm số lần lặp
Bước 1: Trên cây, chọn “play.click”

Bước 2: Đưa con trỏ về sau sym.play();
Bước 3: Nhấn Code Snippets để lộ ra nội dung ở phần bên phải của
khung.
Bước 4: Chọn “Set Symbol Variable” từ danh sách hàm.
Bước 5: Sửa code thành sym.setVariable(“count”, 1);
Nó lưu trữ giá trị mà chúng ta sẽ sử dụng sau. Chúng ta sẽ dùng nó ở
cuối timeline và dùng để đếm số lần lặp
Bước 6: Chọn “Timeline complete”
Bước 7: Đặt con trỏ trước sym.play(“loop”);
Bước 8: Chọn “Get Symbol Variable” từ danh sách hàm.
Bước 9: Sửa đoạn code này lại thành
var count = sym.getVariable(“count”);
Bước 10: Đặt con trỏ vào dòng sau sym.getVariable(“count”);
Bước 11: Chọn “Set Symbol Variable”
Bước 12: Sửa code lại thành
sym.setVariable(“count”, count+1);
Cuối cùng chúng ta cho giá trị biến đếm hiện ra!
Bước 13: Đặt con trỏ ở 0:00.500 (0.5 giây)
Bước 14: Thêm Trigger bằng cách nhấn tổ hợp phím Ctrl+T
Bước 15: Chọn “Get Symbol Variable”
Bước 16: Sửa đoạn code lại thành
var count = sym.getVariable(“count”);
Cuối cùng, sử dụng một ít jQuery trong hàm “Set Element Text” để sửa
thành phần Text trong trang web
Bước 17: Đặt con trỏ vào sau dòng sym.getVariable(“count”);
Bước 18: Chọn “Set Element Text”
Bước 19: Sửa đoạn code lại thành
sym.$(“Text”).html(“” + count);
Mở project bằng trình duyệt để xem thử
7. Ví dụ 7: Tái sử dụng

Ví dụ này sẽ chỉ bạn về Symbol, cách sử dụng chúng với nhau và tương
tác lẫn nhau.
Ví dụ này bao gồm:
Ball1, 2, 3, 4 là các hình tròn bằng nhau
Center là hình tròn nằm ở tâm
SpinRect là nhóm của năm hình trên
a. Chuyển đổi thành symbol
Bước 1: Di chuyển playhead đến 0:01 (1 giây)
Bước 2: Trong khung Elements, bấm phải vào SpinRect <div> và chọn
“Convert to Symbol”
Bước 3: Trong hộp thoại “Create Symbol” đặt tên cho nó là “Spin”, vẫn để
lại tùy chọn “Autoplay timeline” và nhấn OK
Thao tác trên sẽ xóa hết tất cả các thành phần con của nhóm “SpinRect”
và tất cả các hiệu ứng. Thay thế vào đó là một instance symbol “Spin”.
Mỗi symbol sẽ có một hàng “Playback”, đây là vùng biểu diễn chuyển
động của symbol trên timeline.
Việc chuyển đổi từ hình bình thường thành symbol sẽ không làm mất các
chuyển động mà bạn đã thiết kế.
Preview thử bằng Browser (Ctrl+Enter)
b. Tạo ra các Instances
Các bạn để ý lúc này trong Library sẽ xuất hiện symbol “Spin”, đây không
phải là instance mà là một cái định nghĩa (definition) của symbol Spin.
Khi bạn tạo ra một symbol có nghĩa là bạn sẽ tạo ra định nghĩa của nó.
Định nghĩa này sẽ bao gồm các thành phần có chứa trong nó, các hiệu ứng,
triggers và actions
Từ định nghĩa này chúng ta có thể tạo ra nhiều instance tùy thích. Bạn
chỉ cần kéo biểu tượng từ Library và thả vào trang web thôi!
Bước 1: Kéo biểu tượng “Spin” từ Library thả vào bên phải instance đầu
tiên.
Bước 2: Tạo ra instance thứ ba bằng cách nhấn Alt và kéo cái thứ hai về

bên phải. Lúc này trang web sẽ giống như sau
Bước 3: Xem thử bằng trình duyệt
c. Chỉnh sửa Symbols
Bạn có thể chỉnh sửa symbol của mình, khi điều chỉnh bạn sẽ thay đổi cái
định nghĩa và vì thế nên tất cả các instance sẽ thay đổi theo.
Bây giờ chúng ta sẽ điều chỉnh các hiệu ứng chuyển động sao cho chúng
xảy ra không đồng thời với nhau.
Bước 1: Nhắp đôi vào một trong những instance trên trang web, lúc này
ta sẽ vào chế độ chỉnh sửa in-place.
Bước 2: Không cho autoplay nữa bằng cách uncheck “Autoplay” trong
khung Properties.
Bước 3: Quay lại Timeline, mở popup Timeline Actions bằng cách nhấn
vào ký hiệu bên trái của tiêu đề Actions.
Bước 4: Chọn sự kiện “complete”.
Bước 5: Để lặp lại, chúng ta sẽ chọn hàm “Play From” bằng cách nhấn
nút đó ở danh sách bên phải.
Bước 6: Sửa thời gian từ 1000 thành 0. Đơn vị tính là mili giây.
Bước 7: Đóng cửa sổ này lại
Bạn cũng có thể tương tác với symbol
Bước 8: Trong khung Elements, chọn nút Open Actions cho thành
phần “Center” <div>
Bước 9: Chọn “click”
Bước 10: Thêm vào đoạn code sau:
if(sym.isPlaying())
sym.stop();
else
sym.play();
Hàm trên có thể dừng symbol khi nó đang chuyển động
Bước 11: Đóng popup lại
Bước 12: Để đóng chế độ chỉnh sửa symbol ta bấm vào “Stage” trên

thanh breadcrumb ở trên cùng của trang web.
d. Điều khiển việc phát lại
Bây giờ thì chế độ “Autoplay” đã bị tắt, lúc này thanh playback đang
trống rỗng, nếu bạn preview thì sẽ không thấy bất kỳ hiệu ứng nào cả!
Để điều khiển việc chạy hiệu ứng, bạn có thể viết Javascript hoặc bằng
các lệnh Playback có sẵn trên cùng hàng với chữ “Playback”
Bước 1: Di chuyển Playhead đến vị trí 0:00 (0 giây)
Bước 2: Nhấn nút + ở dòng Playback của “Spin” và chọn Play
Bước 3: Di chuyển playhead đến 0:00.750 (0.75 giây), nhấn + trên dòng
Playback của “Spin2” và chọn Play
Bước 4: Di chuyển đến 0:01.500 (1.5 giây) và làm tương tự cho “Spin3”
Preview bằng trình duyệt, nhấn vào chấm giữa mỗi hình để xem kết quả.
IV. TÀI LIỆU THAM KHẢO
1. Website chính thức của phần mềm Adobe Edge Animate,
/>2. Bài viết “Adobe Edge Animate”, Bách khoa toàn thư mở Wikipedia
/>3. Bài viết “Adobe Edge Animate reaches version 1.0”, Website
Heathrowe.com http:// www.heathrowe.com/adobe-edge-animate-
reaches-version-1-0/