Yonny Zohar - game developer & designer

חיפשתי את זה שנה! והנה זה נמצא לבסוף באתר המעולה הזה: http://www.wickham43.net/highlighthome.php Wickham's HTML & CSS tutorial Highlighted text link for current page 1 HOME About Us Services The links above show the simplest form of identifying which page you are on. Every page needs a different link to have the class="current". It does have the disadvantage that if you extend your website by adding extra pages or if you want to edit a link url you have to edit every page and you might have hundreds of them. The other methods allow the li tags with the links to be put in a separate "include" file where they will not change depending on which page they refer to and you will only have to edit one file to add extra links or edit urls. The code for the styles in the head section style tags is:- a.current:link, a.current:visited { color: black; cursor: default; text-transform: uppercase; font-weight: bold; background-color: lime; } /* unvisited and visited links*...

CS5 has introduced the code snippets, which got me thinking if I can find more. well, there are tons! http://snipplr.com/popular/language/actionscript-3 http://www.adobe.com/devnet/flash/articles/code_snippets_panel.html http://www.kirupa.com/forum/showthread.php?t=249149 http://mattmaxwellas3.blogspot.com/ Very useful!

Link out to a file containing html with either php or ssi SSI Include: replace area you want to link out to with this: also change the following file on server: .htaccess add following line to it: AddType text/x-server-parsed-html .html PHP: replace area you want to link out to with this: also change the following file on server: .htaccess add following line to it: ForceType application/x-httpd-php

כל סוגי הקישור לקבצים חיצוניים ליצירת עמודים דינאמיים http://www.boutell.com/newfaq/creating/include.html

למי שרוצה לבנות אתר דינאמי ללא מערכת ניהול תוכן מאוד מאוד שימושי

var soundRequest:URLRequest = new URLRequest("soundFile.mp3"); var sound:Sound = new Sound(); var soundController:SoundChannel = new SoundChannel(); sound.load(soundRequest); var resumeTime:Number = 0; sound.addEventListener(Event.COMPLETE, onComplete); function onComplete(event:Event):void { play_btn.addEventListener(MouseEvent.CLICK, playSound); stop_btn.addEventListener(MouseEvent.CLICK, stopSound); } function playSound(event:MouseEvent):void { soundController = sound.play(resumeTime); pause_BTN.visible = true; pause_btn.addEventListener(MouseEvent.CLICK, pauseSound); play_BTN.visible = false; play_btn.removeEventListener(MouseEvent.CLICK, playSound); } function pauseSound(event:MouseEvent):void { resumeTime = soundController.position; soundController.stop(); pause_BTN.visible = false pause_btn.removeEventListener(MouseEvent.CLICK, pauseSound); play_BTN.visible = true; play_btn.addEventListener(MouseEvent.CLICK, playSound); } function stopSound(event:MouseE...

import flash.media.SoundMixer; SoundMixer.stopAll();

<?xml version="1.0" encoding="utf-8"?> <PLAYLIST> <SONG URL="Teacher-01.mp3" TITLE="First Track" ARTIST="John Doe" /> <SONG URL="Teacher-02.mp3" TITLE="Second Track" ARTIST="Random Singer"/> <SONG URL="Teacher-03.mp3" TITLE="Third Track" ARTIST="Super Generic Singer" /> </PLAYLIST> var my_songs:XMLList; var my_total:Number; var my_sound:Sound; var my_channel:SoundChannel; var current_song:Number = 0; var song_position:Number; var song_paused:Boolean; var myXMLLoader:URLLoader = new URLLoader(); myXMLLoader.load(new URLRequest("playlist.xml")); myXMLLoader.addEventListener(Event.COMPLETE, processXML); function processXML(e:Event):void { var myXML:XML = new XML(e.target.data); my_songs = myXML.SONG; my_total = my_songs.length(); //playSong(0); } function playSong(mySong:Number):void { var myTitle = my_songs[mySong]. @ TITLE; var...

var textLoader:URLLoader = new URLLoader(); var textReq:URLRequest = new URLRequest("text/htmlText.txt") var csstLoader:URLLoader = new URLLoader(); var cssReq:URLRequest = new URLRequest("styles/main.css") var style:StyleSheet = new StyleSheet(); function textLoaded(event:Event):void { cssLoader.load(cssReq); cssLoader.addEventListener(Event.COMPLETE, cssLoaded); } function cssLoaded(event.:Event):void { style.parseCSS(cssLoader.data); external_txt.styleSheet = style; external_txt.htmlText = textLoader.data; } textLoader.load(textReq); textLoader.addEventListener(Event.COMPLETE, textLoaded);

באתר זמזר אפשר להמיר כל סוג קובץ למשנהו. אפשר אפילו להוריד סרט מיו טיוב ולהוציא ממנו רק את הסאונד! zamzar.com

רוצים אייקון חמוד בראש האתר? מה שנקרא בלועזית favicon.ico. צרו תמונה בגודל 32X32 פיקסלים. שמרו אותה כקובץ ICO, אם אתם צריכים תוכנה שעושה את זה, תורידו את זאתי . תעלו את התמונה לתיקיה הראשית של האתר, ובראש העמוד בין התגיות: <HEAD> </HEAD> שימו את הקוד הבא: <LINK REL="SHORTCUT ICON" HREF="http://www.mysite.co.il/favicon.ico">

רוצים כפתור שעושה מיוט לסאונד? צרו 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"); } }

בשונה מאקשנסקריפט 2, ב3 עומד לרשותנו השימוש בערוצים. שמים כל סאונד בערוץ משלו ומקבלים שליטה הרבה יותר טובה. מייבאים סאונד לספריה, נכנסים להגדרות ונותנים לו שם, ובכך הופכים אותו ל-CLASS. בתיק העבודות שלי יש צליל רקע שנקרא DRONE: //background sounds var dronesound:Sound = new drone();//drone is a class name of an attached sound var musicChannel:SoundChannel = new SoundChannel(); playMusic(); function playMusic():void { musicChannel = dronesound.play(); musicChannel.addEventListener(Event.SOUND_COMPLETE, loopMusic); } function loopMusic(e:Event):void { if (musicChannel != null) { musicChannel.removeEventListener(Event.SOUND_COMPLETE, loopMusic); playMusic(); } }

טוב, אני ממש לא שם עדיין, אבל מצאתי מנוע גראפי בקוד פתוח לאקשנסקריפט שמדמה פיזיקה ריאליסטית . דוגמה יפה למשחק שעושה שימוש גאוני בפיזיקה כזאת היא Crush The Castle של .Armor Games

הקוד הבא משמש לשליפת מילים מסוימות מקובץ 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]; }

