BÀI 7 Giới thiệu về MOVIE CLIP – làm việc với VIDEO – xuất bản đoạn phim

BÀI 7GIỚI THIỆU VỀ MOVIE CLIP – LÀM VIỆC VỚI VIDEO

– XUẤT BẢN ĐOẠN PHIM

NHẮC LẠI BÀI TRƯỚC

Làm việc với khái niệm action script trong Flash:Khái niệmBảng ActionChèn action script vào frameHàm số trong action script

Khởi tạo và làm việc với symbol Button:Khởi tạoChèn action script cho symbol ButtonLinks

Làm việc với âm thanh trong Flash:

Làm việc với khái niệm action script trong Flash:Khái niệmBảng ActionChèn action script vào frameHàm số trong action script

Khởi tạo và làm việc với symbol Button:Khởi tạoChèn action script cho symbol ButtonLinks

Làm việc với âm thanh trong Flash:

Slide 7 - Giới thiệu về Movie Clip - Làm việc với video - Xuất bản đoạn phim 2

MỤC TIÊU BÀI HỌC

Làm việc với symbol Movie Clip:Giới thiệuKhởi tạoÁp dụng action script cho symbol Movie ClipTùy biến chỉnh sửa Movie Clip

Làm việc với video trong Flash:Định dạng videoEmbedded videoLinks videoLàm việc với Adobe Media Encoder

Xuất bản đoạn phim trong Flash

Làm việc với symbol Movie Clip:Giới thiệuKhởi tạoÁp dụng action script cho symbol Movie ClipTùy biến chỉnh sửa Movie Clip

Làm việc với video trong Flash:Định dạng videoEmbedded videoLinks videoLàm việc với Adobe Media Encoder

Xuất bản đoạn phim trong Flash


LÀM VIỆC VỚI SYMBOL MOVIE CLIP

SYMBOL MOVIE CLIP

Là 1 kiểu symbol trong FlashMọi instance của symbol này đều được liên kết vớisymbol gốc trong bảng LibraryMỗi 1 symbol Movie Clip đều chứa 1 Timeline riêng,độc lập với Timeline chínhCó thể đặt symbol Movie Clip vào bất kì thời điểmnào trên Timeline chínhCách tạo symbol Movie Clip:

Insert > New SymbolModify > Convert to Symbol để chuyển đổi đối tượngcó sẵn trên Stage thành symbol Movie Clip

Là 1 kiểu symbol trong FlashMọi instance của symbol này đều được liên kết vớisymbol gốc trong bảng LibraryMỗi 1 symbol Movie Clip đều chứa 1 Timeline riêng,độc lập với Timeline chínhCó thể đặt symbol Movie Clip vào bất kì thời điểmnào trên Timeline chínhCách tạo symbol Movie Clip:

Insert > New SymbolModify > Convert to Symbol để chuyển đổi đối tượngcó sẵn trên Stage thành symbol Movie Clip


SYMBOL MOVIE CLIP

Ví dụ minh họa cách tạo symbol Movie Clip: sử dụngfile fl1301.fla

Thực hiện chuyển đổi symbol graphic Propeller trongLibrary thành dạng Movie ClipChọn Insert > New Symbol


SYMBOL MOVIE CLIP

Chọn hình ảnh Propeller (cánh quạt) trong bảngLibrary, kéo ra giữa StageTạo 1 motion tween cho cánh quạt với độ dài 20fps,tạo frame 20

Chọn toàn bộ tween span trên Timeline

Chọn hình ảnh Propeller (cánh quạt) trong bảngLibrary, kéo ra giữa StageTạo 1 motion tween cho cánh quạt với độ dài 20fps,tạo frame 20

Chọn toàn bộ tween span trên TimelineSlide 7 - Giới thiệu về Movie Clip - Làm việc với video - Xuất bản đoạn phim 7

SYMBOL MOVIE CLIP

