Kuler-Splash with Flex

What Kuler-Splash does: Click the button in the far right of the screen it looks like an on button. Then select a style then search for a color or tag name like green or hot. Then select a color scheme when finished it will automatically generate your art unless you are using Virtual Pollock in which case then you will need to draw on the screen.

Kuler-Splash what the heck is it? It is a generative art generation tool. This is only the first version of it and their will be improvements on it. This application was heavily inspired by Chad Udell’s Kuler-Creation. I have changed it significantly I plan to add more changes and keep on changing it. His was created with flash this was created with flex utilizing FlashDevelop as the IDE. I have added different styles to the mix, the ability to scroll through colors and select a color and then the ability to save the image. I will also share the code I used to create this application and advise you to also look into Chad Udell’s example.

Things you will learn from this example:

How to populate a datagrid in flex.
How to use Re-size and Move pro-grammatically.
How to utilize a liquid layout.
How to call a web service and parse it.
How to utilize Local Connection to communicate with a compiled SWF file.
How to encode a JPG file and save it.
How to utilize Flash Develop to create Flex applications.

I have enjoyed working on this project and it is not complete. I have been thinking about adding many features into the second version here are some of my thoughts-> I used Kuler but have also been eying colourlovers.com as well. I might show an example in the near future of it utilizing colourlovers.com. I have also been thinking about researching and building and algorithm that automatically generates a color scheme off of user input these might be features added to the second version. I would also like to add a virtual Picasso that allows for a user to upload a photo and then it will mask the photo then add create geometric shapes and shades to the mask to make it appear to be in a cubist style. I have also been thinking of writing an algorithm that simulates flower generation. This would be done using flint I plan on making it look like an impressionistic painting. Drawing in 3d with papervision3d. I have also been thinking about random 3d shape shifters or 3d transforms. I would like to further advance this project and make it more like Fractal 4D. It has a long ways to go but hopefully it inspires yourself and others to work on the flash platform and create cool new tools! Below I have supplied the code you can download the code and play with it yourself. I will not be adding source for the Pollock and generative parts of the application simply because I need to clean up the code and make it more presentable and optimized you have to cut me some slack because I am a painter by trade and I have had to teach myself all my programming skills but I am getting better and better and I know the best coding from myself is yet to come. If you have any suggestions on improvements ideas etc.. By all means please let me know as I would love to hear them.

I will also be posting more simple examples after my interactive portfolio is complete. Making a flash interface that is very similar to Compiz Fusion is not the easiest thing to do. I have been and will continue to study processing and silverlight. I feel my experiences with programming with actionscirpt have made me a better programmer in general and I am agnostic when it comes to technology I love the effect not necessarily how I get there so you will not here me bash on a platform.

So what else I have I been up too? Still working on my new portfolio the one I briefly demoed in the Flash Develop video it seems like the project that never ends ask my wife. I think she is fed up with it. It is progressing slowly but surely. I am looking forward to completing it! I have managed to teach myself a great deal during the process. I will be creating some video games after my portfolio is complete. Some of the games will be opensouce and I will share the code and some will be closed and I am not at liberty to tell you what they are but they will definitely be cool. Lisa and I will also be vacationing in Germany soon so I am sure I will have hundreds of pictures to share with you soon and lots of new panoramic pictures of Berlin, Munich, etc..

