Step 1: The Design

This was the first time I had ever gone into such depth for designing a pumpkin. I went through the full design-process of conceptualization to production in order to come up with a great creation. Once I had determined what I wanted to create, I rounded up some images into Photoshop in order to fully understand where the design was going to take me. I didn’t spend too much on the rough, but it did help to get a good idea how to execute the final design.

Step 2: Materials

Once I had an idea solidified, it was easy for me to determine what materials I needed to round up to build the pumpkin. I knew I wanted carrots for the hair and a radish for the nose, Dom said he was going to provide the molded teeth, but I was quite certain on some of the finer details until I experimented what was going to work or not. I ended up using partially peeled radishes for the eyes. As it turned out, they were prefect for the job.

Finalization

Quite a bit of time was spent on the mouth to make it look just right. The teeth molds that Dom brought in were highly realistic and help give it more life. As I recall, I believe they were molds of his own teeth.

Dom Albrecht deserves much of the props for bringing my concepts to fruition. His air-brushing skills were phenomenal. He had great expertise in face-makeup and is currently a tattoo artist. He brought the realism to the design. We both spend a great deal of time finalizing the details. We added KY-jelly to the mouth to give it more life. In all we had great fun coming up with a memorable jack-o-lantern that gained quite a bit of response from our co-workers.

View the demo to see the functioning drop-down in action to get an idea what I will be explaining.

Getting Started

First off, you will need your content marked-up using good semantic standards. It is best practice to use unordered lists for navigation mark-up. I use “.nav” class for the base navigation class name and “.subnav” for any subsequent-level navigation. I sometimes use an ID rather than a class for the base navigation, but if you wish to reuse the drop-down jQuery for multiple navigation bars on one page, then keeping them more general is beneficial for code reuse.

The CSS

You can make the lists look however you please within the CSS; for simplicity, the design in my tutorial has basic styles applied to it. Positioning is really the key to making your drop-down not only look right, but also function properly as well. My styles use direct selectors in my example, but you may need to use a workaround if you need it to work in older browsers (such as IE). All of the subnav items have an absolute position to pull them out of the regular flow of the document. Every subnav after the first has an additional position offset (left:5em) to push it over from its parent element. It also has a negative margin so that the first item will base-align with its parent. I have also set up “activeList” classes that get applied to the list through the jQuery when it has been moused-over (hover), and then removed upon mouse-out.

Building the jQuery

Applying the jQuery to the lists to make the drop-downs functional is easier than you might think because of how powerful jQuery is. One of the most important parts about jQuery is understanding how to leverage the power of selector use. Any general selector look-up will apply to all elements found within that selector tree. For example $(".nav li") will search find every and all “li” elements within the “.nav” class. By using the children() method, jQuery will only select the direct descendants of the parent that will be shown later.

Source code

$(".nav li").hover(function() { // selects every "li" element found within ".nav"
     // hover state
}, function(){
     // out state
})

One important part of this jQuery is that it uses setTimeout() to not immediately trigger the slideDown() of the menu so that if the user accidentally rolls away from the menu prematurely, it will not disappear. So, the first thing is to set up a timeout variable and then bind it to the element being hovered over by using the jQuery data method. If timeout exists when hovered over, then the timeout is reset and the subnav will not reset:

Source code

...
          var timeout = $(this).data("timeout");
          if(timeout) clearTimeout(timeout);

After the timeout is set the animation in can be set. This can be whatever method you find suitable for your design. I have used slideDown in my example, but there are many ways to bring in your subnavs such as fadeIn(), show(), animate(), to name a few. Once the animation is complete you can trigger an event handler. I add a class to the parent “li” to give it separate styling to indicate it is active.

Source code

$(this).children("ul.subnav").slideDown(350, function(){
               // onComplete
               $(this).parent().addClass('activeList')
          })

On the out state of the hover (mouseOut), the timeout data bound to the button is triggered through a proxy. Without a proxy, context of the timeout points to a different object reference and cannot clear the original timeout object. If the timeout isn’t cleared, then its associated event handler will still trigger whether or not the user’s cursor slips off and on the intended button. In other words when you roll in and out of a button quickly the timeout never gets reset and the out state event handler may trigger prematurely. So on mouseOut you will see:

