THEACTIONSCRIPTER.COM

HTML5 vs Flash

2010-06-13T20:46:13Z

A while back Steve Jobs wrote a blog about why he doesn't like Flash and will never allow it on his products. I have been meaningto respond to it but have been busy with a number of projects. Actually a number of them were Flash developed apps for touch screens, which was one point Jobs said Flash was bad for. Obviously Jobs' statement below is just wrong.

"Flash was designed for PCs using mice, not for touch screens using fingers. For example, many Flash websites rely on “rollovers”, which pop up menus or other elements when the mouse arrow hovers over a specific spot." ~ Jobs

Flash works exceptionally well for touch screens and kiosks. A lot of clients want their kiosk created in Flash. Of course rollovers will not work on a touch screen, but all websites developed in any language in today's world have rollovers. The majority of DHTML and JavaScript navigation would have the same difficulty if a pop up menu could only be displayed via rollover. It has nothing to do with Flash. It is the way the site was designed and can be a hurdle for any language. Jobs is reaching with this point.

Another comment Jobs mentioned that isn't fully true is that Flash does not perform well on mobile devices.

"In addition, Flash has not performed well on mobile devices. We have routinely asked Adobe to show us Flash performing well on a mobile device, any mobile device, for a few years now." ~ Jobs

Below is a video from Adrian Ludwig, who works on the Flash team at Adobe. Adrian demos the HTC Hero and its capabilities with the Flash player. Flash performed well on the HTC Hero. I wonder why HTC was able to have Flash performing well on their device and Apple wasn't. Is it Flash's fault? I think not.

The topic that has been driving me crazy, is Jobs big push of HTML5 and how it is the future of the web. If HTML5 becomes the future of the web, it'll be a far future. Currently HTML5 is about as strong as Flash was 10 years ago. HTML5 may have a future but Flash has been here longer, is proven and will continue to evolve while HTML5 is playing catch up.

Flash's ability to allow graphic designers to easily import their Illustrator and PhotoShop assets into the IDE is something HTML5 cannot compete with. The backbone of rich media on the web is the creative. Creative will never stop using Illustrator and Photoshop. I do not care how much money Apple invests in creating a graphics suite it will never out duel Adobe's creative suite.

In the video below a Flash developer named Michael explains the major differences between Flash and HTML5. The most interesting part of Michael's video was when he was demonstrating the performances between HTML5 and Flash. Jobs claimed that Flash couldn't perform well and can kill a processor. Yes, this can be true if the Flash experience was developed poorly and had memory leaks in the code. That could happen with any language though. It has nothing to do with the language but all with the developer.

Anyways, Michael shows how HTML5 was always using more CPU usage than his Flash examples. While the Flash examples were also a better experience, richer graphics, better performance, etc.

Take a look at the video yourself and draw your own conclusion.

In conclusion, Jobs is just hating on Flash. It is a smart business move because Apple wouldn't sell as much apps from their app store if users can just get them for free from and website that has Flash. The biggest issue I have with him though, is before the iPod Apple had NOTHING. The only people who were buying Mac computers were graphic designers and every graphic designer uses Adobe products. You would think Jobs would be thankful and support Adobe with their endeavors, but he doesn't. There has to be more to this story.

Free Gucci Mane Flash Game

2010-01-18T16:51:00Z

I recently developed a shooting game featuring Atlanta based rapper Gucci Mane. Gucci Mane has recently been sent to jail and his fans want him out. The games objective is to help free Gucci Mane from jail. Try and freeze the guards with the ice gun (burrrrr) allowing enough time for Gucci to make his escape. There is a helicopter waiting for the rapper at the end of the game to bring him to freedom.

This game is an example on how you can use Flash and other online tools to market and promote music artists on the internet in a new hip way. Simply add a sound track to the game and have their fans rock out while saving Gucci Mane.

Flash Input Text Font Issue with Mask

2010-01-05T15:00:00Z

Why isn't my text showing up when I enter it in an input textfield? That was the question I was asking myself. Usually when I have an input text field the text shows up perfectly when keying inside it. The reason I was having this issue was because my textbox was under a mask.

The solution:
Embed the characters needed like you would a dynamic text field. That's it.

Developing Flash on a Mac vs PC

2009-12-29T16:53:00Z

