Yonny Zohar - game developer & designer

My name is Yonny Zohar, I'm a game developer with six years experience. I've worked on several commercial titles including " Bingo Island ", and have recently made the move from flash development to html5. Six years ago, while i was learning flash, i worked simultaneously with html, CSS and js. back then my impression was that flash was simply light years ahead in terms of development ease, code maintenance and error handling. Returning now to html5 six years later, I was very weary - had things improved since 2009? I've spent the last several months hearing from everyone around me that the answer is a definite "YES". I'm here to say- the answer is still a definite NO! Lets begin this rant with my number one hatred - CSS: NO DEBUGGING - Debugging css is awful. you spend days trying to figure out why elements don't behave the way they should. Try adding and removing properties to elements hoping it will make them act the way you want or...

רוצים כפתור שעושה מיוט לסאונד? צרו MC עם השם onoff_btn, בעל שני מצבים- ON, OFF: //stop sounds var soundOn:Boolean = true; onoff_btn.addEventListener(MouseEvent.CLICK,toggleSound); onoff_btn.buttonMode = true;//turns mouse into a finger icon on hover function toggleSound(event:MouseEvent) { var s:SoundTransform = new SoundTransform(); if(soundOn) { // turn sound off s.volume=0; SoundMixer.soundTransform=s; soundOn=false; onoff_btn.nextFrame(); } else // sound is off { // turn sound back on s.volume=1; SoundMixer.soundTransform=s; soundOn=true; onoff_btn.gotoAndStop("1"); } }

הקוד הבא משמש לשליפת מילים מסוימות מקובץ TXT . המילים בקובץ מופרדות בפסיק, והקוד יודע לקחת אותן ולהפוך אותן לARRAY, מה שמאפשר לשלוף אותן אחת אחת על פי דרישה. לא לשכוח לעשות תיבת טקסט דינאמי עם שם המופע my_txt var req:URLRequest = new URLRequest("words.txt"); var loader:URLLoader = new URLLoader(); loader.load(req); var allWords:Array; loader.addEventListener(Event.COMPLETE, textLoaded); function textLoaded(event:Event):void { allWords = new Array; var stringOfWords:String = event.target.data; allWords = stringOfWords.split(","); my_txt.text = allWords[3]; }

רוצים להדביק קובץ SWF בתוך הבלוג שלכם? השתמשו בקוד הבא. שנו את המקור ואת הגודל: <embed type="application/x-shockwave-flash" src="http://yonnyzohar.co.il/Gallery/XMLGallery.swf" pluginspage=" http://www.macromedia.com/go/getflashplayer" height="400" width="550"></embed>

בעיה שנתקלתי בה בכתיבת הבלוג, היא כשרציתי להדביק את הקוד שכתבתי בתוכנות שונות בתוך הבלוג, כדי שאנשים אחרים יוכלו להשתמש בו. קופי-פייסט רגיל לא עובד, המערכת אוטומטית מורידה תווים מסוימים על דעת עצמה. אך לא עוד! עם האתר הזה: http://francois.schnell.free.fr/tools/BloggerPaste/BloggerPaste.html אפשר בקלות להמיר כל קוד לפורמט שBlogSpot יודע לקרוא.

סיימתי עכשיו טוטוריאל מעולה מבית TUTVIDS.COM שם בניתי גלריית תמונות ששואבת את המידע שלה מקובץ XML. תוך כדי עשיתי כמה שפצורים משלי, הוספתי FADE IN מגניב לכל תמונה, והוספתי שדה טקסט לכותרת תמונה, שמתחלף על כל תמונה. לינק לגלריה הגלריה בנויה מקליפ שמכיל את התמונות, ותיבת טקסט דינאמית שמציגה את הכותרת. המידע כולו נשלף מקובץ XML עם התבנית הבאה: לעצלנים מביניכם, הנה הקוד AS3: import fl.transitions.Tween; import fl.transitions.easing.*; var imageTween:Tween; var XMLReq:URLRequest = new URLRequest("gallery.xml"); var xmlLoader:URLLoader = new URLLoader(XMLReq); var gallery:XML; var imageLoader:Loader; var imageDesc:String; var imageURL:String; //height and such var rawHeight:String; var rawWidth:String; var imgNum:Number = 0; var checkSec:Timer = new Timer(100); var numberOfChildren:Number; xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded); container_mc.buttonMode = true;//turns movie clip into a button function xmlLoaded (event:Event):void { checkSec.start(); checkSec.addE...