Source code

...
          // out state
          $(this).data("timeout", setTimeout($.proxy(function() {
                 // animate out
          }, this), 300)); // timeout set for 300 milliseconds

Once the proxy triggers its event handler, the animation out will occur. Again, the animation here can be set to the desired design for the site. I have used slideUp(), but you can play with other ways to animate it out. Once the animation is complete, you can trigger another handler to remove the activeList class that was placed there previously.

Source code

$(this).children("ul.subnav").slideUp(200, function(){
  // onComplete
  $(this).parent().removeClass('activeList')
})

Here is the code in it’s entirety that I keep in a separate .js file:

Source code

// JavaScript Document
function setDropDown(){
	$(".nav li").hover(function() {
		var timeout = $(this).data("timeout");
		if(timeout) clearTimeout(timeout);
		$(this).children("ul.subnav").slideDown(350, function(){
			// onComplete
			$(this).parent().addClass('activeList')
		})
	}, function() {
		// out state
		$(this).data("timeout", setTimeout($.proxy(function() {
			$(this).children("ul.subnav").slideUp(200, function(){
				// onComplete
				$(this).parent().removeClass('activeList')
			})
		}, this), 300)); //timeout set for 300 milliseconds
	});
}

Endless Possibilities

There you go. In just a few lines of code, you can easily implement a drop-down menu that will work with an infinite number of subnav elements you have nested within your navigation. Now it is your turn to give it a try. There are endless design possibilities once you figure the basics of implementing the code. Hopefully I have broken it down enough to make more sense of it. If you have any questions, please feel free to leave a comment.

Photo by Nick Haroldsen

We have all run into that project where the design gets so rushed that important steps to establish a great design get forgotten. Many clients undervalue the amount of necessary research it takes before the pencil even hits the sketchpad. The better we are with research, listening, and communicating, the better our designs will be; ultimately, giving more value to our work.

Most of the work I do is involved with creating/developing designs for companies with a relatively established brand. Designing for a new brand has similar design processes, but here I will focus mainly on research and designing for established brands. These four steps are key to creating a better design:

1. Research the Brand
2. Research the Audience
3. Thorough Listening
4. Communicating the Design

Research the Brand

I know I’ve been guilty of assuming that I know what the client wants before doing the proper research. I have caught myself needing to take a step back before jumping right into the design mode of the project. Without proper and thorough research, you will never discover the necessary things to not only make the design work aesthetically, but also enhance the user’s experience.

One time I was handed a design from a client who essentially said, “We need to save on cost, so will you please take our branding guidelines and this design (that the HR person threw together) and create a site for us?” When I first looked at the design, I could tell someone who didn’t understand good design put the layout together. I then proceeded to do some research on the client and their branding guidelines. The client didn’t even follow their own branding guidelines. Within the guidelines were specific standards on grids used for their website, it also contained strict color and imagery usage on the page; simple things were missed because someone didn’t take the time to research their own brand.

You will hear many times, “Think outside the box,” but in order to do that, one must first understand the box. The rudimentary rules of an established brand cannot be ignored. In order to understand the brand, it is important to do the necessary research: dig through annual-reports; learn the corporate values, mission, etc. Discover who the company is and what they represent. It is thorough research and understanding the minute details of the company that will help translate the communication across the campaign.

Research the Audience

Beyond searching through the branding guidelines, thorough research needs to be made on the corporate culture and clients. Learning about the clients and/or intended audience is essential to understanding the voice or tone to be communicated. It is important to keep the user’s experience (UX) in mind. Many articles are written on UX and catering to the needs of the intended audience. Discover and understand what works best for the intended user. If you don’t understand who will be using the site, viewing your collateral, or whatever, then you will not be able to cater to their needs nor speak on their level and fall flat in the design.

Thorough Listening

