kreativeKING - Interactive Developer

Where's my Sound ???

Thu, 05 Nov 2009 09:33:00 -0500

Here’s a Handy little tip I just figured out today. So I have a button that plays sound and once if finishes playing it should fire the Event.SOUND_COMPLETE. In this events handler, it resets the position back to the beginning of the clip. Now the problem is once I try to play it again, it doesn’t seem to fire the Event.SOUND_COMPLETE event. Have you ever had the issue of your Event.SOUND_COMPLETE not firing properly?? Read on and find out why……

After some debugging, I noticed that every time you pause a sound and play it again, a new SoundChannel is returned. Any event listeners I had applied to the SoundChannel before are disregarded once I pause and play. Instead of :


function playSound():void
{
      mySound : Sound = new Sound();
      mySound.addEventListener(Event.COMPLETE, soundLoaded);
      mySound.load(MY SONG REQUEST);
}

function soundLoaded(e : Event):void
{
      myChannel = new SoundChannel();
      myChannel.addEventListener(Event.SOUND_COMPLETE, soundComplete);
      myChannel = mySound.play();
}

function soundComplete(e : Event):void
{
      position = 0;
      playChannel()
      pauseChannel();
      myChannel.addEventListener(Event.SOUND_COMPLETE, soundComplete);
}

function pauseChannel():void
{
     myChannel.stop();
     position = myChannel.position;
}

function playChannel():void
{
     myChannel =  mySound.play(position);
}

But It should be :


function playSound():void
{
      mySound : Sound = new Sound();
      mySound.addEventListener(Event.COMPLETE, soundLoaded);
      mySound.load(MY SONG REQUEST);
}

function soundLoaded(e : Event):void
{
      myChannel = new SoundChannel();
      myChannel.addEventListener(Event.SOUND_COMPLETE, soundComplete);
      myChannel = mySound.play();
}

function soundComplete(e : Event):void
{
      position = 0;
      playChannel();
      pauseChannel();
}

function pauseChannel():void
{
     myChannel.stop();
     position = myChannel.position;
}

function playChannel():void
{
     myChannel =  mySound.play(position);
     myChannel.addEventListener(Event.SOUND_COMPLETE, soundComplete);
}

You need to register the event listener again once you call play. I hope this saves 30 minutes of your day once you start screaming…WHERE’S MY SOUND!!!

Shoppable Runway

Sun, 01 Nov 2009 00:23:00 -0400

Technologies

- Flash, CSS, AS3

Brief

- Created @radical.media for Tommy Hilfiger

Role

- Jr. Flash Developer - Create the page Template
- Made use of a Tweening Engine

Live Site

Outerwear Gallery

Sun, 01 Nov 2009 00:19:00 -0400

ul>

Technologies

- Flash, CSS, AS3

Brief

- Created @radical.media for Tommy Hilfiger

Role

- Jr. Flash Developer - Create the page Template
- Made use of a Tweening Engine

Mens Live Site

Womens Live Site

Marvel Powergrid

Sun, 01 Nov 2009 00:11:00 -0400

Technologies

- Flash, XML, AS3

Brief

- Created at Marvel Entertainment

Role

- Jr. Flash Developer - Translate AS2 to AS3
- Made use of a Tweening Engine
- Receive XML and send Requests via PHP

Live Site

Tommy Hilfiger - Fashion Week 2009

Sat, 26 Sep 2009 04:53:00 -0400

Technologies

- Flash, CSS, AS3

Brief

- Created @radical.media for Tommy Hilfiger

Role

- Jr. Flash Developer - Create the page Template
- Made use of a Tweening Engine

Live Site

Get Schooled

Sun, 06 Sep 2009 21:37:00 -0400

Technologies

- Flash, CSS, AS3

Brief

- Created @radical.media for Viacom

Role

- Jr. Flash Developer - Help style the CSS, animated logo, and minor AS3/AS2 Flash work

Live Site

Burksten Group

Sun, 06 Sep 2009 21:23:00 -0400

Technologies

