רשומות

מציג פוסטים מתאריך ינואר, 2010

אייקון בראש העמוד

תמונה
רוצים אייקון חמוד בראש האתר? מה שנקרא בלועזית 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"); } }

איך להתשמש בסאונד באקשנסקריפט 3

בשונה מאקשנסקריפט 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

טעינת מילים ספציפיות מקובץ טקסט בשיטת ARRAY

הקוד הבא משמש לשליפת מילים מסוימות מקובץ 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 יודע לקרוא.

גלריית תמונות XML שעובדת פיקס

תמונה
סיימתי עכשיו טוטוריאל מעולה מבית 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 - לשימוש בגלריית תמונות

תמונה
כך נראה 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);

טעינת טקסט מקובץ TXT חיצוני

יוצרים תיבת טקסט דינאמי עם שם מופע 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);

בניית פרילודר בAS3

הפרילודר הוא הדבר הראשון שרואה הגולש בזמן שהסרט נטען. בפרילודר שהכנתי יש שני אלמנטים - תיבת טקסט בה יופיעו האחוזים שנטענו עד כה, ופרוגרס בר שגדל ככל שהסרט נטען. כשהסרט סיים להיטען, ממשיכים לפריים הבא. * חשוב מאוד כשמייצאים את הסרט, לעשות את הדבר הבא: 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); } }

קוד המצגת בדף הבית - AS3

את המצגת בדף הבית עשינו עם המורה בג'ון ברייס. היא נכתבה באקשנסקריפט 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(Eve

סקירה של תיק העבודות

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

בשעה טובה אפשר להתחיל

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