Linn's Note

Emerging Web Technologies Written Project

2009-06-17T21:52:00.000-07:00

Emerging Web Technologies Written Project

Hebat隊

Title: 印尼旅遊網站

Teacher: Dr. 梅興

Made By:

Robin 林坤建 / Eric 沈育生

495511648 / 496512625

資工三甲 / 資工二乙

Outline

The goal of the project
Used technology and skill
Some of the primary script explanations
Problem’s met
Future development

1. The goal of the project

To introduce Indonesia to fellow Taiwanese (at the time of this presentation), and also to the world, by using the means of internet webpage newest emerging technology.

2. Used technology and skill

· Html

· Xml

· Php

· MySql

· Ajax

· Javascript

· Css

· Scriptaculous

· Apache

· Flash

· Flex

· Youtube API

· Google map API with flash

· Dreamweaver

· Notepad

3. Some of the primary script explanations

For the Intro page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Intro</title>
<style type="text/css">

</style>


<script src="http://www.google.com/jsapi"></script>
<script>
google.load("swfobject", "2.1");
</script>

<script type="text/javascript">

function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
updateytplayerInfo();
ytplayer.addEventListener("onError");
}

// functions for the api calls
function loadNewVideo() {
if (ytplayer) {
ytplayer.loadVideoById('iLaTDP3j3sw','0');
}
}

function play() {
if (ytplayer) {
ytplayer.playVideo();
}
}

function pause() {
if (ytplayer) {
ytplayer.pauseVideo();
}
}

function stop() {
if (ytplayer) {
ytplayer.stopVideo();
}
}

</script>

</head>

<body onClick = "loadNewVideo()" >
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#ECE9D8" >
<tr>
<td align="center"><div>


<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<script type="text/javascript" >
// <![CDATA[
// allowScriptAccess must be set to allow the Javascript from one
// domain to access the swf on the youtube domain
var params = { allowScriptAccess: "always", bgcolor: "#cccccc" };
// this sets the id of the object or embed tag to 'myytplayer'.
// You then use this id to access the swf and make calls to the player's API
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer",
"ytapiplayer", "760", "480", "8", null, null, params, atts);
//]]>
</script>
<br />

</div>
</div>
</td>
</tr>
<tr>
<td align="center">Press Anywhere to PLAY / REPLAY or <a href="home.html">Skip</a></td>
</tr>
<tr>
<td align="center">Made By : LinnRobin</td>
</tr>
</table>
</body>
</html>

For the flash map at “home” page

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:maps="com.google.maps.*"
width="100%" height="100%" layout="absolute" viewSourceURL="srcview/index.html">
<mx:Panel title="" width="100%" height="100%">
<mx:HDividedBox width="100%" height="100%">
<mx:VBox width="20%" height="100%" paddingLeft="5" paddingTop="5">
<mx:HBox>
<mx:CheckBox
selected="true"
change="toggleCategory('restaurant')"/>
<mx:Label
text="Restaurants"/>
</mx:HBox>
<mx:HBox>
<mx:CheckBox
selected="true"
change="toggleCategory('bar')"/>
<mx:Label
text="Bars"/>
</mx:HBox>
</mx:VBox>
<mx:UIComponent id="mapHolder"
initialize="onHolderCreated(event);"
resize="onHolderResized(event)"
width="80%" height="100%"/>
</mx:HDividedBox>

</mx:Panel>
<mx:HBox width="100%">
<mx:Text
text="Press the button for full-screen mode"
width="100%"/>
<mx:Image
id="fullscreenButton"
useHandCursor="true"
buttonMode="true"
source="@Embed('fullscreen_1.png')"
click="toggleFullScreen()"/>
</mx:HBox>