I finally did it. I made the jump from PC to MAC. I have been PC my entire life and figured it was about time to try out the MAC after all those commercials. I got a new MacBook Pro and it looks cool. The keyboard lights up and everything.

I have been developing Flash on it for the past month and came to some conclusions. The Apple learning curve will take me longer than I thought. I guess this is because I lived and died by the shortcuts on my PC. I adjusted to the basic Apple differences quite easily, like using the command instead of the control key. The Flash shortcuts are what have been killing me. F5 and F6 were not creating new keyframes or blank keyframes for me. It took me a while to realize this was because you have to hit fn and F5 or F6. So I had to do it the long way insert > timeline > Frame.

I guess part of my struggles is because I have a laptop with limited keys. Not having a home and end key has also slowed me down.

The positive thing about the switch has defiantly been dealing with my creative partners. This was the main reason I made the switch. Since the creative assets I get were designed by people using MACs a lot of time I would have missing fonts or fonts that were not compatible. This doesn't happen anymore.

All in all I have mixed emotions on the switch from PC to MAC dealing with Flash development. I have to say I miss my PC, like it more and much much faster with it, but time will tell. Maybe in 3 months I will be singing a different tune when I know my MAC inside and out but until then I have to say, "I am still a PC guy!".

AS 3 Hide/Show Mouse Cursor

2009-12-15T21:42:00Z

Need the ActionScript 3 code to hide or show the mouse cursor? Take a look below at it. It is real simple. Make sure you include the import.

Syntax:
import flash.ui.Mouse; Mouse.hide(); Mosue.show();

Where Can I Find Omniture Flash ActionSource Documentation?

2009-11-06T15:01:00Z

You can find a version of Omniture's ActionSource documentation for Flash/ActionScript implementation at the link below.

http://issuu.com/carismarie/docs/omniture_flash_documentation

Flash Making Extra Omniture Tracking Calls

2009-11-05T15:40:00Z

Omniture tracking can be very tricky inside of Flash. Omniture's introduction of ActionSource has made it easier to implement the tracking calls but there is still a number of issues that happens if not explained correctly. One common mistake is extra tracking calls. A lot of times when users click on different trackable components inside Flash the Omniture call gets triggered more than once. This is becasue the Omniture call variables are not being nulled out after it is being fired.

When implementing Omniture on normal web pages each link click usually sends the user to a new http page. Since the user is being sent to a new http page the Omniture variables are automatically refreshed because of the new http headers. In Flash you have to refresh them on your own.

The example below shows an Omniture call in Flash via ActionSource that is not getting refreshed after the call is executed. Since the variables are not being reset after the call, it is being saved in the ActionSource object and is being sent again on each of the next calls.

s.campaign = "Campaign Name";
s.pageName = "About Us";
s.eVar17 = "value";
s.track();

Since campaign, pageName and eVar17 have not been nulled out after s.track() was called, everytime s.track() gets called in the future it will continue to pass campaign, pageName and eVar17. This will give you incorrect stats. You may think you have gotten more hits related to that campaign or eVar than you really did.

Solution:

s.campaign = "Campaign Name";
s.pageName = "About Us";
s.eVar17 = "value";
s.track();
s.campaign = null;
s.pageName = null;
s.eVar17 = null;

That is it. Just null out the vars after you make a tracking call and you are good to go.

Let me know.

Connecting to a Web Service in Flex

2009-11-04T20:49:00Z

I figured it was time to dive into Flex and see how different it is than Flash. There are some differences but not too many. For my first Flex project I decided to make an app to look up stock quotes. I figured this would be a good place to start because communicating with web services is a common task for ActionScript projects.

In this example I used WebserviceX.NET Stock Quote free web service. To connect to the webservice you have to instantiate a Web Service instance in your MXML file. Below is example syntax to instantiate a WebService in your MXML.

id : name to identify your web service
wsdl : web service address
fault : function to handle faults when connecting to your web service
result : function that will be called after connecting to your web service

Now it is time to make the call to your web service. The following code gets executed after the user clicks the search button. This code lives inside the same MXML page inside an <mx:Script> tag.

We are almost done. All we need to do now is display the results. This code also lives inside the same MXML page inside an <mx:Script> tag.