Thiết lập trong bảng Properties:• Direction: CW quay theo chiều kim đồng hồ• Rotate: 1 times

Thiết lập trong bảng Properties:• Direction: CW quay theo chiều kim đồng hồ• Rotate: 1 times


SYMBOL MOVIE CLIP

Chọn symbol movie clip Propeller Animation trongbảng Library để kéo ra Stage chínhFile > Publish Preview > Flash để xuất bản và khởiđộng đoạn phim trong Flash Player

Chọn symbol movie clip Propeller Animation trongbảng Library để kéo ra Stage chínhFile > Publish Preview > Flash để xuất bản và khởiđộng đoạn phim trong Flash Player


SYMBOL MOVIE CLIP

Movie clip lồng nhauFlash có thể đặt được những symbol Movie Clip vàotrong những symbol Movie Clip khácTạo ra sự linh hoạt khi sử dụng kéo thảDễ dàng chỉnh sửa, lưu giữ symbol Movie ClipĐược chuyển đổi từ những movie clip khác bằng cáchsử dụng lệnh Modify > Convert to Symbol

Ví dụ minh họa:Chọn toàn bộ các symbol movie clip Airplane Body,Propellers, và Landing GearChọn Modify > Convert to Symbol

Movie clip lồng nhauFlash có thể đặt được những symbol Movie Clip vàotrong những symbol Movie Clip khácTạo ra sự linh hoạt khi sử dụng kéo thảDễ dàng chỉnh sửa, lưu giữ symbol Movie ClipĐược chuyển đổi từ những movie clip khác bằng cáchsử dụng lệnh Modify > Convert to Symbol

Ví dụ minh họa:Chọn toàn bộ các symbol movie clip Airplane Body,Propellers, và Landing GearChọn Modify > Convert to Symbol


SYMBOL MOVIE CLIP

Chuyển đổi toàn bộ thành 1 symbol Movie Clip

Lúc này toàn bộ symbol cũ được bao quanh bởi 1 hộpgiới hạn biểu thị toàn bộ symbol cũ đã được nhậpvào 1 symbol mới

Chuyển đổi toàn bộ thành 1 symbol Movie Clip

Lúc này toàn bộ symbol cũ được bao quanh bởi 1 hộpgiới hạn biểu thị toàn bộ symbol cũ đã được nhậpvào 1 symbol mới


SYMBOL MOVIE CLIP

Movie clip

-Tính phụ thuộc: khi lồng symbol vào symbol khác, bạn đã tạo ra một sự phụ thuộc.Symbol ở cấp cao nhất sẽ bị phụ thuộc bởi các symbol con cấu thành nên symbol đó-Tỷ lệ khung hình (Frame Rate): tuy độc lập với Timeline chính, tuy nhiên Timeline củamovie clip không thể sử dụng tỷ lệ khung hình khác-Độ dài Timeline: độ dài Timeline của symbol Movie Clip hoàn toàn độc lập vớiTimeline chính-Timeline: timeline của movie clip hoạt động giống như timeline chính-Action script: action script của movie clip không có tác động tới timelin chính hoặctimeline của các movie clip khác (kể cả symbol lồng nhau) và ngược lại

-Tính phụ thuộc: khi lồng symbol vào symbol khác, bạn đã tạo ra một sự phụ thuộc.Symbol ở cấp cao nhất sẽ bị phụ thuộc bởi các symbol con cấu thành nên symbol đó-Tỷ lệ khung hình (Frame Rate): tuy độc lập với Timeline chính, tuy nhiên Timeline củamovie clip không thể sử dụng tỷ lệ khung hình khác-Độ dài Timeline: độ dài Timeline của symbol Movie Clip hoàn toàn độc lập vớiTimeline chính-Timeline: timeline của movie clip hoạt động giống như timeline chính-Action script: action script của movie clip không có tác động tới timelin chính hoặctimeline của các movie clip khác (kể cả symbol lồng nhau) và ngược lại


