Archive for category Flex and ActionScript 3.0

Pre-release of Google Sketchup plugin for 5D animation

This will be a very short post, I am pre-releasing Google Sketchup plugin for 5D animation…called onTime5D.

Below is the link to the rbs script that has to be, copied to the plugin folder of your Sketchup installation. (right click and Save Target As)

http://www.tdteam.com/ontime5d/skp/ontime5d.rbs (Ruby plugin file)

http://www.tdteam.com/ontime5d/skp/bridge.skp (bridge model file – ready for animation)


Update:
Please try this links if you are unable to download from above

http://www.tdteam.com/ontime5d/skp/skp.zip


For a quick look at what this plugin can do, download the Bridge model, that is listed above. All you have to do next (after you have copied the plugin to your plugin Sketchup folder) is open Sketchup, open Bridge file. Go to Plugins toolbar and select OnTime5D. This will open up a webdialog, where you can login with provided credentials and select Alfred Zampa Memorial Bridge project. Then you can skip the 1 step (where you have to bind the Sketchup model and schedule), click Next Step and you can leave animation running default 30 seconds and once again click Next Step.

On the last step you are greeted with a Play/Pause button and below with a chart of expenses (shown only if there is any money data inputted into the schedule). And still further below is the list of all the tasks that are currently under way in the animation.

Just click Play and enjoy, and please provide some feedback.

, ,

7 Comments

5D animation for Sketchup

For the last couple of months, I have been building a Sketchup plugin, that in conjecture with a scheduling software (in this case connected to the schedule maker made in Flex – OnTime) that allows users to create 5D animation of the building process, according to the schedule and the financial data that was inputted in the program. (You can check out 2 videos below that are posted on YouTube)

Let’s just for a second talk about 4D animation in construction. 3D Building Information Model (referred to as BIM) is a rather new paradigm, that is seeing rapid growth in the construction industry. Building Information Modeling is the process of generating and managing building data during its life cycle and Building Information Model encompasses building geometry, spatial relationships, geographic information, and quantities and properties of building components. What that really means is that we are attaching a lot of data or information directly to the 3D model itself. For example, for a given wall in a project we would attach the following information: composition of the wall, how the wall will be built (recipes), all the quantities (area, depth…) as well as connection of the wall to the construction schedule, so we can see when the wall will be build (its start and finish date, duration and so on).

A 4D model incorporates time as added 4th dimension and hence improves quality and accuracy of the entire building life cycle management. Below are listed some of the benefits of using 4D model during construction planning: (as written in this article: Benefits of 4D modeling during construction planning)

  • improved reliability and scheduling efficiency: 4D model enables a project team to easily visualize time constraints and opportunities of improvement in the project schedule
  • 4D model allows the team member to more easily understand the scope of work and access to various resources over a period of time, this allows the member to visually review and evaluate whole construction plan and optimize the resources and labor accordingly
  • Improved communication: During construction phase potential spatial conflict may arise between building components, these can be hard to indentify when coordination is performed using 2D or 3D layouts

4D model provides graphically rich and animated illustration of construction sequence against time.

To get to 5D animation all we do is add money or cost as our 5th variable, so we can track how much money is being spent as the project progresses through its construction process.

, , , , ,

Leave a comment

Get RGB values from colorPicker in Flex

UPDATE: Gavin Lauchlan from croyinternational.com has commented his take on how to get RGB values from colorPicker much easyer, better and faster than the solution I provided below:

var color:uint = picker.selectedColor; //color from colorpicker
var red:Number = ( color >> 16 ) & 0xff; 
var green:Number = ( color >> 8 ) & 0xff;
var blue:Number = ( color & 0xff );

Can it be any easyer than that…thanx again to Gavin for pointing this out!


Last night I wanted to get RGB values from a colorPicker control in Flex. There is one problem though, colorPicker does not have an option to return it’s selected color in RGB format. So I had to get a way to do it myself.

After doing some research online I came up with a solution that is presented here. In the code below we will make a colorPicker that whenever a value changes it is going to show us three values, 1 – it’s selectedColor value, 2 – hexadecimal representation of that color and 3 – color in RGB mode.

Below we can see what the application will look like once we are done:

private function showColor():void{
			var color:String = picker.selectedColor.toString(16);
			if (color.length < 6){
				var razlika:int = 6-color.length;
				var temp_color:String = '';
				for (var i:int=0; i<razlika; i++){
					temp_color += '0';
				}
				temp_color += color;
				color = temp_color 
			}
			var R:Number = parseInt(color.substring(0,2), 16);
			var G:Number = parseInt(color.substring(2,4), 16);
			var B:Number = parseInt(color.substring(4,6), 16);
			value.htmlText = '<b>Picker color value:</b> ' + picker.selectedColor;
			hex.htmlText = '<b>Hexadecimal:</b> 0x' + color;
			rgb.htmlText = '<b>R:</b> ' + R.toString() + ' <b>G:</b> ' + G.toString() + ' <b>B:</b> ' + B.toString() + ' - <b>RGB:</b> '  + '(' + R.toString() + ',' + G.toString() + ',' + B.toString() + ')';
	}