כך נראה XML של גלריית תמונות: בקובץ הפלאש יש תיבת טקסט דינאמית בשם my_txt. מתייחסים לXML כאל ARRAY, ובוחרים מתוכו אלמנטים לפי מספר: my_txt.text = gallery.image[0].title; var req:URLRequest = new URLRequest("gallery.xml"); var loader:URLLoader = new URLLoader(); var gallery:XML; function xmlLoaded(event:Event):void { gallery = new XML(loader.data); my_txt.text = gallery.image[0].title; } loader.addEventListener(Event.COMPLETE, xmlLoaded); loader.load(req);

יוצרים תיבת טקסט דינאמי עם שם מופע my_txt עם הקוד הבא בטיימליין: var req:URLRequest = new URLRequest("text.txt"); var loader:URLLoader = new URLLoader(); function textLoaded(event:Event):void { my_txt.text = loader.data; } loader.addEventListener(Event.COMPLETE, textLoaded); loader.load(req);

var req:URLRequest = new URLRequest("image.jpg"); var loader:Loader = new Loader(); function imageLoaded(event:Event):void { addChild(loader); } loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded); loader.load(req);

הפרילודר הוא הדבר הראשון שרואה הגולש בזמן שהסרט נטען. בפרילודר שהכנתי יש שני אלמנטים - תיבת טקסט בה יופיעו האחוזים שנטענו עד כה, ופרוגרס בר שגדל ככל שהסרט נטען. כשהסרט סיים להיטען, ממשיכים לפריים הבא. * חשוב מאוד כשמייצאים את הסרט, לעשות את הדבר הבא: publish settings-> Flash-> ActionScript 3.0-> Export Classes in Frame - 2 זה מבטיח שקודם כל יטען הפרילודר ורק אחר כך הסרט עצמו stop(); this.addEventListener(Event.ENTER_FRAME, loading); function loading(e:Event):void { var total:Number = this.stage.loaderInfo.bytesTotal; var loaded:Number = this.stage.loaderInfo.bytesLoaded; loadbar_mc.scaleX = loaded/total; loader_txt.text = Math.floor((loaded/total)*100)+ "%"; if (total == loaded) { //play(); gotoAndStop("2"); this.removeEventListener(Event.ENTER_FRAME, loading); } }

את המצגת בדף הבית עשינו עם המורה בג'ון ברייס. היא נכתבה באקשנסקריפט 2.0 המצגת מורכבת מפריים אחד, שיש בו שלושה קליפים - שני כפתורים וסרט אחד ארוך, שנע ימינה ושמאלה כשלוחצים על הכפתורים. הסרט הנע זז 567 פיקסלים ימינה או שמאלה בכל פעם, מה שכמובן אפשר לשנות ולהתאים לגודל החלון שלכם ומספר התמונות שרוצים. כדי להתאים את המצגת לעולמנו המודרני, שיניתי את הסינטקס לכדי כתיב של אקשנסקריפט 3.0. מי שרוצה מוזמן לקחת את המצגת, כל מה שצריך לעשות הוא לעצב את הכפתורים והתמונות, ולתת להם את אותו שם המופע כמו בקוד. var pic:uint = 1; // Current picture next_button.addEventListener(MouseEvent.CLICK, moveRight); function moveRight(event:MouseEvent):void { if(pic { pictures.addEventListener(Event.ENTER_FRAME, nextPicture); function nextPicture(event:Event):void { pictures.x = Math.round(((pictures.x - 576 * pic) / 2) - 1); // Motion with easing //pictures._x = pictures._x - 16; // Motion without easing if(pictures.x == -576 * pic) { pictures.removeEventListener(Event.ENTER_...