DesignFission Blog stop()

Finally some tech related news!

I’m posting this using the extremely fast Google Chrome, Google’s latest product - a web browser.

I’m just going to make this a short one and list down some first impressions and things I’ve noted while using it for the past 30mins.

Firstly, the browser is extremely fast when rendering pages! Even faster than Firefox in fact. Booting up the browser for the first time, Chrome prompts you to transfer your bookmarks/passwords/everything from Firefox. And everything they transferred alright. Even the history! Installation was fast, easy, and required little to next prompting.

Now, the first thing that prompted me to make a post is, Chrome doesn’t require users to install Flash as a plugin. Flash works right out of the box. I’m not sure if it’s because I already have Flash installed on Firefox or IE. But on my experience with Firefox, I still need to install the plugin even if I have installed it in IE. And vice versa of course.

This is a sweet little move that shows how much Google supports RIA in their browser.

Next, there’s this sweet little option called the “Create application shortcuts…”. Again, another feature to make RIA “more in sync” and working more like desktop applications. I can create a shortcut for my blog’s admin page, and you can choose to make it appear in Start/Desktop or Quick Launch. Works just like a application - even though IE’s shortcut URLs do the same thing. I guess Google made it sound much nicer - Application shortcuts. =P

Opening a new tab gives you 5 thumbnails of your Most Visited pages. A very handy feature that I never thought I would have need.

Lastly, I tried to access a music site which requires IE due to DRM reasons. And sadly, it still doesn’t work for Chrome as well. What is interesting though, is that the javascript that website is using seem to detect Chrome as Apple’s Safari on Windows.

Take a look for yourself: Nokia Music Store

Other things worth mentioning that perhaps you would have known by now is, tabs appear on the top of the address bar for Chrome, instead of under it. I don’t really see the benefits of this little change in the layout of the UI yet, but after more use, maybe I will prefer/hate it compared to the usual below the address bar tabs.

Conclusion
Chrome is fast becoming a replacement of Firefox for me. What it lacks right now, is the amount of Add-Ons that Firefox has. Time will tell if Chrome will replace Firefox completely for me, but for now, Chrome has impressed me a lot. It’s definitely made a good first impression.

Edit:
Chrome still doens’t support Java integration. That means that iBanking doesn’t work, and so does some upload managers for photo websites that uses Java.

And there is a new incognito Window thing, this is a very useful window to use if you’re in an internet cafe or in office!

Since my article for calling thickbox from Flash seems to be my biggest contribution to the people out there, I decided to post a little finding I made myself.

It works on IE8!

If you don’t know what is ThickBox, check it out here: http://jquery.com/demo/thickbox/

That’s some nice way to present content on your site right? Anyway, I’ve been playing around with ThickBox for quite some time now, and a recent project required me to call up a ThickBox iframe from within Flash itself.

As the documentation on the site only provided HTML help on how to implement ThickBox, I had to look for a way to do this myself. A search on Google yielded a few complicated ways to do this, which I did not think was effective since they involved writing of new Javascript functions. Then, I found this article which describes how to do almost exactly what I wanted - but, it requires a writing of a new function. And, it is opening an image, and not an iframe.

With what I learnt from the article, I went to take a look at ThickBox’s code. Thanks to their neat comments, I understood how the functions work after a few minutes, and I implemented what I learnt from the article (which is how to use ExternalInterface) to do exactly what I wanted.

The idea is to call the Javascript function that launches a iFrame ThickBox from thickbox.js. The function name is actually tb_show, with 3 parameters that you can pass in, namely, the caption, url and imageGroup. Obviously, what I need to pass in here is the URL.

Therefore, with the ExternalInterface, this is the code I need to put into Flash:

[code lang="actionscript"]
import flash.external.ExternalInterface;
Button.onRelease = function(){
ExternalInterface.call(”tb_show” , null ,”page.html?KeepThis=true&TB_iframe=true&height=150&width=150″ , false);
}
[/code]

