Frontendplace Blog

Sharing Frontend developing ideas

  • Adds

Archive for the '3D Tutorials' Category

3d modeling and texturing tutorials

Centrate your login form including extra header

Posted by info on 10th June 2010

login

Sometimes you need to make a login screen and center the login form vertically and horizontally. I made this crossbrowser example to create a
loginscreen screen. Look at the source how it is been done. You need a heightsetter span to center the content vertically.

Posted in 3D Tutorials | No Comments »

Print Logo without having img tag in content

Posted by info on 29th May 2010

Ever wanted to have your logo to be printed when background printing is disabled and for accessibility reasons you don’t want to add the image tag in your markup and control the image source in your stylesheet.
I heard this week that you can still print images inside an html document without having an image tag in the content.

The magic trick: When you want the logo to be clickable you can set the anchor to be displayed as list-item and set the list-style-image. This image will be printed even when the background printing is disabled and you have a clean accessible markup.. Be aware that not all the style sheet rules can be used for the text inside the anchor, like negative text-indent, vertical-align and overflow:hidden (FF mac doesn’t show the tag);

See this example

Posted in 3D Tutorials | No Comments »

Dynamic resizing div until bottom of screen

Posted by info on 16th May 2010

Sometimes you want the last div layer or iframe to be resized and have the scrollbar in stead of getting a scrollbar on the whole page. Here is an example script that calculates the height and width of the container respecting a given bottom and right space.
You need some extra functions to calculate the computed style and offset of the page. (note the initial height must be the smallest size if you are in standards mode)
This is a sample code that does the work and here are some examples with the remaining functions. (Look in the source).

/**
* Dynamically resize the wrapper div, which is generated by the table tag.
* @param {oElement}	object 	html node
* @param {iHeightSpace}	integer extra bottom space
* @param {iWidthSpace}	integer extra right space
* @param {bSetWidth}	boolean if width must be reset
* @param {iPercentage}	integer percentage of total available height
* @param {iMinHeight}	integer minimum height of container
* @param {bSetHeight}	boolean if height must be reset
*/
function maximizeDiv(oElement,iHeightSpace,iWidthSpace, bSetWidth, iFraction,
 iMinHeight, bFixHeight) {
	var EXTRA_BOTTOM_SPACE = (iHeightSpace)? iHeightSpace : 0;
	var EXTRA_RIGHT_SPACE = (iWidthSpace)? iWidthSpace : 0;
	var MINIMUM_HEIGHT = (iMinHeight)? iMinHeight : 60;
	var bFixHeight =  (bFixHeight)? bFixHeight : false; // default also change the height

	iFraction = (iFraction)? iFraction : 1; // set fraction of available height
	var wrapper = (oElement)? oElement : document.getElementById('scrollContainer');
	var iWidth= xGetComputedStyle(wrapper, 'width', true);
	var iHeight = xGetComputedStyle(wrapper, 'height', true);

	// get height of document
	var iDocumentHeight =  (document.documentElement.clientWidth > 0) ?
document.documentElement.clientHeight : document.body.clientHeight;

	// get the top offset and add iExtraSpace
	var objectPosition = getOffset(wrapper);
	var iOffsetTop = objectPosition.top; /* only set when container is positioned relative */

	if(!bFixHeight){
		var iHeight = Math.floor(Math.max((iDocumentHeight - iOffsetTop -
EXTRA_BOTTOM_SPACE)* iFraction, MINIMUM_HEIGHT))  // minimum height 2 rows of 21px
		wrapper.style.height = getCssValue(iHeight);
	}

 	// get width
 	if (bSetWidth){
 		var documentWidth =  (document.documentElement.clientWidth > 0) ? document.documentElement.clientWidth : document.body.clientWidth;
 		iWidth = Math.max(documentWidth - objectPosition.left - EXTRA_RIGHT_SPACE,300); // minimum width
   		wrapper.style.width = getCssValue(iWidth);
   	}
 	return [iHeight,iWidth];
}

Posted in 3D Tutorials | 2 Comments »

Having problems printing in IE6?

Posted by info on 17th April 2009