SYMBOL MOVIE CLIP

Chèn mã Action Script cho symbol Movie Clip:Hoàn toàn tương tự như việc chèn mã Action scripttrên Timeline chính

Ví dụ minh họa:Chọn symbol movie clip Landing Gear trên bảngLibrary, chuyển vào chế độ Edit của symbolTạo thêm layer actions nằm bên trên layer 1Nhấn F7 để tạo thêm 1 keyframe trống mới tại frame30Nhấn F9 để hiển thị bảng ActionTiến hành viết mã action script

Chèn mã Action Script cho symbol Movie Clip:Hoàn toàn tương tự như việc chèn mã Action scripttrên Timeline chính

Ví dụ minh họa:Chọn symbol movie clip Landing Gear trên bảngLibrary, chuyển vào chế độ Edit của symbolTạo thêm layer actions nằm bên trên layer 1Nhấn F7 để tạo thêm 1 keyframe trống mới tại frame30Nhấn F9 để hiển thị bảng ActionTiến hành viết mã action script


SYMBOL MOVIE CLIP

Nhập lệnh stop() cho keyframe này

Nhấn vào liên kết Scene 1 trên Stage để trở lạiTimeline chính

Nhập lệnh stop() cho keyframe này

Nhấn vào liên kết Scene 1 trên Stage để trở lạiTimeline chính


SYMBOL MOVIE CLIP

Thêm những bộ lọc chomovie clip:

sử dụng bảng FiltersVí dụ minh họa:

Chọn symbol kế thừa củasymbol Clounds trên Stage

Nhấn nút Add Filters ( )trên bảng Properties,chọn bộ lọc Blur thiết lậpthông số như hình

Thêm những bộ lọc chomovie clip:

sử dụng bảng FiltersVí dụ minh họa:

Chọn symbol kế thừa củasymbol Clounds trên Stage

Nhấn nút Add Filters ( )trên bảng Properties,chọn bộ lọc Blur thiết lậpthông số như hình


SYMBOL MOVIE CLIP

Có thể áp dụng bộ lọc để tạo ra hiệu ứng chuyểnđộng trong FlashVí dụ minh họa:

Nhấn đúp vào symbol movie clip RunwayDi chuyển timehead tới frame 30Chọn symbol kế thừa của symbol movie clip RunwayGraphics để thêm bộ lọcTại frame 1:

• Blue X: 0• Blue Y: 0

Timeline chính• Frame 60: stop()

Có thể áp dụng bộ lọc để tạo ra hiệu ứng chuyểnđộng trong FlashVí dụ minh họa:

Nhấn đúp vào symbol movie clip RunwayDi chuyển timehead tới frame 30Chọn symbol kế thừa của symbol movie clip RunwayGraphics để thêm bộ lọcTại frame 1:

• Blue X: 0• Blue Y: 0

Timeline chính• Frame 60: stop()


LÀM VIỆC VỚI VIDEO TRONG FLASH

VIDEO TRONG FLASH

Yêu cầu trước khi làm việc với video trong FlashCS4:

QuickTime 6.5DirectX 9.0

Với phiên bản Flash CS4 tất cả các file video đượcchuyển đổi thành dạng .flv hoặc .f4v trước, bằngcách sử dụng:

Adobe Media EncoderAdobe Premiere Pro

Yêu cầu trước khi làm việc với video trong FlashCS4:

QuickTime 6.5DirectX 9.0

Với phiên bản Flash CS4 tất cả các file video đượcchuyển đổi thành dạng .flv hoặc .f4v trước, bằngcách sử dụng:

Adobe Media EncoderAdobe Premiere Pro


VIDEO TRONG FLASH

Video: tạo ra bởi seri các ảnh tĩnh được sắp xếptheo thứ tự, phát hình với tốc độ nhanh, kèm theocả âm thanh2 điều quan trọng khi làm việc với video:

Tỉ lệ khung hình: tính bằng khung hình trên giây (fps)Kích thước khung hình: tính bằng pixel (px)

2 cách làm việc với video trong Flash:Embedded video: video nhúng, được nhúng trực tiếptrên timelineLink video: lưu giữ trên máy chủ và được tham chiếutới trong đoạn phim. Được phân phối theo luồng từFlash Media Server

Video: tạo ra bởi seri các ảnh tĩnh được sắp xếptheo thứ tự, phát hình với tốc độ nhanh, kèm theocả âm thanh2 điều quan trọng khi làm việc với video:

Tỉ lệ khung hình: tính bằng khung hình trên giây (fps)Kích thước khung hình: tính bằng pixel (px)

2 cách làm việc với video trong Flash:Embedded video: video nhúng, được nhúng trực tiếptrên timelineLink video: lưu giữ trên máy chủ và được tham chiếutới trong đoạn phim. Được phân phối theo luồng từFlash Media Server


VIDEO TRONG FLASH

Bộ codes: là những chương trình phần mềm có chứcnăng nén file video thành file có kích thước đủ nhỏđể gửi qua email, Internet hoặc DVDKhi tạo video thường sử dụng codes để nén fileFlash video hỗ trợ các định dạng sau:

Sorenson Spark (.flv hỗ trợ)On2 VP6 (thường gọi là ON2V) (.flv hỗ trợ)MainConcept H.264 (.f4v hỗ trợ)

Bộ codes: là những chương trình phần mềm có chứcnăng nén file video thành file có kích thước đủ nhỏđể gửi qua email, Internet hoặc DVDKhi tạo video thường sử dụng codes để nén fileFlash video hỗ trợ các định dạng sau:

Sorenson Spark (.flv hỗ trợ)On2 VP6 (thường gọi là ON2V) (.flv hỗ trợ)MainConcept H.264 (.f4v hỗ trợ)


VIDEO TRONG FLASH

Adobe Media Encoder: là ứng dụng độc lập được càithông qua quá trình cài FlashLàm việc với nhiều định dạng file:

3GPP/3GPP2 (.3gp, .3gpp)Digital Video (.dv)DV streamFlash Video (.flv, .f4v)QuickTime (.mov)MPEG (.mpg, .mpeg, .m2v)Windows (.avi)Windows Media (.asf, .wmv)

Adobe Media Encoder: là ứng dụng độc lập được càithông qua quá trình cài FlashLàm việc với nhiều định dạng file:

3GPP/3GPP2 (.3gp, .3gpp)Digital Video (.dv)DV streamFlash Video (.flv, .f4v)QuickTime (.mov)MPEG (.mpg, .mpeg, .m2v)Windows (.avi)Windows Media (.asf, .wmv)


VIDEO TRONG FLASH


VIDEO TRONG FLASH


VIDEO TRONG FLASH

Nhấn Add để nhập file cần chuyển đổi


VIDEO TRONG FLASH

3 trường cần chú ý:Format: cả file Flash video (.flv, .f4v) hoặc h.264Preset: lựa chọn tùy chọn có sẵn để mã hóa videoOutput file: xác định vị trí và tên file mới tạo ra

Thiết lập trong trường Format: FLV|F4VThiết lập với Preset: FLV-Web Small (Flash 8 andhigher)Nhấn nút Start QueueFile > Exit (Windows)


3 trường cần chú ý:Format: cả file Flash video (.flv, .f4v) hoặc h.264Preset: lựa chọn tùy chọn có sẵn để mã hóa videoOutput file: xác định vị trí và tên file mới tạo ra

Thiết lập trong trường Format: FLV|F4VThiết lập với Preset: FLV-Web Small (Flash 8 andhigher)Nhấn nút Start QueueFile > Exit (Windows)

VIDEO TRONG FLASH

Thêm cue points trong Adobe Media Encoder:Cue points: có thể điều hướng và tùy biến giao diệnchương trình chạy videoĐược tạo hoặc thêm bởi chương trình Adobe MediaEncoder