<mx:Script>
<![CDATA[
import com.google.maps.LatLng;
import com.google.maps.LatLngBounds;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapMouseEvent;
import com.google.maps.MapType;
import com.google.maps.overlays.Marker;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.InfoWindowOptions;
import com.google.maps.styles.FillStyle;
import com.google.maps.controls.ZoomControl;
import mx.controls.Alert;

private var map:Map;

[Embed(source="blue-dot.png")] private var blueIcon:Class;
[Embed(source="green-dot.png")] private var greenIcon:Class;
[Embed(source="fullscreen_1.png")] private var fullscreenIcon:Class;
[Embed(source="fullscreen_2.png")] private var fullscreen2Icon:Class;

private var categories:Object =
{ "restaurant": {
"color": 0xFF0000,
"markers": []},
"bar": {
"color": 0x0000FF,
"markers": []}
};

public function onHolderCreated(event:Event):void {
map = new Map();
map.key = "ABQIAAAABloZD40AKeJkN2oNklEhmRQ7Ng0o_eozPVXdngwJLuRyoV-TtxTcF4moIsrd5vj4B9Wzr4r7UOolMg";
map.addEventListener(MapEvent.MAP_READY, onMapReady);
mapHolder.addChild(map);
}

public function onHolderResized(event:Event):void {
map.setSize(new Point(mapHolder.width, mapHolder.height));
}

private function onMapReady(event:Event):void {
map.enableScrollWheelZoom();
map.enableContinuousZoom();
map.setCenter(new LatLng(-2.8114, 120.4766), 3);
map.addControl(new ZoomControl());

var xmlString:URLRequest = new URLRequest("phpsqlajax_genxml2.php");
var xmlLoader:URLLoader = new URLLoader(xmlString);
xmlLoader.addEventListener("complete", readXml);

this.map.addEventListener(MapMouseEvent.CLICK, onMapClick);
systemManager.stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);
}

private function onMapClick(event:MapMouseEvent):void
{
var marker:Marker = new Marker(event.latLng);
var options:InfoWindowOptions = new InfoWindowOptions({
customContent: new InfoWindowTabbedComponent(marker),
customOffset: new Point(0, 10),
width: 300,
height: 150,
drawDefaultFrame: true
});
marker.addEventListener(MapMouseEvent.CLICK, function(e:Event):void {
marker.openInfoWindow(options);
});
this.map.addOverlay(marker);
marker.openInfoWindow(options);
}

private function fullScreenHandler(evt:FullScreenEvent):void {
if (evt.fullScreen) {
fullscreenButton.source = new fullscreen2Icon();
} else {
fullscreenButton.source = new fullscreenIcon();
}
}

private function toggleFullScreen():void {
try {
switch (systemManager.stage.displayState) {
case StageDisplayState.FULL_SCREEN:
systemManager.stage.displayState = StageDisplayState.NORMAL;
break;
default:
systemManager.stage.displayState = StageDisplayState.FULL_SCREEN;
break;
}
} catch (err:SecurityError) {
// ignore
}
}

public function readXml(event:Event):void{
var markersXML:XML = new XML(event.target.data);
var markers:XMLList = markersXML..marker;
var markersCount:int = markers.length();

for (var i:Number = 0; i < markersCount; i++) {
var marker:XML = markers[i];
var name:String = marker.@name;
var address:String = marker.@address;
var type:String = marker.@type;
var latlng:LatLng = new LatLng(marker.@lat, marker.@lng);
createMarker(latlng, name, address, type);
}
}

public function createMarker(latlng:LatLng, name:String, address:String, type:String):void {
var markerOptions:MarkerOptions = new MarkerOptions({});
var fillStyle:FillStyle = new FillStyle({color: categories[type].color});
markerOptions.fillStyle = fillStyle;

var marker:Marker = new Marker(latlng, markerOptions);
var html:String = "<b>" + name + "</b> <br/>" + address;
marker.addEventListener(MapMouseEvent.CLICK, function(e:MapMouseEvent):void {
marker.openInfoWindow(new InfoWindowOptions({contentHTML:html}));
});
categories[type].markers.push(marker);
map.addOverlay(marker);

}

private function toggleCategory(type:String):void {
for (var i:Number = 0; i < categories[type].markers.length; i++) {
var marker:Marker = categories[type].markers[i];
if (!marker.visible) {
marker.visible = true;
} else {
marker.visible = false;
}
}
}

]]>
</mx:Script>
</mx:Application>

And…

package {

import com.google.maps.overlays.Marker;

import flash.events.MouseEvent;
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.net.URLRequestMethod;

import mx.collections.ArrayCollection;
import mx.containers.Box;
import mx.containers.HBox;
import mx.controls.Alert;
import mx.controls.Button;
import mx.controls.ComboBox;
import mx.controls.Label;
import mx.controls.TextInput;
import mx.core.UIComponent;

/**
* InfoWindowSprite consists of several ellipses arranged in a 'thought bubble'
* manner, the largest of which contains an embedded image and a circular
* close button.
* It can dispatch an Event instance (type: "close"), which the user can listen
* for and use to call map.closeInfoWindow();
*/
public class InfoWindowTabbedComponent extends UIComponent {

public var textInputName:TextInput;
public var textInputAddress:TextInput;
public var comboBoxType:ComboBox;
public var marker:Marker;

public function InfoWindowTabbedComponent(m:Marker) {
marker = m;

var panel:Box = new Box();
panel.width = 290;
panel.height = 120;

var hbox:HBox = new HBox();
var labelName:Label = new Label();
labelName.text = "Name: ";
labelName.width = 70;
textInputName = new TextInput();
textInputName.id = "name";
textInputName.percentWidth = 100;
textInputName.text = "Insert Name";

hbox.addChild(labelName);
hbox.addChild(textInputName);

var hbox3:HBox = new HBox();
var labelAddress:Label = new Label();
labelAddress.text = "Comment: ";
labelAddress.width = 70;
textInputAddress = new TextInput();
textInputAddress.id = "address";
textInputAddress.percentWidth = 100;
textInputAddress.text = "Insert Comment";

hbox3.addChild(labelAddress);
hbox3.addChild(textInputAddress);

var hbox2:HBox = new HBox();
var labelType:Label = new Label();
labelType.text = "Type: ";
labelType.width = 70;
comboBoxType = new ComboBox();
comboBoxType.id = "type";
comboBoxType.dataProvider = new ArrayCollection(
[ {label:"bar", data:"bar"},
{label:"restaurant", data:"restaurant"}]);
hbox2.addChild(labelType);
hbox2.addChild(comboBoxType);

var button:Button = new Button();
button.label = "Submit";
button.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void {
saveData();
});

panel.addChild(hbox);
panel.addChild(hbox3);
panel.addChild(hbox2);
panel.addChild(button);
addChild(panel);

}

public function saveData():void {
var name:String = textInputName.text;
var address:String = textInputAddress.text;
var type:String = comboBoxType.text;
var lat:Number = marker.getLatLng().lat();
var lng:Number = marker.getLatLng().lng();
var urlRequest:URLRequest = new URLRequest("phpsqlinfo_addrow.php");
urlRequest.data = "name=" + name + "&address=" + address + "&type=" + type + "&lat=" + lat + "&lng=" + lng;
urlRequest.method = URLRequestMethod.GET;
var urlLoader:URLLoader = new URLLoader(urlRequest);
urlLoader.addEventListener("complete", function(e:Event):void {
if (urlLoader.data.length <= 1) {
Alert.show("Successfully added!");
marker.closeInfoWindow();
} else {
Alert.show("There was an error adding the data :(");
}
});
}

}

}

