About Gavalian Studio
Portfolio
Services
Free Quote
Awards and Publications
Contact Gavalian Studio
Gavalian Studio's Live

Saturday, March 27, 2010

The Original Mafia Rules

Game Core

Welcome to Mafia, a rite-playing game in which players become
characters suspected in having Mafia connections. Two teams: the Honest and the
Mafia will compete against each other. For the Honest team players, the task is
to stop Mafia before it eliminates them. Mafia members have to hide their
identity and pose as Honest players in order to manipulate the other team players
towards self-destruction. It is in each player's best interest to prove his or
her innocence (or if you are a Mafia member, to hide your guilt) by accusing and
interrogating their fellow suspects, until all members of the opposing team are
eliminated from the game.


Pre-Game Instructions
Prepare a deck of cards, paper, pencils and at least six players. When all players have
assembled, count how many people are in. From the deck, take as many cards as there are players according to the following list:

  • 6-7 players = 2 black cards + others red
  • 8-10 players = 3 black cards + others red
  • 11-13 players = 4 black cards + others red
  • 14-16 players = 5 black cards + others red

Inform the players of the number of the black cards included.


Game Schedule


Sunrise Phase


First step is to divide the players into two teams. Each player gets one card from the prepared and shuffled deck, secretly looks at the card's color and returns the
card to the deck. Then everybody closes their eyes and lowers their heads. Someone
starts counting aloud (usually the person who dealt the cards). After number 5, s/he
continues to count silently until 15, then s/he resumes counting aloud until 20.
During the silent period, the players who got black cards, should open their eyes, raise their heads, and look at each other, then close their eyes and lower their heads again. On count 20, everybody should open their eyes. Now, all
players are divided into two teams. Mafia are the players who saw each other and
therefore know each other. Honest people are the players who saw nothing, don't know
each other, and don't know who the Mafia members are. This is the only advantage
of Mafia: they know each other. Honest players have to suspect everybody, but
they have an advantage of being the majority. The main struggle during the next phase will be
between the informed minority and the uniformed majority.

Day Phase


Talk... At any moment, any player may put another player in the "suspected
to be the Mafia" position. S/he should (better) provide grounds for the
suggestion. Everyone (including the accused) has a right to argue. But when the
accuser asks to vote, everyone should vote by raising their hands. If the majority of
the players (not counting the accused) votes for "Guilty as member of the Mafia",
the suspected player is "sentenced to death" and s/he is out of the game until
the end of the round. If the accuser fails to get the majority on her/his side, the
game continues with the same number of players. Accusations may happen any
number of times during the discussion. Players who are eliminated from the game do
not reveal their identity until the end of the game and should not try to help
others who are still in the game. There is no way to know the team identity of the "dead" unless you have the next phase.

Night Phase


This is the only phase when you can find out if all Mafia members have been
eliminated. So, once in a while, someone should propose to have a "Mafia Night".
If the majority of the players who are still in the game agrees, the Night
begins. Everyone takes a pencil and a piece of paper, and secretly writes on them.
Honest people must write "honest" on the note, while members of the Mafia must write
the name of the person, whom they want to eliminate from the game. After that,
everybody puts their notes in the middle and someone reads them. The
number of the notes with the names will reflect the number of survived Mafia members, so the players will know if they have "killed" an Honest
person or a Mafia member during the day. If the same name appears on all Mafia
notes, the named person is "murdered" and is out of the game until the end of
the round. In any other case, the named players survive the Mafia attack and the game continues with the same number of players.

For example, if three members of the Mafia are in the game, there should be three notes with names on them. Only if all three notes have the same name, that person
is "murdered". If only one member of Mafia is still in the game, her/his
single shot will be enough to eliminate somebody.

The game ends when there are no
shots during Mafia Night or all Honest people have been eliminated. Start again.


Pointers for the beginners


  1. Players are free to introduce
    new procedures during the game, but no one has to follow them unless she/he finds their usage at that moment reasonable.

  2. Accidental or purposeful peeking by red card holders during the Sunrise Phase
    should be discouraged, however it will not give any advantage during the game.
    Trick of the game is always to persuade others to accept your knowledge and never to have the knowledge per se. By the way, this is the reason for my reservations of
    including different knowledge bearing characters (inspector, angel, seer).
    The only knowledge in the game is Mafia connections, everything else is
    artificial.

  3. Paper and pencils should be the same for everybody. Otherwise, it will be easy to find who have written what during the Mafia Night.

  4. For a new group, unless a clear leader emerges, the first round may be a
    little slow. In the second round people who were unjustly eliminated have enough
    drive to prevent it from happening again. The third game is great without any
    reservations. If a group has someone who played before, s/he should provide
    initial leadership from the beginning.


Scoring

If Mafia wins, each surviving Mafia player receives a number
of points equal to the initial number of the Honest players.
If Honest wins, every Honest player receives a number of
points equal to the number of surviving Honest players.

Tuesday, September 29, 2009

Internet explorer Center alignment problem

Just add style "text-align:left" under body style.

Wednesday, September 16, 2009

Removing file extension via .htaccess

