Friday, December 7, 2007

Dynamic Expandable Menu


This is a pretty rockin' expandable menu I made for the good men at Agency Fusion. The coolest part about this is that it is COMPLETELY DYNAMIC! (well, the sub-nav anyway). All you have to do is update an XML file and your menu is changed. Once the menu gets longer than 4 links, it becomes scrollable. holla!

download files: [CLICK HERE]

Here's what's even cooler. Agency fusion has this nav plugged into a CMS. All the client needs to do to update is create a new page in the CMS and it automatically updates the xml...which updates the flash. Pretty slick!! Here is how it was implemented:

Monday, November 26, 2007

IE Flash Plugin Fix (quick fix)

This is a quick fix you can use to stop IE from putting that annoying box around flash movies that you have to click before the flash works. Yeah, that thing pisses me off...

go here:

Thursday, August 30, 2007

Dynamic Grid Menu

I just made a dynamic menu that loads everything in from an XML file and makes a grid outta the thumbs.

[che che check it]
[download files]

All you have to do is change some variables and you can change how many columns you want, where you want the grid to show up, how much space is in between each thumbnail and so forth. All you have to do to update it is open up the XML file and change the info to your own. You also have to put your own images in the images and thumbs folders.

Friday, August 17, 2007

Scaling Box

Check this out: [click]
Download all the files here: [download]

load XML and parse into array

REMOVE SPACES IN BETWEEN THE < AND > (sometimes i hate blogger)

< images >
< pic >
< image >cmsimages/product1.png< /image >
< caption >Powerful Performance< /caption >
< logo >cmsimages/logo1.jpg< /logo >
< urlOne >< /urlOne >
< urlTwo >< /urlTwo >
< /pic >
< pic >
< image >cmsimages/product2.png< /image >
< caption >Free Electronic Filing< /caption >
< logo >cmsimages/logo2.jpg< /logo >
< urlOne >< /urlOne >
< urlTwo >< /urlTwo >
< /pic >
< /images >