For showing the flash map at “home” page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link href="../css/main.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>
<div id="wrapper">
<div id="header">

<div id = "titles1">
<h1>Traveling Indonesia - Home</h1>
</div>
</div>
<div id="navigation"><ul>
<li><a href="intro.html">Intro</a></li>
<li><a href="home.html">Home</a></li>
<li><a href="cities.html">Cities</a></li>
<li><a href="forum.html">Forum</a></li>
<li><a href="links.html">Links</a></li>
</ul></div>
<div id="content">
<div id="map_canvas" name="map_canvas">
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
width="800px"
height="600px">
<param name="movie" value="./maps1.swf">
<param name="quality" value="high">
<param name="flashVars" value="key=ABQIAAAABloZD40AKeJkN2oNklEhmRQ7Ng0o_eozPVXdngwJLuRyoV-TtxTcF4moIsrd5vj4B9Wzr4r7UOolMg">
<embed
width="800px"
height="600px"
src="./maps1.swf"
quality="high"
flashVars="ABQIAAAABloZD40AKeJkN2oNklEhmRQ7Ng0o_eozPVXdngwJLuRyoV-TtxTcF4moIsrd5vj4B9Wzr4r7UOolMg"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash">
</embed>
</object>
</div></div>
<div id="footer">Made By : LinnRobin</div>
</div>
</body>
</html>

CSS used

@charset "utf-8";
#wrapper #header {
width: 100%;
}

#wrapper #header h1 {
text-indent: -999999px;
font-size: 1px;
}
#wrapper #header #titles1 {
background-image: url(../image/titles.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
height: 38px;
width: 400px;
text-indent: 0px;
}
#wrapper #header #titles2 {
background-image: url(../image/titles.jpg);
background-repeat: no-repeat;
background-position: -400px 0px;
height: 38px;
width: 400px;
text-indent: 0px;
}
#wrapper #header #titles3 {
background-image: url(../image/titles.jpg);
background-repeat: no-repeat;
background-position: -800px 0px;
height: 38px;
width: 400px;
text-indent: 0px;
}

#wrapper #navigation {
width: 100%;
margin: 0px;
padding: 0px;
height: 40px;
}
#wrapper #navigation ul {
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
list-style-type: none;
float: none;
clear: none;
width: 100%;
height: 100%;
background-repeat: no-repeat;
text-align: center;
}
#wrapper #navigation li {
margin-bottom: 10px;
height: 40px;
width: 100px;
float: left;
clear: none;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
background-repeat: no-repeat;
}
#wrapper #navigation a {
display: block;
height: 30px;
width: 100px;
background-image: url(../image/button.jpg);
background-position: 0px 0px;
background-repeat: no-repeat;
padding-top: 10px;
}
#wrapper #navigation a {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}

#wrapper #navigation a:link {
color: #000000;
text-decoration: none;
}
#wrapper #navigation a:hover {

color: #FF0000;
text-decoration: none;
background-image: url(../image/button.jpg);
background-repeat: no-repeat;
background-position: 0px -40px;
}
#wrapper #navigation a:visited {
text-decoration: none;
}
#wrapper #navigation a:active {
text-decoration: none;
}
#wrapper #content {
width: 100%;
text-align: center;
vertical-align: middle;
float: left;
}
#wrapper #footer {
text-align: center;
float: left;
width: 100%;
}
#wrapper {
width: 100%;
margin-right: auto;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

For the cities page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cities</title>
<link href="../css/main.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="../SpryAssets/xpath.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">

</script>

<link href="../css/lightbox.css" rel="stylesheet" type="text/css" />
<script src="../js/prototype.js" type="text/javascript"></script>
<script src="../js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="../js/lightbox.js" type="text/javascript"></script>
<style type="text/css">

</style>
</head>

<body>
<div id="wrapper">
<div id="header">
<div id = "titles2">
<h1>Traveling Indonesia - Cities</h1>
</div>
</div>
<div id="navigation"><ul>
<li><a href="intro.html">Intro</a></li>
<li><a href="home.html">Home</a></li>
<li><a href="cities.html">Cities</a></li>
<li><a href="forum.html">Forum</a></li>
<li><a href="links.html">Links</a></li>
</ul></div>
<div id="content">
<table width="100%" border="0" cellspacing="10" cellpadding="0">
<tr>
<td width="16%" align="left" valign="top"><div spry:region="ds1">
<table>
<tr>
<th>City Name:</th>
</tr>
<tr spry:repeat="ds1" spry:setrow="ds1">
<td>{name}</td>
</tr>
</table>
</div></td>
<td width="84%"><table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top"><strong>Description</strong>:</td>
</tr>
<tr>
<td align="left" valign="top"><div spry:detailregion="ds1">{Desc}</div></td>
</tr>
</table></td>
</tr>
<tr>
<td width="16%" align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><strong>Rating:</strong></td>
</tr>
<tr>
<td> 
<div spry:detailregion="ds1"><iframe src="{ds1::rater}" width="300" height="200" scrolling="auto" frameborder="0"></iframe></div></td>
</tr>
</table></td>
<td><table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top" ><strong>Photos:</strong></td>
</tr>
<tr>
<td align="left" valign="top"><table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td width="20%"><div spry:detailregion="ds1"><a href="{ds1::img}"rel="lightbox[roadtrip]"><img name="" src="{img}" width="160" height="240" alt="" /></a></div></td>
<td width="20%"><div spry:detailregion="ds1"><a href="{img2}"rel="lightbox[roadtrip]"><img name="" src="{img2}" width="160" height="240" alt="" /></a></div></td>
<td width="20%"><div spry:detailregion="ds1"><a href="{img3}"rel="lightbox[roadtrip]"><img name="" src="{img3}" width="160" height="240" alt="" /></a></div></td>
<td width="20%"><div spry:detailregion="ds1"><a href="{img4}"rel="lightbox[roadtrip]"><img name="" src="{img4}" width="160" height="240" alt="" /></a></div></td>
<td width="20%"><div spry:detailregion="ds1"><a href="{img5}"rel="lightbox[roadtrip]"><img name="" src="{img5}" width="160" height="240" alt="" /></a></div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>
<div id="footer">Made By : LinnRobin</div>
</div>
</body>
</html>

