Thiết kế: Macromedia Flash

Macromedia Flash 5.0 Flash là một công cụ để tạo ra những trang web động và có khả năng tương tác với người dùng. 1/- Giới thiệu về Flash Bạn cần biết những gì trước khi học Flash? Trước khi bước vào học Flash, bạn cần biết một số kiến thức cơ bản về những vấn đề sau: WWW, HTML và kỹ thuật xây dựng Web cơ bản Flash là gì? Macromedia Flash là một chương trình kết hợp đồ hoạ và âm thanh đặc biệt được sử dụng cho web. Flash cho phép bạn tạo ra những "đoạn phim" có khả năng tương tác. Flash sử dụng những hình ảnh vector, điều đó có nghĩa là hình ảnh có thể phóng đại, thu nhỏ đến bất kì kích cỡ nào mà không giảm chất lượng (độ sắc nét của ảnh). Flash không đòi hỏi bạn phải có kỹ năng lập trình, và một điều thật tuyệt là Flash rất dễ học!!! Flash vs. Animated Images, Java Applets Ảnh động và Java applet thường được sử dụng để tạo những hiệu ứng động cho trang web. Và những điểm tiến bộ của Flash so với ảnh động và Java applet là: Flash load nhanh hơn nhiều so với ảnh động Flash cho phép tương tác với người dùng, còn ảnh động thì không Flash không đòi hỏi kỹ năng lập trình như Java applets 2/- Flash, làm thế nào…??? Những ai có thể xem được Flash? Macromedia đã nói: "Tháng 9 năm 2000, theo nghiên cứu của NPD (MediaMetrix) về việc có bao nhiêu người sử dụng Web có Macromedia Flash đã được install sẵn. Kết quả lá khoảng 96.4% người dùng có thể xem Flash mà không cần download và install chương trình đề chạy." Macromedia Shockwave Player được kèm theo trong các hệ đều hành Windows 95, 98, MacOS, Internet Explorer CD, America Online, và Netscape Navigator. Nếu bạn chưa install Shockwave Player bạn có thể download miễn phí trong trang chủ của Macromedia (200 K). Những ai có thể tạo Flash Movies? Để tạo được Flash movies của chính bạn, bạn cần có 1 chương trình Flash, phiên bản mới nhất của Macromedia là Flash 5. Nếu ban không có chương trình Flash thì có thể download phiên bản dùng thử 30 ngày của Flash 5 trong trang chủ của Macromedia. Nên bắt đầu từ đâu? Sau khi đã install Flash, bạn nên theo những bài học đã được kèm theo trong chương trình. Khởi động Macromedia Flash, chọn Help trên thanh menu và chọn Lessons. những bài học này sẽ dạy bạn nền tảng về Flash. 3/- Flash và HTML Flash được kèm theo trong HTML Sau khi đã tạo được một Flash movie, bạn chọn File > Save As trong thanh menu để lưu file movie của bạn. Lưu file với đuôi .fla. Để kèm Flash movie bạn vừa tạo vào 1 trang HTML, bạn hãy trở lại chương trình Flash và làm những bước sau: Bước 1 Chọn File > Open. Mở Flash movie bạn vừa tạo được. Bước 2 Chọn File > Export Movie. Bước 3 Đặt tên cho file Flash cua bạn với đuôi .swf. Chọn vị trí để chứa file Flash của bạn (trong thư mục chứa Web của bạn). Cick OK. Bước 4 Mở trang HTML của bạn, chọn vị trí bạn muốn đặt Flash movie. Nhập vào đoạn mã sau đây: <object width="chiều ngang" height="chiều cao"> <param name="tên" value="tên file flash .swf"> <embed src="tên file Flash .swf" width="chiều ngang" height="chiều cao"> </embed> </object> Chú ý: Đây là đoạn mã ngắn nhất mà bạn cần để kèm Flash movie vào trang web. Nếu người dùng không xem được Flash thì trình duyệt sẽ hiện ra kí hiệu liên kết gãy. Chú ý: Trong đoạn mã trên, có cả thẻ <embed> và thẻ <object>. Bởi vì thẻ <object> dành cho Internet Explorer, còn Netscape chỉ nhận được thẻ <embed> và bỏ qua thẻ <object>. Bước 5 Bây giờ hãy mở trang HTML và xem đoạn phim Flash đầu tiên của bạn Hãy để chương trình Flash làm việc Đoạn mã trên đây là đoạn mã tương đối ngắn nhất để kèm Flash vào trang HTML. Nhưng bạn không nên dùng nó. Hãy thêm một số thuộc tính: • classid là một thuộc tính cho thẻ <object>. Nó bắt Internet Explorer load ActiveX plug-in nếu chưa installed sẵn trong máy. • pluginspage là thuộc tính cho thẻ <embed>. Nó hiển thị một link đến trang Download của Shockwave download nếu Netscape chưa có plugin. Chương trình Flash có thể thêm một số thuộc tính cho bạn, hãy làm như sau: Bước 1 Chọn File > Publish. Flash sẽ tạo các thẻ <object>, <param>, và <embed> cho bạn, kể cả các thuộc tính classid và pluginspage. Bước 2 Mở tài liệu HTML mà Flash đã tạo, xem source và copy đoạn mã cho trang HTML của bạn. 4/- Flash Tweening Thuật ngữ Tweening được tạo ra từ "in between". Với Tweening bạn có thể làm cho Flash movie cua mình đi từ một keyframe tới một keyframe khác, và thay đổi hoạt ảnh. Hãy để Flash làm việc đó, bạn chi cần 2 keyframe và Flash tạo ra những frame ở giữa chúng (“in between”). Với ví dụ này, bạn sẽ học cách tạo ra 1 đối tượngchuyển động dọc theo màn hình: Bước 1 Tạo một hình tròn nhỏ bên trái trong khu vực Stage. Bạn làm điều này bằng cách chọn công cụ vẽ hình tròn trên toolbar bên trái, và vẽ ở khu vực Stage. Bước 2 Chọn công cụ Arrow (mũi tên) trên toolbar bên trái. Click vào hình tròn vừa vẽ để chọn nó. Bước 3 Bây giờ chúng ta phải chuyển hình tròn này thành 1 symbol. Bởi vì khi đã chuyển thành symbol chúng ta mới có thể làm việc với nó. Từ menu, chọn Insert > Convert to Symbol. Đặt tên symbol này, "Ball" chẳng hạn, và chọn OK. Bước 4 Chuyển tới Frame 10 trong Timeline bằng cách click ô màu xám bên dưới số 10. Sau đó click phải trong ô này, chọn Insert Keyframe. Quá trình này đã sao chép hình ảnh. Chú ý: Mỗi keyframe đều ảnh hưởng đến sự hoạt động của các đối tượng trong đoạn phim của bạn. Bạn hãy tạo keyframes tại những thời điểm quan trọng trong Timeline và để Flash tạo các frames ở giữa. Bước 5 Chọn hình tròn và di chuyển nó về bên phải một vài cm. Bước 6 Click vị trí bất kỳ trên Timeline trong khoảng từ Frame 1 đến Frame 10. Sau đó click chuột phải và chọn Create Motion Tween. Bước 7 Chọn Control > Test Movie từ menu để thử nghiệm Flash movie của bạn! 5/- Flash Guide Tweening – Tweening với đường dẫn Với Motion Guide Tweening bạn có thể di chuyển 1 từ vị trí này đến vị trí khác dọc theo đường dẫn đã được chỉ ra. Với ví dụ sau, bạn sẽ học cách vẽ đường dẫn cho một đối tượng. Bước 1 Chọn Window > Common Libraries > Graphics. Chọn một hình ảnh mà bạn muốn sử dụng cho ví dụ này, tôi sử dụng một chú chuột màu xanh. Bước 2 Click trên hình, và drag nó ra khỏi biên ngang của Stage. Bước 3 Chọn Frame 40 trên Timeline (click trên ô màu xám bên dưới số 40). Sau đó click chuột phải, chọn Insert Keyframe. Bước 4 Click bất cứ vị trí nào trên Timeline giữa khoảng Frame 1 và Frame 40, sau đó click phải, chọn Create Motion Tween. Bước 5 Click chuột phải trên Layer 1 (Chọn trên tên của layer, chỗ ghi "Layer 1"). Chọn Add Motion Guide trong menu pop-up. Bây giờ Flash sẽ thêm vào motion guide layer phía trên layer 1. Motion guide layers dùng để vẽ đường dẫn cho symbol chạy theo. Bước 6 Click vào Motion Guide Layer để chắc chắn nó là layer đang hoạt động (Chọn trên tên layer, chỗ ghi "Guide: Layer 1"). Bước 7 Click vào công cụ Pencil (bút chì) trên thanh công cụ bên trái. Chọn chế độ bút chì Smooth (nét vẽ mượt) trong khu Options thanh công cụ bên trái. Bước 8 Vẽ một đường, bắt đầu từ hình ảnh của bạn và vẽ sang biên bên kia của Stage. Bước 9 Chọn lai Frame 1 trên Timeline. Chọn công cụ Arrow (mũi tên) trên thanh công cụ bên trái. Chọn nút "Snap to Objects" trong khu Options của thanh công cụ. Bước 10 Dời hình ảnh của bạn sao cho điểm chính giữa của nó ngay chỗ đường dẫn bắt đầu (đường mà bạn đã vẽ bằng bút chì Pencil). Điểm giữa của hình được biểu hiện bởi 1 dấu +. Một đường tròn đen nhỏ xuất hiện khi hình ảnh của bạn đã được gắn với đường dẫn (motion guide). Thả chuột ra! Bước 11 Chọn Frame 40. Dời hình của bạn sao cho điểm chính giữa trùng với diểm kết thúc của đường dẫn. Bước 12 Chọn Control > Test Movie trên menu để thử nghiệm Flash movie cua bạn. Flash Movie của bạn có chạy nhanh quá không? Bạn có thể điều chỉnh tốc độ bằng cách chọn Modify > Movie trên menu. Hộp thoại Movie Properties (thuộc tính của Movie) sẽ xuất hiện. Frame Rate điều chỉnh bao nhiêu frame sẽ xuất hiện trong một giây. Bạn chọn một con số nhỏ hơn và thử lại Flash movie cho đến khi vừa ý! 6/- Flash Tint Tweening Với Tint Tweening bạn có thể đổi màu cho một đối tượng. Với ví dụ sau, bạn sẽ được học cách để làm điều đó. Bước 1 Chọn Insert > New Symbol. Chú ý: Để thêm hiệu ứng Tint, đối tượng của bạn phải là 1 Symbol. Bước 2 Đặt tên cho symbol là "changecolor" và chọn Behavior là Graphic. Click OK. Chú ý: Chương trình Flash sẽ chạy phần ứng dụng tạo symbol của nó. Bạn có thể tạo symbol bằng chương trình này. Bạn có thể drag các Symbol vào stage sau khi đã tạo xong chúng. Bước 3 Chọn công cụ Text trên toolbox bên trái. Chọn Text > Size > 36 trên thanh menu để chữ to hơn. Chọn Text > Style > Bold. Bước 4 Click vào khu vực làm việc và gõ "Color Changing Text". Bước 5 Trở lại Movie của bạn bằng cách chọn Edit > Edit Movie. Bước 6 Chèn symbol bạn vừa tạo vào Movie. Chọn Window > Library. Chọn symbol "changecolor" và drag nó vào giữa Stage. Bước 7 Thêm vào 2 keyframe ở Frame 15 và Frame 30. Bước 8 Đến Frame 15. Click phải vào text ở giữa Stage. Trong pop-up menu, chọn Panels > Effect. Bước 9 Chọn Tint từ menu đổ xuống, một bảng màu sẽ xuất hiện. Chỉnh màu: R=0, G=255, B=0. Bước 10 Click Timeline bất cứ chỗ nào trong khoảng từ Frame 1 đến Frame 15. Sau đó click phải, chọn Create Motion Tween. Bước 11 Tương tự với khoảng từ Frame 15 đến Frame 30. Bước 12 Chọn Control > Test Movie trên thanh Menu để thử nghiệm Flash movie. 7/- Flash Shape Tweening - Đổi hình dáng Với Shape Tweening bạn có thể đổi hình dạng của 1 đối tượng. Bạn sẽ được học qua ví dụ sau đây: Bước 1 Chọn công cụ Text trên thanh công cụ bên trái. Chọn Text > Size > 48 trên menu chính để là chữ to hơn. Chọn Text > Style > Bold để làm chữ đậm hơn. Bước 2 Click vào không gian làm việc và gõ "Hello". Bước 3 Click phải vào Text mà bạn vừa gõ, chọn Panels > Align từ pop-up menu. Bước 4 Trong hộp thoại Align bấm nút "To Stage" trước tiên. Sau đó bấm nút "Align Horizontal Center" và nút "Align Vertical Center". Đóng hộp thoại Align. Bước 5 Chọn công cụ Arrow rồi bấm vào đối tượng text. Chọn Modify > Break Apart trên menu chính. Bước 6 Chèn keyframe ở Frame 24, 50 và 51. Bước 7 Xoá chữ "Hello" ở Frame 24: chọn nó và bấm Delete trên bàn phím. Bước 8 Viết 1 chữ khác trên Stage, "World!” chẳn hạn (Font size: 48, style: bold). Bước 9 Click phải trên đối tượng text bạn vừa tạo và chọn Panels > Align trong menu pop-up menu. Trong hộp thoại Align chọn nút "To Stage", sau đó click nút "Align Horizontal Center" và nút "Align Vertical Center". Đóng hộp thoại Align lại. Bước 10 Dùng công cụ Arrow và click vào đối tượng text. Chọn Modify > Break Apart trên menu chính. Bước 11 Chèn 1 keyframe tại vị trí Frame 26. Bước 12 Click đúp keyframe ở Frame 1. Trong hộp pop-up nhỏ, click chọn tab Frame. Chọn thuộc tính Tweening là Shape. Đóng hộp pop-up lại. Bước 13 Tương tự ở Frame 26. Bước 14 Click đúp trên keyframe ở Frame 51. Trên hộp pop-up lớn, click chọn tab Frame Actions. Click lên dấu +. Chọn Basic Actions > Go To. Đóng hết pop-up. Bước 15 Chọn Control > Test Movie trên menu chính để thử nghiệm Flash movie của bạn. 8/- Flash Button 1 Trong ví dụ này bạn sẽ học cách để chèn 1 hình, chuyển nó thành button (nút bấm), và thêm URL cho nó, nút bấm của bạn sẽ trở thành 1 link. Bước 1 Chọn File > Import to để thêm vào 1 hình. Chọn hình rồi bấm Open. Hình này sẽ được lưu vào Library. Bước 2 Chọn hình này với công cụ Arrow. Bước 3 Chuyển hình thành 1 symbol: Chọn Insert > Convert to Symbol trên menu chính. Đặt tên cho symbol này là "button", chọn Behavior là Button rồi click OK. Bước 4 Click phải lên hình, chọn Actions từ pop-up menu. Bước 5 Trong hộp thoại Object Actions click vào dấu +. Chọn Basic Actions > Get URL. Bước 6 Nhập 1 URL đầy đủ vào field URL (ví dụ như http://huynhhaidang.org). Bước 7 Chọn target Window. Đóng hộp thoại Object Actions. Bước 8 Chọn Control > Test Movie để thử nghiệm Flash movie của bạn. 9/- Flash Button 2 Ví dụ: Bước 1 Chọn Insert > New Symbol trên menu chính. Bước 2 Đặt tên symbol là "button", chọn Behavior là Button rồi click OK. Trên Timeline, bạn sẽ thấy 4 state của 1 button: up, over, down, hit. Bước 3 Chọn côg cụ Rectangle (hình chữ nhật), chọn 1 màu đỏ sáng làm màu tô và vẽ 1 hình chữ nhật vào không gian làm việc. Bước 4 Chọn công cụ Text, chọn 1 màu đậmvà gõ "Click Me" trên hình chữ nhật. Bước 5 Chọn công cụ Arrow và di chuyển text và giữa hình chữ nhật. Bước 6 Chèn 1 keyframe vào Over State trên Timeline. Over State xác định điều gì sẽ xảy ra khi bạn đưa chuột ngang nút bấm. Bước 7 Chọn công cụ Rectangle, đổi màu tô sang 1 màu xanh lá cây sáng. Bước 8 Chọn Edit > Edit Movie để trở về Movie. Bước 9 Chọn Window > Library, drag button vào không gian làm việc. Bước 10 Click phải trên hình ảnh. Chọn Actions từ menu pop-up. Bước 11 Trong hộp thoại Object Actions click vào dấu +, chọn Basic Actions > Get URL. Bước 12 Nhập URL đầy đủ vào field URL. Bước 13 Chọn target Window. Đóng hộp thoại Object Actions. Bước 14 Chọn Control > Test Movie trên menu chính để thử nghiệm Flash movie của bạn. 10/- Flash Animation Ví dụ: Bước 1 Chèn 1 đối tượng text trên góc cao bên trái của Stage. Bước 2 Chọn công cụ Arrow. Click vào Text 1 lần để chọn nó. Bước 3 Chuyển Text sang dạng symbol. Chọn Behavior là graphic rồi bấm OK. Bước 4 Đến Frame 30 trên Timeline. Click chuột phải vào ô xám. Chọn Insert Keyframe. Bước 5 Click bất cứ vị trí nào trên Timeline trong khoảng từ Frame 1 đến Frame 30. Click phải chuột và chọn Create Motion Tween. Bước 6 Trở lại Frame 30, di chuyển text xuống góc thấp bên phải. Bước 7 Kiểm tra xem Text có được chọn không. Chọn Modify > Transform > Flip Horizontal. Bước 8 Chọn Control > Test Movie để thử Flash movie của bạn. Text sẽ di chuyển từ vị trí đầu (ở frame 1) tới vị trí thứ 2 (ở frame 30) và xoay vòng. 11/- Flash Sound Ví dụ: Bước 1 Chọn File > Import để kèm 1 file âm thanh. Chọn file và click Open. sẽ được lưu lại trong Library. Bước 2 Click Frame số 1 của "Layer 1" trên Timeline. Chọn Window > Panels > Sound trên menu chính. Bước 3 Chọn file âm thanh bạn đã kèm theo vào field Sound. Chọn Stream cho field Sync. Đóng window pop up lại. Bước 4 Đến Frame 50 trên Timeline. Click chuột phải và chọn Insert Frame. Bước 5 Chọn Control > Test Movie để thử Flash movie của bạn. 12/- Để tạo một khung văn bản có thể biên tập lại: Bước 1 Hãy làm một trong các bước sau để tạo hay chọn một khối văn bản: Chọn công cụ Gõ chữ và kéo rê chuột để tạo ra khốI văn bản có chiều dài và chiều rộng mong muốn. Nhấp chuột bên trong khốI văn bản sẵn có Bước 2 Chọn Window > Panels > Text Options. Bước 3 Chọn một tính năng từ thực đơn pop-up Text Option (Kiểu Văn bản): Chọn Dynamic Text (Văn bản Động) để tạo một khung văn bản thể hiện văn bản đang được cập nhật động Chọn Input Text (Văn bản Nhậpvào) để tạo một khung văn bản mà người sử dụng có thể nhập dữ liệu vào. . Macromedia (200 K). Những ai có thể tạo Flash Movies? Để tạo được Flash movies của chính bạn, bạn cần có 1 chương trình Flash, phiên bản mới nhất của Macromedia. Flash? Trước khi bước vào học Flash, bạn cần biết một số kiến thức cơ bản về những vấn đề sau: WWW, HTML và kỹ thuật xây dựng Web cơ bản Flash là gì? Macromedia