Code for the MXML page:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  xmlns:views="com.views.*" creationComplete="init()">
	<mx:Style source="assets/css/Main.css" />
	<mx:Canvas id="MainConatianerCNV1" horizontalCenter="off" verticalScrollPolicy="off" width="100%" height="100%">
 
 
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" title="Interactive Experiments -> Kuler-Splash" width="100%" paddingRight="0" height="100%"  borderAlpha="0" borderThicknessBottom="0" borderThicknessLeft="0" borderThicknessRight="0" borderThicknessTop="0"  horizontalCenter="off" verticalScrollPolicy="off">
 
	<mx:Script>
		<![CDATA[
			import flash.display.Loader;
			import caurina.transitions.Tweener;
			import mx.core.Application;
			import mx.core.UIComponent;
			import mx.controls.Image;
			import mx.effects.Resize;
			import mx.controls.RadioButton;
			import mx.controls.RadioButtonGroup;
			import mx.managers.PopUpManager;
			import flash.display.Sprite;
			import flash.utils.*;
			import flash.events.Event;
			import flash.net.URLRequest;
			import flash.display.Loader;
			import mx.events.MenuEvent;
			import mx.collections.*;
			import flash.display.MovieClip;
			import flash.net.LocalConnection;
			import DynamicConnection;
			import flash.geom.ColorTransform;
			import flash.geom.Transform;
			import nl.demonsters.debugger.MonsterDebugger;
			import flash.external.ExternalInterface;
			import com.adobe.images.JPGEncoder;import adobe.utils.ProductManager;
			public var RibbonConnection:LocalConnection;
			public var kulerUI_:LocalConnection;
			public var kulerUI_Ribbon:LocalConnection;
			public var kulerRemove_:LocalConnection;
			public var PollockRemove_:LocalConnection;
			public var myColorTransform:ColorTransform = new ColorTransform();
			public var kulerUIDissconnect:DynamicConnection;
            [Bindable]
			private var bPanelStartX:Number = 0;
			private var bPanelEndX:Number = 0;
			private var rs:Resize;
			public var myRibbon:Image = null;
			[Embed(source="assets/swf/kulerSplashLogo.swf")]
            [Bindable]
            public var logo:Class;
			[Embed(source="assets/swf/KulerRibbon.swf")]
            [Bindable]
			public var kulerRibbon1:Class;
			public var kulerRibbonOne:Sprite;
			public var myKulerMov:Image = null;
			[Embed(source="assets/swf/KulerSplash.swf")]
            [Bindable]
            public var myKulerMov1:Class;
			public var myKulerMovOne:MovieClip;
			[Embed(source="assets/swf/pollock.swf")]
            [Bindable]
			public var jackson:Class;
			public var jacksonOne:Sprite;
			public var kulerTag:String = new String();
			public var kulerURL:String = new String();
			public var kulerRequest:URLRequest;
			public var currentTheme:Object;
			public var kulerDataAr:Array = new Array();
			public var kulerDataTransfer:Object = new Object();
			public var kulerLoader:URLLoader = new URLLoader();
			public var mdOBJ:MonsterDebugger;
			public var myKulerStyle:String = new String();
			public var isKulerImage:Boolean = new Boolean();
			public var panelOpen:Boolean = new Boolean(true);
			//set position values for back panel
 
 
			public function movePanel():void
			{
				//set target of move transition
				panelMover.target = backPanel;
				//determine direction of panel based on position
				rs  = new Resize(backPanel);
				if (panelOpen == true) {
					panelMover.duration = 500;
					rs.duration = 500;
					var widthPrOpen:int = 270;
					var widthPrClose:int = 78;
					mainCP.styleName = "backPanelBg"; 
					panelMover.xFrom = bPanelStartX;
					panelMover.xTo = bPanelEndX;
					rs.widthFrom = widthPrOpen;	
					rs.widthTo = widthPrClose;
					panelOpen = false;
					rs.play();
					mainContainer.percentWidth = 100;
					mainContainer.percentHeight = 100;
 
				} else {
					panelMover.xFrom = bPanelEndX;
					panelMover.xTo = bPanelStartX;
					mainContainer.percentWidth = 100;
					mainContainer.percentHeight = 100;
					backPanel.width = 250;
					panelOpen = true;
					backPanel.x = backPanel.x +15;
					mainCP.styleName = "backPanelBg2"; 
				}
				//play transition
				panelMover.play();		
 
			}
 
			public function init():void {
				addEventListener(Event.ENTER_FRAME, initK);
 
			}
			public function initK(initE:Event):void {
				removeEventListener(Event.ENTER_FRAME, initK);
				vbAnimateContainer.visible = true;
				myKulerMov = new Image();
				myKulerMov.source = logo;
				kulerRibbonz.addChild(myKulerMov);
				MainConatianerCNV.setChildIndex(backPanel, numChildren - 1);
				MainConatianerCNV.setChildIndex(mainContainer, 0);
				var stageWidthTwPr:int = this.stage.width * .2;
				bPanelStartX = this.stage.width - 230;
				bPanelEndX = this.stage.width + stageWidthTwPr;	
				movePanel();
			}
			public function styleSelect(evtStyle:Event):void {
			var groupStyle:RadioButtonGroup = evtStyle.currentTarget as RadioButtonGroup;
            myKulerStyle = groupStyle.selection.label;
			trace(myKulerStyle);
			vbStyleControl.visible = false;
			vbStyleControl.width = 0;
			vbStyleControl.height = 0;
			vbControlSearch.width = 200;
			vbControlSearch.height = 160;
			vbControlSearch.visible = true;
			}
 
		]]>
	</mx:Script>
 
	<mx:Form width="100%" height="100%" paddingTop="0" paddingLeft="-20" paddingRight="-20" horizontalGap="0" horizontalCenter="off" verticalScrollPolicy="off" horizontalScrollPolicy="off" >
	<mx:HBox id="MainConatianerCNV" left="0" top="0" paddingLeft="0" paddingTop="0" horizontalGap="0" percentWidth="100" percentHeight="100" paddingRight="-15" backgroundAlpha="0.0" styleName="backCanvasBg" backgroundSize="100%" >
	<mx:Canvas id="backPanel" width="240" height="1000" x="{bPanelStartX}" verticalScrollPolicy="off" backgroundAlpha="0.0"  horizontalScrollPolicy="off"  verticalCenter="0" backgroundSize="160" mouseEnabled="true" >
	<mx:HBox verticalCenter="true"  x="0" width="230" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off" styleName="backPanelBg" id="mainCP" >
	<mx:Button click="movePanel()" verticalCenter="0" width="35" height="1000" alpha="0" buttonMode="true"  />
	<mx:VBox x="0" y="0" width="200" height="120" paddingTop="0" horizontalScrollPolicy="off" verticalScrollPolicy="off" horizontalCenter="on" enabled="true">
		<mx:VBox height="100" width="200" id="vbStyleControl" verticalAlign="top" verticalScrollPolicy="off" horizontalScrollPolicy="off">
			<mx:RadioButtonGroup id="kulerStyle" change="styleSelect(event)"  />
				<mx:RadioButton id="genArt" group="{kulerStyle}" label="Generative Art" selected="false" color="#ffffff" />
				<mx:RadioButton id="vPollock" group="{kulerStyle}" label="Virtual Pollock" selected="false" color="#ffffff" />
				<mx:RadioButton id="genArt3D" group="{kulerStyle}" label="3D Generative Art" selected="false" color="#ffffff" />
		</mx:VBox>	
		<mx:VBox height="160" width="200" id="vbControlSearch" verticalAlign="top" verticalScrollPolicy="off" horizontalScrollPolicy="off" visible="false">
			<mx:Label id="search" color="#ffffff" text="Search Tag or Color:"></mx:Label>
			<mx:TextInput id="input_mc"></mx:TextInput>
			<mx:Button label="Submit" id="submit" click="submitSearch()" />
			<mx:Label id="prompt" color="#ffffff" ></mx:Label>
		</mx:VBox>
		<mx:VBox height="100" width="200" id="vbKulerScroller" visible="false" verticalAlign="top" verticalScrollPolicy="off" horizontalScrollPolicy="off">
		<mx:DataGrid id="myKulerData" width="170" height="80" visible="false" verticalAlign="top"  itemClick="myKulerColor(event)" paddingTop="2">
			<mx:columns>
				<mx:DataGridColumn headerText="Colors" width="76"  id="imgKuler" itemRenderer="mx.controls.Image" dataField="pic" />
			</mx:columns>
		</mx:DataGrid>
		</mx:VBox>
		<mx:VBox height="140" id="vbClearKuler" visible="false"  verticalAlign="top" verticalScrollPolicy="off" horizontalScrollPolicy="off" paddingTop="0">
		<mx:Button label="Save Image" id="clearSave" click="saveImage()" />
		<mx:Button label="Clear Kuler" id="clearKuler" click="clearKulerFunc()" />
		<mx:Button label="Clear Style" id="clearStyleKuler" click="clearKulerStyle()" />
		</mx:VBox>
	 </mx:VBox>		
	</mx:HBox>
	</mx:Canvas>
	<mx:Canvas id="mainContainer" width="100%" height="100%" verticalScrollPolicy="off" horizontalScrollPolicy="off"  top="0" left="0">
	<mx:VBox id="vbAnimateContainer" height="100%"  verticalScrollPolicy="off" horizontalScrollPolicy="off" width="100%" paddingRight="0">
		<mx:VBox height="100%" width="100%"  verticalScrollPolicy="off" horizontalScrollPolicy="off" paddingTop="0" horizontalAlign="left" paddingLeft="0" paddingRight="0" >
		<mx:HBox id="kulerRibbonz" horizontalAlign="left" height="100%" width="100%" verticalScrollPolicy="off" horizontalScrollPolicy="off"></mx:HBox>
		</mx:VBox>
	</mx:VBox>
	</mx:Canvas>
 
	</mx:HBox>
 
	</mx:Form>
	<mx:Script source="Main.as" />