4. Problem’s met

Google maps API with flash is a new technology
Wrong decision of programming tools
Php and Mysql + google maps API with flash
Publishing from local to the internet
Free web hosting without advertisement are hard to find

5. Future development

Member functions
Calendar events
Hot Spot
Flickr, Twitter, Facebook Integration
Forum development
Forum and map integration

Second Life Written Project

2009-05-31T04:16:00.000-07:00

Second Life Written Project

GAME & ANIMATION

Title: Jedi Master – Darth Vader

Teacher: Dr. 梅興

Made By:
Robin 林坤建
495511648
資工三甲

Outline
1. Introduction to Second Life
2. Introduction to Star Wars
3. Connections between SL – SW (Background)
4. How to make it done (Scripting lightsabers)
5. Introductions to Economy in Second Life
6. How to make it done (Scripting the force)
7. Problems met within
8. What to expect in the future

1. Introduction to Second Life

Second Life (SL) is a virtual world developed by Linden Lab. It's almost like Maxis' The Sims, but with online architecture. Although SL can be categorized as an MMORPG, but it's obviously quite different from the likes of WoW, Lineage, etc. There's no leveling inside the SL world. What's most important in the second life concept is to give the users (residents) a second chance to build their lives.

Residents in SL have their own avatar. They can create their own things (or just buy them with the SL world's currency). SL used 3D dimensional modeling tools that were built around simple geometric shapes. If you aware of software like 3dsMax or MAYA, you could also import them to the SL world.

Nowadays, there are branded companies such as IBM, CISCO, Adidas, Sony, Vodafone, etc that mostly share their new concepts in SL world.
To sum everything up, SL is not just a game, but it's a virtual world that could connect to the real world, and maybe in the future, it could change the way of living. Imagine, a CEO that needs to be in two meetings, by using SL, he could just send his avatar to substitute his body.

2. Introduction to Star Wars

Star Wars is an epic space opera franchise initially conceived by George Lucas. The first film in the franchise was simply titled Star Wars, but later had the subtitle Episode IV: A New Hope added to distinguish it from its sequels and prequels. It was originally released on May 25, 1977 by 20th Century Fox, and became a worldwide pop culture phenomenon, spawning two immediate sequels released in three-year intervals. Sixteen years after the release of the trilogy's final film, the first in a new prequel trilogy of films was released, again released in three-year intervals, with the final film released on May 19, 2005.
As of 2008, the overall box office revenue generated by the six Star Wars films has totalled approximately $4.3 billion, making it the third-highest grossing film series, behind only the James Bond and Harry Potter films.
Darth Vader(達斯•維德) who is the third biggest villain movie of all time was a hero before. Lightsaber(光劍) and The Force(原力) was introduced in star wars.

3. Connections between SL – SW (Background)

The Idea is to make something cool between our real life fantasies to be implemented inside our second life (popular culture inside a game). I made homework about lightsabers, so I’m thinking to include it inside the project. Children dream come true… :D

4. How to make it done (Scripting lightsabers)

This script is for the Hilt of Lightsaber. so it could be turned on or off if it's clicked. If the lightsaber is worn, than it will automatically be worn on the right hand. The idea is to throw the part of lightsaber if it's on or off.

integer myswitch;

default
{
state_entry()
{

myswitch=FALSE;
llRequestPermissions( llGetOwner(), PERMISSION_ATTACH );
}

run_time_permissions( integer vBitPermissions )
{
if (PERMISSION_ATTACH & vBitPermissions)
{
llAttachToAvatar( ATTACH_RHAND );
}
else
{
llOwnerSay( "Permission to attach denied" );
}
}

on_rez(integer rez)
{
if(!llGetAttached())
{ //reset the script if it's not attached.
llResetScript();
}
}

attach(key AvatarKey)
{
if(AvatarKey)
{//event is called on both attach and detach, but Key is only valid on attach
integer test = llGetAttached();
if (test) {
llOwnerSay( "May the force be with you" );
} else {
llOwnerSay( "The force is not with you yet");
}
}
}

touch_start(integer total_number)
{
llSetStatus(STATUS_PHYSICS, TRUE);

if(myswitch==FALSE)
{
//Turn saber ON
llMessageLinked(LINK_ALL_CHILDREN, 0, "start", NULL_KEY);
myswitch=TRUE;
}
else
{
//Turn saber OFF
llMessageLinked(LINK_ALL_CHILDREN, 0, "stop", NULL_KEY);
myswitch=FALSE;
}
}
}

This here is for the lightsaber to play animations on key press. Inside the object, there is choke, stand, slash, backslash and simple slash animation. There're also the sound of opening and closing sound of lightsaber. The llSetPrimitiveParams is used for the lights of the lightsaber. Start when it's on, stop when it's off. We also need permission for keypress and playanimation.

default
{
state_entry()
{
llSetPrimitiveParams([PRIM_FULLBRIGHT,ALL_SIDES,FALSE]);
}

link_message(integer sender_num, integer num, string str, key id)
{
if(str=="stop")
{
llPlaySound("88a4ff4e-12c7-5679-e349-1a443b333495", 1.0);
llSetTexture("8dcd4a48-2d37-4909-9f78-f7a9eb4ef903", ALL_SIDES);
llSetPrimitiveParams([PRIM_FULLBRIGHT,ALL_SIDES,FALSE]);
llSay(0, "Force-OFF.");
llReleaseControls();
llStopAnimation("stand");
}
if(str=="start")
{
llPlaySound("4366aeb3-4cbc-2362-0088-68aace7ede28", 1.0);
llSetTexture("59facb66-4a72-40a2-815c-7d9b42c56f60", ALL_SIDES);
llSetPrimitiveParams([PRIM_FULLBRIGHT,ALL_SIDES,TRUE]);
llSay(0, "Force-ON");
llRequestPermissions(llGetOwner(), PERMISSION_TAKE_CONTROLS | PERMISSION_TRIGGER_ANIMATION);
llStartAnimation("stand");
}
}

run_time_permissions(integer perm)
{
if (perm & PERMISSION_TAKE_CONTROLS)
{
llTakeControls(CONTROL_ROT_RIGHT | CONTROL_ROT_LEFT | CONTROL_FWD | CONTROL_BACK, TRUE, FALSE);
}
}

control(key id, integer level, integer edge)
{
integer just_pressed = level & edge;

if (just_pressed & CONTROL_ROT_RIGHT)
{
llSay(0,"slash");
llStopAnimation("slash");
llStartAnimation("simple_slash");
}
else if (just_pressed & CONTROL_ROT_LEFT)
{
llSay(0,"stab");
llStartAnimation("slash");
}
else if (just_pressed & CONTROL_FWD)
{
llSay(0,"back slash");
llStartAnimation("backslash");
}
else if (just_pressed & CONTROL_BACK)
{
llSay(0,"Choke Releaser");
llStopAnimation("choke");
}
}
}

5. Introductions to Economy in Second Life

Second Life has its own currency, which is called Linden Dollar (L$). L$ can be used as a mean of tradings inside the SL world. There‘s also a currency exchange available for L$ as in the First Life (Real World), which is 250L$ for 1USD. 壹元台幣大概吧捌~玖元L$ .

6. How to make it done (Scripting the force)

This here is to make the force on other avatar clicked on the mask. Inside the object, there is choke and forceSTART animation. The idea here is to make a controller of other avatar, like the teleporter. But it's in the mask. we use runtime permission to make it happen.

reset()
{
llRequestPermissions(llDetectedKey(0), PERMISSION_TRIGGER_ANIMATION);
}

default
{
state_entry()
{
llSetText("DON'T TOUCH DARTH VADER's MASK", <1,1,1>, 1);
}

touch_start(integer startup_param)
{
reset();
}
run_time_permissions(integer perm)
{
if (perm & PERMISSION_TRIGGER_ANIMATION)
{
llStartAnimation("choke");
llSay(0,"choked");
llStartAnimation("forceSTART");
}
else
{
llSay(0,"The force is strong with you, But you can't fight Darth Vader!!!");
llStartAnimation("choke");
llStartAnimation("forceSTART");
}
}
}

7. Problems met within
a) The script for the force need to be activated by the user itself
b) We can’t throw parameters to the other script
c) Free animation editor is limited
d) Second life scripting code examples are mostly not open source
e) Limited Money