We had a problem with printing tables with thead and tfoot on internet explorer for a while. When printing long tables an extra page would be printed before the table  and the borders and page headers and footers did not print right at the table spanned pages. This was such a big issue for the client that we called the help of microsoft support ;not for free;-( The support pages on microsoft won’t help you with this problem so I’ll tell you here.  After a long test period this solved our problems: 

The problem was in de rule:
.containerOutline,.containerLeft,.containerRight,.container,.hspace { overflow-y:auto; }

The solution:
If you have a rule for overflow-y: auto remove this for printing. In the print stylesheet remove “overflow-y:auto;” by setting the overflow rule only for screen (@media screen) in a dedicated IE6 css file.

Posted in 3D Tutorials | No Comments »

platform creator for ffilmation

Posted by info on 4th March 2009

for the game platform editor from  ffilmation I edited my previous flash swf which calculated the average pixel color in an image. Now create an image in black and white color and the swf creates xml based on the average black color in the image.

see example

or load the source it here (its not so clean.. there are more functions in it which I don’t use for this example but maybe you can have some use of it)

pixelcount.zip

Posted in 3D Tutorials | No Comments »

dynamic attach movieclip by classname reference in AS3

Posted by info on 24th December 2008

In actionscript3 it is possible to add a movieclip to the stage by the class reference. It’s not so obvious though

To add a movieClip on stage you have to use the addChild method. You can get the movieclip reference in actionscript3 when you have added a classname on the library item by the use of getDefinitionByName. Be sure you use the DisplayObject for referencing the returned movieclip

example:

package
{
  	import flash.display.MovieClip;
    import flash.utils.getDefinitionByName;

    public class Background extends MovieClip
	{
		public function Background()
		{
			var _Class:Class = getDefinitionByName("backgroundmc") as Class;
			var a:MovieClip = new _Class();
			a.name = "a";
			addChild (a);
		}
	}
}

example creating background movieclip:

package {

    import flash.display.DisplayObject;
    import flash.display.Sprite;

    public class myDocClass extends Sprite {

        public function myDocClass(){

			var a:DisplayObject= new Background();
			addChild (a); 

		}

    }
}

Posted in 3D Tutorials | No Comments »

Added animation goldengate

Posted by info on 5th December 2008

Just added goldengate animation here

Posted in 3D Tutorials | No Comments »

Controlling walkcycle animation

Posted by info on 25th November 2008

Made this controller for a walkcycle in an educational flash game.
See:willie webwijs website

Took me a while to think about how I could do it. So made the walkcycle with 90 degree turn and stand and start in four directions put the frames after each other and marked every part (walkcycle, turn, stand, stopping, starting). Made an excel sheet with on one axe the animation cycle I needed to go and the other axe the current animation cycle. And converted this table into a two dimensional array in flash.
And on the cross I put the cycle I needed to jump to first after the current cycle has ended. Every time after I reached the end of the animationpart I look what the next part must be and jump to that. I will end at the target animation. and stop jumping. see: the animation controller here

Or see some other animation of this cute bot

Posted in 3D Tutorials | No Comments »

Why not show some reflection

Posted by info on 29th October 2008

With the aid of the tag CANVAS in not IE browsers and with the filter DXImageTransform possibility on IE Browsers you can add reflections (wetfloor effect) under your image just with a little bit javascript.

view the site http://cow.neondragon.net/stuff/reflection/ for the javascript
The trick is by unobtrusive javascript and just three classes on your image you add reflection.

  1. add class “reflect” 
  2. add class “rheight##” where ## is the height in percentage for the gradient. default = 50
  3. add class “ropacity##” where ## is the amount of opacity. default = 50
  4. add the javascript “reflection.js” to the page
  5. call the function addReflection on window load.
example:
<head><script type=”text/javascript” src=”reflection.js”></script>
<script type=”text/javascript” >window.onload = addReflections</script></head><body>
<img src=”macosxlogo.gif” alt=”img” width=”73″ height=”97″ class=”reflect rheight97 ropacity50″ /></body>
but mind the classes the classes on the img will be replaced to the containing div.

Posted in 3D Tutorials | No Comments »

Typewriter class in actionscript

Posted by info on 25th August 2008

This is an example how to create a typeing effect without having to use masks. (you can repeat the text or add a pipe character )


import mx.utils.Delegate;

class myfolder.typingText { // replace myfolder with the folder structure you use
private var delayTime:Number;
private var destinationMc:MovieClip;
private var messageText:String;
private var currentChar:Number;
private var includePipe:Boolean; // include pipe character after text
private var doRepeat:Boolean; // repeat typeing after 5 sec

public function typingText(mcBot, mcRoom){
this.delayTime = 50;
this.destinationMc = null;
}
public function typeText(){
var dest = this.destinationMc;
if (dest && dest.html != null) {
dest.html = true;
dest.text = this.messageText.substr(0, this.currentChar);
if(this.includePipe)
dest.text = dest.text + "|";

this.currentChar++;
if (this.currentChar > this.messageText.length) {
if(this.doRepeat){
this.currentChar = 1;
_global.setTimeout(Delegate.create(this,typeText),5000);
}
} else {
_global.setTimeout(Delegate.create(this,typeText),this.delayTime);
}
}
}
public function startTyping(textParam, delayParam, destinationParam, repeat , pipe){
this.messageText = textParam;
this.delayTime = delayParam;
this.currentChar = 1;
this.destinationMc = destinationParam;
this.typeText();
this.includePipe = pipe;
this.doRepeat = repeat;
}

}

Insert in flashdocument:

import myfolder.typingText

var myText = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel est. Cras convallis quam non diam. ";

// textarea
var typing1 = new typingText();
typing1.startTyping(myText,200, taTypingText,true, false );
// dont use pipe in text area because a CR is generated and pipe end up under the last line

//inputtext
var typing2 = new typingText();
typing2.startTyping(myText.substr(0, 40),80, tiTypingText, true, true );

// textfield
var typing3 = new typingText();
typing3.startTyping(myText,500, dtTypingText, false, false );

Example:

Posted in 3D Tutorials | No Comments »