Research includes verbal discussions with people at the company. It is helpful that sound research on the company has been done prior to the discussion with company personnel. Having a good background on the company can lead to a more productive discussion on branding specifics and company culture. I have foolishly gone into meetings where no research on the company was made prior to the meeting. Many of the questions that were asked were branding questions that could have easily been found in their branding guideline manual. It was difficult to know what questions to even ask and it made us look and feel clueless and unprofessional.

When discussing project details with the client, it is essential that you really listen. At times the client may not be able to verbalize what they want. Other times they may be overly specific on what they want, but you know that their direction either will not work esthetically, or will not fit well with their brand nor communicate well to their audience. As you are sensitive to their feedback and utilize your expertise to deliver design that fits their brand, you will discover ways that will propel the design to greater levels than neither you nor the client could have originally conceptualized.

Communicating Your Design

Once all essential information is gathered through intense research, the design becomes much more natural. It shouldn’t feel forced or awkward since it is playing off of what has already been established and discussed in the research stage. Certain aspects of your designs may need explained as to how/why certain decisions were made; other times the designs will speak for itself as it fits well within their brand and/or messaging campaign. If you cannot communicate why certain things function or work better the way it was designed to, then you do not understand the brand or the goals behind the campaign. This lack of understanding can lead to uninformed decisions, which will ultimately stifle the design and even your credibility.

Most clients that I have come across appreciate my expertise, especially when I am able to confidently communicate with them how and why design decisions were made, how it matches their brand and goals, and how it will speak to their audience to reinforce their company brand. There is no better feeling when communicating with the client about the design, as when they say, “You really know us. You hit it right on the head.

Conclusion

We must take the time to understand the client and their needs. The key to successful design isn’t simply in the thumb-nailing, drafting, or production stage; I have found that great design is preceded by having a good understanding about all aspects of the company the design is communicating for.

Passing the Parameters to Flash

In my last post I already went into “Using JavaScript to Communicate With Flash”, so I will not go into detail here. Basically, the HTML data/content can be passed into the Flash by calling a Flash method with JavaScript with the desired parameters passed through. Once the desired content is passed into the Flash through the Flash method call, all the print setup work done through the Flash.

Printing With Flash

Printing within Flash is pretty straight forward. First, create a Sprite that will hold your printed content with the desired dimensions, design, and layout. I find that I typically don’t want to mess with the he original Flash content if it must keep its display on the screen the way it is currently displaying. However, the content may need to display slightly differently on the printed page that it does on the screen. I have found that either the original Flash movie must be cloned, reloaded, or captured as a Bitmap and passed into a printPage sprite.

Capturing the Flash content as a bitmap is one way to get the current state of the animation without having to reload any of the animation or other content if your movie is complex. However, by using a bitmap, you will lose the vector qualities Flash can bring and will pixelate your final print output. One way I found to increase the quality of a vector-to-bitmap graphic is to double the size of the vector movieclip before capturing the bitmap of the displayObject, and then reducing the size of the bitmap, will give you more pixels to print from, thus increasing your print quality. Capturing a bitmap may not be necessary; If the display object is simple enough to add straight to the print sheet, then do it as it will retain all vectors that will print much more cleanly.

Once you have the content for your print-job laid out the way you want, pass that Sprite into your PrintJob object. The PrintJob object will handle all the work for you. The challenging part is handling the page if it goes beyond the printable space. Either you must truncate the content or loop through the content to create new Sprites for each new page that needs to print. With my example, the content was intended for a single page, but at times the content stretched beyond the printable area, I was then forced to truncate some of the text if it went beyond the limits of the page. The other option was to decrease the font size until it fit, but we decided on the former solution for this project to keep all text sizes consistent.

Another consideration when printing is accounting for landscape vs vertical layout the user can select when printing. You may need additional logic to change the layout to fit the content differently according to what gets selected:

Source code

if (myPrintJob.start()) {
	var mw:Number;
	var mh:Number;
	if (myPrintJob.orientation=="portrait"){
		mw=MAX_WIDTH //
		// do something
	}else if (myPrintJob.orientation=="landscape"){
		mh=MAX_WIDTH; // mh becomes the MAX_WIDTH;
		mw=MAX_HEIGHT // mw becomes the MAX_HEIGHT;
		// do something else
	}
}