8. What to expect in the future
a) The real Force
b) Better lightsabers
c) Double Lightsaber (connected)
d) Better animations
e) Force Lightning
f) HUD usage
g) Weapons can be used in the jedi-arena

for the DEMO on youtube, go to part1, part2, and part3

AJAX

2009-05-31T03:00:00.000-07:00

AJAX (asynchronous JavaScript and XML), is a group of interrelated web development techniques used on the client-side to create interactive web applications or rich Internet applications. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. The use of Ajax has led to an increase in interactive animation on web pages and better quality of Web services thanks to the asynchronous mode. Data is retrieved using the XMLHttpRequest object. Despite the name, the use of JavaScript and XML is not actually required, nor do the requests need to be asynchronous.

Tutorial:
1. Put this inside <head>

<script type="text/javascript">
var xmlhttp;

function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for IE7, Firefox, Mozilla, etc.
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE5, IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=onResponse;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
{
alert("Your browser does not support XMLHTTP.");
}
}

function onResponse()
{
if(xmlhttp.readyState!=4) return;
if(xmlhttp.status!=200)
{
alert("Problem retrieving XML data");
return;
}

txt="<table border='1'>";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("event");
for (i=0;i<x.length;i++)
{
txt=txt + "<tr>";
xx=x[i].getElementsByTagName("img");
{
try
{
txt=txt + "<td><img src=" + xx[0].firstChild.nodeValue + ">";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("title");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("address");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
txt=txt + "</tr>";
}
txt=txt + "</table>";
document.getElementById('copy').innerHTML=txt;
}

</script>

2. Put this inside <body>

<div id="copy">
<button onclick="loadXMLDoc('data.xml')">Get data</button>
</div>

3. Here's xml sample data

<?xml version="1.0" encoding="utf-8"?>
<events>
<event>
<title>aaa</title>
<address>aaaaa</address>
<img>http://www.vendian.org/howbig/UnstableURLs/letter_a.gif</img>
<content>aaaaaaa</content>
</event>

<event>
<title>bbbbb</title>
<address>bbbbbbbb</address>
<img>http://www.daniellesplace.com/Images4/letterB.gif</img>
<content>bbbbbbbb</content>
</event>
</events>

Explanation:
1. This function is for loading the XMLHttp

function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for IE7, Firefox, Mozilla, etc.
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE5, IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=onResponse;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
{
alert("Your browser does not support XMLHTTP.");
}
}

2. If the above statement didn't return null, then the onResponse function will run in the background

function onResponse()
{
if(xmlhttp.readyState!=4) return;
if(xmlhttp.status!=200)
{
alert("Problem retrieving XML data");
return;
}

this here makes the column of each tag found on XML data

txt="<table border='1'>";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("event");
for (i=0;i<x.length;i++)
{
txt=txt + "<tr>";
xx=x[i].getElementsByTagName("img");
{
try
{
txt=txt + "<td><img src=" + xx[0].firstChild.nodeValue + ">";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("title");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("address");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
txt=txt + "</tr>";
}
txt=txt + "</table>";

Here, the document get the "copy" id of div in <body>

document.getElementById('copy').innerHTML=txt;
}

3. The id is used to get the innerHTML in onResponse function. On button click, the page will show the data from the XML

<div id="copy">
<button onclick="loadXMLDoc('data.xml')">Get data</button>
</div>

4. The code on onResponse function will only get "event" tag's <title>, <address>, and <img>. The <content> will be passed

<?xml version="1.0" encoding="utf-8"?>
<events>
<event>
<title>aaa</title>
<address>aaaaa</address>
<img>http://www.vendian.org/howbig/UnstableURLs/letter_a.gif</img>
<content>aaaaaaa</content>
</event>

<event>
<title>bbbbb</title>
<address>bbbbbbbb</address>
<img>http://www.daniellesplace.com/Images4/letterB.gif</img>
<content>bbbbbbbb</content>
</event>
</events>

For more sources, go to:
1. http://www.xul.fr/en-xml-ajax.html
2. http://www.w3schools.com/Ajax/Default.Asp
3. http://www.dmoz.org/Computers/Programming/Languages/JavaScript/AJAX/

Youtube API

2009-05-31T02:18:00.000-07:00

The YouTube Application Programming Interface, or the YouTube API, allows developers to access video statistics and YouTube channels' data via two types of calls, REST and XML-RPC.

In order to use Youtube's API, a developer must first acquire a unique Developer ID — it's an additional property that upon reception, is attached to the developer's YouTube account. The information that is available to developers is similar to the information that can be acquired by accessing YouTube's many RSS feeds.

As of March 2006, API calls from Flash have been disabled due to security concerns.

Tutorial:
This time I'll let you embed the code first, and then I'll explain what will the code do

1. Put this inside <head>

<script src="http://www.google.com/jsapi"></script>
<script>
google.load("swfobject", "2.1");
</script>

<script type="text/javascript">
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
updateytplayerInfo();
ytplayer.addEventListener("onError");
}

// functions for the api calls
function loadNewVideo() {
if (ytplayer) {
ytplayer.loadVideoById('iLaTDP3j3sw','0');
}
}

function play() {
if (ytplayer) {
ytplayer.playVideo();
}
}

function pause() {
if (ytplayer) {
ytplayer.pauseVideo();
}
}

function stop() {
if (ytplayer) {
ytplayer.stopVideo();
}
}

</script>

2. Put this into the body

<body onClick = "loadNewVideo()" >
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#ECE9D8" >
<tr>
<td align="center"><div>


<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<script type="text/javascript" >
var params = { allowScriptAccess: "always", bgcolor: "#cccccc" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer",
"ytapiplayer", "760", "480", "8", null, null, params, atts);
</script>
<br />

</div>
</div>
</td>
</tr>
<tr>
<td align="center">Press Anywhere to PLAY / REPLAY or</td>
</tr>
</table>
</body>

Explanation:
1. Here is the usage of google ajax libraries API and the loader of SWFObject

<script src="http://www.google.com/jsapi"></script>
<script>
google.load("swfobject", "2.1");
</script>

2. Declaration that the script uses javascript

<script type="text/javascript">
...
</script>

3. When the player is ready, It will load the myytplayer

function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
updateytplayerInfo();
ytplayer.addEventListener("onError");
}

4. Call the source of the video

function loadNewVideo() {
if (ytplayer) {
ytplayer.loadVideoById('iLaTDP3j3sw','0');
}
}

5. Play the loaded video

function play() {
if (ytplayer) {
ytplayer.playVideo();
}
}

6. Pause the loaded video

function pause() {
if (ytplayer) {
ytplayer.pauseVideo();
}
}

7. Stop the loaded video

function stop() {
if (ytplayer) {
ytplayer.stopVideo();
}
}

8. When the body is clicked, it will load the video and play it

<body onClick = "loadNewVideo()" >
...
</body>

9. The var params allows access to use script. The var atts sets the id of the object or embed tag to 'myytplayer'. The last line is to embed the player inside the website

<script type="text/javascript" >
var params = { allowScriptAccess: "always", bgcolor: "#cccccc" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer",
"ytapiplayer", "760", "480", "8", null, null, params, atts);
</script>

For more info, you could go to :
1. http://code.google.com/apis/youtube/getting_started.html
2. http://code.google.com/apis/youtube/js_api_reference.html
3. http://code.google.com/apis/youtube/chromeless_example_1.html

Adobe Flex + google maps with flash API

2009-05-31T01:37:00.000-07:00

Adobe Flex is a software development kit released by Adobe Systems for the development and deployment of cross-platform rich Internet applications based on the Adobe Flash platform. Flex applications can be written using Adobe Flex Builder or by using the freely available Flex compiler from Adobe. Flex is used to make a SWF file, without using adobe flash.

Tutorial
A. Setting the environment
1. Download Adobe Flex SDK from here
2. Unzip the SDK into any directory (C:\test\flexSDK3 in this tutorial)
3. Try whether the SDK is already set. From command prompt, run C:\test\flexSDK3\bin\mxmlc If it succeeds, the command prompt should show

Adobe Flex Compiler (mxmlc)
Version 3.0.0 build 477
Copyright (c) 2004-2007 Adobe Systems, Inc. All rights reserved.
...

4. For easier use, add the computer path C:\test\flexSDK3\bin. From control panel --> system --> advanced(tabs) --> Environment Variables --> path

B. Collaborating with google maps
1. Download google maps with flash API here
2. Unzip the docs folder inside C:\test\flexSDK3
3. Unzip the lib folder's file inside C:\test\flexSDK3\frameworks\libs\
4. Make a folder in C:\test called src
5. Make a file inside the src folder, called HelloMap.mxml
6. Put this code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<maps:Map xmlns:maps="com.google.maps.*" id="map" mapevent_mapready="onMapReady(event)"
width="100%" height="100%" key="ABQIAAAABloZD40AKeJkN2oNklEhmRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRmpwvOMLpnUPIHmzDieHJ-t68QqA"/>
<mx:Script>
<![CDATA[

import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;

private function onMapReady(event:Event):void {
this.map.setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE);
}
]]>
</mx:Script>
</mx:Application>