</mx:TitleWindow>
</mx:Canvas>
<mx:Move id="panelMover"   />
</mx:Application>

Code Behind for the MXML page:

 
 
 
public function kulerKillGen():void {
		trace("In Kuler Kill Gen");
		vbClearKuler.width = 230;
		//vbClearKuler.height = 160;
		vbClearKuler.percentHeight = 100;
		vbClearKuler.visible = true;
		kulerUIDissconnect.close();
		kulerUIDissconnect = null;
}
 
public function saveImage():void{
var jpgSource:BitmapData = new BitmapData (myKulerMov.width, myKulerMov.height);
jpgSource.draw(myKulerMov);
 
var jpgEncoder:JPGEncoder = new JPGEncoder(90);
var jpgStream:ByteArray = jpgEncoder.encode(jpgSource);
 
var header:URLRequestHeader = new URLRequestHeader("Content-type", "application/octet-stream");
var jpgURLRequest:URLRequest = new URLRequest("jpg_encoder_download.php?name=sketch.jpg");
jpgURLRequest.requestHeaders.push(header);
jpgURLRequest.method = URLRequestMethod.POST;
jpgURLRequest.data = jpgStream;
navigateToURL(jpgURLRequest, "_blank");
 
}
public function clearKulerStyle():void {
	clearKulerFuncDestroy();
	vbControlSearch.visible = false;
	vbControlSearch.width = 0;
	vbControlSearch.height = 0;
	vbStyleControl.visible = true;
	kulerStyle.selection = null;
	input_mc.text = null;
	myKulerMov.source = null;
	vbStyleControl.width = 230;
	vbStyleControl.height = 100;
	isKulerImage = false;
		try {
		kulerRibbonz.removeAllChildren();	
		jacksonOne = null;
		kulerRibbonOne = null;
		myKulerMovOne = null;
		kulerUI_Ribbon.close();
		kulerUI_.close();
		kulerUIDissconnect.close();
		kulerUI_Ribbon = null;
		kulerUI_ = null;
		kulerUIDissconnect = null;
		}
		catch (errorXI:Error)
		{
			trace("Error Is--->"+ errorXI);
		}
}
public function clearKulerFuncDestroy():void {
	MainConatianerCNV.styleName = null;
	if (myKulerStyle == "Generative Art")
	{
	kulerRemove_ = new LocalConnection();
	kulerRemove_.send("_kulerRemove", "kulerKill");	
	}
	else if (myKulerStyle == "Virtual Pollock")
	{
	PollockRemove_ = new LocalConnection();
	var vPollockKuler:Boolean = false;
	PollockRemove_ .send("_RemovePollock", "RemovePollock", vPollockKuler);
	}
	else
	{
	RibbonConnection = new LocalConnection();
	var GenKuler:Boolean = false;
	RibbonConnection.send("_killRibbon", "killRibbon", GenKuler);
	}
	myKulerData.dataProvider = null;
	kulerDataAr = null;
	kulerDataAr = new Array();
	vbClearKuler.visible = false;
	vbClearKuler.width = 0;
	vbClearKuler.height = 0;
}
public function clearKulerFunc():void {
	MainConatianerCNV.styleName = null;
	if (myKulerStyle == "Generative Art")
	{
	kulerRemove_ = new LocalConnection();
	kulerRemove_.send("_kulerRemove", "kulerRemove");
	}
	else if (myKulerStyle == "Virtual Pollock")
	{
	PollockRemove_ = new LocalConnection();
	var vPollockKuler:Boolean = true;
	PollockRemove_ .send("_RemovePollock", "RemovePollock", vPollockKuler );
	}
	else
	{
	RibbonConnection = new LocalConnection();
	var GenKuler:Boolean = true;
	RibbonConnection.send("_killRibbon", "killRibbon", GenKuler);
	}
	input_mc.text = null;
	myKulerData.dataProvider = null;
	kulerDataAr = null;
	kulerDataAr = new Array();
	vbClearKuler.visible = false;
	vbClearKuler.width = 0;
	vbClearKuler.height = 0;
	vbControlSearch.height = 160;
	vbControlSearch.width = 200;
	vbControlSearch.visible = true;
 
}
public function randRange(min:Number, max:Number):Number {
	var randomNum:Number = Math.floor(Math.random() * (max - min + 1)) + min;
	return randomNum;
}
 
