K Swamy Vishnubhatla

Three Js

Hi,

As I mentioned in my last post, I am here to write a example in three.js. Bit late posting but I didn't get time to post it.

Following code creates one blue box(floor) and red box(object) and allow to move red box using arrow keys.

<!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" />
<script type="text/javascript" src="Three.js"></script>
<title>Moving Object by using keys</title>
<script type="text/javascript">
    var sceneCamera;
    var renderer = new THREE.WebGLRenderer();
    var scene = new THREE.Scene();
    var objHero;
    window.onload = function(){
       //screen widht and height
       var screenWidth = window.innerWidth-100;
       var screenHeight = window.innerHeight-100;

       //adding renderer element
       renderer.setSize(screenWidth, screenHeight);
       document.body.appendChild(renderer.domElement);


       sceneCamera = new THREE.PerspectiveCamera(40, screenWidth/screenHeight, 1, 1000);
       sceneCamera.position.set(30,50,180);
       sceneCamera.lookAt(scene.position);
       scene.add(sceneCamera);

       var sceneLight = new THREE.DirectionalLight(0xFFFFFF, 5);
       sceneLight.position.z = 6;
       scene.add(sceneLight);

       var groundPlane = new THREE.CubeGeometry(100,1,100);
       var planeMat = new THREE.MeshLambertMaterial({color:0x5500FF});
       var groundMesh = new THREE.Mesh(groundPlane, planeMat);
       scene.add(groundMesh);

       var GeometryHero = new THREE.CubeGeometry(10,10,10);
       var heroMat = new THREE.MeshLambertMaterial({color:0x800000});
       objHero = new THREE.Mesh(GeometryHero, heroMat);
       scene.add(objHero);
       renderer.render(scene, sceneCamera);

       document.addEventListener("keydown", fKeyListener);
    };

    function fKeyListener(e)
    {
       if(e.keyCode == 37) objHero.position.x -= 1;
       else if(e.keyCode == 39) objHero.position.x += 1;
       else if(e.keyCode == 38) objHero.position.z -= 1;
       else if(e.keyCode == 40) objHero.position.z += 1;

       renderer.render(scene, sceneCamera);
    }
</script>
</head>

<body>
</body>
</html>

Any support needed don't hesitate to contact me.

Three.js introduction

Hi everybody, today I am writing about Three JS. I like it lot. :)

Three JS is 3D engine using Java script. I hope you like this sound. Yah really it’s a 3D engine using java script. It doesn’t need any plugins. It’s purely java script engine. It’s using WebGL and HTML 5 canvas elements to display 3D content. Mrdoob (Ricardo Cabello) was introduced Three js

WebGL is a Javascript API for 3D and 2D contents rendering in browsers. WebGL allow browser to access GPU acceleration also. So, 3D or 2D content can run much faster. If you want to know more about WebGL you can go through below Wikipedia link.

http://en.wikipedia.org/wiki/WebGL

But WebGL still not available in some browsers like IE, Safari, Opera etc… It will work fine in Netscape browsers (Chrome & Firefox). So, In IE we can use HTML5 Canvas. But it runs very slow. I hope in 1 or 2 years WebGL will be available in all browsers.

Three Js is very simple to learn. I will write here one example.

You can download Three JS from this link: https://github.com/mrdoob/three.js/downloads.

Following code creates a blue rectangle:

Creating Render Element:

var renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

Creating Scene and Camera:

var scene = new THREE.Scene();//initialising scene

//adding camera

var sceneCamera = new THREE.PerspectiveCamera(40, width/height, 1, 1000);

sceneCamera.position.set(30,50,180);

sceneCamera.lookAt(scene.position);

scene.add(sceneCamera);

Creating light:

var sceneLight = new THREE.DirectionalLight(0xFFFFFF, 5);

sceneLight.position.z = 6;

scene.add(sceneLight);

Creating a Box:

var boxGM = new THREE.CubeGeometry(50,50,50);

var boxMaterial = new THREE.MeshLambertMaterial({color:0x5500FF});

var boxMesh = new THREE.Mesh(boxGM, boxMaterial);

scene.add(boxMesh);

Finally rendering:

renderer.render(scene, sceneCamera);

Note: Good out put in Google Chrome browser.

Above example creates a blue rectangle. You can check some great examples here: http://mrdoob.github.com/three.js/