7. Compile the mxml code. Go to command prompt, write "mxml C:\test\src\HelloMap.mxml"

8. VOILA! you have a swf file that's made without adobe flash.

IBM Lotus MashUp

2009-04-04T07:33:00.001-07:00

IBM Lotus Mashup is one very hard mash up program to use. Why? because we need to register, install, and the tutorial is kinda lame. It's original concept was to use a source(from a database like XML, access, SQL) to be used as a feed for a widget. In this widget, I've made a widget which shows their location and their website on click of the source. The source is from the example code :). Because Lotus Mashup can only be shared between coworkers, the program can't share it over internet... so, here's the DEMO of the program

Flashing the NEO Freerunner

2009-03-25T07:46:00.000-07:00

Download dfu-util from http://downloads.openmoko.org/distro/releases/Om2008.9/dfu-util
Download kernel from http://downloads.openmoko.org/distro/releases/Om2008.12/Om2008.12-om-gta02.uImage.bin
Download rootfs from http://downloads.openmoko.org/distro/releases/Om2008.12/Om2008.12-om-gta02.rootfs.jffs2
chmod a+x dfu-util
Open Freerunner in U-Boot mode(press and hold the upper left button + press the on/off key)
Connect the freerunner using usb cable
check whether there's more than one bus on ubuntu using the command ./dfu-util -l
If there's more than one bus, check which bus is for the freerunner, and add this command in the below two steps --device ?x????:?x????
Flash the kernel, go to the folder containing dfu-util, enter the command ./dfu-util -a kernel -R -D ./Om2008.12/Om2008.12-om-gta02.uImage.bin
Flash the rootfs, go to the folder containing dfu-util, enter the command ./dfu-util -a rootfs -R -D ./Om2008.12/Om2008.12-om-gta02.rootfs.jffs2
run ifconfig usb0 192.168.0.200 netmask 255.255.255.0
Go to folder containing resolv.conf, run the command scp resolv.conf root@192.168.0.202:
Go to the phone by using command ssh root@192.168.0.202
copy the resolv.conf using cp resolv.conf /etc/
Remove the resolv.conf from before (not the one at /etc/) by using command rm resolv.conf
Shutdown the freerunner
Run the command ./ifconfig.sh and ./nat.sh
Press the installer in freerunner
Install OMbrowser2
Finished :)

