ImageStreak Class for AS3

Here’s a new version of the ImageStreak Class written for AS3.

http://webdevils.googlecode.com/files/ImageStreak.zip

This class loads an image file. Creates a new Bitmap and BitmapData objects. Then it procedes to draw the image one pixel column at a time drawing the current pixel across the image. After it’s finished with the first column it moves on to the next. Until the entire image is drawn.

Iterator

Lately I’ve been finding that I use the iterator more and more. The Iterator is a design pattern that is used to iterate through the elements in an array. It provides a few features that make it a better choice than the typical loops that you might employ. The core concept is that the Iterator pattern is a class that returns each element in an Array. Forget writing all of those typical tired for loops and move on to a more streamlined pattern based system!

The Iterator provides a few advantages over the standard methods of looping through an Array. The Iterator pattern encapsulates the Array, prevent accidentally modifying the array. By making Iterators to access elements forward, reverse or randomly, accessing elements in the array in these ways becomes as easy as making an instance of any class.

The Iterator is built around three methods, hasNext, next and reset. The hasNext method returns true when there is a next item in the array. The next method increments the index and returns the next item. The reset method resets the index to 0 to start over again.

You might use the Iterator in this way.

var it:Iterator = new Iterator( array );
while( it.hasNext() ) {
	trace( it.next() );
}

The Iterator class itself might look like this:

package com.webdevils.utils {

	public class BasicIterator implements IIterator {
		private var _data:Array;
		private var _index:uint;

		public function BasicIterator( array:Array ) {
			_data = array;
			_index = 0;
		}

		public function reset():void {
			_index = 0;
		}

		public function hasNext():Boolean {
			return Boolean( _index < _data.length );
		}

		public function next():Object {
			return Object( _data[ _index ++  ] );
		}
	}
}

Flash or Javascript?

Here’s a post about the pros and cons of each. The comments below are interesting.

http://logicpool.com/archives/30

Many of the discussions I’ve read on this subject always bring up requirement that the Plugin must be installed for Flash to work. I always think, does anyone not have the Flash plugin these days? It seems like it comes with every browser, anyone that wants to watch a video on Youtube is required to upgrade to the latest version of Flash. Who isn’t watching youtube?

I’m sure someone doesn’t have the plugin, or doesn’t have the latest version. Hmmm… they may be hard to find.

Adobe suggests about 80% to 99% market penetration. Of course their numbers may be a little rosy, they have a stake in the issue.

http://www.adobe.com/products/player_census/flashplayer/version_penetration.html

Wikipedia suggests about 95% Did Adobe write that article?

http://en.wikipedia.org/wiki/Adobe_Flash

Here’s a link to an article that makes a strong argument for Javascript over Flash. Though, their example site, The Official Ringo Star web site is so weak it counters their argument. The motion is terrible and the rollovers made with Javascript are nothing worth even mentioning.

Of course then it’s off the TheFWA to see what they have on display these days. Looks like every site on display used Flash. After looking at all of these sites it reminded me of the point made in the articles above that, Flash is for complex and 3d animation. I don’t think that quite covers it. I’m seeing sites that are drawing things and mixing video and images with motion in ways that aren’t quite done justice by “3d” or even “complex animation”. Of course all of these sites could be described as complex animation.

Of course for the majority of sites Flash is usually overkill. The difficulty of mixing Flash with a server side framework or CMS is a big downer. So making modern everyday use web sites is also firmly in the Flash camp.

Another con, usually attribute to Flash is the steep learning curve. I’m not 100% behind this argument. It seems to me that HTML and CSS is a pretty hard, mix that with Javascript and I think reaches the same difficulty as Flash and Actioscript. Of course maybe the people writing the articles are think that they already know HTML, CSS and Javascript so it must be easier than learning Flash?

I think for myself I would have to say, when it comes to experimental and cutting edge Flash is out in front. That said I’ve seen some really cool Javascript sites. Here’s a list of good ones (sorry Ringo your site didn’t make this list).

http://www.3point7designs.com/blog/2008/04/12-websites-that-slide-and-scroll-with-javascript/

The real idea is to make the right decision Flash or Javascript. Knowing when to choose one or the other is the real skill.

I don’t think I’ll be dumping Flash any time soon, but I will have to brush up on Javascript skills, especially with all of those new CSS3 HTML5 goodies.

Doodle

Here’s an app I thought up the Firday. I managed to “finish” it up after dinner Friday and and with a few spare hours Saturday. I put finished in quotes, because it’s not really finished. There’s a still a lot to do. I did manage to mock up the basic ideas and get them all working.

http://newmedia.academyart.edu/~mhudson/doodle/

So what’s the idea anyway? Anyone can make a user account, login and create a small drawing, and then list all of the drawings that have been created. My idea was to create a sort of Twitter for the visual set. Instead of typing a short message of the moment. You can draw a small picture of the moment, and post it for everyone to view.

The basic functionality works now, but to make this really useful will require more features. At this point you are viewing all of the drawings in the database. The real idea is to show only drawings from people that you feel like seeing.

Bitmap Transitions

Some transitions make a lot sense when they are created with MovieClips. You have a lot of individual objects moving around on the screen. Moving MovieClips around is what Flash is all about.

But other types of transitions really work against this. Imagine a transition where the image of the stage is cut up into strips or squares. In this case the transition might cut or divide the stage into blocks that are not separate MovieClips. Imagine transitions based on pixels rather than MovieClips.

Here’s an idea, before showing content create a Bitmapdata object of the content. Manipulate this to create a transition. When the transition is complete, replace the BitmapData with MovieClip.

The key here is that all of the content is stored in a MovieClip. This way you can easily place everything on the stage in one move. You can also easily create a BitmapData Object of the content using the BitmapData.draw() method.

Here’s a couple examples that show off the idea. http://webdevils.googlecode.com/files/BitmapTransition.zip

Typed Arrays?

Here’s a new thing I just discovered, the Vector class! Not what you’d think by the name. If you’re me your thinking that it must have something to do with the Drawing API.

Turns out a Vector is best described as an Array where all of the elements are of the Same type. Apparently these are a little more efficient than Arrays for this reason. When you think about this is what I’m doing most of the time.

Use a Vector in this way:

var v:Vector.<String>;
v = new Vector.<String>();

The lines above create a new Vector v and type it to String. This example was taken from the Flash Help on the Adobe site.

http://help.adobe.com/en_US/AS3LCR/Flash_10.0/Vector.html

Looks like this only works in the Flash 10 Player.

Accessing the Document Class

Here’s a really simple method to access your Document class from anywhere in a project. This method will only work if that Class is instanced only once.

Add a public static var to the class, which in this example is name “Main”:

public static var main:Main;

Set the value for the new variable to reference your class instance with “this”:

main = this;

From here you can access any public method or property of the Main class with:

Main.main.method();