public function submitSearch():void {
	kulerTag = input_mc.text;
	trace(kulerTag);
	if (input_mc.text != "") {
		prompt.text = "Searching Kuler...";
		//prompt.appendText("\nBe Patient. Art takes time. ;-)");
		kulerURL = "http://kuler-api.adobe.com/rss/search.cfm?searchQuery=tag:" + kulerTag + "&key=916691DC2C3FB6CD9556CBAAB1242860";
		kulerRequest = new URLRequest(kulerURL);
		kulerLoader.load(new URLRequest(kulerURL));
		//trace("submitsearch:" + input_mc.text);
 
		// Assign listeners for downloading feed
		 kulerLoader.addEventListener(Event.COMPLETE, feedDownloadedHandler);
		 kulerLoader.addEventListener(Event.INIT, feedStartedHandler);
 
		// Error listeners
		kulerLoader.addEventListener(IOErrorEvent.IO_ERROR, feedDownloadError);
		kulerLoader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, feedDownloadError);
		//
		//Feed Event handlers
		//
 
		//Called when feed retrive begins
	} else {
		//if the user hasn't typed anything in... do this to let them know they need to.
		prompt.text = "Please enter a tag to base your Kuler creation on:";
	}
}
 
	public function feedStartedHandler(event:Event):void {
			trace("Beginning Feed");
	}
 
		// Called when feed has completely downloaded
	public	function feedDownloadedHandler(event:Event):void {
		    if (myKulerMov.source == logo) {
				myKulerMov.source = null;
			}
			if(isKulerImage == false){
			myKulerMov = new Image();
			myKulerMov.x = 0;
			if (myKulerStyle == "Generative Art")
			{
			myKulerMovOne = new myKulerMov1();
			myKulerMov.source = myKulerMovOne;
			kulerRibbonz.addChild(myKulerMov);
			}
			else if (myKulerStyle == "3D Generative Art")
			{
				MainConatianerCNV.styleName = "backGround3d";
				kulerRibbonOne = new kulerRibbon1();
				myKulerMov.source = kulerRibbonOne;
				kulerRibbonz.addChild(myKulerMov);
				kulerRibbonz.visible = false;
			}
			else
			{
				jacksonOne = new jackson();
				myKulerMov.source = jacksonOne;
				kulerRibbonz.addChild(myKulerMov);
			}
			mainContainer.styleName = null;
			MainConatianerCNV.setChildIndex(mainContainer, 0);
			kulerRibbonz.width = this.stage.width;
			kulerRibbonz.height = this.stage.height;
			isKulerImage = true;
			}
			trace("Feed Download");
			prompt.htmlText = "Search Again!";
			prompt.height = 40;
			// use a try-catch block in case
			// xml parsing fails
			try {
				var kulerXML:XML = XML(kulerLoader.data);
				//trace(kulerLoader.data + "Kuler Data ---------------------------");
 
				// if XML succeeded (no error)
				// show it in the output window
				//trace(kulerXML);
 
				//add kuler namespace to the app so we can use the custom rss in the service
				namespace kulerNS = "http://kuler.adobe.com/kuler/API/rss/";
				use namespace kulerNS;
				var kulerLength:int = new int();
				kulerLength = kulerXML..item.length();
				var kulerColors:Array = new Array();
				var kulerAuthors:Array = new Array();
				var kulerTheme:Array = new Array();
				var kulerC1:Array = new Array();
				var kulerC2:Array = new Array();
				var kulerC3:Array = new Array();
				var kulerC4:Array = new Array();
				var kulerC5:Array = new Array();
				for (var i:int = 0; i < kulerLength; i++ )
				{
					var kulerOB:Object = new Object();
					kulerOB = kulerXML..item[i];
					kulerColors.push(kulerOB..themeImage);
					kulerTheme.push(kulerOB..themeTitle.text());
					kulerAuthors.push(kulerOB..themeAuthor.authorLabel.text());
					try{
					kulerC1.push(kulerOB..themeSwatches.swatch[0].swatchHexColor.text());
					kulerC2.push(kulerOB..themeSwatches.swatch[1].swatchHexColor.text());
					kulerC3.push(kulerOB..themeSwatches.swatch[2].swatchHexColor.text());
					kulerC4.push(kulerOB..themeSwatches.swatch[3].swatchHexColor.text());
					kulerC5.push(kulerOB..themeSwatches.swatch[4].swatchHexColor.text());
					}
					catch (error1:Error){
						trace(error1);
					}
 
				}
				trace(kulerColors);
				for (var x:int = 0; x < kulerColors.length; x++ )
				{
				var obj:Object = { };
				try{
				obj.pic = kulerColors[x];
				obj.theme = kulerTheme[x];
				obj.author = kulerAuthors[x];
				obj.kulerc1 = kulerC1[x];
				obj.kulerc2 = kulerC2[x];
				obj.kulerc3 = kulerC3[x];
				obj.kulerc4 = kulerC4[x];
				obj.kulerc5 = kulerC5[x];
				}
				catch(error2:Error)
				{
					trace(error2);
				}
				trace(kulerColors[x]);
				trace(obj.theme);
				kulerDataAr.push(obj);
				}
				trace(kulerDataAr);
				myKulerData.dataProvider = kulerDataAr;
				vbControlSearch.visible = false;
				vbControlSearch.width = 0;
				vbControlSearch.height = 0;
				myKulerData.width = 170;
				myKulerData.height = 100;
				vbKulerScroller.width = 230;
				vbKulerScroller.height = 100;
				myKulerData.visible = true;
				vbKulerScroller.visible = true;
 
			} catch (error:Error) {
				trace("Error parsing XML: "+error);
			}
			//return currentThemeTitle;
		}
 
		public function myKulerColor(event:Event):void {
			movePanel();
			vbAnimateContainer.x = 0;
			vbAnimateContainer.y = 0;
			trace(kulerDataAr[event.currentTarget.selectedIndex].theme);
			try {
			kulerDataTransfer = kulerDataAr[event.currentTarget.selectedIndex];
			kulerUI_ = new LocalConnection();
			var kuler1c:String = new String(kulerDataTransfer.kulerc1);
			var kuler2c:String = new String(kulerDataTransfer.kulerc2);
			var kuler3c:String = new String(kulerDataTransfer.kulerc3);
			var kuler4c:String = new String(kulerDataTransfer.kulerc4);
			var kuler5c:String = new String(kulerDataTransfer.kulerc5);
			trace(kulerDataTransfer+'------------------kulerDataTransfer------------------------>>');
			var kulerTheme:String = new String(kulerDataTransfer.theme);
			kulerUI_.send("_kulerGen", "kulerGen1", kulerDataTransfer, kuler1c, kuler2c, kuler3c, kuler4c, kuler5c, kulerTheme);
			if (myKulerStyle == "3D Generative Art")
			{
			kulerUI_Ribbon = new LocalConnection();
			kulerUI_Ribbon.send("_kulerGenRibbon", "RibbonCall");
			kulerRibbonz.visible = true;
			}
			trace("Kuler Called ------------------------------!");
			myKulerData.visible = false;
			vbKulerScroller.visible = false;
			myKulerData.width = 0;
			myKulerData.height = 0;
			vbKulerScroller.height = 0;
			vbKulerScroller.width = 0;
			kulerUIDissconnect = new DynamicConnection();
			kulerUIDissconnect.client = this;
			kulerUIDissconnect.connect("_kulerKillGen");
			trace("Opened ---- _kulerKillGen");
			myKulerData.dataProvider = null;
			kulerUI_.close();
			kulerUI_ = null;
 
			}catch(error3:Error) 
			{
				trace("myKulerColor:----------------- "+error3);
			}
		}
 
		// Called if feed download fails, displays the error message
		public function feedDownloadError(event:Event):void {
			trace("Error during download: "+event);
			prompt.text = "Sorry, it appears there was an error in the search process. Please bear with us. This is beta software ;-)";
		}