//Here is how you load and parse an XML file
//I couldn't figure out how to make a 3d array, so I made 5 different arrays...
xmlData = new XML(); //Make new xml variable
xmlData.ignoreWhite = true; //Ignore the breaks and spaces in xml file
xmlData.onLoad = function(success){ //once the xml loads....
if (success) {
xmlNode = this.firstChild; //make a variable so you don't have to type as much
total = xmlNode.childNodes.length; //this is how many items are in the xml file
products = new Array(); //make an array called products
descriptions = new Array(); //new array
logos = new Array(); //array
urlOne = new Array(); //array
urlTwo = new Array(); //array (couldn't figure out how to make 3d array outta all this junk)
for (i=0; i< total; i++) {
products[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue; //fill products array with everything
descriptions[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue; //fill descriptions array
logos[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue; //fill logos
urlOne[i] = xmlNode.childNodes[i].childNodes[3].firstChild.nodeValue; //fill urlOne
urlTwo[i] = xmlNode.childNodes[i].childNodes[4].firstChild.nodeValue; //fill urlTwo
loadPics(); //call the function that will load all the product images
} else {
content = "file not loaded!";

xmlData.load("images.xml"); //load xml file

colorTransform (change the color (tint) of a movieclip)

//transform color +500 is blown out to white, -500 is solid black, 0 is normal
import flash.geom.ColorTransform;
import flash.geom.Transform;
var colorTrans:ColorTransform=new ColorTransform();
colorTrans.redOffset = 100;
colorTrans.greenOffset = 100;
colorTrans.blueOffset = 100;
this.transform.colorTransform = colorTrans;

//this is how you can animate it
import flash.geom.ColorTransform;
import flash.geom.Transform;
var colorTrans:ColorTransform=new ColorTransform();

var colorTween:Tween = new Tween(myClip, "myColor", Strong.easeOut, myClip.myColor, 0, 1, true);
colorTween.onMotionChanged = function(){
colorTrans.redOffset = myClip.myColor;
colorTrans.greenOffset = myClip.myColor;
colorTrans.blueOffset = myClip.myColor;
myClip.transform.colorTransform = colorTrans;

Monday, July 23, 2007

Swapping Depths

theFront = 100;
movieclip_mc.swapDepths(theFront++); // brings this mc to front

Array Properties

these are all used like this: arrayName.push("element");

pop() = This method removes the last item from an array
push() = The push method adds a series of values to the end of an existing array
shift() = removes a value from the beginning of array
unshift() = adds a value or series of values to the beginning of your array
concat() = merges two arrays together ... arrayOne.concat(arrayTwo);
slice() = can create array with certain elements of existing array
sort() = will sort an array (alphabetically by default)
reverse() = Reverses the direction of an array.
slice() = Extracts a section of an array and returns it as a new array.
toString = Returns a string value representing the elements in the Array object.

myArray = new Array(); //creates a new blank array

some links to help:
Adobe Array Help

Friday, July 20, 2007

Sliding Navigation

I just made a sliding navigator that will stop when it gets to the end of the menu...
Here is is in action, with a few added bonuses:
This is also a good example of xml...
[view slider] :::: Download all the files (zipped): [download]
[click] This is how it was implemented. It doesn't slide cuz there are only 4 right now.

And here's the code:
and you can download fla here (simple version)

you need to make 3 movieclips first
slider_mc = the clip with your buttons/nav
mask_mc = will mask the slider_mc
hitState_mc = pretty self explanitory

center = hitState_mc._x+(hitState_mc._width/2); //determines the center of the hit state
active = false; //you're mouse isn't over the hit state
minGoal = mask_mc._x; //tells it how far to the right it can go
maxGoal = minGoal-(slider_mc._width-mask_mc._width); //how far to the left it can go
speed = 50; //sets the initial speed
speed /= 100; //sets the acceleration
destination = minGoal; //this will be used to tell it where to animate to first

//this is what happens when you roll over hit state
hitState_mc.onMouseMove = function() {
if (this.hitTest(_xmouse, _ymouse, true) && active == false) {
moveMenu(); //calls the mover function
active = true; //reset variable
} else if (!this.hitTest(_xmouse, _ymouse, true) && active == true) {
delete (slider_mc.onEnterFrame); //stop moving clip
active = false; //reset variable

////// MOVER FUNCTION ////////////
function moveMenu() {
slider_mc.onEnterFrame = function() { //give it a brain
if (_xmouse < center) { //if mouse is LEFT of center
//trace("move right");
if (slider_mc._x //increment = Math.abs(slider_mc._x - minGoal) / speed;
increment = Math.abs(_xmouse-center)*(speed/10); //how far is the mouse away from center?
slider_mc._x += increment; //move the clip RIGHT
} else {
//trace("move left");
if (slider_mc._x>maxGoal) { //mouse is to the RIGHT
//increment = Math.abs(slider_mc._x - maxGoal) / speed;
increment = Math.abs(_xmouse-center)*(speed/10); //how far from center?
slider_mc._x -= increment; //move clip LEFT

Friday, July 13, 2007

Simple Easing Formula

// simplest way, but it has a problem
// the movie clip will never reach it's destination and will never stop going
movieclip_mc.onEnterFrame = function(){
movieclip_mc._y += .2 * (newPosition - movieclip_mc._y);

// this is how you can snap it into place and stop animating
movieclip_mc.onEnterFrame = function(){
// if the distance between where the mc is and where it's going is less than 1...
if(Math.abs(newPosition - movieclip_mc._y) < 1){
movieclip_mc._y = newPosition; // then snap the mc to it's new position
delete(this.onEnterFrame); // then delete the "onEnterFrame" cuz you don't need it
movieclip_mc._y += .2 * (newPosition - movieclip_mc._y); // keep going if not

Thursday, July 12, 2007


getTimer() //this will return the value of how long the movie has been playing

//// this is how you could wait before something starts //////
timeOut = getTimer()+5000; // find time movie's been playing and add 5 seconds to it

movieclip_mc.onEnterFrame = function(){
if(getTimer() > timeOut){ // if time playing is greater than timeOut variable
// do whatever you need here
delete(this.onEnterFrame); //delete the brain

Set Interval (setInterval)

// name = setInterval(function to call, how often);
myInterval = setInterval(myFunction, 10000);

function myFunction(){
//do something here

clearInterval(myInterval); // this clears the interval

Tween Class

// I always forget the exact syntax for this, so here it is

import mx.transitions.Tween;
import mx.transitions.easing.*;

var tweenName:Tween = new Tween(load_mc,"_alpha",Strong.easeOut,load_mc._alpha,100,1, true );

tweenName.onMotionFinished = function{
var newTween:Tween = new Tween(load_mc,"_alpha",Strong.easeOut,load_mc._alpha,100,1, true );

Here are all the tween possibilities:
1.Back – Extends the animation over one or both ends of the tween.
2.Bounce – Creates a bouncing effect in the tween at one or both ends.
3.Elastic – Creates a mixture of the bounce and back classes. The animation is extended over and bounces back at one or both ends of the Tween.
4.Regular – Slower motion at one or both ends of the tween.
5.Strong – Similar to regular but is more pronounced when combined with the various easing methods.
6.None – A simple linear transition from a to b.

These six easing classes each have three methods to control the ease:
1.easeIn – The ease is applied only at the start of the tween.
2.easeOut – The ease is applied only at the end of the tween.
3.easeInOut – The ease is applied at both the beginning and end of the tween.

More stuff:
Tween.stop() does what it says, it tells the tween to stop at its current position.
Tween.resume() tells the tween to resume playback from its current position, this method is used after invoking the .stop() method.
Tween.continueTo(finish, duration) tells the tween to continue it's animation to a new point starting from its current position.
Tween.start() tells the tween to start playback from the initial starting point, this is not the same as .resume().
Tween.fforward() tells the tween to stop at the end value of the animation.
Tween.nextFrame() tells the tween to go to the next frame.
Tween.preFrame() tells the tween to go back to the previous frame.
Tween.rewind() tells the tween to go back and stop at its starting point.
Tween.yoyo() tells the animation to play in reverse.

.onMotionChanged - continuously triggered when the animation is running.
.onMotionFinished - triggered when the animation is finished.
.onMotionResumed - triggered when the .resume() method is called to resume the animation after being stopped.
.onMotionStarted - triggered when the animation is initiated using the .start() or the .yoyo() method. The code will not be triggered the first time the animation is played when the tween is created.
.onMotionStopped - triggered when the .stop() is called.

Preload into a container (MovieClipLoader)

// start listener for preloader
var loader:MovieClipLoader = new MovieClipLoader();

// define what should happen when the image is completely loaded
function onLoadInit(_mc:MovieClip) {
trace("do something"); // this is what will happen once loaded

// this defines what happens while images are loading
function onLoadProgress(_mc:MovieClip, loaded:Number, total:Number) {
myText_txt.text = Math.floor(loaded / total * 100) + "%"; // this shows how much has loaded in a textfield (myText_txt)
// you could also have a bar animate or whatever you want

// start loading the swf/jpg/png whatever
loader.loadClip("myMovie.swf", container_mc); // what you're loading, where you loading to

Sound Object

///// CREATE NEW SOUND OBJECT ///////////
mySong = new Sound();

mySong.onLoad = function(success){
trace("Something bad happened");

//// GET THE SONG TO LOAD/PLAY //////////////
mySong.loadSound(song.mpg,false); // song you want, if the song is streaming

//// this will happen when the song is done playing ////
mySong.onSoundComplete = function(){
glow_mc._visible = false;
stopIt = true;

///// set the volume //////////////////
mySong.setVolume(100); // 100 is where you're setting it to
currentVolume = 5; // it could be a variable
maxVolume = 100;

// this is how you would fade in a song
movieclip_mc.onEnterFrame = function(){
if(currentVolume < maxVolume){
currentVolume += .6; // constantly increments volume by .6
delete(this.onEnterFrame); // delete brain after you're done