For other resources, go to http://wiki.openmoko.org/wiki/Flashing_the_Neo_FreeRunner

日語問詞

2009-03-15T23:32:00.000-07:00

何ーなん --> 幾
誰ーだれ --> 誰
いくら --> 多少錢
いくつ -->幾個

日語指示代名詞

2009-03-15T23:20:00.000-07:00

こ --> 這
そ --> 那 (一個人的距離很近)
あ --> 那 (兩個人的距離很遠)
ど --> 哪
---------------------------------------
對東西
これ --> 這個
それ --> 那個
あれ --> 那個
どれ --> 哪個
---------------------------------------
對東西或人
この --> 這個
その --> 那個
あの --> 那個
どの --> 哪個
---------------------------------------
對人
こちら --> 這位
そちら --> 那位
あちら --> 那位
どちら --> 哪位
---------------------------------------
對地點
ここ --> 這裡
そこ --> 那裡
あそこ --> 那裡
どこ --> 哪裡
---------------------------------------

日語文法套用

2009-03-15T23:13:00.000-07:00

＿＿＿は＿＿＿です。
＿＿＿は＿＿＿ではありません。
＿＿＿ですか。

Will It Blend?

2009-03-14T08:01:00.000-07:00

Will it blend is a youtube viral marketing show starring Tom Dickson. The concept is to blend almost anything. Well... Words won't say much, let's see the IPhone in blender:

After looking at the painful death of IPhone, let's look at another devastating blender version of a video camera

Now you know how it feels like in front of "the death".
For more video, You could go to BlendTec Youtube

The Youtube Videos that been featured on this blog are property of their respective owner. The writer of this blog is just re-publishing the article

Randy Jackson's America's Best Dance Crew

2009-03-14T03:12:00.000-07:00

RJ's ADBC is a show by MTV that looks for a great dance crew throughout america. This few days, I have been watching (selectively) all of the show. From The season 1, JabbaWockeeZ as the winner over Status Quo. Season 2 with Super Cr3w as the winner over SoReal Cru. And season 3 (which is the hottest of them all), with Quest Crew as the winner over Beat Freaks on March 5, 2009.

On Season 1, The JabbaWockeeZ winning performance "The Red Pill" is far too good against Status Quo's "Jack In The Box"

Here, you can see the Red Pill performance on their tour

My personal favorite is their performance on "apologize" by Timbaland featuring One Republic

On Season 2, The Super Cr3w's performance was not as good as Fanny Pak or SoReal Cru, but they are still the winner.

Here's the deciding moment on Fanny Pak Vs. Super Cr3w
Fanny Pak - FlashDance

Super Cr3w - Footloose

On Season 3 - which are the most interesting season so far - the battle with Beat Freaks and Quest Crew were EPIC. Both have the same quality to be the winner. While Beat Freaks technique was actually better than the Quest Crew, But the Quest Crew was more entertaining.

Here's The Video of Illusion Challenge on Beat Freaks

Here's Quest Crew winning performance in or-Quest-ra

For those who wanted to look on the full Seasons, please go to www.mtv.com or
click below for the seasons.

The Youtube Videos that been featured on this blog are property of their respective owner. The writer of this blog is just re-publishing the article

Review on using GAE

2009-03-12T02:46:00.000-07:00

Making this Portal is not that hard, you must think out of the box to get your result. Like when I'm trying to make a link afor the button, the root was to be put as "/", rather than "../" or "./". One more problem is applying the CSS into the web. There's some issues with the pic and the directories where you should the file. The embedded program is kind of easy because It could be embedded as normal javascript or by using iframe.

What's good about Google Application Engine is it's already given us the platform, so we just need to build inside it. But, I think the old-fahioned way using server-apache, php, SQL are a lot easier, especially you could use programs like dreamweaver to edit them. But, most of all, the easiest way to make a website, is using CMS (Content Management System) like Drupal and Joomla (Joomla also uses DJango framework, just like GAE)

How to start using GAE with Hello World example on windows XP

2009-03-08T22:52:00.000-07:00

My Example of the application please look here
Now, let's get started...

Register in http://appengine.google.com/ (follow the step, including activation)
Download and run python 2.5.4 from http://www.python.org/download/releases/2.5.4/
Download and run google SDK from http://code.google.com/appengine/downloads.html
Create a new folder named helloworld in Google App Engine
Create a helloworld.py file, with the code:
print 'Content-Type: text/plain'
print ''
print 'hello, world'
Create a app.yaml file with the code:

application: helloworld
version: 1
runtime: python
api_version: 1

handlers:
- url: /.*
script: helloworld.py
Open command prompt, go to google_appengine/dev_appserver.py helloworld/
Run http://localhost:8080/ on the web browser
To close the command prompt, press Ctrl-c or just close it
Go to http://appengine.google.com/ again, and click on create an application button (Remember your application identifier name)
Edit the app.yaml file, and change the value of application: to your application identifier name (originally helloworld)
To upload, run the command google_appengine/appcfg.py update helloworld/ in command prompt
To check, go to http://application identifier name.appspot.com
To learn more. go to http://code.google.com/appengine/docs/python/gettingstarted/helloworld.html

Introduction to Second Life

2009-02-24T20:47:00.000-08:00

Second Life (SL) is a virtual world developed by Linden Lab. It's almost like Maxis' The Sims, but with online architecture. Although SL can be categorized as an MMORPG, but it's obviously quite different from the likes of WoW, Lineage, etc. There's no leveling inside the SL world. What's most important in the second life concept is to give the users (residents) a second chance to build their lives.

Residents in SL has their own avatar. They can create their own things (or just buy them with the SL world's currency). SL used a 3D dimensional modeling tools that was build around simple geometric shapes. If you aware of software like 3dsMax or MAYA, you could also import them to the SL world.

Second Life has its own currency, which is called Linden Dollar (L$). L$ can be used as a mean of tradings inside the SL world. There's also a currency exchange available for L$ as in the First Life (Real World), which is 250L$ for 1USD.

Nowadays, there are branded companies such as IBM, CISCO, Adidas, Sony, Vodafone, etc that mostly share their new concepts in SL world.

To sum everything up, SL is not just a game, but it's a virtual world that could connect to the real world, and maybe in the future, it could change the way of living. Imagine, a CEO that needs to be in two meetings, by using SL, he could just send his avatar to substitute his body.