Handling Multiple Pages

Perhaps you need to print multiple pages. Lets say you have a Flash gallery that you want to print every item and description in a format that is suitable for viewing on a printed page. This may mean that the format for the print-job is different from what is seen on the screen. The best way I have found to do this is to loop through all the items and basically recreate the pages for print. This means reloading images and adding them to a new page. If the content goes beyond the maxHeight of the page, then you create a new sprite to push that content to. Here is some sample code that does this:

Source code

...
// within loop
if (image_mc.y + image_mc.height>MAX_HEIGHT-image_mc.height){
	_sheetIndex++;
	startY= 25;
	_sheet = new Sprite();
	addChild(_sheet)
	_pagesToPrint_array.push(_sheet)
}
_sheet.addChild(image_mc);
if (curIndex>=imagesLength){
	printSheet()
}
private function printSheet():void{
	var pl:int = _pagesToPrint_array.length;
	if (myPrintJob.start()) {
		for (var v=0; v<pl; v++){
			myPrintJob.addPage(_pagesToPrint_array[v], null, null, 1);
		}
		myPrintJob = null;
		removeAll() // clear all _sheet(s) once printed
	}
}

If you have quite a bit of content that needs created for the printed sheets, it will take a bit of time to compile the job. It is a good idea to have a dialogue to tell the user it is compiling the print. I have found it useful when printing multiple pages with many images that need loaded.

Below is a good example of a gallery I developed that prints the items. Note that the print button is in HTML that passes to the Flash with JavaScript. All the images are reloaded into holder sprites when printed and then disposed of once the print is complete.

Conclusion

There may be other solutions that could work, but this customized solution gave me the control that I needed to output the content in the desired fashion with direct control over the elements. Printing a page within the Flash environment works well and gives you greater control than simply printing through the browser.

Lately I have been working on this project that requires JavaScript to communicate with the Flash on the page. It is something that I have done in the past, but this time I was running into issues that were giving me problems. Sometimes the issues were in all browsers, but many times the errors were only showing up in Internet Explorer. Here I will go through the steps to properly set up your Flash and JavaScript and explain a couple ways to avoid seemingly erroneous errors so communication between the to can take place.

Interact With the Example

Test it out for yourself below to discover the capabilities of communicating back and forth between Flash and JavaScript, or launch example in a new page. Further explanation is given further below.

Input HTML text in the box below:

Setting Up the Flash

If you are using an external class, the package for ExternalInterface is import flash.external.ExternalInterface; To send a call from Flash to Javascript, use ExternalInterface.call('jsFunction', params). Calling a Flash method from Javascript requires a registration of the method through ExternalInterface.addCallback('jsCallerFunction', flashFunctionName). Registration of the method can take place at any time, but needs to be registered before the user has access to it from within the JavaScript. It is a good idea to check to ensure the ExternalInterface is available before running such functions as well as use catch exceptions to avoid any uncaught errors:

Source code

if (ExternalInterface.available) {
	try{
		ExternalInterface.addCallback('setFlashText', setText);
		//ExternalInterface.call("printCard");
	}catch (error:Error) {
		//trace(error)
	}
}

Setting Up the JavaScript

The best way to set up your Flash Object on your page so that all browsers read it the same is through SWFObject. If you code your object directly, the Flash method set up in the Flash through the ExternalInterface may not get registered properly and therefore not available for use in IE. There are other scripts out there that help with this issue, but I have found that SWFObject works the best and is now standard use.

Since IE views the Flash Object differently from other browsers, it is necessary to do a bit of logic when referencing the SWF to call the desired Actionscript method:

Source code

function getFlashMovie(movieName){
	var isIE = navigator.appName.indexOf("Microsoft") != -1;
	return (isIE) ? window[movieName] : document[movieName];
}

Once that is ready you can call your ActionScript by using the name of the SWF object used:

Source code

<code>
function sendToFlash(val){
	getFlashMovie('jsFlash').setFlashText()
}
</code>
<input name="submit" type="button" value="Send Text To Flash Below" onclick="sendToFlash(this.form.textToFlash.value)"  />

