Frontendplace Blog

Sharing Frontend developing ideas

Archive for the '3D Tutorials' Category

3d modeling and texturing tutorials

Media queries mixing

Posted by info on 16th November 2013

Here are some examples of media query mixins i use to generate the media queries needed for different viewport sizes:

@mixin respond-min($width) {
    // If we're outputting for a fixed media query set...
    @if $fixViewport {
        // ...and if we should apply these rules...
        @if $fixViewport >= $width {
            // ...output the content the user gave us.
            @content;
        }
    }
    @else {
        // Otherwise, output it using a regular media query
        @media screen and (min-width: $width) {
            @content;
        }
    }
}

@mixin respond-max($width) {
    // If we're outputting for a fixed media query set...
    @if $fixViewport {
        // ...and if we should apply these rules...
        @if $fixViewport < $width {
            // ...output the content the user gave us.
            @content;
        }
    }
    @else {
        // Otherwise, output it using a regular media query
        @media screen and (max-width: $width) {
            @content;
        }
    }
}

// mixins Styles for Old IE:

$oldIE: false !default;

@mixin oldIE {
    // Only use this content if we're dealing with old IE
    @if $oldIE {
        @content;
    }
}

// Only use this content if we're NOT dealing with old IE
@mixin modern{
    @if $oldIE == false{
        @content;
    }
}

Posted in 3D Tutorials | Comments Off on Media queries mixing

Dreamweaver modifies XML on opening

Posted by info on 11th June 2012

Dreamweaver has some preference settings to rewrite your code on opening but even when you uncheck all and expect to view the original content then be warned..

example:

<test>
<!--<node1>
       <node2>
        <!- - Explanation:
         this is some html comment
        - ->
       </node2>
    </node1>-->
</test>

When you want comments nested inside other comments temporary changed and set a space between the two “-” character  in Dreamweaver the xml becomes this and your xml becomes corrupt:

<!--<node1>
       <node2>
          <!- - Explanation:
          this is some html comment
         - ->
        </test>
     -->

So better change this to <!- Explanation….. ->

Posted in 3D Tutorials | Comments Off on Dreamweaver modifies XML on opening

Using joomla 1.5 together with php 5.3

Posted by info on 2nd June 2012

If you have an error in joomla 1.5 website and your provider (or in my case in my snowleopard website)

Warning:
Parameter 2 to frontpage() expected to be a reference, value given in...

Then you can try this fix http://phpscripts4u.com/uncategorized/parameter-2-frontpage-expected-reference/. It helped me.

Posted in 3D Tutorials | Comments Off on Using joomla 1.5 together with php 5.3

Difference between fireEvent and onclick in internet explorer

Posted by info on 10th February 2012

I came up to a difference between firing events in internet explorer and firefox, Chrome, safari etc.
In Internet explorer 8 you can fire events like onclick, onmouseover etc with the method fireEvent with javascript. In other browsers you can use dispatchEvent for this and in some other libraries like Prototype you can use triggerEvent or trigger in jQuery.

When you fire an event in the standard browsers (FF,CHR etc) a submit on a form is triggered and a document.location change is triggered when an “click” event is called. And when you don’t want this to happen you should call preventDefault() to cancel the default action of the button or anchor (submitting or redirecting to an other page). But…. in IE8 I see that when calling fireEvent(‘onclick’) only the onclick listeners that are added to the buttons or anchors are triggered but NOT the default actions. So there will be no submitting or redirection when calling fireEvent(‘onclick’). But when you call the general click() function all the onclick event listeners will be triggered INCLUDING the default action. So try it yourself in this example with internet explorer.

See example on http://www.frontendplace.nl/bb/wp-content/uploads/2012/02/fireEvent-Method-Sample.html

Posted in 3D Tutorials | Comments Off on Difference between fireEvent and onclick in internet explorer

Lions is here …do you miss windows/download folder

Posted by info on 23rd July 2011

First look on safari on Lion is great. Especially the new features for developers when you choose Inspect Element.
But then searched for the window/download folder menu option but it wasn’t there anymore.. but looked further and there it was in the corner of the safari window.. (look for the arrow down icon). But when you have removed the icon from the toolbar by customize toolbar.. than you have to set it back first or else you are not able to view the download progress.

Posted in 3D Tutorials | Comments Off on Lions is here …do you miss windows/download folder

unspecified error in IE8 with prototype

Posted by info on 1st November 2010

When the fireEvent method is called in the prototype.js library I sometimes get an “unspecified” error in internet explorer 8. The reason I get this error is because I have replaced some elements with an AJAX call and on these elements I have attached some eventHandlers. In IE8 somehow these replaced elements are still alive and react on events fired. If this element doesn’t exist anymore in the DOM tree the “unspecified” error is shown in IE8. The solution we have made:

  1. Cache the eventlisteners in Array
  2. Add destroy function to remove these eventlisteners from this object
  3. When an event is called check if this element has parents. if not call destroy function



We had the following code:

setListener : function(targetId, eventName){
		targetId = targetId.replace(/^#/,"");
		if (this.listeners[targetId]){
			return;
		}


		this.listeners[targetId] = true;
		var targetElement = $(targetId);
		if (!targetElement) return;

		targetElement.observe(eventName || "element:afterUpdate",function(event){
			var elementId = event.element().identify();
			if (event && targetId == elementId) {
				var url = event.memo.url;
				this.showActive(url, 1);
			}
		}.bindAsEventListener(this));
	},

and changed it to:

		var targetElement = $(targetId);
		if (!targetElement) return;

		// cache all listener data so it can be removed later on
		this.listeners[targetId] = {
			handler: function(event){
				var elementId = event.element().identify();
				if (event && targetId == elementId) {
					var url = event.memo.url;
					this.showActive(url, 1);
				}
			}.bindAsEventListener(this),
			eventName: eventName || "element:afterUpdate",
			element: targetElement
		};

		targetElement.observe(this.listeners[targetId].eventName, this.listeners[targetId].handler);

and added in the eventhandler:

		// stop if behaviour is destroyed or element is no longer part of DOM
		if (this.destroyed) return;
		if (!this.element.hasDocumentAncestor()){
			this._destroy();
			return;
		}


added this extra method:

/*
	Property: _destroy
		Destroy behaviour of this component if element is no longer part of the DOM
	*/
	_destroy : function(){
		// remove event observers
		for (var key in this.listeners){
			var listener = this.listeners[key];
			if (listener.element) listener.element.stopObserving(listener.eventName, listener.handler);
		}

		this.destroyed = true;
	}

Posted in 3D Tutorials | Comments Off on unspecified error in IE8 with prototype

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 | Comments Off on platform creator for ffilmation

Added animation goldengate

Posted by info on 5th December 2008

Just added goldengate animation here

Posted in 3D Tutorials | Comments Off on Added animation goldengate

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 | Comments Off on Controlling walkcycle animation

Beer texture

Posted by info on 20th April 2007

Figuring out some beer texture I made this animation
See the animation page
And the 3D page

Posted in 3D Tutorials | Comments Off on Beer texture