Take a look at the demo below. Currently we are getting a security issue because this demo is trying to access data from another domain. The solution is to add a crossdomain.xml in the root directory of the server but I do not have access to the blog's server root directory. Please download the source MXML file and add it to your Flex project to see it running.

Source MXML File

Reading a RSS/Twitter feed with ActionScript 3

2009-11-03T18:28:00Z

Everyone is tweeting! Time to tweet in style. Below is an example I made that reads in an RSS or Twitter feed and displays the entries inside a Flash component.

Try out this Flash RSS Feed Reader by entering your blog or Twitter's RSS feed below then clicking go.

How it works?

It is pretty simple to create your own Flash Twitter reader with ActionScript 3. RSS feeds are read in similiar to XML. After you read in the RSS feed loop through the RSS' channel items to display each entry.

Let me know your thoughts or if you need to see any code.

AS3 :: Get all Children MovieClips

2009-10-09T15:14:00Z

It is easy in ActionScript 3 to get all the chlidren instances of a MovieClip. Take a look at the AS3 code below for help.

for (var i:uint = 0; i < mcMain.numChildren; i++){ txtOutput.htmlText += 'name:' + mcMain.getChildAt(i).name; txtOutput.htmlText += '\t type:' + typeof (mcMain.getChildAt(i)); txtOutput.htmlText += '\t' + mcMain.getChildAt(i); txtOutput.htmlText += ""; }

The above code uses a for loop, to loop through the total number of children in mcMain. mcMain.getChildAt(i) will get the reference to the child instance. By tacking .name to the end of mcMain.getChildAt(i) you can get the name of the child object.

download source

AS3 MOUSE_OVER VS. ROLL_OVER

2009-09-29T17:46:00Z

A lot of Flash developers I come across have an issue with mouse actions when MovieClips are embedded inside other MovieClips. AS3 has multiple ways to handle embedded mouse actions within MovieClips. The two main ways are MOUSE_OVER and ROLL_OVER. They sound the same but have slight differences.

MOUSE_OVER

MOUSE_OVER will be triggered when you first rollover the main MovieClip. It will also be triggered every time you rollover any MovieClip inside the main MovieClip. This can get dangerous when you have additional buttons inside the main MovieClip with MOUSE_OUT functionality. Be careful because your MOUSE_OVER functionality will be called multiple times.

* If you set the main MovieClip to mouseChildren = false, it will prevent the MOUSE_OVER action being triggered when you mouse over any embedded MovieClip. Be careful though because you will not be able to add any mouse actions to those embedded MovieClips.

ROLL_OVER

ROLL_OVER will be triggered when you first rollover the main MovieClip. It will not be triggered again until you roll out of the main MovieClip and back over it. You can rollover as many embedded MovieClips as you want without it being triggered multiple times. ROLL_OVER is best for when you have embedded MovieClips with mouse actions.

Best Practices for Flash AS3

2009-08-24T13:48:00Z

Take a look at this article I wrote on Bukisa. In this article you will read about best practices for developing a website in Flash. Learn different tricks to make your site perform better, load faster, and maintain easier.

http://www.bukisa.com/articles/137106_flash-and-actionscript-3-best-practices-to-improve-performance

Align Text with ActionScript 3 - Center AS3 Text

2009-08-18T17:46:00Z

Imports needed to align your Flash text in AS3.

import flash.text.TextField;
import flash.text.TextFieldAutoSize;

Alignments you can do with your text:

TextFieldAutoSize.LEFT
TextFieldAutoSize.RIGHT
TextFieldAutoSize.CENTER
TextFieldAutoSize.NONE

Syntax needed to align your dynamic text in AS3.

_textField.autoSize = TextFieldAutoSize.LEFT;
_textField.text = "Hello World! This is my text.";

Make sure that you assign the autoSize before you set the text. If you set the text first the alignment will not work correclty.

Disable the right click menu in Flash AS3

2009-08-03T16:01:00Z

Gain control of your Flash Movie. Do not let users right click and zoom in on it if you do not want them to. Take a look below at the AS3 code to prevent users from right clicking on your Flash experience.

stage.showDefaultContextMenu = false;

Example Flash Movie with Right Click Functionality Disabled.

Error #2044: Unhandled ioError: With .DAE file in Papervision

2009-07-27T13:50:00Z

