View Source: dressup

HTML Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>How to make your own dress-up games</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
form {margin: 0;}
form input, textarea {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;}
textarea {padding: 3px;}
p {margin-top: 0;}

a {color: #22D;}
a:hover {color: #006;}
a:visited {color: #22D;}
a:visited:hover {color: #006;}

body {
	background-color: #FAFAF6;
	margin: 4px 4px 0 4px;
	padding: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 82%;
	color: black;
}

#content {
	background-color: #FAFAF6;
	margin: 0 auto;
	padding: 10px;
	height: 100%;
	text-align: left;
}
-->
</style>
</head>

<body>
<div id="content">
<h2 style="margin:0; padding:0;">Your Very Own Dressup Games</h2> 
This tutorial will teach you how to create your own dress-up games (<a href="http://ariscool.com/funny" target="_blank">example</a>). 
A dressup game is a kind of web-games where you &quot;dress-up&quot; your character. But the term can also mean decorating a room, creating a scenery, building a house, etc. 
Before we continue, please make sure that you have the required skills:

<div style="margin-top:4px;margin-left:16px;margin-bottom:18px;background-color:#FFD;">
	<div style="margin-bottom:8px;"><input id="check1" type="checkbox" name="check1"> <label for="check1">I understand the process of <a href="http://www.gifworks.com/image_editor.html" target="_blank">creating transparent GIFs</a></label></div>
	<div style="margin-bottom:8px;"><input id="check2" type="checkbox" name="check2"> <label for="check2">I can upload images to <a href="http://photobucket.com" target="_blank">Photobucket</a> and I understand a bit of HTML</label></div>
	<div><input id="check3" type="checkbox" name="check3"> <label for="check3">I am willing to learn. I will do my best!</label></div>
</div>

Ready? Now, create your components (those small images that you drag-n-drop) and save them as transparent GIFs. Create the background (the background can be PNG, JPG, or GIF).
If you are artistically challenged, I recommend that you don't continue. The result will be horrible and it will scare the children.

Upload the images to Photobucket.

<div style="margin-top:4px;margin-left:16px;margin-bottom:18px;background-color:#F0F0F0;color:#444;">
<div>At this step, you should already have the URLs of the background and the components, e.g.:</div>
<div style="margin-left:20px;">
 Background: http://i185.photobucket.com/albums/x277/maschail/sea/sea.jpg Component1: http://i185.photobucket.com/albums/x277/maschail/sea/bubbles.gif Component2: http://i185.photobucket.com/albums/x277/maschail/sea/seaweeds.gif (and so on..)
</div>
</div>

Copy this <a href="http://ariscool.com/viewsource.php?id=funny" target="_blank">HTML code</a> and paste it to Notepad/Wordpad/your HTML editor. (you have to copy the whole thing!)

In the HTML code, you should see some weird codes like: background_url, area_width, area_height, default_link_text, img_list

You customize your dressup game by replacing their values with your own: 
 background_url : the URL of the background image. 
 area_width : the width of the scene, in pixel. usually this is the same as background width. 
 area_width : the height of the scene, in pixel. usually this is the same as background height. 
 default_link_text : the default text for the link to share the scene. 
 img_list : the URLs of the components.

<div style="margin-top:4px;padding:6px;margin-left:16px;margin-bottom:18px;background-color:#FFF;border:1px solid #333;">
 <div>
 img_list is the most important part of the customization. This is a snippet of the code:
 </div>
 
 <pre style="margin:0;padding:0;margin-top:8px;margin-bottom:8px;">
 var img_list = new Array(
 '9! http://i185.photobucket.com/albums/x277/maschail/sea/bubbles.gif',
 '9! http://i185.photobucket.com/albums/x277/maschail/sea/bubbles.gif',
 '0! http://i185.photobucket.com/albums/x277/maschail/sea/seaweeds.gif',
 '1! http://i185.photobucket.com/albums/x277/maschail/sea/crab.gif',
 '2! http://i185.photobucket.com/albums/x277/maschail/sea/fish1.gif',
 </pre>
 
 
 As you see, you can repeat the same component (bubbles.gif). They will be displayed twice.
 
 
 
 Once you publish your game, you must not change the order of the components. 
 For the above code, the current order is bubbles, bubbles, seaweeds, crab, fish1. 
 If you want to upgrade the components, you may insert the new components AFTER the last component. 
 But you may not delete any of the existing components or insert a new component between the old ones.
 
 
 
 For example, the following order is allowed if you want to upgrade: 
 bubbles, bubbles, seaweeds, crab, fish1, fish2 
 bubbles, bubbles, seaweeds, crab, fish1, fish2, fish3, fish4
 
 
 
 But these are NOT allowed: 
 bubbles, bubbles, bubbles, seaweeds, crab, fish1 (insertion at the wrong place) 
 fish2, bubbles, bubbles, seaweeds, crab, fish1 (insertion at the wrong place) 
 bubbles, seaweeds, crab, fish1 (removal of an existing component)
 
 
 <hr style="color: transparent; height: 1px; text-align: center; border: 1px dashed #AAA;">
 
 <div>
 Advanced users: Did you notice the number at the front of the URL?
 </div>
 
 <pre style="margin:0;padding:0;margin-top:8px;margin-bottom:8px;">
 var img_list = new Array(
 '9! http://i185.photobucket.com/albums/x277/maschail/sea/bubbles.gif',
 '9! http://i185.photobucket.com/albums/x277/maschail/sea/bubbles.gif',
 '0! http://i185.photobucket.com/albums/x277/maschail/sea/seaweeds.gif',
 '1! http://i185.photobucket.com/albums/x277/maschail/sea/crab.gif',
 '2! http://i185.photobucket.com/albums/x277/maschail/sea/fish1.gif',
 </pre>
 
 
 9, 9, 0, 1, 2 is the z-index of the component.
 
 
 
 Component with z-index 1 will appear at the front of component with z-index 0. 
 Component with z-index 2 will appear at the front of component with z-index 1. 
 Get the idea?
 
 
 <div>
 By manipulating the z-index, you can arrange which components appear at the front.
 </div>
</div>

Congratulations, you have just finished with the HTML code!

Copy the whole thing and create a page at <a href="http://ariscool.com">ArisCool</a>. 
 Your dressup game is ready. Tell your friends!

A note of caution: Do not modify other parts of the HTML. You might break the code if you do so.

&nbsp;

&nbsp;

This tutorial was created by <a href="mailto:ariscool.com@gmail.com">Yohanes Aristianto</a>

</div>
</body>
</html>

Any comments or suggestions? ariscool.com@gmail.com