- Wordpress, PHP, XHTML, CSS

Brief

- Programmed this design (by BetterInPink) for Wordpress 2.7.1. This features a custom sidebar using CSS Layers and a custom switching option for unique header on pages

Live Site

Cool Flash Tip of the Week 5

Thu, 23 Jul 2009 13:06:00 -0400

Hey Flashers, I know its been a long time since the last tip. Time has not been on my side recently, but I’m getting some more free time and I’ll be posting regularly again. Be on the look out, I have some new websites and articles coming out. You can see the latest website to date, Galley Smith Blog. But aside from all of that, down to the tip.

I’m currently working on a 3D Flash site and I decided to use Flash 10 3D instead of Papervision3D. I felt it would be overkill to use Papervision for this project since we couldn’t get our animated 3d models into Papervision successfully. As everyone knows or some who don’t, FP10 ‘s z sorting is non-existent. I needed to have floating panels zoom up to show maximized version of the panel. The problem is that, scaling them up, if it is not at the top of the DisplayList, it would show the other panels in front of it still.

I needed to make a function that would always keep my selected panel above the rest. The kreativeSort function was born. Its still in its infancy, but I see potential in it. I will work on it more throughout the project at keep everyone up to date with the progress. Here is the commented function for everyone to use if you happen to have the same issue.

Update

I’ve been steered in a better direction and found of an alternative and faster way of doing this over at Actionscript.org from lordofduct. Check out the updated function at the bottom.

/**
 * Puts selected DisplayObject on top of other DisplayObects in its container
 *
 * @param parent Container DisplayObject that holds our children.
 * @param panel Child we want to be displayed on top of the rest
 *
 * @author Clemente Gomez - kreativeKING
 */
private function kreativeSort(parent:DisplayObjectContainer, panel:DisplayObject) : void
{
	var i : int = 0;
	var length : Number = parent.numChildren;

	//Position the child is located at.
	var pos:int;

	for (i ; i < length ; i++)
	{
		// When child matches the level we are at in the container, recored the level in variable "pos".
		if(parent.getChildAt(i) == panel)
		{
			pos = i;
			break;
		}
	}
	// Removes child out of container.
	parent.removeChildAt(pos);

	//Adds the child back on top of the rest.
	parent.addChildAt(panel, parent.numChildren);

}

Updated Function

function kreativeSort( parent:DisplayObjectContainer, panel:DisplayObject ):void
{
    if (parent.contains( panel )) parent.addChild( panel );
}

Galley Smith Website

Wed, 22 Jul 2009 07:13:00 -0400

Technologies

- Wordpress, PHP, XHTML, CSS

Brief

- Programmed this design (by BetterInPink) for Wordpress 2.8. This features a custom Twitter Feed on the sidebar and various depths using CSS Layers. Also a custom Theme Options panel for changing the options easily.

Live Site

Demo Site

Web Designer Magazine 159

Fri, 10 Jul 2009 22:01:00 -0400

Hey people, I’ve been published again in Web Designer Magazine Issue 159. In this tutorial, I walk you through how to make a MP3 player with a sound visualizer. Its a pretty short and straight to the point tutorial. Hopefully everyone will be able to follow along and make some cool mp3 players. If there are any concerns or questions, post it here on the blog and I’ll get back to you ASAP.

Go pick up your copy and leave some feed back. Check out a preview here

Where have I been???

Mon, 06 Jul 2009 14:26:00 -0400

Hey valued readers, I’m sorry for my absence lately. I’ve had a ton of projects come in recently that have devoured my time. I haven’t forgotten about the Cool Flash Tips of the Week. I have a couple to post, but just haven’t found the time to flesh them out. They should be back up and running by August 1st. The wait will be worth it people.

Happy Flashing.

Cool Flash Tip of the Week 4

Fri, 19 Jun 2009 13:13:00 -0400

I know last week I said we will be learning about a custom class, but I think I’ll hold that one for next week. This week we are going to check out a quick and useful tip that I didn’t even know about until a couple of days ago for selecting XML and XMLList nodes. This won’t be as in depth as the last, but I still think its a great quick tip.