Call JavaScript From Flash

This call is even simpler than the previous as it requires less to reference the script. It is directly accessed by using ExternalInterface.call("jsFunction", params). Where “jsFunction” is the string name of the JavaScript method to be called. As long as the jsFunction method is set up somewhere within your JavaScript, it is easily accessed.

Avoiding Pitfalls

There are a couple things I have found that can cause you major head when trying to communicate with the Flash through JavaScript.

1. First, IE will not allow the Flash to be nested within any <form> tags. This is a known issue with Adobe and can be a pain to workaround if your SWF needs to be nested within a form. If the form can go outside the SWF Object, then do it, otherwise IE will give you errors when you call the Flash Method from the JavasScript saying it is not available.
2. There are certain sandbox security issues when dealing with ExternalInterface to stop malicious scripting. This means that in order to test these methods out may (however not always) require posting on an external server to pass values to and from Flash.
3. One other issue that I have run into occurs when passing parameters/arguments to the Flash; make sure they are valid parameters that are available in the registered Flash’s method. If the parameters are null or invalid, your Flash will throw an error and may be difficult to track down. This may go without saying, however, this has happened to me where I was thinking the Flash wasn’t registering method through the ExternalInterface class, when it was simply a bad parameter that I was passing through and the DOM didn’t know what to do with it.

Conclusion

Communication with Flash through JavaScript is highly useful and can done easily if you understand the capabilities and limitations. If you have any questions about its use, please feel free to leave a comment below.

This clock contains four images, one GIF for the background graphics and three transparent PNG’s for the hour, minute, and second hands where the rotation point is exactly in the center of the graphic. The position for the CSS was placed so all the images stack directly on top of one another. It then uses a setInterval to check the time every second and rotate the hands accordingly. The logic simply breaks down the angle the hand needs to be. Since there 360° in a circle, and 60 seconds within that circle, the math is as easy as 360/60*t. Hours get multiplied five times what the seconds and minutes get since the hour sits on every fifth interval of the minute (or second) angle.

Sure, this is not breakthrough programming. It was simply good for me to demonstrate the ease that jQuery makes rotating an image with very little code. It uses a simple jQuery plugin to simplify the process. Here is the code if interested:

Source code

$j=jQuery.noConflict();
checkTime();
ct = setInterval(checkTime, 1000);
function checkTime(){
	//var t = new Date();
	var d=new Date();
	var h=d.getHours();
	var m=d.getMinutes();
	var s=d.getSeconds();
	$j('#hour').css('rotate', 360/60*h*5);
	$j('#minute').css('rotate', 360/60*m);
	$j('#second').css('rotate', 360/60*s);
	if (h<10){
		h="0"+h
	}else if (h>12){
		h-=12;
		if (h<10){
			h="0"+h
		}
	}
	if(m<10){
		m="0"+m
	}
	if(s<10){
		s="0"+ s
	}
	$j('#curTime').html("The time is " + h +":" +m+":" +s)
}

Todd Schofield and Nick Haroldsen--2010 Web Design of Year

O.C. Tanner has awarded the Design of the Year Award to me for the third straight year. Our designs have been getting better as our O.C. Tanner designers have stepped up to the competition. For the 2010 year, there has been more collaboration and synergy as we have been able to bounce ideas off each other and work closer together.

Todd Schofield was the key designer on the project who I owe a great deal of gratitude toward for coming up with such a stellar award-winning design. It was his design I used to develop an engaging Flash page. The client was for the resort agency, Interval International who loved the design.

Web Portal for Interval International

The added animation with user interaction helps to engage the user to seek different portions of the site. All animation was done dynamically using a combination of XML and Actionscript utilizing TweenMax for the transitions. It was a good collaborative effort between Todd and myself that earned this great award recognition. The award came with a  cool  crystal trophy as well as a certificate to choose from an assortment of cool things such as an iPod Touch and a Dyson vacuum (the two items I chose the previous two years). Check out last year’s winning and the one prior to see what I have done previously.

Thank you to all the other designers at Tanner that have kept us all moving forward, pushing our creativity to higher levels.