In my next article I will explain how to create Moving object using arrow keys. Any doubts or need assistance feel free to contact me at swamy.webdesigner@gmail.com.

Flare3d

Here I would like to write about Flare3d. Flare3d is 3d Engine for flash to develop 3d applications or games by using flash As3 very quickly and also it’s very easy. An AS3 programmer can learn Flare3d basics within 1 day :).

Flare3d using Stage3d in flash player 10+. So, we don’t need any additional plugins for 3d content. Stage3d is API for flash player and AIR. It’s hardware accelerated-architecture. So, it gives stunning output.

We can use 3d files developed in 3dMax or 3dMaya. We have to install a Flare3d plugin into 3dMax or 3dMaya then we can export 3d file as “.f3d”. We can load “.f3d” file directly into app using AS3 code. Also we can do modifications in Flare3d editor.

By using single line code we can load a “.f3d” file. We use method “addChildFromFile” to load a f3d file.

var f3dObjet:Pivot3d = scene.addChildFromFile(“file.f3d”);

by using above code we can load a “.f3d” file into scene dynamically.

We can control and create “Animations, Lighting, Materials, Physics & Collisions, particles, dragging and dropping, etc..”.

I have some links for you guys may be useful:

Tutorials for developing a game using Flare3d

http://www.adobe.com/devnet/flashplayer/articles/flare3d-building-3d-game.html

Flare3d Forum

http://www.flare3d.com/support

Flare3d updates

http://www.flare3d.com/blog/

I have developed a game for my company using Flare3d and now I am developing a game for my portfolio J. So, any doubts or any assistance please mail me or give a feedback to this post.

Heavy Raining in Hyderabadh in a short spane :)

Flash As 3.0 "Jet Game"

Hi,

I Made a new game "Jet Game" by using Action Script 3.0 and I have used my team for design, If you have time to check it, please go through follwoing link and give me suggestions and feedback:

http://vishnubhatla.ueuo.com/jet/

Thanks,
K Swamy Vishnubhatla.

How to Save a File from Falsh As 3.0 (File Refference In As 3.0)

Hi,

Here I am writing about save a file from Flash by using Action Script 3.0. Already I have write a post for Filerefference in depth, you can follow that post

and here just I am writing explination about example

To do this First Create a button in Flash and name as "saveFileBut", and create input text filed and name as "myText" and copy and paste following code in

first frame.

var saveFile:FileReference = new FileReference();
saveFileBut.addEventListener(MouseEvent.CLICK, saveMyFile);

function saveMyFile(e:MouseEvent): void {
saveFile.save(myTex.text);
}

In above code first line we are creating a filerefference object "saveFile" and in second line we are writing listener to button and calling function

"saveMyFile" in this funtion we are saving text written in "myTex" as text file.

For More Information on File Refference you can go through link:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/FileReference.html?filter_flash=cs5&filter_flashplayer=10.2&filter_air=2.6#save%28%29

Thanks,
K Swamy Vishnubhatla.

How to Load File by browse in Falsh As 3.0 (File Refference In As 3.0)

Hi,

Here I am writing about "File Refference" Concept in Flash Action Script 3.0.

We can use "File Refference class" to "Save or create", "upload" and "browse and load" file "from or to" flash.

This example for "browse and load" using As 3.0.

Note: It will work on "Flash Player 10 and later versions" only and you are "not able get path" of file because Adobe remove this feature for security

purpose. (Flash player 10 avail in Flash Cs4 and later versions).

To follow this example first create a button with name "imgLoad" and Copy below code:

var fileRef:FileReference= new FileReference();
imgLoad.addEventListener(MouseEvent.CLICK, onButtonClick);

function onButtonClick(e:MouseEvent):void {
    fileRef.browse([new FileFilter("All Files (*.swf,*.jpg,*.jpeg,*.gif,*.png,*.tif)","*.swf;*.jpg;*.jpeg;*.gif;*.png;*.tif")]);
    fileRef.addEventListener(Event.SELECT, onFileSelected);
}

function onFileSelected(e:Event):void {
    fileRef.addEventListener(Event.COMPLETE, onFileLoaded);
    fileRef.load();
}

function onFileLoaded(event:Event)
{
    //loader object containing image data
    var loader:Loader = new Loader();
    loader.loadBytes(event.target.data);
    loader.x=0;
    loader.y=0;
    stage.addChild(loader);
}

Explination:

In above code first line "var fileRef:FileReference= new FileReference();" creating File refference object. Second line We adding listener to button