We will be testing on this XML file.




Maria
Jason


Jason


Chris
Jack
Maria

I recently found out this cool way to select XML nodes. You can actually test attributes to filter out which ones you want. Check out the example for a better idea of what I mean.


var l:URLLoader = new URLLoader();
l.addEventlistener(Event.COMPLETE, xmlLoaded);
l.load(new URLRequest("ourXML.xml"));

function xmlLoaded(e:Event):void
{
    var myXML:XML = XML(l.data);
    trace(myXML.family.(@lastName == "Travis").member); // Outputs Maria , John
}

Using this method you can easily filter out a selection of nodes based on an evaluation. I find this a better way to the alternative of using array indices to select a particular tree. This is a pretty quick tip that I thought would be helpful. Next week, we are back to the in depth tips like usual. Again, if you like the post, subscribe to the RSS Feed.

Cool Flash Tip of the Week 3

Wed, 10 Jun 2009 10:41:00 -0400

Welcome back everyone for the 3rd installment of the Cool Flash Tip of the Week Series. This week we are going to take a look at a new class introduced with Flash Player 10. Say hello to the Vector Class.

The Vector class is very similar to the Array class which we all know and love. The difference is that a Vector only holds one data type. An Array can holds several different kinds of values. A Vector is an Array of the same type. Check out the psuedo code underneath to get a better understanding of what I mean.


//Array
[ String, Number,  ,int, Sprite ];

//Vector
[ String, String, null, String, String ];

If you paid close attention to that last snippet, you notice that the Array has an empty index, which is just fine. But when it comes to a Vector, there can not be any empty indices. If you must have an empty spot, make sure to set the value to null. Leaving it empty will throw an Error. A Vector is a dense data typed Array. Moving right along, to create a Vector is quite different than creating any other instance in Actionscript 3. Check out the example below.


//Syntax
Vector.

//Correct
var myVector:Vector. = new Vector.();

//Throws Error
var myVector:Vector. = new Vector.();

As you can see, the type of the Vector can only be instantiated to that class. Even though Sprite is a subclass of DisplayObject. So make sure to avoid this and you should have a smooth time. There is however a way we can still make this work. This would be using the Vector() function. This will allow you to turn an Array or Vector into another base class.


//Copy a Sprite Vector to a DisplayObject Vector
var myVector:Vector. = new Vector.();
myVector[0] = new Sprite();
var myVector2:Vector. = Vector.(myVector);

//Copy an Array to a Vector
var myArray:Array = [new Sprite(), new Sprite()];
var myVector2:Vector. = Vector.(myArray);

//Make sure your Array are all the same Type or you will get an Error
var myArray:Array = [new Sprite(), new Sprite(), new String()];
var myVector2:Vector. = Vector.(myArray); //Throws Error because String is not a DisplayObject

//They can all be DisplayObjects though
var myArray:Array = [new Sprite(), new Sprite(), new MovieClip()];
var myVector2:Vector. = Vector.(myArray); // Accepts this array since Sprite and MovieClips are both DisplayObjects

So based on our examples, directly assigning a SubClass Vector to a SuperClass Vector will throw an Error. You must copy the Array or Vector into the the Super Class Vector. The Vector constructor takes 2 optional parameters. The first parameter is the length and the second is the fixed parameter. If you set the fixed parameter to true, trying to create something in an index past that will throw an Error. This result is the same when using a method that changes the length of the Vector such as pop(), push(), etc.


var myVector2:Vector. = new Vector.(3, true);
trace(myVector2) //outputs null,null,null

var myVector2:Vector. = new Vector.(3, true);
myVector2[3] = new Sprite(); // Throws Error because fixed is set to true and we tried to place something in an index that exceeds the length.