Above is the code that shows us the selected color in different formats. First we assign the selected color of our colorPicker to the value color and we convert it to hexadecimal number with .toString(16). Next we check the size of our hexadecimal number, if it is smaller than 6, we have to add as many zeros in the front so that it will have a length of 6. For example color black, converted to hexadecimal will return 0, we have to make sure we get 000000, so that we will be able to get RGB values. The same goes for blue colors, for example 33, has to be converted to 000033.

Once we have our hexadecimal representation of selected color we can get RGB (red, green, blue) values from that number. We will use a function called parseInt, that returns a number and takes in 2 arguments, first one is a string that has to be converted to number, and second one (that is optional) is numeral system to be used. In our example we take first two characters in hexadecimal number format and parse it from hexadecimal number to a decimal number. The same goes for green (characters 2-4) and blue (characters 4-6).

The last thing we did was to show values to the user.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="#FFFFFF">
<mx:Script>
	<![CDATA[
	private function showColor():void{
			var color:String = picker.selectedColor.toString(16);
			if (color.length < 6){
				var razlika:int = 6-color.length;
				var temp_color:String = '';
				for (var i:int=0; i<razlika; i++){
					temp_color += '0';
				}
				temp_color += color;
				color = temp_color 
			}
			var R:Number = parseInt(color.substring(0,2), 16);
			var G:Number = parseInt(color.substring(2,4), 16);
			var B:Number = parseInt(color.substring(4,6), 16);
			value.htmlText = '<b>Picker color value:</b> ' + picker.selectedColor;
			hex.htmlText = '<b>Hexadecimal:</b> 0x' + color;
			rgb.htmlText = '<b>R:</b> ' + R.toString() + ' <b>G:</b> ' + G.toString() + ' <b>B:</b> ' + B.toString() + ' - <b>RGB:</b> '  + '(' + R.toString() + ',' + G.toString() + ',' + B.toString() + ')';
	}
	]]>
</mx:Script>
	<mx:HBox>
		<mx:Text text="Select Color:" paddingRight="5"/><mx:ColorPicker id="picker" change="showColor()"/>
	</mx:HBox>
	<mx:Text id="value"/>
	<mx:Text id="hex"/>
	<mx:Text id="rgb"/>
</mx:Application>

, , , ,

3 Comments

Added support for SS connections and lag

Program for project scheduling made in Flex

OnTime program for project scheduling is located on this URL: http://www.tdteam.com/ontime/

In couple of previous posts, I was talking about a program I made in Flex for project scheduling and financial analysis of any kind of building project.

This week I added two more things to the program about which I want to talk about in this post. There were 2 connections possible when connecting two tasks together. First one was FS – Finish Start and other one was FF – Finish Finish. Now program also supports SS connection – Start Start.

The other thing that was added is the ability to add lag with connections, so for example if we have 3 tasks: Task 1, Task 2 and Task 3, we can do the following:

  • connect Task 2 with Task 1, so that Task 2 will start 3 days after Task 1 is started, we do this by: 1 SS (3)
  • connect Task 3 and Task 2, so that Task 3 starts the same day as Task 2, we do this by: 2 SS

As you can see from the short example above it is optional to put lag into any connection, if however we want to add it, we have to specify it within brackets, where the number between the brackets will be set as lag in days (so connection 2 (8) will mean we want to connect current task with task with id 2, with connection FS (default connection) and lag of 8 days).

If anyone has any comments about the program, or what you miss in it, please let me know 🙂

, ,

Leave a comment

Select and deselect checkboxes in a dataGrid in Flex

While reading forum http://www.flexdeveloper.eu/forums/mxml/ some one wanted to know how to make the following functionality in Flex.

For each row in a dataGrid we have two checkboxes (in his example one is compulsory and the other optional). What we want is that all the time only one checkbox is checked, so if I check optional to true, I want the other one (compulsory) to be false.

This can be done with an itemRenderer that will function also as our itemEditor. Here is the code of the app:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" initialize="init()">
<mx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;
		[Bindable] public var ac:ArrayCollection = new ArrayCollection;
		public function init():void{
			ac.addItem({id: 1, compulsory: true, optional:false});
			ac.addItem({id: 2, compulsory: false, optional:true});
			ac.addItem({id: 3, compulsory: true, optional:false});
		}
	]]>
</mx:Script>
	<mx:DataGrid dataProvider="{ac}" id="DG">
		<mx:columns>
			<mx:DataGridColumn headerText="ID" dataField="id"/>
			<mx:DataGridColumn headerText="Compulsory" itemRenderer="CheckBoxComponent" 
				editable="true" rendererIsEditor="true" dataField="compulsory"/>
			<mx:DataGridColumn headerText="Optional" itemRenderer="CheckBoxComponent" 
				editable="true" rendererIsEditor="true" dataField="optional"/>
		</mx:columns>
	</mx:DataGrid>
</mx:Application>

So we have an initialize function set to init(), in there we just add arrayCollection ac to dataGrid with id DG as it’s dataprovider. In the DataGrid itself we have 3 columns (id, compulsory and optional), since our itemRenderer will also be our editor of data we set rendererIsEditor=”true”.

