Mentor in WebForumz
No Reply
February 29th, 2008
Datis Design Weblog
Designing for Communicating
WebForumz is one of the great forums for web designers and developers from all around the world. I have been their member for a while, now their administrator team asked me to be a mentor of graphic and design forums.
Here you can see the thread :
http://www.webforumz.com/all-staff/65636-welcome-marsoul-mentor.htm
I suggest you to be a member of this forum if you are looking for friendly space to look for your web designing and programming problems.
http://www.webforumz.com
In this tutorial I am going to tell you how can you use a simple text file to add links to your buttons. With this method you can easily update your links without any need to change the source of flash file, for example if your client wants to change the links but they don’t know any actionscripting !
First create a new document in Flash and create your desired buttons, then create a new layer in root and name it actions, type these codes in there :
function loadlinks(loaded) {
if (loaded) {
home = mylinks.home;
about = mylinks.about;
}
}
mylinks = new LoadVars();
mylinks.onLoad = loadlinks;
mylinks.load("links.txt");In above codes first we create a new object from LoadVars class, then with loadlinks function we load our links from the external text file into our Flash document.
Next create a new text document, for example we have 2 buttons with home and about links, we can type these codes in our text document :
home=http://www.mysite.com&about=http://www.mysite.com/about.php
Save this document with links.txt name. Now go to your Flash document and on your buttons type these codes, for home button :
on (press) {
getURL(_root.home);
}and for about button :
on (press) {
getURL(_root.about);
}Its finished, now you can easily update your links without changing the source of Flash file, remember to put your text file where your .swf file is.
If you are a web designer, or a web developer, I think the Web Developer Plugin is a very useful tool for you that you can install it on Firefox browser (It can be installed on SeaMonkey and Flock browsers too but not on Internet Explorer !). It will give you a great power to control every element on your web page and gain information about them.
You can view and edit CSS, Control Images, Control Cookies, Control Javascripts, Edit HTML, resize web page, Validate pages, and… these are only a small features of this great tool.
One of the coolest features of this tool is Outline, You can move your mouse on every element of the page and it will give you a lot of information about it like class, name, ID,… This is very useful and one of my favorite features !
I think its better to use Firefox and Install this plugin if you are a web designer or developer, it will help you so much…
You can download it from here :
http://chrispederick.com/work/web-developer
In Flash there is a method named hitTest which will test if two objects hit each other or not, but it has a problem and that is because it tests with the object bounding box not the exact edge of the object.
To solve this problem we can easily use a simple mathematic formula which all of you are familiar with it, the Pythagorean formula. Look at this picture :
In this picture the hypotenuse is the distance between two objects, the difference between x1 and x2 will be one side of triangle and difference between y1 and y2 is another side. We can easily use this formula in Flash.
Create a new document in Flash, then create two objects and convert them to movieclips, create the instance name for them, mc1 and mc2. Create a text box and choose dynamic one, place a hittest in instance name box. Now copy and paste these codes in main frame :
mc1.startDrag(true);
onEnterFrame = function () {
var dx:Number = mc2._x-mc1._x;
var dy:Number = mc2._y-mc1._y;
var dist:Number = Math.sqrt(dx*dx+dy*dy);
if (dist<mc1._width/2+mc2._width/2) {
_root.hittest.text = "Hit !";
} else {
_root.hittest.text = "";
}
};In the first line of code it will start to drag the mc1 movieclip, in next lines it will check the distance between two objects in every frame, and when the distance became lower than sum of the half width of two objects it will show the ‘Hit !’ message.
Hope it was helpful ! You can download the source from here :
Download File
I have designed a template for a marketing research company named MBJT about 3 months ago, the template created with Adobe Illustrator for vector parts and 3DStudio for final rendering, you can see it here :
http://marsoul.deviantart.com/art/Consulting-Website-Theme-4-68631948
or here :
http://www.datisdesign.com/images/portfolio/websites/mbjt_large.jpg
I didn’t finish the work because I wanted to create the site in Flash and all the movements and animations with 3DStudio, but the problem was the size of the final Flash file, and that would be large for a web site, the solution was create vector version of it, but I really didn’t like the result of it when became vector based. So I choose to not do this work, but the client chose another company and they created, you can see it here : http://www.mbjt.ir
To be honest I don’t like it, those lights and shadows and ambient lights are gone ! Those reflections are unnatural, I don’t know what you think, but I am not happy with the final work !
Also the overall functionality of the web site is poor, I don’t think if someone come to visit this site without any information would understand the web site goal and the services they provide.
I love Flash but when it comes building a full Flash web site, I am not very keen about it, Flash web sites are nice and amusing, but they have many disadvantages compare to valid (X)HTML/CSS web sites. I will try to explain why later.
One of the most important works that every web designer and developer should do is validate their pages. But what is validation ?
Validation is a process of testing a web document with World Wide Web Consortium (W3C) standards for HTML and XML documents.
So why should we validate our documents ?
One simple reason is that documents without W3C standards rely on browser error correction, so maybe one document has a different appearances on different browsers.
You may see many web sites that won’t validate specially the popular ones, people visit them because of their name. So normal web sites can not afford that budget to make themselves popular, they should validate themselves.
Also validation is very good for disabled peoples, because screen reader programs depend on standard codes.
So DO NOT FORGET to VALIDATE your web pages… It is very very important.
To see if a web page can pass the W3C standards you can see this link :
http://validator.w3.org
In this post I am going to tell you some important factors about text in designing a web site, as you see in my previous post about simplicity in web designing I am going to add more details on this subject.
Texts are important element in every web site, users come to see web sites to get information about their needs, text is one of the easiest way to give information to users, but how to use this powerful element is very important.
Maybe many Internet users still don’t know the downsides of older browsers, these browsers because of their old rendering engine can not show modern web sites correctly specially the CSS web sites. If you are using the old browser please upgrade to new versions today and enjoy the beautiful web surfing !
This chart shows the viewers browsers of my site till this post’s date, you see that Internet Explorer 6 is still famous, but it is one of the worst browsers !
I will put the most popular web browsers home pages, Me specially like Firefox because of its great abilities !
Firefox :
http://www.mozilla.com/en-US/firefox
Internet Exoplorer :
http://www.microsoft.com/windows/products/winfamily/ie/default.mspx
Opera :
http://www.opera.com
I think web designing is one of the hardest jobs in the world ! Because a web designer should work on many aspects ! A web site is a medium that people from all around the world with different cultures and languages and knowledge levels come to see it, so how can you make it easy to navigate , understand and communicate with for all those people ?!
I have read a post about hacks for older version of Internet Explorer in WebdesignerWall and I totally agree with it, why should we spend our time with those hacks for older browsers while those users can easily update their software ?!
Stop doing this and let them upgrade their browsers to see web sites correctly !
Common IE hacks
- CSS Conditional comments
In order for our sites to work on specific version of IE (due to improper CSS rendering), CSS conditional comments are used to apply special CSS specifications to fix it. If you haven’t realized this yet, read the IE bug articles on positioniseverything.net (warning: you might hate IE more after you read them). - PNG hack
As mentioned early, IE6 is outdated and doesn’t support PNG alpha transparency. In order to display PNG (with alpha transparency) properly in IE6 or older version, we use this hack.
You can read more about this at Webdesignerwall.