1. Frequent Exercise
2. Find an Outlet
3. Share Ideas with Others
4. Experimentation
5. Continually Learn Something New

Frequent Exercise

It is stereotyped that the typical developer does little exercise besides the finger exercises that coding brings. The image of a scrawny pale-skinned coder who spends the majority of his life in the basement comes to mind. It is essential to break through that stereotype to engage other parts of the brain and get out and exercise on regular basis. The goal isn’t to become Mr. Universe with the perfect body, but to engage the mind. Studies have proven that there is a substantial increase in brain activity with frequent exercise.

I have found that frequent exercise has helped not me feeling better about myself physical, but mentally and emotionally. Lately, I have been doing the P90X routine three days a week and running two to three of the other days of the week. When I first started doing this regimen, it was difficult and I wasn’t seeing immediate results. It sometimes feels counter intuitive for my logical mind to think that pushing myself to the point of exhaustion can increase brain function, especially when I feel like it is doing just the opposite. For me, the results have been coming little by little where I have seen my physique change as well my thinking has become a bit clearer.

Find an Outlet

Do you ever get stuck on a project where you keep banging your head against the wall? Over and over you go, trying to figure out why something is not working the way it seem it should. The best way to overcome such problems is to take a step back—pause, and reflect. Get away from the problem and focus on other things for a while. I love going running for this reason. I also love to go hiking and skiing. Others have their own outlets that allow their mind to reboot. What is your outlet?

Share Ideas with Others

The beautiful thing about technology today is that it brings easy ways to share your ideas with others. It is true that developers are not typically social creatures and would rather stay secluded in their own world. Living in a box will hinder the minds ability to expand to its potential. I in no way consider myself a social expert. In fact, like most programmer types, I am a bit introverted. It takes come conscious effort to step out of my shell and share my ideas with others. Social media provides easy ways for us to share ideas with others without having to leave our comfortable space. Blogging is one way to get my ideas out there. However, blogging isn’t for everyone; there are forums and other places to share your input with colleagues that share the same interests. Getting a dialogue going is a great way to synergize the ideas. As you become an active part of your niche community, everyone benefits.

Experimentation

Some of my greatest ideas come from a bit of trial and error. Experimenting with tidbits here and there is essential to my growth. We all tend to do things the same way over and over. We know it works, so why change it? There is no way to be innovative with that way of thinking. Technology is driven upon experimentation. Try out other people’s experiments, expanding on their efforts. It can start from the simplest of experiments that leads to the coolest of creations. Publish or share those experiments with others around you for the potential that others may also expound on your experiment.

Continually Learn Something New

We are always needing to improve our skills. Technology will not slow down, neither should we. There is no time to play catch-up. I know some designers that feel they don’t need to keep up with the latest trends and technology. Frankly, I don’t know how they survive. Sure, they may not be developers and they do have a stable job that keeps them employed. But their limit of knowledge on the newer capabilities technology has to offer limits their creative potential. Oh how much greater can we all benefit if we but allow ourselves a portion of the vast knowledge that is out there. I know I have indeed a great deal to learn. Don’t limit your knowledge.

Cloning a TextFormat

Have you had projects where you were using the same basic TextFormat for your textfields and wanted to base sub-textformats on a base format and change a few properties? This is something I found I was needing all the time where I had one instance of baseTextFormat with the basic attributes and wanted to say myOtherFormat:TextFormat=baseTextFormat. The problem with this is when you change formatting for myOtherFormat without it being a clone of the first, it will change the formatting on the baseTextFormat, which is obviously not what is wanted.

So, the solution here is to create a clone of the first by utilizing the ByteArray class:

Source code

function cloneFormat(o:*):* {
	var obj:Object = getByteArray(o); // this returns null on MovieClips
	return obj;
}
function getByteArray(obj:Object){
	var byteArray:ByteArray=new ByteArray();
	byteArray.writeObject(obj);
	byteArray.position = 0;
	return byteArray.readObject()
}

The above method returns a basic object, so in order to parse it to a TextFormat object you will need add a parsing method that will loop through each object of the byteArray and put it in a new TextFormat:

Source code

