วิธีการสกรอล์(หมุนลูกกลิ้ง)เมาส์แล้วทำให้ข้อมูลใน Flash เลื่อนโดยที่ไม่เลื่อนหน้าจอ Web by Ziah

28
Feb
0

วันนี้จะมาสอนวิธีการสกรอล์(หมุนลูกกลิ้ง)เมาส์แล้วทำให้ข้อมูลใน Flash เลื่อนโดยที่ไม่เลื่อนหน้าจอ Web ไปด้วยครับ แบ่งเป็นสองส่วนหลักๆละกัน เริ่มที่ส่วนแรกก่อนการสกรอล์เมาส์แล้วทำให้ข้อมูลของเราเลื่อน

scroll1

Scroll ตัวอย่าง

โค้ดส่วนที่เป็น mxml หรือแท็กของ Flex //ส่วนของขอบเขตการแสดงผลของ List ของเรา เราทำการใส่ MouseEvent mouseWheel เข้าไปเพื่อรับ Event การกลิ้งเมาส์ ซึ่งจะเรียกใช้ฟังก์ชั่นในย่อหน้าถัดไป //List ที่อยู่ด้านใน

ต่อไปเป็นโค้ดในส่วนของ as3 ที่จะถูกเรียกฟังก์ชั่น wheelRoomprivate function wheelRoom(event:MouseEvent):void{ scrollerRoom.value -= (event.delta>0 ? 20 : -20); //จากด้านบนค่า event.delta จะมีค่าตามขนาดที่เรากลิ้งเมาส์ กลิ้งลงเป็น ค่า+ กลิ้งขึ้นเป็นค่า- เราจึงนำค่าดังกล่าวมากลับบวกลบแล้วไปตั้งค่า value ของ ScrollBar ของเราซึ่งจะมีผลให้ข้อมูลของเราเลื่อนตามไปด้วย ซึ่งเรากำหนดให้เลื่อนได้ใกล้ไกลตามใจชอบจากตัวอย่างจะใช้ 20 และ -20 }

เท่านี้ถ้าเราสกรอล์ที่ข้อมูลของเรา ข้อมูลก็จะเลื่อนตามแล้วล่ะครับ

โดนเลื่อนลงมาด้วย

โดนเลื่อนลงมาด้วย

ทีนี้ปัญหาถัดมาคือเวลาเราสกรอล์หน้า Web จะถูกเลื่อนขึ้นลงตามด้วยเพราะ Html มีการรับค่า Scroll อยู่แล้วเราจึงต้องทำการดักไว้ ซึ่งผมได้ใช้ class ที่มีชึ่อว่า MouseWheelTrap สามารถดาวน์โหลดได้จากที่นี่ครับ http://www.spikything.com/blog/index.php/2009/11/27/stop-simultaneous-flash-browser-scrolling/ ให้เราทำการ import ให้เรียบร้อยในหน้า Main ของเราจากนั้นก็ทำการตั้งค่าเล็กน้อยดังนี้ครับ

ในแท็ก ใส่ eventดังนี้ addedToStage=”stretchHandler()”>
แล้วเราก็นำฟังก์ชั่นด้านล่างไปใส่ในแท็ก Script ของ Main ของเราเท่านี้ก็ใช้ได้แล้วครับ private function stretchHandler():void{ stage.scaleMode = StageScaleMode.SHOW_ALL; stage.align = StageAlign.TOP; this.width = stage.stageWidth; this.height = stage.stageHeight; }

การบันทึกและเปิดข้อมูล File โดยใช้ Flex by Ziah

2
Dec
0

ในโปรเจ็คล่าสุดต้องมีการทำ Editor ให้ทาง Designer ได้จัดการหน้าตาต่างๆ เลยต้องมีการบันทึกไฟล์ เพื่อให้พวกเขาได้เปิดมาแก้ไขและบันทึกกลับไปใหม่ได้ และยังได้ข้อมูลที่ได้ทำการจัดการเสร็จแล้วเพื่อนำไปใช้จริงได้อีกด้วย วันนี้เลยมาแนะนำการบันทึกและเปิด Text File ใน Flex ครับ

เริ่มด้วยการบันทึก var fileReference:FileReference = new FileReference; //ประกาศตัวแปรเรียกดูไฟล์ fileReference.save(”ข้อมูลที่จะทำการบันทึก”,”ตัวอย่าง.txt”); //parameter ตัวแรกคือข้อมูลที่เราจะทำการบันทักลงในไฟล์ ตัวที่สองคือชื่อไฟล์ที่จะตั้งเป็น Default
จะได้ผลลัพธ์ดังนี้

หน้าต่างบันทึกไฟล์

หน้าต่างบันทึกไฟล์

ตัวอย่างไฟล์ที่ได้ทำการบันทึก

ตัวอย่างไฟล์ที่ได้ทำการบันทึก

ต่อไปเป็นการเปิดไฟล์ var fileReference:FileReference = new FileReference; //ประการตัวแปรเรียกดูไฟล์ fileReference.browse([new FileFilter("Text File", "*.txt")]) //ใช้คำสั่ง Browse เพื่อดูไฟล์โดยรับ parameter เป็น FileFilter หรือตัวกรองไฟล์นั่นเองโดยมีสอง parameter คือชื่อของไฟล์ที่ต้องการจะเรียกและ นามสกุลของไฟล์ที่จะเรียก fileReference.addEventListener(Event.COMPLETE, onFileLoaded); //สร้าง Event เมื่อเปิดไฟล์เสร็จให้เข้าฟังก์ชั่นดังกล่าว fileReference.addEventListener(Event.SELECT, function():void{fileReference.load();}); //สร้าง Event เมื่อมีการเลือกไฟล์ให้ทำการ Load ทันที private function onFileLoaded(e:Event):void{ //ฟังก์ชั่นที่รองรับการโหลดไฟล์เสร็จ var string:String = e.currentTarget.data.readUTFBytes(e.currentTarget.data.length); //ตัวแปร e.currentTarget.data คือข้อมูลที่ได้ทำการเปิดไฟล์มาซึ่งจะอยู่ในรูปของ ByteArray ซึ่งเราต้องนำไปทำการ Read ในแบบต่างๆตามข้อมูลของเรา (ในตัวอย่างเป็น String) }

หน้าต่างเลือกไฟล์ โดยต้องเป็น .txt (Text File)

หน้าต่างเลือกไฟล์ โดยต้องเป็น .txt (Text File)

หน้าตาของตัวแปร e.currentTarget.data ที่ได้รับมาเป็น ByteArray

หน้าตาของตัวแปร e.currentTarget.data ที่ได้รับมาเป็น ByteArray

เพียงเท่านี้เราก็จะสามารถเขียนบันทึกและเปิดอ่านไฟล์ในแอปบลิเคชั่น Flex ของเราได้แล้วล่ะครับ

วิธีการทำให้รูป Facebook Profile สามารถแก้ไข/ใส่เพิ่มใน ActionScript ได้ by Ziah

31
Oct
0

โดยปกติเราเมื่อเรานำรูปโปรไฟล์เฟซบุ๊คไปทำการ redraw, แก้ไข หรือนำไปใส่ในไฟล์ AS ต่างๆ ก็จะมี Error ขึ้นมาเตือนเรื่อง Security ว่าไม่สามารถทำงานได้ ดังตัวอย่างเช่นเราใช้ capture รูปของ Spark Group ที่มีรูปโปรไฟล์เฟซบุ๊คหนึ่งอยู่ ตามฟังก์ชั่นดังนี้ public function captureImg(imageObject:IBitmapDrawable):String { //รับกรุ๊ปเข้ามา var ohSnap:ImageSnapshot; ohSnap = ImageSnapshot.captureImage(imageObject, 0, pngEnc); //ทำการ Capture รูป ซึ่งจะบั๊คที่บรรทัดนี้ var imageByteArray:ByteArray = ohSnap.data as ByteArray; return ImageSnapshot.encodeImageAsBase64(ohSnap); }

จะทำให้เกิด Error หน้าตาแบบนี้

SecurityError: Error #2122: Security sandbox violation: BitmapData.draw: http://localhost/****.swf/[[DYNAMIC]]/2 cannot access http://profile.ak.fbcdn.net/hprofile-ak-prn1/*****.jpg. A policy file is required, but the checkPolicyFile flag was not set when this media was loaded.

at flash.display::BitmapData/draw()

ซึ่งวิธีการแก้ไขคร่าวๆของเราก็คือ การขอ Security Domain ต่างๆของรูปโปรไฟล์เฟซบุ๊คเอาไว้ก่อนหน้า ดังนี้ var domainList:Array = ['http://profile.ak.fbcdn.net','http://profile.cc.fbcdn.net','http://fbcdn-profile-a.akamaihd.net','http://photos-a.ak.fbcdn.net','http://photos-b.ak.fbcdn.net','http://photos-c.ak.fbcdn.net','http://photos-d.ak.fbcdn.net','http://photos-e.ak.fbcdn.net','http://photos-f.ak.fbcdn.net','http://photos-g.ak.fbcdn.net','http://photos-h.ak.fbcdn.net','http://static.ak.facebook.com','http://static.ak.fbcdn.net','http://b.static.ak.fbcdn.net']; for each (var domain:String in domainList) { Security.loadPolicyFile(domain+’/crossdomain.xml’); Security.allowDomain(domain); Security.allowInsecureDomain(domain); }

เพียงเท่านี้แอปพลิเคชั่นของเราก็จะสามารถรันได้เป็นปกติแล้วล่ะครับ

การปรับค่าลักษณะต่างๆของ Text แต่ละบรรทัดใน RichEditableText by Ziah

30
Jul
0

จากบล็อคที่แล้วที่ได้แสดงถึงการสร้าง Chat ด้วย RichEditableText ในบล็อคนี้จะอธิบายอีกหนึ่งความสามารถของ RichEditableText ที่มีความยืดหยุ่นมากกว่า TextArea อีกอย่างนึงครับ

โดยปกติแล้ว TextArea จะสามารถแก้ไข Property ของ Text ได้ แต่ว่าจะทำการแก้ไขทั้งหมดไม่สามารถแก้ไขเป็นส่วนๆได้ ซึ่งความสามารถนี้มีใน RichEditableText ตามชื่อของมันเลย เรามาเริ่มจากการดู Property ของมันกันเลยครับ

chat-color

จากการนั่งเจาะดู Property ของมันทำให้ผมเห็นได้ว่า จริงๆแล้วการเก็บ Text ของ RichEditableText นั้นสามารถเก็บแยกๆกันเป็น Paragraph ได้เท่านี้ก็พอเดาได้ใช่ไหมครับว่าเราจะแก้ไข Text แยกกันเป็นส่วนๆได้อย่างไร โดยโค้ดมีหน้าตาดังนี้ครับ var pe:ParagraphElement = new ParagraphElement; //สร้างตัวแปรย่อหน้า var se:SpanElement = new SpanElement; //สร้างตัวแปรบรรทัด se.text = obj.message; //ใส่ค่ากับ Span0 se.color = “#00FFFF”; //ใส่สี ในส่วนนี้สามารถกำหนดค่าลักษณะต่างๆของ Text ส่วนนี้ได้เลยครับ pe.addChild(se) //กำหนดเสสร็จแล้วก็จับใส่ตัวแปรย่อหน้าเลยครับ txtChat.content.addChild(pe); //แล้วก็ไปจับใส่ RichEditableText ได้เลยครับ โดยนำไป addChild ใส่ Property content ที่เป็น TextFlow

จากโค้ดข้างต้นเราจะใช้โค้ดดังกล่าวแทน txtChat.text+=obj.message เหมือนทั่วๆไป แต่เราจะสร้างตัวแปรเพื่อกำหนัดคุณลักษณะต่างๆของ Text ก่อนแล้วค่อยในไปใส่ RichEditableText ของเรา แล้วเราจะได้ผลลัพธ์ดังนี้เลยครับ

colorchat2

สร้างห้อง Chat โดยใช้ Spark ของ Adobe Flex by Ziah

30
Jul
0

ในที่จริงแล้วการสร้างห้อง Chat ดูเหมือนจะง่าย แต่หลังจากได้ทำแล้วส่วนที่มีปัญหาคือการเลื่อน Scrollbar อัตโนมัติทำงานไม่ถูกต้องเท่าที่ควร ในวันนี้ผมเลยจะมาเสนอวิธีการสร้างห้อง Chat และทำให้มีการ Scroll ที่ถูกต้องครับ <s:TextInput id="txtChatInput" keyDown="sendChat(event)" text="" x="7" y="133"/> <s:RichEditableText id=”txtChat” clipAndEnableScrolling=”true” x=”13″ y=”28″ width=”201″ height=”97″ editable=”false” selectable=”false”/> <s:VScrollBar id=”scrllChat” viewport=”{txtChat}” fixedThumbSize=”true” skinClass=”components.chat_scrollVerticalScrollbar” x=”213″ y=”27″/>

จากด้านบน

  • TextInput คือส่วนที่จะให้ผู้ใช้ได้กรอกข้อความ
  • RichEditableText เป็นคอมโพเนนท์ที่คล้ายๆ TextArea แต่ว่าเป็นของ Tag Spark โดยมันมีความสามารถต่างๆเพิ่มเข้ามาทำให้ใช้งานได้ดีมากยิ่งๆขึ้นส่วนสำคัญคือสามารถใช้กับ Custom ScrollBar ของเราได้ดังข้อถัดไป
  • VScrollBar จากที่เห็นจะเป็นการใส่สกินของเราเองและใส่ viewport คือ RichEditableText ของเรา

chat01

ทีนี้โดยทั่วไปแล้ว เมื่อผู้ใช้ได้รับค่าเข้ามาเพื่ออัพเดท Chat เราจะทำการเลื่อนไปที่ล่างสุดโดยอัติโนมัติ แต่โค้ดโดยทั่วไปและ ตาม website ต่างๆได้เสนอมาว่าให้ใส่โค้ดดังนี้ในฟังก์ชั่นอัพเดทค่าห้อง Chat ของเรา ( id ของคอมโพเนนท์ อ้างอิงจากคอมโพเนนท์ด้านบน) txtChat.appendText("\n"+obj.message); //เพิ่มค่าใน Chat txtChat.validateNow(); //อัพเดทค่าล่าสุด scrllChat.value = txtChat.contentHeight; //แบบที่ 1 ให้ Scroll ไปที่ส่วนที่ท้ายสุดของ chat scrllChat.value = scrllChat.maximum ; //แบบที่ 2 ให้ Scroll เป็นค่าที่สูงที่สุด(ท้ายสุด) ของ Scroll

chat02

แต่ว่าทั้งสองแบบนั้น เมื่อเราทำการพิมหลายๆบรรทัดก็ยังคงทำให้เกิดบั๊คตามมา (แบบที่1มักเป็นกับแค่เพียงภาษาไทย แบบที่สองเป็นทั้งสองภาษา)

ซึ่งหลังจากที่ได้อ่าน Property ต่างๆของ RichEditableText ทำให้ได้การเขียนคำสั่งที่ทำให้ Chat สามารถทำงานได้อย่างถูกต้องตลอดดังนี้ครับ txtChat.appendText("\n"+obj.message); //เพิ่มค่าใน Chat txtChat.validateNow(); //อัพเดทค่าล่าสุด txtChat.scrollToRange(txtChat.text.length,txtChat.text.length); //ใช้ฟังก์ชั่นเลื่อน Scroll ไปที่ตำแหน่งสุดท้ายของอักษรใน Chat ของเรา

chat03

จากด้านบนจะทำให้การเลื่อน Scroll อัตโนมัติของเราเลื่อลงมาล่าสุดได้ตลอดถูกต้องแล้วล่ะครับ

Reference : http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/RichEditableText.html