Now let’s take a look at the code that is used as our itemRenderer.

<?xml version="1.0" encoding="utf-8"?>
<mx:CheckBox xmlns:mx="http://www.adobe.com/2006/mxml" change="change()">
	<mx:Script>
		<![CDATA[
		import mx.controls.Alert;
			override public function set data( value:Object ) : void {
				super.data = value;
			}
			private function change():void{
				if (data.optional){
					data.optional = false;
					data.compulsory = true;
				} else {
					data.optional = true;
					data.compulsory = false;
				}
				document.ac.refresh();
			}
		]]>
	</mx:Script>
</mx:CheckBox>

Everything here is very straightforward, we first have to get data for the clicked row, we do this by overriding set data function, and in it calling super.data = value.

As this component is based on CheckBox component we add a function to be called when CheckBox is changed (change=”change()”).

Since we know that if we know that every time one checkbox is checked other one has to be unchecked and vice versa.

Inside change() function we check if optional is true, and if it is we set optional to false and compulsory to true, if optional is false we set it to true and compulsory to false.

At the end we have to ensure that dataGrid will show the data we changed so we have to call document.ac.refresh() function, which just says to the arraycollection to refresh it self (along with our changed data).

You can try the app right here: http://www.tdteam.com/work/engineeringtheworld/example.swf

, ,

Leave a comment

Adding and removing event listeners in Flex

When you want to add an action to for example a button control in Flex, you can achieve this in two ways. Let’s suppose you want some action to be performed when user click’s on a button, you can code the function to be called by adding click attribute to Button tag, for example:

<mx:Button label="Button1" click="show_alert1()" id="button1"/> 

When user click button with Label Button1 the show_alert1 function will be executed. There is another way of adding click event to this button.

We can addEventListener to this button. For example we could execute the following code inside creationComplete function:

button1.addEventListener(MouseEvent.CLICK, show_alert1);

There is essentially no difference between the first option and the second option. Unless you want to at a later stage remove click event from this Button.

We can remove events in Flex with removeEventListener, which takes in two arguments (the same ones as addEventListener) and those are:

  • type:String (type of event we want to remove, or add
  • listener:Function (which listener function we want to remove or add)

One thing to remember is that you can only removeEventListener from a control where addEventListener was used. That means that if you add attribute click to Button control, you will not be able to remove click event from it with removeEventListener.

You can take a look at this simple script and see it in action: We have to rows of buttons, in the first row, Button1 had it’s click event added with atturibute click inside of it’s Button Tag, the button in the second row had its click event added with addEventListener.

You can first try and click both Button1 and Button2 buttons and you will see that with both there will be an Alert pop up showing. Now click the Remove Listener 1 button and click Button1 and you will see that Alert box will still show (removing this click event was not successful). Now click Remove Listener 2 button and then click Button 2 and Alert box will not be shown, which means we successfully removed click event from Button2 with removeEventListener.

Application can be found here: http://www.tdteam.com/work/engineeringtheworld/removeEventListener.swf

And it’s source:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" 
	backgroundColor="#FFFFFF" backgroundGradientColors="#FFFFFF #FFFFFF"
	width="400" height="400" creationComplete="add_listener()">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			private function add_listener():void{
				button2.addEventListener(MouseEvent.CLICK, show_alert2);
			}
			private function show_alert1():void{
				Alert.show('Button1 Clicked')
			}
			private function show_alert2(event:MouseEvent):void{
				Alert.show('Button2 Clicked');
			}
		]]>
	</mx:Script>
	<mx:Text text="Try to remove click event for the first and second button"/>
	<mx:HBox verticalGap="10">
		<mx:Button click="show_alert1()" id="button1" label="Button1"/> 
		<mx:Button click="button1.removeEventListener(MouseEvent.CLICK, show_alert1)" 
			label="Remove listener 1"/>
	</mx:HBox>
	<mx:HRule width="350"/>
	<mx:HBox verticalGap="10">
		<mx:Button id="button2" label="Button2"/> 
		<mx:Button click="button2.removeEventListener(MouseEvent.CLICK, show_alert2)" 
			label="Remove listener 2"/>
	</mx:HBox>
</mx:Application>

, ,

Leave a comment

Show hand cursor on any Flex control

It is a little bit strange how Flex acts about showing hand cursor over some controls. For example if you use LinkButton control, than hand cursor will be shown when you hover over the area of the button. But, I don’t know why this does not happen when you use Button control. If you want to show hand cursor when hovering over any control you have to set useHandCursor and buttonMode to true (useHandCursor=”true” buttonMode=”true”).

For Button control we would thus use:

<mx:Button label="Button" useHandCursor="true" buttonMode="true" />

But what happens when you try to use this on Label control, well, I does not work, you have to set mouseChildren to false (mouseChildren=”false”), with this even Label will show hand cursor on mouse over 🙂

<mx:Label text="Label" useHandCursor="true" buttonMode="true" mouseChildren="false"/>

You can see the how hand cursor is shown in the example above by visiting this URL:
http://www.tdteam.com/work/engineeringtheworld/useHandCursor.swf

, , , ,

Leave a comment