function cloneFormat(o:*):* {
	var obj:Object = getByteArray(o); // this returns null on MovieClips
	obj = parseFormat(obj); // parse the object to a TextFormat
	return obj;
}
function parseFormat(obj):TextFormat{
	var _tf:TextFormat=new TextFormat();
	for (var prop:String in obj){
		//trace(prop)
		_tf[prop]=obj[prop]
	}
	return _tf
}

Here is some basic code example to clone the baseFormat:

Source code

// setup your baseFormat
var baseFormat:TextFormat = new TextFormat();
baseFormat.size=20;
baseFormat.font="_sans";
baseFormat.color=0xff0000;
var my_txt:TextField = new TextField();
my_txt.defaultTextFormat = baseFormat; // apply the format
my_txt.text="Hello World";
addChild(my_txt);
var my_txt2:TextField = new TextField();
my_txt2.width=300;
my_txt2.wordWrap=true;
my_txt2.multiline=true;
my_txt2.autoSize=TextFieldAutoSize.LEFT;
// clone the baseFormat
var myFormat2 = cloneFormat(baseFormat)
// change format slightly to see difference
myFormat2.color=0x005599;
// apply the format
my_txt2.defaultTextFormat=myFormat2
my_txt2.text="Here the text uses format from the first was cloned with a color variation"
addChild(my_txt2);

Cloning a TextField

Cloning a TextField is almost as easy as cloning the TextFormat. It requires a couple minor adjustments where the defaultTextFormat and transform properties need additional parsing:

Source code

function parseTextField(_obj:Object, _tf:TextField):TextField{
	var _textField:TextField =new TextField();
	for (var prop:String in _obj){
		if (prop=="transform"){
			_textField[prop] =new Transform(_tf);
		}else if (prop=="defaultTextFormat"){
			_textField[prop] = parseFormat(_obj[prop]);
		}else{
			try{
				_textField[prop]=_obj[prop]
			}catch(err:Error){
				trace("Error Hit: "+err)
			}
		}
	}
	return _textField
}

Setting Up a Clone Class

To create this as a class to handle the passed parameters isn’t too difficult. I have added a couple checks to see what type of object gets passed so that it parses the objects according to their needed requirements. Here is my class code, use at your own discretion and know that it is not fully tested or supported:

Source code

package {
	import flash.utils.ByteArray;
	import flash.text.TextFormat;
	import flash.text.TextField;
	import flash.utils.ByteArray;
	import flash.utils.getQualifiedClassName;
	import flash.geom.Transform;
	import flash.display.DisplayObject;
	public class Clone {
		public function Clone(o:Object) {
			// constructor code	
		}
		public static function clone(o:*):* {
			var type = getClassName(o);
			var obj:Object = getByteArray(o); // this returns null on MovieClips
			switch(type){
				case "TextFormat":
				default:
					obj = parseFormat(obj);
					break;
				case "TextField":
					obj = parseTextField(obj,o);
					break;
			}
			return obj;
		}
		private static function getByteArray(obj:Object){
			var byteArray:ByteArray=new ByteArray();
			byteArray.writeObject(obj);
			byteArray.position = 0;
			return byteArray.readObject()
		}
		private static function getClassName(o:Object):String{
       		var fullClassName:String = getQualifiedClassName(o);
			return fullClassName.slice(fullClassName.lastIndexOf("::") + 2);
		}
		private static function parseFormat(_obj):TextFormat{
			var _tf:TextFormat=new TextFormat();
			for (var prop:String in _obj){
				//trace(prop)
				_tf[prop]=_obj[prop]
			}
			return _tf
		}
		private static function parseTextField(_obj:Object,o:TextField):TextField{
			var _textField:TextField =new TextField();
			for (var prop:String in _obj){
				if (prop=="transform"){
					// actually setting transform properties becomes complex
					_textField[prop] =new Transform(o);
				}else if (prop=="defaultTextFormat"){
					_textField[prop] = parseFormat(_obj[prop]);
				}else{
					try{
						_textField[prop]=_obj[prop]
					}catch(err:Error){
						trace("Error Hit: "+err)
					}
				}
			}
			return _textField
		}
	}
}