I got the classic #2044 Error today when I moved a project I have been working on from local to test environment. Usually you receive this error because the file doesn't exist. That wasn't the case for me.

I am building a papervision project and the file that was causing the #2044 error was the Collida .DAE file. Since the test environment was IIS, I had to add the .DAE file the the MIME Map. After I added the .DAE file to the MIME Map I was able to load my Collida .DAE into my PaperVision project.

Add the following code to your Web.config file

<system.webServer>
<staticContent>
<mimeMap fileExtension=".dae" mimeType="application/octet-stream"/>
</staticContent>
</system.webServer>

This is is more common when trying to dynamically load a .flv file on the server.

AS3 Tint MovieClip

2009-07-16T19:15:00Z

Here is how to tint a MovieClip in Flash via AS3.

var c:Color = new Color(); //Create a color object c.setTint(Math.random() * 0xffffff, 1); //Set tint to a random color mcObject.transform.colorTransform = c; //Apply tint to your MovieClip

Below is an example of randomly changing a MovieClip's tint with ActionScript 3

Source Code

Going from ActionScript 3 back to ActionScript 2 isn't fun

2009-07-15T13:39:00Z

I remember when I first made the jump from ActionScript 2 to ActionScript 3. I wasn't excited about the switch at the time. I remember always asking myself why did they change this, I can't I do this anymore but after my first project I was happy I made the switch. AS3 made coding easier. I write less code in AS3 than I needed to do in AS2 with the exception of getURL.

I've been doing AS3 straight for the past year now. Every time I have to start a new ActionScript project I always write it in AS3 for obvious reasons. The challenge is when someone asked me to write a project that had to be done in AS2. No AS3! Sure, I thought, no problem. I have been coding for years in ActionScript 2 but wow how quickly I forget the differences. I felt I had to reteach myself some of the basics.

The project should have only took me 4-6 hours but ended up taking me 8-10 hours. If I could have wrote it in AS3 it probably would have took me just 2 hours. Making the jump back seemed more difficult than the jump forward. Some of the simplest actions I just forgot. For example, assigning actions to buttons from my class. It took me a moment to remember that inside the onClick function there is no true reference to the class, so I had to set one before I declared the action. Simple code like that, which I used to write like clockwork, I just forgot.

In all the change back was frustrating but kind of funny. Seems like I need to do some more small AS2 projects on my own to stay sharp but if I have to do anything important I'm writing it in good new ActionScript 3.

Omniture Media Tracking in Flash with ActionScript 3

2009-07-13T18:23:39Z

Omniture made media tracking easy with their creation of ActionSource. You no longer have to make external javascript calls for when the video starts, pauses, plays, ends, etc. The ActionSource object handles it all. ActionSource is pretty easy to learn and implement but I do feel Omniture in general and the way they handle their reporting is quite ambiguous. I'm lucky I just have to do the implementation and not the naming strategy for the tracking. I am told what props, eVars, events, etc to implement and can easily fire them correctly because of ActionSource.

First you will have to setup your ActionScource object as usual. Then you can track your videos by using the below function calls.

When the video get initialized you need to call the media open function.

// mediaName :: Name of video // mediaLength :: Duration of video // mediaPlayName :: Name of video players.Media.open(mediaName, mediaLength, mediaPlayerName);

When the video play listener is called you need to call the media play function.

s.Media.play(mediaName, mediaOffset);

When a user pauses the video or it stops you need to call the media stop function.

s.Media.stop(mediaName, mediaOffset);

When the video is finished you need to call the media close function.

s.Media.close(mediaName);

The tracking call to Omniture doesn't get fired until the close() function gets called.

Omniture Media Tracking Reports

How many people watched a video
How long a user stayed on a video
What sections of the video a user watched
When the user exited the video
Videos By Player
If you have Omniture tracking throughout your site, you can also know the user flow before and after the video

AS3 ? Conditional

2009-06-29T18:16:00Z

You can use the following line of code as a if/else statement.

x = ( a == b ) ? y : z;

if(a==b){
x=y
}
else{
x=z;
}

Cool Papervision and Web Cam Video

2009-06-15T14:23:00Z

Take a look at this cool Papervision and Web Cam video I found on YouTube. You can hold your virtual creations in your hands now.