לא רק העולם שונא אותנו, גם דפדפני האינטרנט. יצירת דפי HTML בעברית זה דבר די מרגיז בהתחלה. דרימוויבר לא מגיע עם אופציה לכתיבה מימין לשמאל, ולכן איפה שיש טקסט צריך להוסיף תגית RTL לדוגמה: <h1 dir="rtl">תיק עבודות</h1> <p dir="rtl">שמי יוני, אני מעצב אתרים בן 25 מהמרכז.<br /> <br /> בוגר קורס עיצוב לאינטרנט במכללת ג'ון ברייס, ומעצב מוסמך של אדובי.<br /> <br /> אני מתעסק ב HTML, CSS , פלאש, פוטושופ, עריכת סאונד ואנימציה. <br /> <br />עיצוב ציור ויצירה הם תחומים שמאוד קרובים לליבי, ואשמח לפידבק דרך טופס יצירת הקשר שבתיק העבודות. </p>

רוצים להדביק קובץ 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_...

נכון להיום, אני עובד על תיק העבודות משהו כמו חודשיים. רציתי לבנות אתר שמציג את היכולות שלי בכמה שיותר תחומים, בתקווה שמישהו למעלה יגיד- "בואנה, מוכשר הבחור... מגיע לו משכורת שמנה + אוטו עם דלקן..." על כן האתר עצמו בנוי בHTML\CSS ותיק העבודות בפלאש CS4, בתכנות באקשנסקריפט 3.0 ראיתי לנכון לכלול גם מדור מוזיקה, שאומנם לא קשור לתחום העיצוב לאינטרנט, אבל זה כן תחום שאני עוסק בו הרבה שנים: נגינה, הקלטה, עיבוד ושירה. חשוב להראות יצירתי... כרגע הלינקים לשירים יוצאים לאתר "במה חדשה", שם השירים מאוכסנים, אבל בקרוב אני אעביר אותם לאתר ואצור דף לכל אחד. אקשנסקריפט 3.0 לא למדתי בג'ון ברייס. לצערי הם התעקשו ללמד 2.0 וגם זה היה מעט לוקה בחסר. את ההשלמות הנדרשות (והיו הרבה לצערי) עשיתי עם אתר לימודים פשוט מעולה בשם לינדה שלוקח ממני 100 ש"ח לחודש ונותן תמורה שאין שני לה. בתיק העבודות תמצאו טופס ליצירת קשר, שאני מודה שהוא לא שלי. תכנות ברמה כזו זה עדיין מעל לרמה שלי, אז מצאתי אחד חינמי של איזה בחור סקוטי ושילבתי באתר. בגלל שאין לי כרגע כיוון, ואני מתעניין ברבה תחומים שונים...

שלום! ברוכים הבאים לבלוג העיצוב שלי. בבלוג זה אני מתכוון ללוות את תהליך הלימוד שלי ברזי העיצוב לאינטרנט, תחום שהתחלתי בו לפני כשנה, ולקחתי מאוד מאוד ללב. אני מבטיח לפרסם טיפים, פיסות קוד, לינקים מעניינים וכולי, שבתקווה עם הזמן יעזרו למעצבים מתחילים לפלס את דרכם בים המידע שצריך לדעת כדי להתחיל בתחום הזה. כמובן שאשמח לביקורת על האתר, אפשר ליצור איתי קשר דרך הטופס במצגת הפלאש שבתיק העבודות.