Cloning Other Objects

With my Clone class there are additional possibilities besides the cloning of the described objects. It becomes more difficult when attempting to clone more complex display objects such as MovieClips. If the content within the MovieClip or Sprite is more dynamic and created at runtime, it may not simply be re-instantiated from the library as a new instance. Therefore, a different approach is needed to duplicating your MovieClip. You could use the BitmapData class instead if it is only necessary to duplicate the pixels. However, this is not always what is wanted, especially if the MovieClip has animation. If you attempt using the ByteArray method for returning the more complex Matrix of values a MovieClip contains, you end up with null. I will not get into the complexities of it here but a good example was given within the Kirupa forums by Senocular. His method works, but he does explain some of the limitations of his method.

Try it out for yourself. You will find some great use out of my Clone Class and perhaps you may find great ways to extend it. If you have any brilliant other uses of cloning objects using my Class or other approaches, please don’t forget to leave a comment. Thank you for your feedback.
]]> http://graphnickdesign.com/blog/clone-objects-as3/feed/ 3 http://graphnickdesign.com/blog/order-matters-creating-textfield/ http://graphnickdesign.com/blog/order-matters-creating-textfield/#comments Wed, 16 Feb 2011 17:23:50 +0000 graphnick http://graphnickdesign.com/?p=422 It may be obvious to most Flash programmers that order of operation is key to running a program. What may not be so apparent is to what order to apply properties to a TextField class so that it gets rendered properly at runtime.

Issues With TextField in Some Browsers

Recently I was pulling out my hair wondering why my TextField looked one way in one browser, but a bit differently in another. I had always been under the impression that the Flash Player always worked the same regardless of the browser. Apparently, this isn’t always the case. As seen with the TextField, if some properties were not applied in the correct order, not only can the visual output be different, but some properties will not be available at runtime.

Below is an example of how I was creating my TextField which proved to cause issues when view in (could you believe) IE. The example illustrates that when the width is set after a string has been put into the TextField, the calculation of certain properties of the TextField can be off. Anything relating to the numLines can also be miscalculated (such as getLineOffset(), etc.).

Source code

var myText_txt:TextField= new TextField();
myText_txt.text = myString; // string with enough characters to cause multiple lines
myText_txt.setTextFormat(_txtFormat);
myText_txt.width = 100;
myText_txt.wordWrap = true;
myText_txt.multiline = true;
myText_txt.autoSize = TextFieldAutoSize.LEFT;
addChild(myText_txt)
trace(myText_txt.numLines) // output in IE is 1 --output in other browsers gives the correct numLines

Finding the Solution

I went through much painstaking trial and error to pinpoint where the problem was. At first, I thought it came because the browser in question could not render all the properties of the TextField until it was added to the stage (so I applied a listener to be added to the stage. This is true for the most part, but it was not where the root of the issue was coming from. Finally, I discovered the issue wasn’t complex at all. I found that the width MUST be set BEFORE text is applied to the TextField. Wordwrap and multiline should also be set before text is applied.

Some things that require being called AFTER the text is applied is setTextFormat() and autoSize. You cannot apply format to a TextField if there is no text in it because setTextFormat actually sets the format of the text and not the TextField. The same goes for autoSize: there is nothing to autosize to if there is no text in it to begin with. Also, if the TextField is not applied to the stage, some of the properties will not be available (or at least rendered) either.

Here is the fixed code with the everything in the correct order:

Source code

var myText_txt:TextField= new TextField();
myText_txt.width = 100;  // set the width before adding text
myText_txt.text = myString; // string with enough characters to cause multiple lines
myText_txt.wordWrap = true;
myText_txt.multiline = true;
myText_txt.setTextFormat(_txtFormat);
myText_txt.autoSize = TextFieldAutoSize.LEFT;
addChild(myText_txt)
trace(myText_txt.numLines) // output in all browsers gives the correct numLines

Conclusion

Order of operation really does make a big difference when dealing with a dynamic TextField. If you are ever unsure the optimal order of operation, just remember, the solution may be easier than you think.