"imgLoad" to browse file.

In "onButtonClick" function we are written "fileRef.browse" to browse file. We have mentioned here load "swf,jpg,jpeg,gif,png,tif" files only we can load by

adding fileter in browse. We have freedom to write extensions :).

"fileRef.addEventListener(Event.SELECT, onFileSelected)" Line will excecute slect a file and click on open. And it will call funciton "onFileSelected". In

this function we will load file into flash and after loading it will call to function "onFileLoaded".

In "onFileLoaded" function we are adding image into stage from Loader data.

For More Information on File Refference you can go through link:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/FileReference.html?filter_flash=cs5&filter_flashplayer=10.2&filter_air=2.6#save%28%29

Thanks,
K Swamy Vishnubhatla.

Moving Object usning key board in Flash AS 3.0

Hi,

Here I am writing about Moving object to front and back like car moment, so, here user can move object to front or back only and he can rotate :).

To do this we should need to know "Finding Keyboard Key Code", "converting degrees to radinas","Use of Math.cos,Math.sin trigonometry functions".

Object Moving Formula:

angle=obj.rotation;
radians = angle * Math.PI / 180;
vx = Math.cos(radians) * speed;
vy = Math.sin(radians) * speed;

In above code "obj" is object which one trying to move, "angle" is a variable it contains rotation of object in degrees, "radians" contains rotation of object in radians.

"vx" is velocity in x direction of object, "vy" is velocity in y direction of object.

To convert degrees to radians we have to use formula " radinas=degrees*Math.PI/180".

I have used same formula to find "obj" rotation in radians.

Upto here you learn how to find velocity of object. Now we can write code to move object depends upon the key board.

To process a function when key press in Key board, we should use "KeyboardEvent.KEY_DOWN".

var keyleft,keyright,keyup,keydown:Boolean=false;

stage.addEventListener(KeyboardEvent.KEY_DOWN, down);
stage.addEventListener(KeyboardEvent.KEY_UP, up);
stage.addEventListener(Event.ENTER_FRAME, loop);

function down(event:KeyboardEvent)
{
if(event.keyCode==37)
{
keyleft=true;
}

if(event.keyCode==38)
{
keyup=true;
}

if(event.keyCode==39)
{
keyright=true;
}

if(event.keyCode==40)
{
keydown=true;
}
}

function up(event:KeyboardEvent)
{
if(event.keyCode==37)
{
keyleft=false;
}

if(event.keyCode==38)
{
keyup=false;
}

if(event.keyCode==39)
{
keyright=false;
}

if(event.keyCode==40)
{
keydown=false;
}
}

Following are key codes for left,right,up,down Keys:

left=37, right=39, up=39, down=40

So, following code for when you press "Left Key" then "keyleft" boolean variable will be true, same for right,up,down keys.

Folliwng code for movement object when "leftkey or rightkey or upkey or downkey" are "true":

var angle,radians,vx,vy=0;
var speed=2;
function loop(event:Event)
{
angle=obj.rotation;
radians = angle * Math.PI / 180;
vx = Math.cos(radians) * speed;
vy = Math.sin(radians) * speed;

if(keyleft){
obj.rotation--;
}

if(keyright){
obj.rotation++;
}

if(keyup){
obj.x += vx;
obj.y += vy;
}

if(keydown){
obj.x -= vx;
obj.y -= vy;
}
}

Just copy and paste following codes into your flash document in first frame, and create a movieclip object with name "myObj", then you will get out put.

I hope you all enjoy......... :)

Thanks,
K sWamy Vishnubhatla,
swamy.webdesigner@gmail.com.

As3 Tween Class and Easing Class

Hi,

In action script tween class was verry important for programmers, because programmers can do animation without designers help :)

Here I am describing about basics of tween class in as3.

To use tween class we should need to import two classes into file, those are

"fl.transitions.Tween","fl.transitions.easing.*".

import fl.transitions.Tween;
import fl.transitions.easing;

Now you can use "tween" functions otherwise it will show error :)

To animate movie clip "obj" in "x" direction from "250" to "500" withing 1 secon we have to write following code:

var objTween:Tween = new Tween(obj, "x", Elastic.easeOut, 250, 500, 1, true);

Here "ObjTween" is a Tween variable, by using this we can control tween animation, I mean we can stop,extends animation, start animation and reverse animation.