Ví dụ minh họa:Chỉnh trong hộp thoại Edit Export Setting chọn F4V-Web LargeChỉnh trong Preset: NTSC Source (Flash 9.2 andhigher)


Thêm cue points trong Adobe Media Encoder:Cue points: có thể điều hướng và tùy biến giao diệnchương trình chạy videoĐược tạo hoặc thêm bởi chương trình Adobe MediaEncoder

Ví dụ minh họa:Chỉnh trong hộp thoại Edit Export Setting chọn F4V-Web LargeChỉnh trong Preset: NTSC Source (Flash 9.2 andhigher)

VIDEO TRONG FLASH


VIDEO TRONG FLASH

Tại thanh ngang màu da cam dưới vùng Source chophép xem trước và tạo cue pointTrượt chốt đánh dấu Current Time Indicator tới thờigian 00;00;05;02


VIDEO TRONG FLASH


VIDEO TRONG FLASH

Nhấn nút Add Cue Point ( )Đổi tên cue point vừa tạo thànhwashington_monument và thiết lập như sau

Chuyển Current Time Indicator tới 00;00;35;15 vàtạo thêm cue Point: Lincoln_memorial


Nhấn nút Add Cue Point ( )Đổi tên cue point vừa tạo thànhwashington_monument và thiết lập như sau

Chuyển Current Time Indicator tới 00;00;35;15 vàtạo thêm cue Point: Lincoln_memorial

VIDEO TRONG FLASH

Chuyển Current Time Indicator tới 00;01;15;03 vàtạo thêm cu point: websiteNhấn OKNhấn Start Queue để bắt đầu chuyển đổi


Chuyển Current Time Indicator tới 00;01;15;03 vàtạo thêm cu point: websiteNhấn OKNhấn Start Queue để bắt đầu chuyển đổi

VIDEO TRONG FLASH

Embedded video:Chỉ áp dụng cho đoạn hoạt hình ngắnCó thể gây ra sự không đồng bộ giữa hình ảnh và âmthanh

Ví dụ minh họa: sử dụng file fl1402.flaChọn frame 1 của layer VideoFile > Import > Import Video


Embedded video:Chỉ áp dụng cho đoạn hoạt hình ngắnCó thể gây ra sự không đồng bộ giữa hình ảnh và âmthanh

Ví dụ minh họa: sử dụng file fl1402.flaChọn frame 1 của layer VideoFile > Import > Import Video

VIDEO TRONG FLASH


VIDEO TRONG FLASH

Nhấn Finish để hoàn tất quá trình nhập video


Nhấn Finish để hoàn tất quá trình nhập video

VIDEO TRONG FLASH

Sử dụng công cụ Selection để đặt video vào giữa đườngcăn


VIDEO TRONG FLASH

Chọn frame 1170 của 2 layer Logo và Background,nhấn F5


VIDEO TRONG FLASH

Sử dụng ActionScript 3.0 để điều khiển Timeline vàqua đó điều khiển việc phát videoVí dụ minh họa: sử dụng file fl1403.fla

Thay đổi trường name của symbol Button play, stopthành play_btn, stop_btn trên bảng PropertiesTrên frame 1 của layer actions nhập lệnh stop()Chèn thêm đoạn code sau để khai báo hàm:


Sử dụng ActionScript 3.0 để điều khiển Timeline vàqua đó điều khiển việc phát videoVí dụ minh họa: sử dụng file fl1403.fla

Thay đổi trường name của symbol Button play, stopthành play_btn, stop_btn trên bảng PropertiesTrên frame 1 của layer actions nhập lệnh stop()Chèn thêm đoạn code sau để khai báo hàm:

function playMovie(event:MouseEvent):void{this.play( );

}

function stopMovie(event:MouseEvent):void{this.stop( );

}

VIDEO TRONG FLASH