I have modified this Ribbon Class form Papervision3d to accept kuler colors. Papervision3d Ribbon Class. Notice how I am using local connection to communicate with the compiled swf. You don’t have to do it this way but this is how I chose to work with this application. Local Connection is very handy when passing jobs of in between swf files.
KulerRibbon:

package  
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.BlendMode;
	import flash.display.MovieClip;
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.filters.BlurFilter;
	import flash.geom.ColorTransform;
	import flash.geom.Point;
	import gs.easing.Linear;
	import gs.TweenMax;
	import org.papervision3d.cameras.FreeCamera3D;
	import org.papervision3d.core.geom.renderables.Vertex3D;
	import org.papervision3d.lights.PointLight3D;
	import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.Papervision3D;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.view.Viewport3D;
    import flash.net.LocalConnection;
	import org.papervision3d.Ribbon3D;
	import DynamicConnection;
	public class kulerRibbon extends Sprite
	{
 
	//	————————————————————————————————————————————————————————————	————
	//	MEMBER										CLASS / DATATYPE	INIT
	//	————————————————————————————————————————————————————————————	————
		public var RibbonConnection:DynamicConnection;
		public var kulerUIDissconnect_:LocalConnection = new LocalConnection();
		public var kulerRemove:DynamicConnection = new DynamicConnection();
 
		private static const RIBBONS:				int 				= 8;
		private static const UNIVERSE:				int 				= 1000;
		private static const EASING:				int 				= 80;
		public var COLOURS:Array;
 
		private var scene1:							Scene3D;
		private var camera1:						FreeCamera3D;
		private var viewport1:						Viewport3D;
		private var renderer1:						BasicRenderEngine;
		private var render1:							BitmapData;
		private var scanlinesTexture:				BitmapData;
		private var cameraFollow:					DisplayObject3D;
		private var cameraTarget:					DisplayObject3D;
		private var cameraLookAt:					DisplayObject3D;
		private var scanlines:						Shape;
 
	//	————————————————————————————————————————————————————————————	
 
		private var ribbons:						Array 				= new Array();
		private var targets:						Array 				= new Array();
		private var blurring:						BlurFilter 			= new BlurFilter( 10, 10, 3 );
 
	//	————————————————————————————————————————————————————————————
	//													 CONSTRUCTOR
	//	————————————————————————————————————————————————————————————
      [Embed(source="background.swf")]
      public var background3D:Class;
	  public var background:MovieClip = new background3D();
	  public var kulerUI:DynamicConnection;
	  public var kulerUIRibbon:DynamicConnection;
	  public var kuler1a:String = new String();
	  public var kuler2a:String = new String();
	  public var kuler3a:String = new String();
	  public var kuler4a:String = new String();
	  public var kuler5a:String = new String();
	  public var kuler6a:String = new String();
	  public var kuler7a:String = new String();
	  public var kuler8a:String = new String();
	  public var kuler9a:String = new String();
	  public var myColors1:Array = new Array();
	  public var myColors2:Array = new Array();
	  public var myColors3:Array = new Array();
	  public var myColors4:Array = new Array();
	  public var myColors5:Array = new Array();
	  public var myColors6:Array = new Array();
	  public var myColors7:Array = new Array();
	  public var myColors8:Array = new Array();
	  public var myColors9:Array = new Array();
 
 
		public function kulerRibbon() 
		{	
			addEventListener(Event.ENTER_FRAME, initRibbon);
		}
 
		public function initRibbon(initRibbonKuler:Event):void {
			removeEventListener(Event.ENTER_FRAME, initRibbon);
			background.width = this.stage.width;
			background.height = this.stage.height;
			addChild(background);
			try {
 
					RibbonConnection = new DynamicConnection();
					RibbonConnection.connect("_killRibbon");
					trace("I am Connected to _killRibbon");
					kulerUIRibbon = new DynamicConnection();
					kulerUIRibbon.connect("_kulerGenRibbon");
					trace("I am Connected to _kulerGenRibbon");
					kulerUI = new DynamicConnection();
					kulerUI.connect("_kulerGen");
					trace("I am Connected to _kulerGen");
			}
			catch(error8:Error)
			{
					trace(error8 + "Already Connected to _killRibbon----")
			}
			RibbonConnection.killRibbon = function(GenColor:Boolean):void {
					trace("Killing Ribbons");
					removeEventListener( Event.ENTER_FRAME, render3D );
					camera1 = null;
					renderer1 = null;
					viewport1 = null;
					scene1 = null;
					ribbons = null;
					COLOURS = null;
					if (GenColor == false)
					{
					kulerUI.close();
						kulerUI = null;
					kulerUIRibbon.close();
					kulerUIRibbon = null;
					RibbonConnection.close();
					RibbonConnection = null;
					}
				}
			kulerUI.kulerGen1  = function(objK:Object, kuler1:String, kuler2:String, kuler3:String, kuler4:String, kuler5:String, kulerTheme:String):void {
						COLOURS = new Array();
						myColors2 = new Array();
						myColors3 = new Array();
						myColors4 = new Array();
						myColors5 = new Array();
						myColors6 = new Array();
						myColors7 = new Array();
						myColors8 = new Array();
						myColors9 = new Array();
						myColors1.push("0x"+kuler1);
						myColors1.push("0x"+kuler2);
						myColors2.push("0x"+kuler2);
						myColors2.push("0x"+kuler3);
						myColors3.push("0x"+kuler3);
						myColors3.push("0x"+kuler4);
						myColors4.push("0x"+kuler4);
						myColors4.push("0x"+kuler5);
						myColors5.push("0x"+kuler1);
						myColors5.push("0x"+kuler2);
						myColors6.push("0x"+kuler2);
						myColors6.push("0x"+kuler3);
						myColors7.push("0x"+kuler3);
						myColors7.push("0x"+kuler4);
						myColors8.push("0x"+kuler4);
						myColors8.push("0x"+kuler5);
						myColors9.push("0x"+kuler5);
						myColors9.push("0x"+kuler1);
						COLOURS.push(myColors1);
						COLOURS.push(myColors2);
						COLOURS.push(myColors3);
						COLOURS.push(myColors4);
						COLOURS.push(myColors5);
						COLOURS.push(myColors6);
						COLOURS.push(myColors7);
						COLOURS.push(myColors8);
						COLOURS.push(myColors9);
						trace(COLOURS + "-----------------------Color Pollock");
					}	
			kulerUIRibbon.RibbonCall = function():void {
				trace("Ribbon Function Called and In----------------");
				try {
				if (ribbons == null)
				{
					ribbons = new Array();
 
				}
				addEventListener( Event.ENTER_FRAME, render3D );
				Papervision3D.VERBOSE = false;
				init3D1();
				create3DObjects();
				createScanlines();
				drawScanlines();
				kulerUIDissconnect_.send("_kulerKillGen", "kulerKillGen");
				kulerUIDissconnect_.close();
				}
				catch (error8:Error) {
					trace(error8);
				}
			}
		}
 
	//	————————————————————————————————————————————————————————————
	//														 METHODS
	//	————————————————————————————————————————————————————————————
 
		private function init3D1():void
		{
			scene1 = new Scene3D();
			camera1 = new FreeCamera3D( 16, 40 );
			renderer1 = new BasicRenderEngine();
			viewport1 = new Viewport3D( this.stage.stageWidth, this.stage.stageHeight, true );
			//viewport1 = new Viewport3D( stage.stageWidth, stage.stageHeight, true );
			viewport1.filters = [ new BlurFilter( 2, 2, 2 ) ];
			render1 = new BitmapData( this.stage.stageWidth, this.stage.stageHeight, true, 0x00000000 );
			//render1 = new BitmapData( 930, 600, true, 0x00000000 );
			addChild( new Bitmap( render1 ) );
		}
 
		private function create3DObjects():void
		{
			var light:PointLight3D = new PointLight3D();
			scene1.addChild( light );
 
			var i:int;
 
			for ( i = 0; i < RIBBONS; i++) 
			{
				var material:FlatShadeMaterial = new FlatShadeMaterial( light, COLOURS[i][0], COLOURS[i][1] );
				material.doubleSided = true;
 
				var ribbon:Ribbon3D = new Ribbon3D( material, 20 + ( i * 6 ), 140 );
				scene1.addChild( ribbon );
				ribbons.push( ribbon );
 
				if ( i == 0 ) continue;
 
				ribbon.x = random( -UNIVERSE, UNIVERSE );
				ribbon.y = random( -UNIVERSE, UNIVERSE );
				ribbon.z = random( -UNIVERSE, UNIVERSE );
			}
 
			for ( i = 0; i < RIBBONS; i++) 
			{
				var target:DisplayObject3D = new DisplayObject3D();
				targets.push( target );
				tween( target );
			}
 
			cameraFollow = new DisplayObject3D();
			cameraTarget = new DisplayObject3D();
			cameraLookAt = targets[0];
			tween( cameraFollow );
		}
 
		private function createScanlines():void
		{
			scanlines = new Shape();
			scanlinesTexture = new BitmapData( 1, 2, true, 0x66ffffff );
			scanlinesTexture.setPixel32( 0, 0, 0x00000000 );
		}
 
		private function drawScanlines():void
		{
			scanlines.graphics.clear();
			scanlines.graphics.beginBitmapFill( scanlinesTexture );
			//scanlines.graphics.drawRect( 0, 0, 1000, 700 );
			scanlines.graphics.drawRect( 0, 0, this.stage.stageWidth, 800 );
			scanlines.graphics.endFill();
		}
 
		private function tween( object:* ):void
		{
			if ( object == cameraFollow && Math.random() < .3)
			cameraLookAt = randomElement( targets );
 
			var b:Array = new Array();
			var d:int = random( 9, 18 );
 
			for (var i:int = 0; i < d * .6 << 0; i++) 
			b.push( {
					/*x:random( -UNIVERSE, UNIVERSE ),
					y:random( -UNIVERSE, UNIVERSE ),
					z:random( -UNIVERSE, UNIVERSE )*/
					x:0,
					y:random(1000),
					z:10
					} );
 
			TweenMax.to( object, d, {
									/*x:random( -UNIVERSE, UNIVERSE ),
									y:random( -UNIVERSE, UNIVERSE ),
									z:random( -UNIVERSE, UNIVERSE ),*/
									x:0,
									y:random(3000),
									z:900,
									//rotation:360,
									ease:Linear.easeNone,
									bezierThrough:b,
									onComplete:tween,
									onCompleteParams:[ object ]
									} );
 
			if ( object is Ribbon3D )
			TweenMax.to( object, d, { width:random( 2, 90 )/*, rotationX:360, rotationZ:360*/} );
		}
 
	//	————————————————————————————————————————————————————————————
	//														  EVENTS
	//	————————————————————————————————————————————————————————————
 
		private function render3D( e:Event ):void
		{
			for (var i:int = 0; i < ribbons.length; i++)
			{
				ribbons[i].x += (targets[i].x - ribbons[i].x) / EASING;
				ribbons[i].y += (targets[i].y - ribbons[i].y) / EASING;
				ribbons[i].z += (targets[i].z * Math.PI * i - ribbons[i].z) / EASING;
				ribbons[i].draw();
			}
 
			cameraTarget.x += (cameraLookAt.x - cameraTarget.x) / (EASING * 2);
			cameraTarget.y += (cameraLookAt.y - cameraTarget.y) / (EASING * 2);
			cameraTarget.z += (cameraLookAt.z * Math.PI * i - cameraTarget.z) / (EASING * 2);
 
			camera1.x += (cameraFollow.x - camera1.x) / (EASING * 2);
			camera1.y += (cameraFollow.y - camera1.y) / (EASING * 2);
			camera1.z += (cameraFollow.z * Math.PI * i - camera1.z) / (EASING * 2);
 
			var d:Number = camera1.distanceTo( ribbons[0] ) / UNIVERSE;
			var f:Number = d * 25;
 
			camera1.focus += ( f - camera1.focus ) / EASING;
 
			camera1.lookAt( cameraTarget );
 
			renderer1.renderScene( scene1, camera1, viewport1 );
			//var bg:String = "background.jpg" ;
			var bg:MovieClip = new MovieClip();
			bg.addChild(background);
			render1.draw(  bg );
			render1.draw( viewport1 );
 
			/* Some cool but processor hungry FX*/
			render1.applyFilter( render1, render1.rect, new Point(), blurring );
			render1.draw( viewport1, null, null, BlendMode.MULTIPLY );
			render1.draw( scanlines, null, null, BlendMode.OVERLAY );
			render1.draw( background, null, null, BlendMode.DARKEN );
 
		}
 
	//	————————————————————————————————————————————————————————————
	//													   	  HELPER
	//	————————————————————————————————————————————————————————————
 
		private function random( min:Number, max:Number = NaN ):Number
		{
			if (isNaN(max)) { max = min; min = 0; }
			return Math.random() * (max - min) + min;
		}
 
		private function randomElement( array:Array ):*
		{
			return array[ random( array.length ) << 0 ];
		}
 
	}
 
}

Code for download click here!
See Kuler-Splash click here!

Kuler-Splash with Flex

Sites

Brendon Smith Social Networks

Recent Comments

Photos

Twitter