Now with all these restrictions, this makes Vector a lot faster than using Arrays and is recommended when dealing with an Array which holds all the same DataType. Vectors are approximately 40% faster according to Mike Chambers to Arrays. When dealing with a large Array that is the same type, use a Vector. Also note that Vectors are only available in Flash Player 10, so that is bit of a downfall for the moment, but will be the new standard once the Flash Player 10 penetration numbers get higher.

Hopefully this little look into Vectors will get you to make the switch if you are publishing to the 10th version of the Flash Player. Next week, be prepared, we Are going to take a look into a Custom Class. If you enjoyed this post, tweet it, share it, bookmark it and subscribe. Stay tuned for next week.

More Info

Win 1000 Business Cards and a Canvas Print from UPrinting!!

Wed, 03 Jun 2009 00:48:00 -0400

Selene M. Bowlby also known on twitter as idesignstudios is having a huge giveaway. To commemorate 1 year as a full-time freelancer, she is hosting a 1000 Business Cards + Canvas Print giveaway sponsored by UPrinting. Its super easy to enter. Just leave a comment on her blog with an explanation of why you should win. For more info on the giveaway, check out her post.

UPrinting 1000 Business Card + Canvas Print Giveaway!

Cool Flash Tip of the Week 2

Tue, 02 Jun 2009 05:06:00 -0400

I’ve gotten a lot of positive feedback on the Cool Flash Tip of the Week series. So as long as people find them useful, I’ll keep them coming. Make sure to subscribe to be on top of all tips and add me on twitter. Now with all the formalities out the way, lets get a move on to the tip of the week. This week’s tip is about Events!!

I’m sure you are wondering, what kind of tips can you not know already. Events are a big topic in Actionscript 3.0. Almost everything is based on event listeners and is event driven. During my time coding, I found a couple of handy shortcuts that made my day easier. Let’s say you have a simple event handler that adds a MovieClip to the stage when a link is clicked. For simplicity’s sake , lets pretend we have a MovieClip in the library named “myMC”, and a button on the stage called “myLink”.

myLink.addEventListener(MouseEvent.CLICK, addClip);

function addClip(e:MouseEvent):void
{
    stage.addChild(myClip);
}

This would be the typical way we would do it. This is absolutely correct, but what if we wanted in a different function to add the clip as well. Some one would probably try to execute that this way.


myLink.addEventListener(MouseEvent.CLICK, addClip);
otherFunction();

function addClip(e:MouseEvent):void
{
    stage.addChild(myClip);
}

function otherFunction():void
{
    stage.addChild(myClip);
}

Although this is correct, the ideal way to program is to reuse code as much as possible so that when its time to update you caan change the code in one spot and it will update throughout the program. Not to mention it cleans up the code considerably. A better alternative to this would be to call addClip(). But WAIT!!, this is an event handler, if I call this I get an Argument Error. This is true, but we can setup the event handler to be an event listener and also be called without needing an event. Here is how we acheive that.


myLink.addEventListener(MouseEvent.CLICK, addClip);
addClip();

function addClip(e:MouseEvent = null):void
{
    stage.addChild(myClip);
}

//------------------OR--------------------
myLink.addEventListener(MouseEvent.CLICK, addClip);
addClip(null);

function addClip(e:MouseEvent):void
{
    stage.addChild(myClip);
}

That was pretty simple now was it. I use this all the time in my code to shorten things up and clean my code. I do prefer to the first method than the second alternative. I rather not have to keep passing null than just setting the default to null instead. Keep in mind, that this will only work if you do not need the actual event in your functions logic. If you do, then you need to an event. Well that’s all for this week’s tip. I hope you found it useful in any sense. Next week will be a big week, so stay tuned and subscribe to the feed.

Cool Flash Tip of the Week 1

Thu, 28 May 2009 08:00:00 -0400

I’m going to start a series that will occur every week. A cool flash tip or something I think not many people know about. Be on the lookout every week for a new tip. This week’s CFT is ……drumroll…….” The Tertiary Operator “.

I spend alot of time traversing flash posts looking at other peoples code and I often see a large if else block to change a simple variable. Using the Tertiary Operator we can simplify this into one line of code. Shorter code is always better in my opinion. Plus can save you a couple bytes in your code.

