Once again yours truly is again cordially invited as Resource Speaker (with team artsdigitalmedia.com ofcourse π for a Training Computer Literacy (Topics: Tips & Tricks: Amazingly faster computer, Understanding how computer works & its operation, Program & files protection, Internet and System Integration, Inter-connectivity and inter-operability, and Web design & development) – July 12-13, 2012 San Jose City Hall (City Hall Staff & Officials will be the participants)
Monthly Archives: June 2012
UP Diliman 3d virtual tour at 3dxploration.com
Once again, team artsdigitalmedia.com made another 3d interactive virtual tour, and this time its the University of the Philippines, Diliman famous shrine.
Actually, the 3d file pattern came from 3D Philippines Initiative which is in Sketchup format for Google Earth. We extract the 3d file and rebuilt it using open source 3d authoring tools & utilities to comply with the web browser standards, then we program it using simulation engines for the collision & physics features.
We are hoping that all Pilipino will support our project http://3dxploration.com/ for this venture is created for every Pilipino.
3d interactive in less than 5 minutes
3d interactive 101 : Make a 3d interactive in less than 5 minutes
Introducing Blender 3d – its a free 3d modeling software with built-in game engine.
download it at www.blender.org/download/get-blender/ try getting the oldest version for our tutorial (new ones are great but we wont need too much for now, just the basic. In this tutorial i only use version 2.25 so try downloading the same version) – why the old version? well, you don’t need an army to defeat an easy enemy – gamers thought π
install it on your machine, make sure you downloaded the right installer for your operating system.
open the application – you will see gray interface with many thin lines like the photo below:
go to “camera view” – see “menu – view” at the top
right-click the vertical thin black line – (see photo below), and hit G key to grab it (its the camera), then drag it a bit upward to see the grid lines (default floor), then right-click to end the dragging & position it.
Now you will see a tiny flat square lying on the floor, you may want to scale it, right-click to select then hit S & drag to scale it. Scaled
hit Space – you will see a pop up menu, click add – Mesh – Cube
click on the realtime button, make sure the cube is selected (its pink when selected)
add a sensor, just click it.. later we will adjust some option
then a controller, just click it again..
then an actuators, yes just click it..
connect the sensor to controller, by click & dragging the small gold icons to each other
add some parameters, find the dRot shift right click on the first column then put some numeric value, lets make it .01 value. this is actually adding local rotation X – to the cube (remember X Y Z axis? will explain it on my other tutorials later).
Back to the sensor – leftclick the button that says “always” and select “keyboard” – yes you just give it a user interactive option.
on the button labeled “key” – hit it then choose any keyboard key, i used SPACE for this tutorial
Let’s simulate it or let me say – run it on game engine, yes i said that this blender3d has a builtin game engine – awesome right π hit START GAME and voila – nothing happens π
try hitting the SPACE key.. and if you followed the instructions the cube will rotate, everytime you hit SPACE on your keyboard.
Next, is.. play around with different value of actuators then try using other sensors’s options.. try adding other MESH objects like sphere, tube, etc..
NO PHOTOS – See this link
I will post other tutorials, shading the interactive interface, adding textures & materials, gravity, physics etc..
Basic & Simple HTML-CSS Menu show/hide SubMenu
This is my tutorial in making basic & simple HTML/CSS Menu that shows & hide SubMenus on Mouse Over. There are many other tutorials out there that maybe be better but quite complicated and heavy for beginners.
here it goes:
Create a style tag for your menu, dont forget the html/head/body tags – remember to put your stylesheet inside head tag.
<style>
.menu{}
</style>
Leave it without any parameters/option for now (later do as u wanted π
next, addΒ the menu list
.menu li{}
if you want horizontal menu use float:left on list tags <li> else the default appearance will be vertical menu. then add your other style of your liking such as width, height, background-color/images, etc. (later recommended)
.menu li{ float:left}
next will be your submenu, hide it using display:none (or visibility: hidden for CSS3)
.menu ul{display:none}
Remember your main menu is at <li> tags and it holds your submenus at <ul> tags
<li>menu
<ul>submenu</ul>
<ul>submenu2</ul>
</li>
Now here comes the magic that will reveal the submenu when the mouse is located over the menu (hovering they say)
add the following to your style
.menu li:hover ul{display: block;}
then again, add your other style of your liking such as width, height, background-color/images, etc.
see it live atΒ http://artpologabriel.com/wp-content/uploads/2012/06/1.html
test it – submenu will be in – now u see now u don’t – state π
Final code:
<html>
<head>
<style>
.menu{
float:left;
}
.menu li{
float:left;
display: block;
width: 200px;
height; 50px;
}
.menu ul{
display: none;
}
.menu li:hover ul{
display: block;
background-color: blue;
}
</style>
</head>
<body>
<div>
<li>home
<ul>home 1</ul>
<ul>home 2</ul>
</li>
<li>about
<ul>bout</ul>
<ul>bout2</ul>
</li>
<li>contact
<ul>contact1</ul>
<ul>contact2</ul>
</li>
</div>
</body>
</html>