If that doesn’t make sense to you, you need to see how ThickBox is launched with HTML originally:

[code lang="html"]
Click Here
[/code]

You can see that it requires the a tag to have a “thickbox” class. Which is why you can’t just use a getURL in Flash.

I hope this helps people out there. =)

- make sure frame rate is the same as swf
- set to uncompressed audio if video is in timeline.

The reason for point 2 is because flash will automatically compress audio in embedded FLVs, so if you compress audio in Sorenson, you’re getting your audio compressed again in Flash. That’s compression twice!

I always thought Flex should have a UI interface like Flash does, so that designers or beginners can start to do Flex. After looking at Adobe Thermo, which Adobe very mysteriously decided to launch as a seperate product. I found what was supposed to be there!

With Adobe Thermo, you’re supposed to be able to directly import your PSD, and start working on it to be a Flex application. Things like scrollbars, lists, buttons, with rollover states and some animations. You can do all that with a GUI now, with absolutely no coding at all.

But if you are a very experienced Flex coder, you would want to have control over the code. Guess what? Thermo has it too! I’m not going to delve any deeper into this absolutely cool and amazing product, I’ll just let a video which Aral Balkan took at the Adobe Event.

http://aralbalkan.com/1050

Enjoy!

I’m stuck between the 2.

It’s going to be my first iPod for myself and I don’t know which one I should take! Here’s a picture showing the pros and cons of each model.

As you can see, the price of the iPod touch is a big con, and so is the small hard flash disk capacity. The wifi is a major boost though. Being able to check my mail on the go for free at one of the wireless hotspots in singapore is very enticing indeed.

Then again, battery life is important for an NS man. But how long am I really going to care about the battery life? Only for the 2 weeks confinement I guess. I’m not very excited about swiping through interfaces with my fingers though. The last time i tried it, it was exciting for 5mins at most, and then I got tired of it. =x

So what should I get? A classic, or a touch? That is the question.

It has been a really busy and fulfilling week for me. After the period of drought, there’s this flood now! I’m talking about freelance projects that is.

I’ve been contacted by previous clients. Contacted by people whom I do not know, and I do not know where they got my contact from. Contacted by recommendation. Contacted to replace/cover up for people going to NS. lol.

I guess from now till I enlist, I’ll be busy already. It came at good timing, I’ve been broke for a while now. =P

Enough about myself now. I’m just here actually to post something exciting for everyone to share. Yeah, I always share. =P I don’t keep what I know to myself, unlike many people I know.

So here’s the news - Gotoandlearn.com is back up! If you haven’t been there, get there now. I hope I can open a site one day that is as helpful as his!

I always thought the Moving Ball lesson my Flash lecturer gave was a very good and important lesson which provided me with the fundamentals and understanding of how things worked in Flash, particularly the onEnterFrame.

Now in AS3.0, onEnterFrame no longer exists. Events replaced everything, including this convenient function which I had come to love and hate in the past year I’ve used Flash.

This is what a general onEnterFrame looks like in AS2.0:

[code lang="actionscript"]
ball_mc.onEnterFrame = function(){
this._x += 5
}
[/code]

The above code will move the MovieClip right at a rate of 5 pixels per frame. Hence, if your movie FPS is 12, it will move 60pixels to the right per second. That’s pretty choppy. This is also why a high FPS will give you smoother animations if you didn’t know already. But I’ll leave that for a proper tutorial another time. Now, on with the Moving Ball tutorial.

The Ball I’m talking about is simply a circle shape converted as a MovieClip if you didn’t know that. We’re going to experiment a lot of stuff with this “ball” of ours in future tutorials to come, so choose a good colour to create it with.

After creating this movieclip, give it an instance name of “ball_mc”.

Here is what the AS3 code will look like to do what the same thing above:

[code lang="actionscript"]
function moveBall(e:Event):void {
ball_mc.x += 5;
}
ball_mc.addEventListener(Event.ENTER_FRAME,moveBall);
[/code]