Problem:
You have the following URLs for your website:
www.example.com/about-us.html
www.example.com/services.html
www.example.com/contact-us.html
However, you would like to hide file extensions from the end users, and allow them to access to the files using the following URLs:
www.example.com/about-us
www.example.com/services
www.example.com/contact-us
Solution:
The solution can be achieved by using Apache’s mod_rewrite. Create an .htaccess file in your website root directory with the following content.

RewriteEngine On
RewriteCond %{REQUEST_FILENAME}!-d
RewriteCond %{REQUEST_FILENAME}!-f
RewriteRule ^([^.]+)\.html$ $1 [L]

# Replace html with your file extension, eg: php, htm, asp
Correction

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^(.*)$ $1.html
# Replace html with your file extension, eg: php, htm, asp

Many thanks to Binh Nguyen (Commenter #1) for the correction
To add a trailing slash at the end of the URL
(for example: http://www.example.com/about-us/ to go to http://www.example.com/about-us.html)

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^([^/]+)/$ $1.html

# Forces a trailing slash to be added
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/)$
RewriteRule (.*)$ /$1/ [R=301,L]

Benefits:
- Search engine friendly
- Easier to read and remember
- Extension/environment independent; when you change the technology used for your website (for eg: from using asp to php), you can be assured that all the links and bookmarks will still work.

Tuesday, August 25, 2009

Home Away Clock by Kit Men

Kit Men have created a new dual-time alarm clock for Hong Kong manufacturer M.N.S., the Home Away is a dual-time alarm clock that "explores how people's perception can be diverted into an everyday product"...





The notion of "Home and Away", the time at home and the time where you are away, is the inspiration for the design of this clock. Home and Away is visually demonstrated with two different degrees of color contrast on the clock interfaces, giving people a clear sense of which is the more important time to them. For example the higher contrast interface can represent "Home" as the idea of home is always clear in the user's mind, while the lower contrast interface can represent "Away" acting as a constant reminder of the distance away from home. The contrast allows the user to quickly and easily get the information they need with a passing glance of the clock.



Home Away will be exhibited at the Art Directors Club Gallery in New York starting from October 21.

Maximize the Use of Hover

Usually, we create hover effects by changing: font color, font styles, border styles, background, and etc. But there are a lot more that we can do with hover. We can use hover to beautify design, minimize clutter, and display additional information. In this article, I’m going to provide various examples of websites that maximize the use of hover. Also, I will provide several quick tutorials on how to create different mouse hover effects. So, read on.

1. Using hover to beautify layout

I use hover to beautify the layout of IconDock. For example, when you mouse over the blog title or the sidebar link, it displays an arrow.

IconDock

2. Using hover to minimize clutter

QBN makes its layout look cleaner by hiding the extra buttons on default. When you mouse over a link block, the buttons will appear. Imagine how clutter it will be to display those buttons on every block.

QBN

Gucci puts focus on their product images by hiding the variations. When you hover the product image, it displays the variations and allows you to navigate through them.

Gucci

3. Using hover to display additional information (tooltip)

Coda combines CSS and Javascript to create a beautiful tooltip. When you mouse over the download link, additional information about their software fades in.

Coda

On Best Web Gallery, I use jQuery to display a larger image of the screencap.

Best Web Gallery

Tutorials

Image Hover (see demo)

The following CSS tutorial imitates the hover effect as seen on the Gucci and QBN site. It hides the .links paragraph on default. When the cursor is over the

block, it will set the paragraph to display:block.

image hover

Animated Hover (see demo)

The following demo use jQuery to animate the text when you hover the link, as seen on the Coda site. Read my jQuery tutorials to learn how to do this.

animated hover

jQuery Tooltip

Head over to CSS Globe to see the jQuery tooltip that I use for Best Web Gallery.

animated hover



source: http://www.webdesignerwall.com

Mastering Illustrator Effects

Have you been missing out the Illustrator Effects? Did you know it is a powerful tool for creating symmetrical shapes or adding texture to vector paths? For example, with just one simple effect, you can turn a polygon path into a flower shape. You can also make paths look sketchy with the Scribble effect. Read this tutorial to learn how to save time by using Illustrator Effects and work more efficient.

Arrowheads

Let’s start with a basic effect, the Add Arrowheads. Use the Pen Tool or Line Segment Tool to draw a straight line. Go to Effects > Stylize > Add Arrowheadsand choose a style.

arrowhead

Appearance

The great thing about using Illustrator Effect is the ease of changing its appearance. In the Appearance palette, click on the Add Arrowheads layer, now you can easily change the result by selecting different arrow style. This effect is very useful for drawing diagrams.

appearance

Without The Effect?

Without the effect, the arrow shape will get distorted when the line is stretched. With the effect, I can easily adjust the length of the arrow without distorting it.

without effect

Round Corners

Draw a rectangle shape, go to Effects > Stylize > Round Corners and enter a radius value.

round corners

Without The Round Corners Effect?

without round corners

Round Corners is one of my favorite effects. It is my essential tool for designingicons. Not only it can prevent the round corners to be distorted when I stretch the object, it also saves me a lot of time. Could you imagine how long it will take to draw these perfect round corners without the effect?

round icons

Zig Zag Effect

Draw a straight line, go to Effects > Distort & Transform > Zig Zag and enter a value for Size and Ridge Per Segment.

zig zag - corner

Wavy Line

Draw a straight line, apply the Zig Zag effect, select Smooth Points, and you will get a symmetric wavy line.

zig zag - smooth

Badges

Draw a circle and apply the Zig Zag effect with the setting as shown and you will get a badge shape.

badge

Play around with the Zig Zag options and you may get these shapes:

badges

Pucker & Bloat Effect

Draw a circle, go to Effects > Distort & Transform > Pucker & Bloat, enter -55% (Pucker), and you will get a diamond shape.

diamond shape

Draw a polygon shape, apply the pucker effect, and you will get this shape:

diamond shape

With the same object, change the Pucker & Bloat option to 70%, and you will get a flower shape.

flower shapes

Transform Effect

The example below shows how I can duplicate 12 copies of the object (in increment of 30 degree angle) with the Transform effect.

transform effect

Play around with the shape and Transform setting, you may get the following:

transform effect

Roughen Effect

With the Roughen Effect, I can make the trees look more realistic.

roughen - trees

Scribble Effect

The example below shows how you can create a sketchy effect combining the Scribble and the Roughen effect. First apply the Scribble effect (Effects > Stylize > Scribble) and then apply the Roughen effect as shown.

scribble effect

Sketchy Icons

If you are constantly using the same effect, it is wiser to use the Graphic Styles to save time and maintain consistency.

sketchy icons

After you’ve done the inital sketchy style, drag the object to the Graphic Styles palette to create a new Graphic Style.

graphic styles

Now, select the object(s) where you want to apply the styles. Then, click on the Graphic Style that you’ve just created. Change the fill and stroke color if you want. Don’t forget you can also apply it to text, which remain editable.

apply graphic style

Conclusion (There Are More…)

I’ve only showed the basic Illustrator effects. There are actually more cool and useful effects. Don’t be afraid to explore the effect menu and experiment with the other effects such as the Warp and 3D.

more effects

Tips For Using Illustrator Effect

  • Graphic Styles - save time by using Graphic Styles.
  • Scale Strokes and Effects - you can toggle Scale Strokes and Effects option via the Transform palette.
  • Appearance Palette - you can turn effect layer on/off or remove it. Double-click on the effect layer to open the option dialog.
  • Press D to quickly remove all effects.
  • Expand Appearance - if you want to expand the appearance into paths, go toObject > Expand Appearance. Note: once the effect is expanded, it will become ineditable.

tips

Download The Source File

You may download the Illustrator file (CS2) that is used in this tutorial for your learning purposes.

source file


source: http://www.webdesignerwall.com

CSS Gradient Text Effect

Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty tag in the heading and apply the background image overlay using the CSS position:absolute property. This trick has been tested on most browsers: Firefox, Safari, Opera, and even Internet Explorer 6. Continue to read this article to find out how.

Demos

Demo ZIP

Benefits

  • This is pure CSS trick, no Javascript or Flash. It works on most browsers including IE6 (PNG hack required).
  • It is perfect for designing headings. You don’t have to render each heading with Photoshop. This will save you time and bandwidth.
  • You can use on any web fonts and the font size remains scalable.

How does this work?

The trick is very simple. Basically we are just adding a 1px gradient PNG (with alpha transparency) over the text.

screenshot

The HTML markups

<h1><span>span>CSS Gradient Texth1>

The CSS

The key point here is: h1 { position: relative } andh1 span { position: absolute }

h1 {   font: bold 330%/100% "Lucida Grande";   position: relative;   color: #464646; } h1 span {   background: url(gradient.png) repeat-x;   position: absolute;   display: block;   width: 100%;   height: 31px; }

That’s it! You are done. Click here to view my demo page.

Make it work on IE6

Since IE6 doesn’t render PNG-24 properly, the following hack is required in order to display the transparent PNG (add anywhere in between the tag):

This is why we hate IE 6!

jQuery prepend version (for semantic lovers)

If you don’t want to have the empty tag in the heading, you can use Javascript to prepend the tag. Here is a sample using jQuery prepend method:

<script type="text/javascript" src="jquery.js">script>  <script type="text/javascript"> $(document).ready(function(){    //prepend span tag to H1   $("h1").prepend("<span>span>");  }); script>

More samples

Want to make Web 2.0 glossy text?

screenshot

Literally, you can apply this trick on any solid background color (as long your gradient color is the same as your background color).

screenshot

screenshot

screenshot

screenshot

screenshot

screenshot

Pattern / Texture

You can also apply this trick with a tile background image. Look, here is an example of zebra pattern. So, be creative!

screenshot

Limitations and more…

  • This trick is only suitable for solid background color elements. Your gradient color (PNG image) must be the same color as your background color.
  • IE PNG hack is required if you want it to work on IE 6.
  • If your gradient image is taller than the heading, the text will not be selectable.
source: http://www.webdesignerwall.com
   

Gavalian Studio Worldwide
United States Office
2727 W Alameda Ave.
Burbank CA, 91505
Phone Numbers
+1 818 605 0595

Web Design