kreativeKING - Interactive Developer

I have been applying for alot of freelance jobs lately and I don’t really have a portfolio up showcasing my flash skills. I usually just forward them here to my blog but I don’t think employers have any patience to sift through the posts. So I decided to make a little mini site that has links to my various works. It is all built in flex ( Yup, I’m learning MXML and I must say….. I like it).


This is my second Flex RIA. My first is a Flex CMS system called CGCMS, which I will be blogging about later on in the week ( stay tuned ). This is pretty cool for me as it incorporates so many technologies for it to run smoothly and be easily updated from my CMS. All the info is pulled from a database and I can update it on the fly in a matter of seconds. I think I might just do away with XML. Gonna practice more on my PHP and MySQL.

So let me know what you think. Check it out here.

Just something I whipped up trying to build up my portfolio of web elements. This navigation element grabs the urls from an xml file, so you can update the links without having to open the flash file for fast updating of links. Any questions drop me a line.


[kml_flashembed movie=”http://blog.kreativeking.com/downloads/examples/navs/nav1.swf” height=”157.5” width=”560” base=”http://blog.kreativeking.com/downloads/examples/navs/” /]

I’ve been messing around with the new Papervision the past couple days. It seems to still have a couple of bugs but overall is pretty good so far. There is also some extensive documentation now. I posted a couple of days ago a cool transition effect. I thought it would be good practice to port this over to 3D. It was fairly easy, had some hang ups with the materials, but after reading through them and looking up some tutorials, it was a piece of cake. Only problem i am having now is that I can’t seem to make it interactive. I followed what you are supposed to do but it’s not working for me. So to see the effect over again, You have to refresh.

package  {

	import flash.display.Sprite;
	import flash.events.Event;

	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.cameras.*;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.render.BasicRenderEngine;

	public class PaperBase extends Sprite {

		public var viewport:Viewport3D;
		public var renderer:BasicRenderEngine;
		public var default_scene:Scene3D;
		public var default_camera:Camera3D;

		public function init(vpWidth:Number = 550, vpHeight:Number = 400):void {
			initPapervision(vpWidth, vpHeight);
			init3d();
			init2d();
			initEvents();
		}

		protected function initPapervision(vpWidth:Number, vpHeight:Number):void {
			viewport = new Viewport3D(vpWidth, vpHeight, true, true);
			addChild(viewport);
			renderer = new BasicRenderEngine();
			default_scene = new Scene3D();
			default_camera = new Camera3D();
		}

		protected function init3d():void {

		}

		protected function init2d():void {

		}

		protected function initEvents():void {
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}

		protected function processFrame():void {
			// Process any movement or animation here.
		}

		protected function onEnterFrame( ThisEvent:Event ):void {
			processFrame();
			renderer.renderScene(default_scene, default_camera, viewport);
		}

	}

}

package
{
	import com.clementegomez.PaperBase;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.events.Event;
	import org.papervision3d.events.InteractiveScene3DEvent;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.materials.MovieAssetMaterial;
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.objects.primitives.Cube;
	import org.papervision3d.objects.primitives.PaperPlane;
	import org.papervision3d.objects.primitives.Plane;
	import gs.TweenLite;
	import fl.motion.easing.*;
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.view.layer.ViewportLayer;

	public class DocClass extends PaperBase
	{
		public var plane:Cube;
		public var material1:ColorMaterial;
		public var material2:ColorMaterial;
		public var materialList:MaterialsList;
		public var angle:Number = 0;
		public var speed:Number = .1;
		public var radius:Number = 200;
		public var Xrotate:Number = 1;
		public var Yrotate:Number = 1;
		public var cSpeed:Number = .05
		//public var default_camera:Camera3D;


		public function DocClass()
		{
			init();
		}

		override protected function init3d():void
		{
			material1 = new ColorMaterial(0xEF0038, 1, true);
			material1.doubleSided = true;
			material2 = new ColorMaterial(0x3399ff, 1, true);
			material2.doubleSided = true;
			materialList = new MaterialsList();
			materialList.addMaterial(material1, "front");
			materialList.addMaterial(material2, "back");
			materialList.addMaterial(material1, "bottom");
			materialList.addMaterial(material2, "top");
			materialList.addMaterial(material2, "left");
			materialList.addMaterial(material2, "right");
			default_camera.x = 400;

			plane = new Cube(materialList, 20, 30, 20);
			plane.useOwnContainer = true;
			default_scene.addChild(plane);

			drawTiles();

		}

		/*override protected function processFrame():void
		{
			//default_camera.orbit(Yrotate, Xrotate, false, plane);
			//plane.y = 700 + Math.cos(angle) * radius;
			//plane.x = Math.sin(angle) * radius;
			//TweenLite.to(plane, 3, { alpha:0 } );
			//angle += speed;
			//Xrotate += cSpeed;
			//default_camera.orbit((mouseY / stage.stageHeight), (-mouseX / stage.stageWidth), false);

		}*/

		public function drawTiles():void
		{
			var sw:int = stage.stageWidth;
			var sh:int = stage.stageHeight;

			var nx:int = Math.ceil(sw/30);
			var ny:int = Math.ceil(sh/30);

			for(var a:int = 0; a				for(var b:int = 0; b					plane = new Cube(materialList, 40, 40, 40);
					plane.useOwnContainer = true;

					plane.x = b*30;
					plane.y = a*30;
					plane.alpha = 0;

					default_scene.addChild(plane);

					TweenLite.to(plane, .5, {alpha:1, ease:Quadratic.easeOut, delay:((b*2+a)*.01)});
				}
			}
			default_camera.orbit(1, 2, false);
			default_camera.z = 550;
		}
	}
}

Here are some examples of a pretty cool effect that Kheavy taught me. Its a pretty simple effect but it works well if implemented properly. Many thanks Kheavy.

Below are 5 different variations of the same effect. In the last example, I implemented a picture reveal and disappear. Just click on each movie to see the transition. I realized that what majorly affects the outcome of how the transition behaves is what is put into the delay. I only supplied the source for the first transition. The rest are just variations of it. So play around to get some crazy results.

TweenLite is needed for this to work. You can replace the TweenLite code with any Tween Engine of your choice.

Download Source Here

Transitions Example 1

Transitions Example 2

Transitions Example 3

Transitions Example 4

Transitions Example 5

Here is the Code:

import flash.display.Sprite;
import gs.TweenLite;
import fl.motion.easing.*;

var sw:int = 0;
var sh:int = 0;

var currentBG:Sprite;

startUp();

function startUp():void{
	stage.align = StageAlign.TOP_LEFT;
	stage.scaleMode = StageScaleMode.NO_SCALE;

	drawTiles();
	stage.addEventListener(MouseEvent.CLICK, redrawTiles);
}

function redrawTiles(event:MouseEvent):void {
	drawTiles();
}

function drawTiles():void{
	sw = stage.stageWidth;
	sh = stage.stageHeight;

	if(currentBG) {
		removeChild(currentBG);
		currentBG = null;
	}

	currentBG = new Sprite();

	addChild(currentBG);

	var nx:int = Math.ceil(sw/30);
	var ny:int = Math.ceil(sh/30);

	for(var a:int = 0; a		for(var b:int = 0; b			var t:tile = new tile();

			t.x = b*30;
			t.y = a*30;
			t.alpha = 0;

			currentBG.addChild(t);

			TweenLite.to(t, .5, {alpha:1, ease:Quadratic.easeOut, delay:((b*2+a)*.01)});
		}
	}
}

Just another example of the Speed Particles. There so many possibilities.

Just messing around in After Effects to, building off the Speed Particles tutorial from VideoCoPilot. It’s a great effect with a lot of possibilities. Here is one of my tries at it.