As you can see it’s pretty similar to the code that we used for the button tutorial. The big difference and key thing to note here is the eventType. I’m using a Event.Enter_Frame here instead of a MouseEvent.MOUSE_UP. If you’re good, it means that you know that Event.Enter_Frame is what is actually the new onEnterFrame.

That about wraps up this tutorial for now. I will extend this tutorial to include the good old “delete this.onEnterFrame” function in AS3.0 soon.

Did you know that there’s a big change in terms of how properties are called in AS3 now?

For example, in AS 1 and 2 we used to call MovieClip._x but now in AS3 it’s just MovieClip.x. No more underscore. I just knew about it while exploring AS3 and proceeded to google for a cheat sheet. Guess what? There really was one!

Download it here: http://www.actionscriptcheatsheet.com/downloads/as3cs_migration.pdf

The properties I mentioned are in page 2 of the pdf. I took it that flash.display.DisplayObject simple means a Movieclip object or a Button object or whatever it is that is on the stage.

I hope this is another stepping stone into AS3.0 for everyone.

This is my first step into Actionscript 3.0. I thought I would share it with everyone and at the same time, try to do a very simple thing so that I won’t be daunted by the new language.

What I am going to do:
Create a button that - after being clicked on, will give a dynamic text field a new value.

Firstly, create a new Actionscript 3.0 document and then just draw any object, and convert it into a Button(F8). Give this button an instance name of “button_btn”.

Next, create a new text field, set the type to “Dynamic Text” in the properties panel, and give it an instance name of “output_txt”.

Now before I go on to show you the Actionscript 3.0 code, I’ll show you what the code should be like, should it be in Actionscript 2.0. This code will not work in this newly created AS3.0 document.

Actionscript 2.0 Code:
This is what it will look like it is still AS2.0:
[code lang="actionscript"]
button_btn.onRelease = function(){
output_txt.text = “Button was clicked!”;
}
[/code]

Now the AS3 Code:

Actionscript 3.0 Code:
[code lang="actionscript"]
function eventResponse(evt:MouseEvent):void {
output_txt.text = “Button was clicked!”;
}
button_btn.addEventListener(MouseEvent.MOUSE_UP,eventResponse);
[/code]

As you can see, there’s an extra line of code, and a whole bunch of even nonsense. Worry not, the Flash help documentation provided a pretty detailed explaination to get you started to events. I’m going to quote from the documentation since it’s quite well written:

Basic event handling
The technique for specifying certain actions that should be performed in response to particular events is known as event handling. When you are writing ActionScript code to perform event handling, there are three important elements you’ll want to identify:

The event source: Which object is the one the event is going to happen to? For instance, which button will be clicked, or which Loader object is loading the image? The event source is also known as the event target, because it’s the object where the event is targeted by Flash Player (where the event actually happens).

The event: What is the thing that is going to happen, the thing that you want to respond to? This is important to identify, because many objects trigger several events.

The response: What step(s) do you want performed when the event happens?
Any time you write ActionScript code to handle events, it will include these three elements, and the code will follow this basic structure (elements in bold are placeholders you’d fill in for your specific case):

[code lang="actionscript"]
function eventResponse(eventObject:EventType):void
{
// Actions performed in response to the event go here.
}

eventSource.addEventListener(EventType.EVENT_NAME, eventResponse);
[/code]

To summarise, eventSource, is the target MovieClip or Button that you want to add the event to. In our example, it was a button with the instance name button_btn.

eventType is what the user will do to the button. In our case, it was after we clicked the button, which in flash terms is a MOUSE_UP MouseEvent.

eventResponse is the function that will be executed after the event is being done, which in relation to our example means after the button is clicked on, the function eventResponse is called. And in this function, output_txt is assigned a new value.

This is a really basic of basic introduction to Flash Actionscript 3.0 and I hope it will help anyone who’s trying to start learning it a kickstart. Keep sharing!

Here’s the source file to the above example:
Source File: Requires Flash CS3 of course!