SCRIPT VÀ KĨ THUẬT HOẠT HÌNH phần 7 docx

CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT - 145 - Tiếp theo, bạn hãy chọn một đối tượng kim quay, bấm vào khung Code Snippets (hoặc Windows > Code Snippets). Trong cửa sổ này, bạn chọn nhóm Animation > Rotate Continuously. Hình 108 – Vùng Code Snippets: Rotate Continuously Khi đó, Flash sẽ chèn tự động một Action Frame vào trong TimeLine và khởi tạo nội dung Action cho bạn như sau. minobj.addEventListener(Event.ENTER_FRAME, fl_RotateContinuously); function fl_RotateContinuously(event:Event) { //Soạn thảo m~ chương trình ở đ}y minobj.rotation += 10; } Bây giờ bạn h~y thay đoạn mã trong hàm fl_RotateContinuously bằng đoạn mã sau var dd:Date = new Date(); hourobj.rotation = ((dd.getHours()>=12)?(dd.getHours()):(dd.getHours()- 12))*30; CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT - 146 - minobj.rotation = dd.getMinutes()*6; secobj.rotation = dd.getSeconds()*6; Trước khi thay thế hai đoạn mã này, bạn nên kiểm tra xem chiếc đồng hồ của bạn hoạt động như thế n{o đ~ nhé. Rõ rang nó chỉ xoay duy nhất chiếc kim phút mà thôi. Bạn cũng lưu ý rằng hiệu ứng này của Code Snippets là hiệu ứng quay liên tục (Rotate Continuously), do đó, bạn không cần tương t|c với đối tượng Timer. Giải thích: Để cho chiếc đồng hồ hoạt động đúng, ta cần bổ sung sự kiện thời gian cho nó. Biến dd thuộc kiểu Date. Ta sử dụng hàm khởi tạo Date() để khởi tạo giá trị cho biến dd. Đối tượng thuộc kiểu Date có nhiều hàm tạo kh|c nhau, nhưng ở đ}y ta sử dụng hàm tạo không đối số. Với hàm tạo n{y, đối tượng dd sẽ nhận giá trị là thời gian hiện tại. Ta sẽ sử dụng c|c phương thức getHours, getMinutes, getSeconds để lấy giờ, phút, gi}y tương ứng. Ở đ}y, Flash sử dụng biến cố Event.ENTER_FRAME. Với biến cố n{y, h{nh động sẽ liên tục được cập nhập trên từng frame. Bạn lưu ý rằng mặc định, số Frame trên một gi}y l{ 24fps. Do đó, bạn hoàn toàn yên tâm rằng thời gian trên đồng hồ của bạn sẽ được cập nhật đến từng 1/24 giây. Tiếp theo, chúng ta sẽ thảo luận về các công thức tính góc quay. Chúng ta biết rằng khi kim phút v{ kim gi}y quay đúng một vòng là 60 phút hoặc 60 giây. Nó tương ứng với số đo l{ 360 0 . Như vậy, tương ứng với 1 phút hoặc 1 giây sẽ có số đo l{ 6 0 . Nếu có số phút và số giây hiện tại, ta chỉ việc nhân với 6 là nhận được kết quả của góc đo tương ứng với phút và giây hiện tại. Với giờ thì kết quả sẽ khác. Một vòng quay 360 0 chỉ tương ứng với 12 giờ, do đó, mỗi giờ chiếm đến một góc là 30 0 . Nên góc quay của kim giờ sẽ là số giờ nhân với 30. Một điều lưu ý nữa, nếu thời gian hệ thống được định dạng 24h thì sẽ có một vài sai sót xảy ra. Do đó, để đảm bảo chiếc đồng hồ hoạt động tốt, bạn nên kiểm tra điều kiện: nếu số giờ vượt ngưỡng 12, thì số giờ sẽ là số giờ trừ đi 12, ngược lại thì giữ nguyên kết quả đó. Đ}y chính l{ gi| trị của toán tử điều kiện mà ta sử dụng. Đến đ}y, bạn sẽ thắc mắc là tại sao addEventListener lại chỉ áp dụng cho kim phút. Câu trả lời không phải như vậy. Bạn có thể áp dụng cho một đối tượng bất kì. Bạn có thể hiệu chỉnh ba đối tượng trên c|c Action Frame kh|c nhau. Nhưng cách thực thi như thế chỉ làm cho bạn tốn thời gian, và việc quản lý nhiều Frame sẽ làm cho bạn cảm thấy rối. Bạn hoàn toàn có thể làm thế nếu bạn muốn. Nhưng CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT - 147 - bạn cần lưu ý đến một phương ch}m khi lập trình đó l{ – C{ng đơn giản, nhỏ gọn nhưng vẫn đảm bảo đầy đủ các nội dung thì càng tốt. Tạo Menu điều khiển các cảnh quay trong Game Trong ví dụ này, chúng ta sẽ thảo luận cách tạo một Menu để điều khiển Game. Bạn hãy tạo 4 cảnh quay Scene v{ đặt tên cho chúng lần lượt là: Menu, Result, Play v{ Help. C|c Scene n{y được sắp xếp theo thứ tự như sau Hình 109 – Thứ tự của các Scene Bạn có thể trang trí cho các Scene này tùy ý. Trên Scene Menu chứa ba MenuItem l{ Result, Play v{ Help như hình bên dưới. Khi bạn nhấn v{o Play, chương trình sẽ chuyển sang Scene Play để chơi game. Khi bạn nhấn v{o Result, chương trình sẽ chuyển đến Scene Result để xem kết quả. Khi bạn nhấn v{o Help, chương trình sẽ chuyển đến Scene Help để xem hướng dẫn chơi game. Bạn cũng lưu ý trên mỗi Scene Result, Play v{ Help có Menu Back để trở lại Menu chính. Hình 110 – Scene Menu Trong các Scene còn lại, chưa nội dung liên quan v{ menu Back để quay trở lại Scene Menu này. CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT - 148 - Bây giờ, chúng ta sẽ sử dụng chức năng Code Snippets để tạo các hiệu ứng mà chúng ta đ~ thảo luận ở trên. Trước tiên, ta sẽ tạo hiệu ứng Button cho các MenuItem này. Bạn hãy lần lượt chọn Play, sau đó v{o Commands > Make Button. Lặp lại điều này cho Help và Result. Ở các Scene Play, Help, Result bạn bổ sung vào dòng lệnh stop(); vào vị trí cuối cùng của mã lệnh (ở đ}y dòng lệnh này là duy nhất – vì tôi không xây dựng một chương trình ho{n chỉnh). Tiếp theo, bạn hãy nhấp vào nút Play trên Scene Menu, bấm chọn chức năng Code Snippets. Bạn chọn nhóm TimeLine and Navigation. Tiếp đến, bạn chọn chức năng Click to Go to Scene and Play. Khi đó, Flash sẽ sinh đoạn mã sau btPlay.addEventListener(MouseEvent.CLICK, fl_ClickToGoToScene); function fl_ClickToGoToScene(event:MouseEvent):void { MovieClip(this.root).gotoAndPlay(1, "Play"); } Bạn cần thay đổi tên của Scene cho phù hợp với Scene sẽ chuyển đến trong dòng lệnh MovieClip(this.root).gotoAndPlay(1, "đổi tên Scene"); Bạn hãy thực hiện thao tác này cho những chức năng còn lại. Cuối cùng, bạn nhấn tổ hợp Ctrl+Enter để kiểm tra kết quả. Nếu bạn muốn xây dựng một dự án game hoàn chỉnh, bạn hãy lập trình game của bạn vào trong Scene Play. Bảng chức năng trong vùng Code Snippets. Nhóm Chức năng Code Giải thích Acti ons Click to go to Web movieClip_1.addEventListener( MouseEvent.CLICK, Cho phép mở một liên kết khi nhấp chuột vào CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT - 149 - page fl_ClickToGoToWebPage); function fl_ClickToGoToWebPage(event: MouseEvent):void { navigateToURL(new URLRequest("http://www.ado be.com"), "_blank"); } đối tượng.  movieClip_1: l{ đối tượng khi ta nhấp chuột lên nó.  navigateToURL: phương thức mở liên kết. Nó gồm hai tham số - URLRequest (được khởi tạo từ một tham số String) và tham số String quy định cách mở liên kết (_blank, _parent, _selft, _top). Custom Mouse Cursor //Đoạn mã 1 stage.addChild(movieClip_1); movieClip_1.mouseEnabled = false; movieClip_1.addEventListener( Event.ENTER_FRAME, fl_CustomMouseCursor); function fl_CustomMouseCursor(event: Event) { movieClip_1.x = stage.mouseX; movieClip_1.y = stage.mouseY; } Đoạn mã 1: thay đổi hình dáng của trỏ chuột sang hình dạng như của đối tượng moveClip_1.  Thuộc tính mouseEnabled = false: không cho phép kích hoạt chuột trên đối tượng moveClip_1.  Thuộc tính x, y của movieClip_1: hoành độ x v{ tung độ y của đối tượng movieClip_1.  stage.mouseX, stage.mouseY: phương thức của đối tượng stage (khung trình diễn) để xác định vị trí của trỏ chuột trên khung CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT - 150 - Mouse.hide(); //Đoạn mã 2 movieClip_1.removeEventListe ner(Event.ENTER_FRAME, fl_CustomMouseCursor); stage.removeChild(movieClip_ 1); Mouse.show(); trình chiếu này.  Mouse.hide: phương thức hide của đối tượng Mouse cho phép ẩn đi hình dạng của trỏ chuột. Đoạn mã 2: thay đổi hình dáng của trỏ chuột sang dạng mặc định ban đầu.  removeEventListener : hủy sự kiện chuột đối với đối tượng movieClip_1.  removeChild: xóa đối tượng trên khung trình chiếu stage.  Mouse.show: phương thức show của đối tượng Mouse cho phép hiện hình dạng của trỏ chuột theo mặc định. Drag & Drop movieClip_1.addEventListener( MouseEvent.MOUSE_DOWN, fl_ClickToDrag); function fl_ClickToDrag(event:MouseEv ent):void { movieClip_1.startDrag(); Thực hiện thao tác kéo thả một đối tượng. Đối tượng được kéo thả là movieClip_1. Để thực hiện thao t|c kéo đối tượng, ta kết hợp với sự kiện MOUSE_DOWN lên đối tượng đó v{ triệu gọi phương thức startDrag của nó. Ngược lại, để dừng việc kéo đối tượng CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT - 151 - } stage.addEventListener(Mouse Event.MOUSE_UP, fl_ReleaseToDrop); function fl_ReleaseToDrop(event:Mouse Event):void { movieClip_1.stopDrag(); } (thả đối tượng) ta kết hợp sự kiện MOUSE_UP của đối tượng đó v{ triệu gọi phương thức stopDrag. Play a MC movieClip_1.play(); Bắt đầu trình diễn movieClip_1. Stop a MC movieClip_1.stop(); Dừng việc trình diễn movieClip_1. Click to hide an Object movieClip_1.addEventListener( MouseEvent.CLICK, fl_ClickToHide); function fl_ClickToHide(event:MouseEv ent):void { movieClip_2.visible = false; } Khi nhấp chuột v{o đối tượng movieClip_1 thì đối tượng movieClip_2 sẽ ẩn đi. Thuộc tính visible quy định việc ẩn/hiện của một đối tượng. Nếu muốn đối tượng movieClip_2 hiện trở lại, ta thay đổi giá trị của movieClip_1.visible = true. Show an Object movieClip_1.visible = true; Hiện đối tượng movieClip_1. Click to Position an movieClip_1.addEventListener( MouseEvent.CLICK, Thay đổi vị trí của đối tượng movieClip_2 khi CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT - 152 - Object fl_ClickToPosition); function fl_ClickToPosition(event:Mous eEvent):void { movieClip_2.x = 200; movieClip_2.y = 100; } nhấp chuột v{o đối tượng movieClip_1. Thuộc tính x v{ y đ~ giải thích ở trên. Click to Display a TextField movieClip_1.addEventListener( MouseEvent.CLICK, fl_ClickToPosition); var fl_TF:TextField; var fl_TextToDisplay:String = "Lorem ipsum dolor sit amet." function fl_ClickToPosition(event:Mous eEvent):void { fl_TF = new TextField(); fl_TF.autoSize = TextFieldAutoSize.LEFT; fl_TF.background = true; fl_TF.border = true; fl_TF.x = 200; fl_TF.y = 100; fl_TF.text = fl_TextToDisplay; Hiển thị đoạn văn bản tại một vị trí chỉ định khi ta nhấp chuột vào một đối tượng.  movieClip_1: đối mà ta nhấp chuột lên nó.  fl_TF: l{ đối tượng TextField. TextField trong trường hợp này sử dụng các thuộc tính – autoSize, background, border, x, y, text. Bạn có thể tham khảo thêm các thuộc tính của TextField trong lớp flash.text.TextField. CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT - 153 - addChild(fl_TF); } Generate a Random Number function fl_GenerateRandomNumber(li mit:Number):Number { var randomNumber:Number = Math.floor(Math.random()*(li mit+1)); return randomNumber; } trace(fl_GenerateRandomNum ber(100)); Khởi tạo một số ngẫu nhiên. Để tạo số ngẫu nhiên, ta sử dụng lớp Math.  Phương thức random: khởi tạo số ngẫu nhiên.  Phương thức floor để lấy sàn của một số thực. Bởi phương thức random khởi tạo một sô thực. Bring Object to the Front for (var fl_ChildIndex:int = 0; fl_ChildIndex < this.numChildren; fl_ChildIndex++) { this.getChildAt(fl_ChildI ndex).addEventListener(Mouse Event.CLICK, fl_ClickToBringToFront); function fl_ClickToBringToFront(event: MouseEvent):void { this.addChild(event.curr Chuyển đối tượng được chọn lên trên c|c đối tượng kh|c. C|c đối tượng này cần được chuyển đổi thành movieClip hoặc Button. CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT - 154 - entTarget as DisplayObject); } Simple Timer var fl_TimerInstance:Timer = new Timer(1000, 30); fl_TimerInstance.addEventList ener(TimerEvent.TIMER, fl_TimerHandler); fl_TimerInstance.start(); var fl_SecondsElapsed:Number = 1; function fl_TimerHandler(event:TimerE vent):void { trace("Seconds elapsed: " + fl_SecondsElapsed); fl_SecondsElapsed++; } Tạo bộ đếm thời gian. Đối tượng fl_TimerInstance thuộc lớp Timer. Nó sử dụng phương thức khởi tạo có hai tham số delay và repeatCount.  delay: độ trễ (tính theo mili giây, 1ms=1/1000s).  repeatCount: số lược lặp (sẽ dừng nếu bộ đếm đạt đến giá trị này).  Phương thức start của đối tượng fl_TimerInstance: đối tượng bắt đầu thi hành. Ngược lại với phương thức này là phương thức stop. Countdown Timer var fl_SecondsToCountDown:Num ber = 10; var fl_CountDownTimerInstance:Ti mer = new Timer(1000, fl_SecondsToCountDown); fl_CountDownTimerInstance.a ddEventListener(TimerEvent.T IMER, Ho{n to{n tương tự như bộ đếm xuôi. Giá trị fl_SecondsToCountDown là giá trị bắt đầu khởi tạo khi đếm ngược. [...]... khi tải xong tập tin, ta bổ sung đối tượng Loader này vào khung trình chiếu Sau khi hủy bỏ việc tải, ta xóa đối tượng Loader khỏi khung trình chiếu và giải phóng biến nó (gán cho giá trị null) Mỗi lần nhấp chuột lên đối tượng, ta thay đổi giá trị của biến fl_ToLoad từ true thành false (nếu đ~ tải rồi thì lần nhấp chuột tiếp theo sẽ là hủy tải) và ngược lại fl_ToLoad = !fl_ToLoad; } movieClip_1.addEventListener(... cho ActionScript Trước tiên, Click to ta cần import các tập tin Load Image function ảnh v{o trong thư viện from fl_ClickToLoadImageFromLibra của Flash Sau đó, từ các Library ry(event:MouseEvent):void tập tin ảnh này, ta sẽ tạo ra các lớp đối tượng { tương ứng (Tương tự var libImage:MyImage = xuất bản tập tin âm - 162 - CHƯƠNG 5 LẬP TRÌNH VỚI ACTIONSCRIPT new MyImage(0,0); thanh trong mục 5 .7) var holder:Bitmap... MovieClip(this.root).got oAndPlay(1, "Scene 3"); Animation } Move with Keyboard Arrows stage.addEventListener(Keybo ardEvent.KEY_DOWN, fl_PressKeyToMove); function - 1 57 - Di chuyển đối tượng theo c|c phím mũi tên trên bàn phím CHƯƠNG 5 LẬP TRÌNH VỚI ACTIONSCRIPT fl_PressKeyToMove(event:Key boardEvent):void { switch (event.keyCode) { case Keyboard.UP: { movieClip_1.y -= 5; break; } case Keyboard.DOWN: { movieClip_1.y... String(fl_TextLoader.data); - 163 - = CHƯƠNG 5 LẬP TRÌNH VỚI ACTIONSCRIPT trace(textData); } fl_TextLoader.load(fl_TextURL Request); Audio and Video movieClip_1.addEventListener( Trình diễn hoặc dừng MouseEvent.CLICK, một tập tin âm thanh fl_ClickToPlayStopSound); Biến fl_ToPlay lưu trạng thái cho phép trình diễn var fl_SC:SoundChannel; hoặc không (tương ứng true và false) Đối tượng var fl_ToPlay:Boolean = true; Sound... Cách thực ouseEvent):void thi một tập tin âm thanh chúng ta đ~ tìm hiểu ở { mục 5 .7 if(fl_ToPlay) Click to Play/Stop Sound { var s:Sound = new Sound(new URLRequest("http://www.help examples.com/flash/sound/so ng1.mp3")); fl_SC = s.play(); } else { fl_SC.stop(); } fl_ToPlay = !fl_ToPlay; - 164 - CHƯƠNG 5 LẬP TRÌNH VỚI ACTIONSCRIPT } movieClip_1.addEventListener( Dừng chơi tất cả âm MouseEvent.CLICK, thanh... tượng function Click to Play video_instance_name là fl_ClickToPlayVideo(event:Mou Video tên thể hiện của thành seEvent):void phần điều khiển việc thi hành tập tin video hoặc { }m thanh (thường là FLV video_instance_name.play(); playback) - 165 - CHƯƠNG 5 LẬP TRÌNH VỚI ACTIONSCRIPT } movieClip_1.addEventListener( Tạm dừng MouseEvent.CLICK, fl_ClickToPauseVideo); function fl_ClickToPauseVideo(event:M... tính source CHƯƠNG 5 LẬP TRÌNH VỚI ACTIONSCRIPT } Click to Seek to Cue Point movieClip_1.addEventListener( Di chuyển đến một Cue MouseEvent.CLICK, Point được chỉ định fl_ClickToSeekToCuePoint); (trong trường hợp này là Cue Point có tên là Cue function Point 1 Phương thức fl_ClickToSeekToCuePoint(eve seek của đối tượng nt:MouseEvent):void media playback chỉ hoạt động với tham số time { (nhảy đến một... lers fl_NS.play("http://www.helpex amples.com/flash/video/water flv"); Mouse Click movieClip_1.addEventListener( H{nh động thực thi khi Event MouseEvent.CLICK, chuột được nhấn lên đối - 1 67 - CHƯƠNG 5 LẬP TRÌNH VỚI ACTIONSCRIPT fl_MouseClickHandler); tượng movieClip_1 function fl_MouseClickHandler(event:M ouseEvent):void { trace("Mouse clicked"); } movieClip_1.addEventListener( H{nh động thực thi khi MouseEvent.MOUSE_OVER,... function Image lưu trạng th|i (đ~ tải – fl_ClickToLoadUnloadSWF(eve true hoặc chưa tải – nt:MouseEvent):void false) { Phương thức load của đối tượng Loader sẽ tải - 161 - CHƯƠNG 5 LẬP TRÌNH VỚI ACTIONSCRIPT if(fl_ToLoad) { Loader(); về tập tin theo một địa chỉ được chỉ định trong đối tượng URLRequest fl_Loader = new Để hủy tải, ta sử dụng phương thức unload fl_Loader.load(new URLRequest("http://www.help... movieClip_1.addEventListener( MouseEvent.CLICK, fl_ClickToGoToAndPlayFromFr ame); function - 155 - Trình diễn movie nhảy đến Frame được chỉ định Trong trường hợp n{y Frame được chỉ định là 5 CHƯƠNG 5 LẬP TRÌNH VỚI ACTIONSCRIPT fl_ClickToGoToAndPlayFromFr ame(event:MouseEvent):void { gotoAndPlay(5); } movieClip_1.addEventListener( Dừng trình diễn movie ở MouseEvent.CLICK, Frame kế tiếp fl_ClickToGoToNextFrame); Click to . Animation > Rotate Continuously. Hình 108 – Vùng Code Snippets: Rotate Continuously Khi đó, Flash sẽ chèn tự động một Action Frame vào trong TimeLine và khởi tạo nội dung Action cho bạn. bạn tốn thời gian, và việc quản lý nhiều Frame sẽ làm cho bạn cảm thấy rối. Bạn hoàn toàn có thể làm thế nếu bạn muốn. Nhưng CHƯƠNG 5. LẬP TRÌNH VỚI ACTIONSCRIPT - 1 47 - bạn cần lưu ý. v{o Commands > Make Button. Lặp lại điều này cho Help và Result. Ở các Scene Play, Help, Result bạn bổ sung vào dòng lệnh stop(); vào vị trí cuối cùng của mã lệnh (ở đ}y dòng lệnh này là