Here is an example of what I see.

var myBool:Boolean = false;
var myVar:Number = 12;

if(myBool == true)
{
    myVar = 15;
}
else if(myBool == false && myVar == 10)
{
    myVar = 40;
}
else
{
      myVar = 0;
}

Now this is all well and dandy, but it is a waste of space and can be simplified by a lot. One, when testing a Boolean there is no need to test to true or false. Instead if you want to test if something is true, you can just place the variable in the if parenthesis. This will automatically test to true. To test if a variable is false, use !. Here is an example.

var myBool:Boolean = false;
var myVar:Number = 12;

if(myBool )
{
    myVar = 15;
}
else if(!myBool && myVar == 10)
{
    myVar = 40;
}
else
{
      myVar = 0;
}

This already shortens up our code a bit. But we can take this a step further using the Tertiary Operator. The syntax for this is pretty simple once you know what it means.

//Tertiary Syntax

(Test) ? True : False;

Basically, If the test is true, the code after the ? executes. If the test is false the code after the : executes.

? = if

: = else

You can also string together Tertiary statements to make and if else if else etc. Here’s how we write the same code from above over using the Tertiary Operator.

var myBool:Boolean = false;
var myVar:Number = 12;

myVar = (myBool ) ? 15 : (!myBool && myVar == 10)  ? 40 : 0;

WOW, look how much space we saved, and it i still readable. I implore everyone to start using this and save space =D. Be aware that it is advised no to string Tertiary statements past “If..Else”. If you liked this idea of CFT ( Cool Flash Tip ), then leave a comment, subscribe to the feed or / and follow me on twitter. It would be great to get some feedback on if this is helpful or not and maybe some tips you would like to see featured here.

Happy Flashing

kreativeMP3 - MP3 Player

Tue, 26 May 2009 22:52:00 -0400

Technologies

- Actionscript 3.0, XML

Brief

- Nice, advanced audio player with simple controls.

Features

- ID3 Tags support (Up to v2.4)

- Loop and Shuffle functionality

- Animated Volume Slider

- Live Scrubbing

Purchase Here

kreativeROTATE - XML Banner Rotator

Tue, 26 May 2009 19:28:00 -0400

Technologies

- Actionscript 3.0, XML

Brief

- Simple and clean banner / image rotator. XML driven slide show which supports links and loads JPEGS , PNGS, GIFS and SWFS .

Purchase Here

5+ Flash Developer Blogs To Subscribe To

Mon, 25 May 2009 01:57:00 -0400

Finding a good Flash Blog as a developer is sometimes hard to find. Here are a couple that I keep stashed in my RSS Reader.

Quick View Portfolio

Sat, 23 May 2009 14:42:00 -0400

Technologies

- Flex Framework, Actionscript 3.0, mySQL, PHP

Brief

- Practicing the Flex Framework which in the end turned into project. This is a quick portfolio view of work which is pulled out of a database using mySQL and PHP.

Launch

kreativeKING - Interactive Developer

Where's my Sound ???

Shoppable Runway

Technologies

Brief

Role

Outerwear Gallery

Technologies

Brief

Role

Marvel Powergrid

Technologies

Brief

Role

Tommy Hilfiger - Fashion Week 2009

Technologies

Brief

Role

Get Schooled

Technologies

Brief

Role

Burksten Group

Technologies

Brief

Cool Flash Tip of the Week 5

Update

Updated Function

Galley Smith Website

Technologies

Brief

Web Designer Magazine 159

Where have I been???

Cool Flash Tip of the Week 4

Cool Flash Tip of the Week 3

Win 1000 Business Cards and a Canvas Print from UPrinting!!

Cool Flash Tip of the Week 2

Cool Flash Tip of the Week 1

kreativeMP3 - MP3 Player

Technologies

Brief

Features

kreativeROTATE - XML Banner Rotator

Technologies

Brief

5+ Flash Developer Blogs To Subscribe To

Quick View Portfolio

Technologies

Brief