Archive for the ‘Web Design’ Category

Eureka!

Wednesday, February 1st, 2006

I’ve been having a lot of trouble having Event (clicks, loads, whatever…) in Flash for as long as I’ve been doing Object oriented ActionScript. I barely managed to call inline functions and having to use the absolute path to the property. Example:

class Foo {
	public var _someProperty:String
	public function Foo() {
		// Lets skip how I actually make the button,
		// but I usually use .attach() and I make
		// exportable the object in the Library. I
		// think I should use createClassComponent however.
		var but:MovieClip = new MovieClip();
		but.onPress = function () {
		_root.MyFooObject._someProperty = “Clicked”;
		}
	}
}

To access my attribute, I must leave my class and follow the absolute, pratically hard-coded path to my value. It’s really not a good thing to do. I found you can use the Delegate class to forward events to a function inside the parent class. Like this:

class Foo {
	private var _someProperty:String
	public function Foo() {
		// Lets skip how I actually make the button here too.
		var but:MovieClip = new movieclip();
		but.onPress = mx.utils.Delegate.create(this, button_onClick);
	}
	private function button_onClick():Void {
		this._someProperty = “Clicked”;
	}
}

Where “this” means the class you are in (could be another one), and “button_onClick” is the name of the function you will be calling after the event is triggered.

There you go! It’s a lot more powerful, much more logical in a semantic point of view and it makes the code a lot clearer. Notice how I can protect my call properties now using the private attribute.

Speaking of being semantic, you always should call you call properties with “getters and setters” instead of calling it directly like I did in my example. It should look like this instead:

private var _someProperty:String
public function get someProperty():String { return this._someProperty;}
public function set someProperty(val:String):Void { // validation if needed; this._someProperty = val;}

What still needs to be clarified however is how I can pass the object that raised the event and called the function.

That sums it well…

Tuesday, January 17th, 2006

There’s a very interesting post on every one’s favorite A List Apart on Web 3.0, AJAX and all the hype around this.

mx.transitions.Tween

Thursday, December 8th, 2005

One of my current assignments at work is to make something similar to Google Maps for my employer’s Oil website. I must build a map browser that is completely dynamic that’ll need to generate 3 dynamic layers for 3 different types of maps of Oil Wells.

I decided on making this using Flash, just like Yahoo Maps have. From the start, the most important feature was how I had to permit a click event somewhere on the map and to center the map on these X and Y coordinates. At first, I approached the project by planning on incrementing a value to the _x and _y properties for some period of time to mimic movement until the map was re-centered, but I’ve had no success doing so.

That’s when I had a revelation. Once you start trying to build Object-Oriented applications in Flash, you tend to forget all the design tools built in Flash. Why didn’t I call the Tween function from within ActionScript? And so I did.

Here’s the relatively simple function call to move a MovieClip object using the Tween class:

new mx.transitions.Tween(MovieClip, "_x", easeType, begin, end, speed of execution, time unit boolean);

You pass on a MovieClip, the property you wish to edit (in Flash, the properties all start with “_”), the effect you wish to use for the transition, the starting value (for the _x property, MovieClip ._x for instance), the end value (passing MovieClip ._x + 50 would create a motion tween that would move the MovieClip 50 pixels to the right from its original location), and the speed of execution which is either counted in seconds or in frames depending on the last Boolean parameter (true being in seconds).

It’s really incredible because the transition allow you to apply built-in elastic or bouncing effects to the MovieClip. Now all of the bouncing menus we see all over the Internet seem much simpler.

You can also pause, rewind and do other operations on the Tween process because it generates events as the animation plays.

It opens a lot of doors to OOP in Flash. You no longer need to bother with sketchy animations when forcing movement on your MovieClips from within a Class.

Read more on this undocumented function

On a different and more disappointing note, I also completely gave up on trying to have a logical OOP approach on Events handling. Doing the following discusses me because I find it rather illogical to have an inline function call from within another one, but it’s one of the only things that work:


class Foo {
function Foo() {
// create a button with the path _root.button
// now tell him what to do when he’s clicked
_root.button.onPress = function {
// some code
}
}
}

Decorating type using CSS

Monday, December 5th, 2005

I found this very promicing technique. I can only imagine all the effects you can get once everyone supports transparent pngs.

how he does it;
more exemples.

Email designs

Wednesday, November 30th, 2005

I’ve been spending way too much time trying to create a generic email design template for one of my employer’s client. It was with deep frustration that I’ve let the table designs win over the Right Way. In Hotmail principally but also in Gmail, sent emails always seemed to differ from the original version. Even more surprising, sending the same email template twice didn’t produce two identical emails once in the inbox.

Now that I can’t work on the email template anymore, I find a page explaining the do’s and don’t of email designs. The article raises good points, but the most useful bit is the chart explaining what is blocked and what’s not in the most popular email softwares/sites.

By the way, the main problem with my email template was that we didn’t remove \n and \r from the text. That was stupid.

Data Binding with XSL

Monday, November 21st, 2005

I almost thought I had found something incredible when I first began playing with XSL. When you read the tutorials you can’t help but get lost in your dreams of unexpected power. For once (and without any database) you can have easy access to sorted information throughout a static website.

When you read more closely, you learn that Internet Explorer 5 doesn’t support this w3c recommendation. Ah well, no surprises there but that was enough to stop me from using it for a project at work. However, it does work in the recent standards-compliant browsers – I know IE6 doesn’t fit in that category, but he still understands XSL.

The simplest way I could find of using XSL was to combine it with JavaScript. It causes a major slowdown, but you make sure your XML content is outputted properly. You easily can use ASP as well, but when you have access to ASP you probably also have a database available and shouldn’t be wasting your time with XSL for data binding.

There’s one thing I couldn’t find an answer for however. Even after reading through the XSL homepage on the w3c it is not quite clear if it’s semantically correct to use XSL for data binding. I think it is as the tutorials seem to point that way. I can never understand anything on that website ;)