play_btn.addEventListener(MouseEvent.CLICK,playMovie);stop_btn.addEventListener(MouseEvent.CLICK,stopMovie);


Control > Test Movie để xem thử đoạn phim

VIDEO TRONG FLASH

Bandwidth Profiler: xác định ảnh hưởng củaembedded video trong đoạn phimTrong cửa sổ Flash Player chọn View > BandwidthProfilerView > Frame by

Frame Graph: xem thông sốCủa đoạn phim


Bandwidth Profiler: xác định ảnh hưởng củaembedded video trong đoạn phimTrong cửa sổ Flash Player chọn View > BandwidthProfilerView > Frame by

Frame Graph: xem thông sốCủa đoạn phim

VIDEO TRONG FLASH

Link video: file video nằm bên ngoài, tách biệt vớifile swf3 cách cài đặt:

Web server: sử dụng giao thức HTTP, cho phép xemtừng phần, phần tiếp theo sẽ được liên tục tải về vànạp vào đoạn phimFlash Media ServerFlash Video Streaming Service

Sử dụng thành phần FLVPlayback: được sử dụng đểđiều khiển việc phát video, cung cấp khả năngtương tác, điều khiển video


Link video: file video nằm bên ngoài, tách biệt vớifile swf3 cách cài đặt:

Web server: sử dụng giao thức HTTP, cho phép xemtừng phần, phần tiếp theo sẽ được liên tục tải về vànạp vào đoạn phimFlash Media ServerFlash Video Streaming Service

Sử dụng thành phần FLVPlayback: được sử dụng đểđiều khiển việc phát video, cung cấp khả năngtương tác, điều khiển video

VIDEO TRONG FLASH

Thêm link video vào file flash: làm việc với filefl1406.fla

File > Import > Import Video


VIDEO TRONG FLASH

Chọn SkinOverAllNoCaption.swf trong phần Skinning


VIDEO TRONG FLASH

Sử dụng Selection kéo thành phần FLVPlayback vàoStageControl > Test Movie.Chọn FLVPlayback, nhấn nút

Component Inspector trên bảng Properties


Sử dụng Selection kéo thành phần FLVPlayback vàoStageControl > Test Movie.Chọn FLVPlayback, nhấn nút

Component Inspector trên bảng Properties

Cho phép tự động chạy khi mở file flash

Được tạo ra bởi Adobe Media Encoder

XUẤT BẢN ĐOẠN PHIM VỚI FLASH

XUẤT BẢN ĐOẠN PHIM

Xuất bản trong Flash:Sử dụng lệnh Export Movie: File > Export > ExportMovie.Sử dụng File > Publish Settings


Ví dụ: xuất thành file .movbằng lệnh Export Movie


Xuất bản thành định dạng web:File > Publish Settings



Cài đặt trong tab Flash

Chất lượng ảnh JPG có trong fileflash sau khi xuất



Cài đặt trong tab HTML

Tự động phát hiện phiên bảnFlash Player của người xem vàchuyển tới 1 trang HTML thaythế nếu như phiên bản FlashPlayer không phù hợp


Điều khiển cách đoạn phimFlash được tải trong trình duyệt

Hiển thị với chất lượng tốt nhất

Tùy chọn này có thể tạo đượcfile Flash với nền trong suốt


Xuất ra DVD: bằng cách tạo file projectorTrong tab Format


TỔNG KẾT

Nắm vững cách tạo và nhập file video vào FlashNắm vững cách viết áp dụng video dạng embeddedtrong FlashChú ý thiết lập HTML trong Publish Settings củaFlash

Nắm vững cách tạo và nhập file video vào FlashNắm vững cách viết áp dụng video dạng embeddedtrong FlashChú ý thiết lập HTML trong Publish Settings củaFlash


Documents

BÀI 7 Giới thiệu về MOVIE CLIP – làm việc với VIDEO – xuất bản đoạn phim