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: Adobe Edge Animate gì? Adobe Edge Animate, thường gọi Adobe Edge, công cụ cho phép thiết kế thành phần động web sử dụng chuẩn HTML5, JavaScript CSS3 Phần mềm phát triển Adobe System Phiên 1.0 phát hành vào ngày 24/09/2012 Ngôn ngữ dùng để viết C++ Nền tảng mà phần mềm chạy Microsoft Windows MacOS X Bạn download miễn phí Adobe Edge từ Adobe Creative Cloud qua địa http://html.adobe.com/edge/animate/ Sở dĩ Adobe Edge miễn phí cơng ty muốn đáp lại đóng góp to lớn cộng đồng người dùng trình phát triển phiên beta Edge Adobe Edge Animate hiệu nhiều tảng Adobe nói Edge “được thiết kế thử nghiệm để làm việc hiệu tảng Android iOS, thiết bị tích hợp WebKit trình duyệt máy tính cá nhân phổ biến Firefox, Chrome, Safari, Internet Explorer 9” Vì Web di động ngày nhiều người sử dụng vài năm gần đây, Adobe định cần phải đem đến cho người dùng Web di động tiêu chuẩn hình ảnh động làm việc thiết bị di động “trơn tru” máy tính cá nhân Adobe Edge Animate qua giai đoạn thử nghiệm Chỉ ngày phát hành thử nghiệm Adobe Edge đạt mức 50.000 lượt tải về, điều cho thấy công nghệ hứa hẹn Nhưng bạn đừng mong đợi “làm mưa làm gió” sau ngày mắt, Edge bước chân Adobe đặt vào tảng HTML5 Adobe muốn tiếp nhận “đánh giá phản hồi giúp Adobe xây dựng tính cần thiết lên lộ trình phát triển cho Edge” Nhưng điều chắn Edge thành cơng việc thuyết phục nhà phát triển người dùng Web, Adobe hỗ trợ tiêu chuẩn khác HTML5 để tạo ứng dụng game video phức tạp II Giao diện Màn hình khởi động - Project Command: tạo dự án, mở dự án có sẵn - Recent Project List: dự án gần - Resource Tabs: tài nguyên để tham khảo, học tập Màn hì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: xếp, canh vị trí, gom nhóm 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 đối tượng + Border Color: màu viền đối tượng + Layout Defaults for New Elements: định dạng mặc định cho đối tượng - Khung thuộc tính (Properties): chứa thuộc tính đối tượng - Khung học (Lesson): chứa học để tiếp cận Adobe Edge - Khung thành phần (Element): thành phần trang web - Khung thư viện (Library): chứa thành phần làm nguồn cho trang web font, asset, symbol - Khung timeline: chứa control xem trước hiệu ứng, hiển thị thành phần thuộc tính thay đổi theo thời gian, biểu diễn trực quan thời gian hiệu ứng Đặc biệt khung có nút: + Auto-Keyframe Mode: ghi nhận thay đổi giá trị thuộc tính trực tiếp timeline + Auto-Transition Mode: tự tạo hiệu ứng 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ụ: Ví dụ 1: Những thao tác Ví dụ giúp bạn biết cách tạo hình chữ nhật làm chuyển động Bước 1: Chọn cơng cụ hình chữ nhật cơng cụ Bước 2: Vẽ hình chữ nhật góc bên trái trang web Bước 3: Bấm vào nút Pin Timeline Bước 4: Kéo Playhead đến vị trí 0:01 (1 giây) Khi bạn kéo playhead biểu tượng pin màu xanh lại Bước 5: Di chuyển hình chữ nhật đến góc bên phải trang web Bước 6: Bấm vào miếng màu xám khung Properties Bước 7: Đổi màu nhấn Enter Bước 8: Nhấn Space để xem hiệu ứng Ví dụ 2: Chỉnh thuộc tính đố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 cơng cụ Bước 2: Vẽ hình trang web Đối tượng bạn vẽ thẻ có style điều chỉnh CSS3 Bạn điều chỉnh khung Properties Bước 3: Trên khung Properties, bấm vào biểu tượng nối Width Height Bước 4: Đặt lại giá trị W 220 H 130 b Thêm chữ Bước 1: Chọn công cụ Text Bước 2: Bấm vào hình chữ nhật vẽ nhập vào dòng chữ “Hello World” Bước 3: Tắt Text Editor Bước 4: Chọn chữ sử dụng Smart Guides để canh chữ hình c Importing Graphics Bạn import hình ảnh có png, jpg, gif, svg chúng đặt trường Asset khung Library Bước 1: Kéo file background.jpg từ Library vào trang web thả vào tọa độ (0, 0) Các bạn thấy hình vừa tạo che phủ hết tồn chữ hình vẽ Sửa lại cách xếp lại khung Element Thứ tự hiển thị chúng giống thứ tự stack (ngăn xếp - LIFO) Bước 2: Trong khung Elements, kéo thành phần “background” xuống phía thành phần “RoundRect” d Tổ chức Elements Bạn đổi thành phần cha thành phần khác cách kéo thả Trong khung Elements, kéo thả thành phần “Text” vào thành phần “RoundRect” Ví dụ 3: Hiệu ứng keyframe Ví dụ hướng dẫn hiệu ứng Edge Animate Bạn học cách tạo Keyframe hiệu ứng chuyển cảnh, điều chỉnh hiệu ứng thông qua Easing cách sử dụng copy/paste để tạo chuyển động nhanh a Tạo Keyframe Bước 1: di chuyển Playhead đến 0:01 Bước 2: Chọn “E” trang web Bước 3: Chọn nút tọa độ Y khung Properties Một keyframe cho Top xuất Timeline Bước 4: kéo Playhead đến vị trí 0:00 Bước 5: thêm keyframe khác cho Y (giống bước trên) Bước 6: Đổi giá trị Y thành -90 Bước 7: Bấm nút phím Space để chạy thử hiệu ứng Bạn thấy chữ E bắt đầu ngồi sau nhảy đến vị trí lúc giây Keyframe 0:01 hình thoi rỗng trị khác với giá trị keyframe trước điều cho thấy có giá b Thêm hiệu ứng chuyển cảnh Khi hai keyframe có giá trị khác ta thêm transition vào để chuyển từ từ từ giá trị sang giá trị Bước 1: Bấm phải vào hai keyframe chọn Create Transition Transition xuất hiện, dải màu suốt nối hai keyframe với Bước 2: Bấm nút phím Space để chạy thử hiệu ứng Chúng ta thấy chữ E từ từ chạy xuống c Điều chỉnh Easing Mỗi transition có Easing giúp điều chỉnh kiểu hiệu ứng Bước 1: Chọn transition cách nhấp vào suốt kết nối keyframe Bước 2: chọn công cụ Easing Bước 3: Chọn “Ease Out and Bounce” nhấn Enter để sử dụng Bước 4: Chạy thử cách nhấn Space nút Play Chữ E rớt xuống bị nảy lên d Chỉnh hiệu ứng cho bóng Auto Keyframe Mode điều khiển việc tạo keyframe tự động thay đổi thuộc tính Auto Transition Mode tự động tạo hiệu ứng chuyển cần thiết Bước 1: Click vào nút Auto Keyframe Mode để bật Bước 2: Click vào nút Auto Transition Mode để bật Bước 3: Chọn bóng chữ web Bước 4: Di chuyển playhead đến 0:01 Bước 5: Trong mục Tranform khung Properties nhấn vào nút keyframe để ấn định giá trị x y Bước 6: chuyển playhead thời điểm 0:00 Bước 7: khung Properties sửa giá trị x thành Hai giá trị x y khóa lại với nhau, x thay đổi hai keyframe transition tạo Và bước sử dụng hiệu ứng nảy bật lên nên áp dụng vào bóng Bước 8: nhấn Play để xem thử e Tái sử dụng Keyframe Bước 1: Chọn chữ E trang web Bước 2: Nhấn phía timeline để tắt chức snapping (chức giúp bắt dính playhead vào đ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: khung Properties sửa giá trị rotation thành -10 Bước 7: Di chuyển playhead đến vị trí chữ E chạ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ọn keyframe nhé! Bước 9: Copy keyframe Ctrl+C, dán keyframe Ctrl+V Hiệu ứng nảy lên trông tự nhiên ký tự bị nghiêng Bước 10: Bấm play để chạy thử bấm thêm lần để chạy lại từ đầu f Tái sử dụng Transition Transitions copy/dán cách uyển chuyển linh hoạt giúp việc tạo hiệu ứng trở nên nhanh Bước 1: Nhấn phía timeline để bật lại chức snapping Bước 2: Nhấn kéo qua cột visibility G, D E2 khung Elements để làm chúng Ví dụ 4: Tạo hiệu ứng nhanh 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 Quad b Hiệu ứng xuất Bước 1: Di chuyển playhead đến 0:00.250 (0.25 giây) Bước 2: Nhắp đơi vào playhead để trở thành Bước 3: Kéo pin đến 0:00.750 (0.75 giây – lúc pin hiển thị +0.5s) Lúc có vùng màu xanh xuất Vùng xanh biểu hiệu ứng đến trạng thái Bước 4: Chọn đối tượng “RoundRect” khung Elements Bước 5: Nhấn giữ phím Shift để di chuyển theo đường thẳng, ta kéo hình khỏi trang web bên trái Bước 6: Trong khung Properties, đặt giá trị Rotate lại 720 sau chọn trang web Bước 7: Bấm play Space để chạy thử Bước 8: Bấm Enter để di chuyển playhead activate lại vùng làm việc c Làm cho hiệu ứng trở nên tinh tế Thay đổi thời gian xoay Bước 1: Nắm lấy Rotate keyframe di chuyể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ắn vùng làm việc (vùng màu xanh) activate Bước 4: Chọn vùng màu xanh sau kéo sang phải cho playhead lúc 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 Bước 7: Sửa giá trị Opacity thành d Hiệu ứng thoát Bước 1: Đầu tiên chọn công cụ Easing chọn Ease In Quad Bước 2: Nắm lấy pin di chuyển đến 0:01.750 (1.75 giây) Điều tạo thành vùng màu vàng Vùng màu vàng biểu hiệu ứng từ trạng thái Bước 4: Chọn chữ “Hello World” Bước 5: Đặt giá trị Opacity xuống Bước 6: Nắm lấy vùng màu vàng kéo bên phải đến 0:00.500 (0.5 giây) lúc ký hiệu pin vị trí 0:02 (2 giây) Bước 7: Chọn “RoundRect” Bước 8: Nhấn giữ Shift di chuyển ngồi trang web bên phải Chạy thử để xem kết Ví dụ 5: Thay đổi kích thước Ví dụ hướng dẫn bạn làm cho hiệu ứng bạn tạo phản ứng cửa sổ trang web thay đổi Ví dụ gồm có • Panel 1, 2, chứa chữ chạy dọc • Text thẻ chứa text “Move Your Items” • Text thẻ chứa text “On Command” • Red Ribbon, Banner, FremontCycles hình xe đạp, chữ SCALE dải băng đỏ • Panel_bg xanh dịng chữ chạy xuống Bạn resize thử trình duyệt qua tổ hợp phím Ctrl+Enter a Trạng thái Scalable Bước để làm thành phần thay đổi kích thước bạn phải thiết lập trạng thái đáp ứng có thay đổi xảy Trong ví dụ làm cho chiều ngang thay đổi kích thước chiều dọc không thay đổi Bước 1: Chọn stage khung Elements Bước 2: Trong khung Properties, nhấn vào nút gạt unit để chuyển đổi đơn vị W từ px thành % Giá trị W lúc 100% nên căng ngang hết hình trình duyệt với màu màu xanh nhạt (để Preview nhấn Ctrl+Enter resize để xem kết quả) b Resize thiết kế Bạn kiểm tra kết việc resize Edge Animate Khi chiều x chuyển thành đơn vị % ký hiệu trạng thái resize xuất thước đo, bên mép phải trang web Bạn di chuyển để xem kết Bước 1: Di chuyển ký hiệu trạng thái tới lui để xem đáp ứng trang web Bước 2: Khi xong, bạn cần trả ký hiệu nơi ban đầu 800px, tự động dính vào vị trí bạn di chuyển trỏ c Vị trí theo đơn vị phần trăm Ý tưởng việc thay đổi resize vào vị trí theo đơn vị tính phần trăm thành phần Nhờ bạn thay đổi kích thước trình duyệt kích thước thành phần tự thay đổi theo kích thước thành phần cha Bước 1: Chọn Text1 khung Elements Bước 2: Giữ Shift chọn tiếp Text2 Bước 3: Trong khung Properties, đổi đơn vị tính X thành % Bước 4: Preview cách kéo ký hiệu trạng thái (nhớ trả trạng thái ban đầu xong) Bạn thấy resize hai thành phần Text thay đổi vị trí kích thước trình duyệt thay đổi d Kích thước theo đơn vị phần trăm Bạn thay đổi kích thước thành phần theo phần trăm kích thước thành phần cha Bước 1: Chọn red_ribbon từ khung Elements Bước 2: Trong khung Properties, chuyển đơn vị W thành % Bước 3: Xem thay đổi resize trình duyệt ký hiệu trạng thái Bước 4: Xem xong, trả kích thước ban đầu 800px e Vị trí tương đối Mặc định đối tượng có vị trí tương góc bên trái thành phần cha Đó lý đối tượng cịn bất động resize Bạn sử dụng coordinate space picker khung Properties để thay đổi vị trí tương đối đối tượng với góc thành phần cha Ví dụ đối tượng sau, vị trí tương đối gắn với góc bên phải khoảng cách với góc khơng thay đổi ta resize Bước 1: Ở khung Elements, chọn panel_bg Bước 2: Trong khung Properties, chọn góc bên phải coordinate space picker Bước 3: Chuyển đơn vị W từ px thành % Bước 4: Chọn panel1 Bước 5: Chọn ba panel1, 2, cách giữ Shift chọn panel3 Bước 6: Chọn góc phải coordinate space picker Bước 7: Chuyển đơn vị W từ px thành % Các thao tác giúp cho panel màu xanh chữ động có vị trí tương góc phải website Kiểm tra kết trả vị trí 800px xong f Định vi trước hình ảnh Với hình ảnh để hiển thị cách hồn hảo cần nhiều bước chỉnh sửa thuộc tính khác Để dễ dàng, Edge Animate cung cấp thiết đặt sẵn (presets) 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ứ từ xuống “Center Background Image” nhấn Apply Lựa chọn resize hai trục x y hình nằm Chạy thử 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 thành phần hay trang web Bước 1: Chọn thành phần stage Bước 2: Trong khung Properties, đặt giá trị Min W 650px Bước 3: Nhấp vào Max W không chọn none Bước 4: Nhập vào Max W giá trị 1280px Điều làm chiều ngang trang web từ 650px đến 1280px Nhấn tổ hợp Ctrl+Enter resize trình duyệt để xem kết Ví dụ 6: Mở rộng Ví dụ giúp bạn hồn thiện tác phẩm với Javascript Ví dụ ba thành phần: Text số hình chữ nhật Rectangle hình chữ nhật Play nút hình tam giác Bấm Ctrl+Enter để xem ví dụ trình duyệt Đầu tiên nút play xuất hiện, sau hình chữ nhật chứa số xoay tròn biến to dần thành hình trịn a Triggers Trigger hàm gọi lên vào thời điểm định Nó thêm vào Timeline 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 trigger Một popup xuất để bạn chỉnh sửa/ thêm đoạn code vào Bên phải popup danh sách vài loại code Bước 3: Chọn nút “Stop” từ danh sách Một đoạn code xuất Nội dung đoạn trigger sau: sym.stop(); Bước 4: Nhấn phím Esc để đóng popup lại b Actions Action hàm gọi đáp lại kiện chuột, chạm, timeline hay kiện khác Mỗi thành phần mà có Actions có nút Open Actions sau: Bước 1: Trong khung Elements, chọn nút Open Actions thành phần “play” Bước 2: Chọn “click” từ menu Bước 3: Nhấn nút “Play” từ danh sách hàm Nội dung hàm Action bạn giống sau: sym.play(); Bước 4: Đóng code popup c Nhãn Bạn thêm nhãn vào Timeline để đánh dấu vị trí cần thiết Nhãn sử dụng để viết code Bước 1: Đặt playhead vị trí bắt đầu hiệu ứng 0:00.500 (0.5 giây) Bước 2: Thêm nhãn tổ hợp phím Ctrl+L Bước 3: Nhập tên loop nhấn Enter Timeline lúc sau: Timeline Actions Timeline chạy hàm bạn biết điều xảy với hiệu ứng bạn Sự kiện hoàn thành chạy playhead chạy đến cuối timeline Bước 1: Trên Timeline, mở Timeline Actions popup cách nhấn nút bên trái dòng tiêu đề Actions Bước 2: Chọn kiện “complete” Bước 3: Chọn nút “Play from” từ danh sách hàm Bước 4: Thay số 1000 với từ “loop” Nội dung hàm giống sau: sym.play(“play”); Bước 5: Đóng code popup lại Bây bạn có hiệu ứng bạn nhấn nút play chạy lặp lại d Khung code Egde Animate có khung Code giúp bạn quản lý tất code mà bạn có project Nhấn Window > Code để mở khung quản lý code Bên trái khung code biểu diễn tổng quan Actions Triggers project cảu bạn Bạn dùng khung để chỉnh sửa thêm code e Tạo đếm số lần lặp Bước 1: Trên cây, chọn “play.click” Bước 2: Đưa trỏ sau sym.play(); Bước 3: Nhấn Code Snippets để lộ nội dung phần bên phải 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à sử dụng sau Chúng ta dùng cuối timeline dùng để đếm số lần lặp Bước 6: Chọn “Timeline complete” Bước 7: Đặt 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 lại thành var count = sym.getVariable(“count”); Bước 10: Đặt 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 cho giá trị biến đếm ra! Bước 13: Đặt trỏ 0:00.500 (0.5 giây) Bước 14: Thêm Trigger 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 jQuery hàm “Set Element Text” để sửa thành phần Text trang web Bước 17: Đặt 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 trình duyệt để xem thử Ví dụ 7: Tái sử dụng Ví dụ bạn Symbol, cách sử dụng chúng với tương tác lẫn Ví dụ bao gồm: Ball1, 2, 3, hình trịn Center hình trịn nằm tâm SpinRect nhóm năm hình 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 chọn “Convert to Symbol” Bước 3: Trong hộp thoại “Create Symbol” đặt tên cho “Spin”, để lại tùy chọn “Autoplay timeline” nhấn OK Thao tác xóa hết tất thành phần nhóm “SpinRect” tất hiệu ứng Thay vào instance symbol “Spin” Mỗi symbol có hàng “Playback”, vùng biểu diễn chuyển động symbol timeline Việc chuyển đổi từ hình bình thường thành symbol không làm chuyển động mà bạn thiết kế Preview thử Browser (Ctrl+Enter) b Tạo Instances Các bạn để ý lúc Library xuất symbol “Spin”, instance mà định nghĩa (definition) symbol Spin Khi bạn tạo symbol có nghĩa bạn tạo định nghĩa Định nghĩa bao gồm thành phần có chứa nó, hiệu ứng, triggers actions Từ định nghĩa tạo nhiều instance tùy thích Bạn cần kéo biểu tượng từ Library 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 Bước 2: Tạo instance thứ ba cách nhấn Alt kéo thứ hai bên phải Lúc trang web giống sau Bước 3: Xem thử trình duyệt c Chỉnh sửa Symbols Bạn chỉnh sửa symbol mình, điều chỉnh bạn thay đổi định nghĩa nên tất instance thay đổi theo Bây điều chỉnh hiệu ứng chuyển động cho chúng xảy không đồng thời với Bước 1: Nhắp đôi vào instance trang web, lúc ta vào chế độ chỉnh sửa in-place Bước 2: Không cho autoplay cách uncheck “Autoplay” khung Properties Bước 3: Quay lại Timeline, mở popup Timeline Actions cách nhấn vào ký hiệu bên trái tiêu đề Actions Bước 4: Chọn kiện “complete” Bước 5: Để lặp lại, chọn hàm “Play From” 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 Đơn vị tính mili giây Bước 7: Đóng cửa sổ lại Bạn tương tác với symbol Bước 8: Trong khung Elements, chọn nút Open Actions phần “Center” Bước 9: Chọn “click” Bước 10: Thêm vào đoạn code sau: cho thành if(sym.isPlaying()) sym.stop(); else sym.play(); Hàm dừng symbol 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” breadcrumb trang web d Điều khiển việc phát lại Bây chế độ “Autoplay” bị tắt, lúc playback trống rỗng, bạn preview khơng thấy hiệu ứng cả! Để điều khiển việc chạy hiệu ứng, bạn viết Javascript lệnh Playback có sẵn 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 “Spin” chọn Play Bước 3: Di chuyển playhead đến 0:00.750 (0.75 giây), nhấn + dòng Playback “Spin2” chọn Play Bước 4: Di chuyển đến 0:01.500 (1.5 giây) làm tương tự cho “Spin3” Preview trình duyệt, nhấn vào chấm hình để xem kết IV TÀI LIỆU THAM KHẢO Website thức phần mềm Adobe Edge Animate, http://html.adobe.com/edge/animate/ Bài viết “Adobe Edge Animate”, Bách khoa toàn thư mở Wikipedia http://en.wikipedia.org/wiki/Adobe_Edge_Animate Bài viết “Adobe Edge Animate reaches version 1.0”, Website Heathrowe.com http:// www.heathrowe.com/adobe-edge-animatereaches-version-1-0/ .. .Adobe Edge Animate I Giới thiệu: Adobe Edge Animate gì? Adobe Edge Animate, thường gọi Adobe Edge, công cụ cho phép thiết kế thành phần động web sử dụng chuẩn HTML5, JavaScript... http://html .adobe. com /edge/ animate/ Sở dĩ Adobe Edge cịn miễn phí cơng ty muốn đáp lại đóng góp to lớn cộng đồng người dùng trình phát triển phiên beta Edge Adobe Edge Animate hiệu nhiều tảng Adobe nói Edge. .. KHẢO Website thức phần mềm Adobe Edge Animate, http://html .adobe. com /edge/ animate/ Bài viết ? ?Adobe Edge Animate? ??, Bách khoa toàn thư mở Wikipedia http://en.wikipedia.org/wiki /Adobe_ Edge_ Animate