In above code "x" indicates x-direction, "Elastic.easeOut" it's type of animation. we can use several types like "Elastic.easeIn", "Regular.easeOut", "Regular.easeIn" etc...

"250,500" intimates "from" and "to" positions. ",1" intimates time period.

We can write events for it, we can run a function, when tween start or when tween end, when tween change, etc..

To write we need to import class "import fl.transitions.TweenEvent".

objTween.addEventListener(TweenEvent.MOTION_FINISH, motionFinish);

function motionFinish(event:TweenEvent)
{
trace("motion finished");
}

Total Code:

import fl.transitions.Tween;
import fl.transitions.easing;
var objTween:Tween = new Tween(obj, "x", Elastic.easeOut, 250, 500, 1, true);
objTween.addEventListener(TweenEvent.MOTION_FINISH, motionFinish);
function motionFinish(event:TweenEvent)
{
trace("motion finished");
}

If u need more assistance u can find here:

Tween Class: http://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/fl/transitions/Tween.html

Easing Class: http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/fl/transitions/easing/package-detail.html

Move A Object by using arrow keys (java script)

Hi,

We can develop games by using java script, for I have done following code for move object by using arrow keys, copy below code and save as html then u can see result, enjoy it dudes :)

Draging in As 3.0

myobj.addEventListener(MouseEvent.MOUSE_DOWN,startdrag);
myobj.addEventListener(MouseEvent.MOUSE_UP,stopdrag);
var clickoffset:Point=null;
function startdrag(event:MouseEvent)
{
clickoffset=new Point(event.localX,event.localY);
}
function stopdrag(event:MouseEvent)
{
clickoffset=null;
}
stage.addEventListener(Event.ENTER_FRAME,drag);
function drag(event:Event)
{
if(clickoffset!=null)
{
myobj.x=mouseX-clickoffset.x;
myobj.y=mouseY-clickoffset.y;
}
}

External XML Loading

var xmlUrl:URLRequest=new URLRequest("myxml.xml");
var xmlob:URLLoader=new URLLoader(xmlUrl);
xmlob.addEventListener(ProgressEvent.PROGRESS,loadProgress);
xmlob.addEventListener(Event.COMPLETE, xmloaded);
function xmloaded(event:Event)
{
var dataxml=XML(event.target.data);
trace(dataxml.images[0]);
}
function loadProgress(event:ProgressEvent):void {
var percentLoaded:Number = event.bytesLoaded/event.bytesTotal;
percentLoaded = Math.round(percentLoaded * 100);
trace("Loading: "+percentLoaded+"%");
}

Space ship game

Hi,

I have made a space ship game in flash.

enjoy it....., to play click here

Flash Car Game

Hi,

I have done a car game, enjoy it...!

to play this game clic here... cargame

Rectangle in Flash

We can create shapes in flash by using shape class. for example below code for crete rectangle this.createEmptyMovieClip("draw_mc",12); draw_mc.beginFill(0x000000); draw_mc.moveTo(10,100); draw_mc.lineTo(100,100); draw_mc.lineTo(100,200); draw_mc.lineTo(10,200); draw_mc.lineTo(10,100); draw_mc.endFill(); I hope you enjoy it..

contacts : swamy.webdesigner@gmail.com

Thanks,
K Swamy Vishnubhatla

Shared White Board

Shared White Board I have make a White board in flash with square, circle, pencil, text, line, eraser and colors.

Main Feature is : This is shared whiteboard, i.e, it can use by multiusers at a time, then one user drawn thing can see by others.

If u need it.. contact me to swamy.webdesigner@gmail.com.
Thanks, K Swamy Vishnubhatla.

basic css style tips

css are three types :

1. Internal Css
2. Inline Css
3. External Css

Free Templates

some good Free Templates :

Flash White Board

Hi,

I have create a white board in flash, It can share by people also.

If you want the code then mail me to this ID : Swamy.webdesigner@gmail.com

Thanks,
K Swamy Vishnubhatla,

Hey I have write a poet

Hey I have write a poet, this is my first one, telugu :

karige kalam, na uhalo nee rupam ellappudu saguthuno untay, naa kosam puttina oh naa jeevitha kanyamala nannu eppudu cheruthavu, eppudu pulakimpachesthavu, epudu odarchuthavu, epudu parinayam chepadathavu, nee kosam nenu neetikosam vechivunna chathaka pakshi la veekshisthunna

-swamy :)