Love/hate relationship with Flash�s components

Saturday, November 12th, 2005

Macromedia have brought a lot more depth into Flash by adding pre-compiled components (or movie clips) to the software�s library. Mostly in the professional edition these components make building application faster and easier.

One of the components I�ve played with it the Window object. It�s simple to understand and it�s possible to create one on the fly using ActionScript only. Let me put some emphasis on that. Within a few lines, I was able to program my way into a graphic application. We can all agree that�s the direction Macromedia is taking and to a certain extent they are succeeding in doing so.

However, other components are much harder to instantiate or create/call straight from ActionScript. The documentation on Live Docs is also somewhat deficient. I�ve tried a gazillion times to have the XML connector work when created dynamically but couldn�t make it work yet. The media playback was a bit easier to build with dynamic values, but as I write this, the Mp3 player on The Music Tank still has trouble opening .mp3 files consistently.

What I hate about components is how I never know if it�s my fault if it�s not working. If it is (which is probably the case) there are two questions I can rarely find answers for:

Am I supplying invalid values which failed validation once the control is speaking with my website and
Is the control not working because I instantiated its properties with wrong values?

I hope Flex will make it easier for graphic artists who are able to do real Object-Oriented programming. Right now, I feel pretty dumb having to use illogical code just to make up for Flash’s �almost-there� programming language.

HTML form elements

Thursday, November 10th, 2005

It�s really surprising to notice how HTML form elements haven�t changed since HTML 4. A ton of better features can be developed to aid the end user and the programmer. To me, it is quite bizarre simple things as the label attribute isn�t included in the
tag by default.

Sure, you can use

and to achieve a certain degree of editing for display, or you can build your form like this:


�But it just feels like a line too many. Another issue is the focusing of a control upon a page�s load event using JavaScript. If you can specify the tabular index of a control, you should be able to force initial focus on a control using HTML. Keeping in mind the way attributes work in HTML, it could easily be specified the same way you use the selected attribute of a tag

From the little information available on the W3C, I think Xforms will help a lot, giving a programming feel to building XHTML forms. However, HTML tags should have been reorganized much sooner. As an e-commerce software developer, almost every page I build is actually a big form. There is way too much use of JavaScript to accomplish simple control behavior. Experience with ASP controls showed me they offer a lot more control on the display of web forms. Microsoft was inspired a lot from the way Windows Forms are built. I would also assume JSP can offer the same liberty.

The thing is, I don�t feel it�s a server-side programming language�s job to deal with what seems like the first level options for HTML controls. Everyone is putting high hopes in financial success on the Internet nowadays. E-commerce is still expected to become a big fraction of company sales in the near future. User input under these conditions need to be improved. It�s just too bad everyone is going crazy on the arrival of XHTML, but none waited for Xforms to be ready for a joint release.