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
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.
- WordPress, XHTML, CSS
- New theme to create a better user experience as well as create an aesthetically pleasing layout and design. Website features a static home page with a portfolio section and blog. All powered by WordPress.
Hey readers, I’m happy to finally debut the site redesign. A platoon of new features have been added that take advantage of WordPress 2.7 newest features.
Some of the new features implemented in this design are:
Here’s a project I had to do for my Multimedia Design Class. We needed to pick a subject that is up for debate. I decided to do Mac vs PC, seemed to be more fun than smoking or something like that.
I went for a fun UI approach and make it like a desktop. Click on the icons and a window pops up that you can drag around, minimize, etc. It was a pretty fun project. Best of all I got an A!!!!!!.
I also posted the code for anyone who was curious.
Check out the site here
Main SWF File
import gs.TweenLite;
import gs.easing.*;
var wL:Loader = new Loader();
var appHolder:MovieClip = new MovieClip;
var appWindow:Loader = new Loader();
var appIcon:app = new app();
var lockHolder:MovieClip = new MovieClip;
var lockWindow:Loader = new Loader();
var lockIcon:lock = new lock();
var socialHolder:MovieClip = new MovieClip;
var socialWindow:Loader = new Loader();
var socialIcon:social = new social();
var costHolder:MovieClip = new MovieClip;
var costWindow:Loader = new Loader();
var costIcon:cost = new cost();
var performanceHolder:MovieClip = new MovieClip;
var performanceWindow:Loader = new Loader();
var performanceIcon:perform = new perform();
var minimized:Boolean = false;
var cf1:ColorTransform = new ColorTransform();
var cf2:ColorTransform = new ColorTransform();
var showing:Boolean = false;
cf1.color = 0xFFFFFF;
cf2.color = 0x000000;
appHolder.addChild(appWindow);
appIcon.name = "appIcon";
appIcon.mouseChildren = false;
appIcon.buttonMode = true;
lockHolder.addChild(lockWindow);
lockIcon.name = "lockIcon";
lockIcon.mouseChildren = false;
lockIcon.buttonMode = true;
socialHolder.addChild(socialWindow);
socialIcon.name = "socialIcon";
socialIcon.mouseChildren = false;
socialIcon.buttonMode = true;
costHolder.addChild(costWindow);
costIcon.name = "costIcon";
costIcon.mouseChildren = false;
costIcon.buttonMode = true;
performanceHolder.addChild(performanceWindow);
performanceIcon.name = "performanceIcon";
performanceIcon.mouseChildren = false;
performanceIcon.buttonMode = true;
wL.contentLoaderInfo.addEventListener(Event.COMPLETE, addWall);
costWindow.contentLoaderInfo.addEventListener(Event.COMPLETE, addListeners);
performanceWindow.contentLoaderInfo.addEventListener(Event.COMPLETE, addListeners);
appWindow.contentLoaderInfo.addEventListener(Event.COMPLETE, addListeners);
lockWindow.contentLoaderInfo.addEventListener(Event.COMPLETE, addListeners);
socialWindow.contentLoaderInfo.addEventListener(Event.COMPLETE, addListeners);
appIcon.addEventListener(MouseEvent.CLICK, clickEvent);
appIcon.addEventListener(MouseEvent.ROLL_OVER, overEvent);
appIcon.addEventListener(MouseEvent.ROLL_OUT, outEvent);
lockIcon.addEventListener(MouseEvent.CLICK, clickEvent);
lockIcon.addEventListener(MouseEvent.ROLL_OVER, overEvent);
lockIcon.addEventListener(MouseEvent.ROLL_OUT, outEvent);
socialIcon.addEventListener(MouseEvent.CLICK, clickEvent);
socialIcon.addEventListener(MouseEvent.ROLL_OVER, overEvent);
socialIcon.addEventListener(MouseEvent.ROLL_OUT, outEvent);
costIcon.addEventListener(MouseEvent.CLICK, clickEvent);
costIcon.addEventListener(MouseEvent.ROLL_OVER, overEvent);
costIcon.addEventListener(MouseEvent.ROLL_OUT, outEvent);
performanceIcon.addEventListener(MouseEvent.CLICK, clickEvent);
performanceIcon.addEventListener(MouseEvent.ROLL_OVER, overEvent);
performanceIcon.addEventListener(MouseEvent.ROLL_OUT, outEvent);
stage.addEventListener(Event.RESIZE, redoWall);
wL.load(new URLRequest("wall3.jpg"));
appWindow.load(new URLRequest("applications.swf"));
lockWindow.load(new URLRequest("security.swf"));
socialWindow.load(new URLRequest("social.swf"));
costWindow.load(new URLRequest("cost.swf"));
performanceWindow.load(new URLRequest("performance.swf"));
function clickEvent(e:MouseEvent):void
{
if(e.type == MouseEvent.CLICK)
{
switch(e.target.name)
{
case "costIcon":
addCost();
costHolder.showing = true;
break;
case "performanceIcon":
addPerformance();
performanceHolder.showing = true;
break;
case "appIcon":
addApp();
appHolder.showing = true;
break;
case "lockIcon":
addLock();
lockHolder.showing = true;
break;
case "socialIcon":
addSocial();
socialHolder.showing = true;
break;
case "close":
trace("closed");
TweenLite.to(e.target.root.parent, .5, {alpha:0, onComplete:removeLoader, onCompleteParams:[e.target.root.parent]});
break;
case "minimize":
if(!e.target.minimized)
{
TweenLite.to(e.target.root.clip, .5, {alpha:0});
TweenLite.to(e.target.root, .5, {delay:.5, scaleX:.5, ease:Bounce.easeOut});
TweenLite.to(e.target.root.title, .5, {delay:.5, scaleX:2});
TweenLite.to(e.target.root.minimize, .5, {delay:.5, scaleX:2, x:"-10"});
TweenLite.to(e.target.root.close, .5, {delay:.5, scaleX:2});
e.target.root.titleBar.transform.colorTransform = cf1;
e.target.root.title.transform.colorTransform = cf2;
e.target.minimized = true;
}
else
{
e.target.root.titleBar.transform.colorTransform = cf2;
e.target.root.title.transform.colorTransform = cf1;
TweenLite.to(e.target.root, .5, {scaleX:1, ease:Bounce.easeOut});
TweenLite.to(e.target.root.title, .5, { scaleX:1});
TweenLite.to(e.target.root.minimize, .5, {scaleX:1, x:"+10"});
TweenLite.to(e.target.root.close, .5, {scaleX:1});
TweenLite.to(e.target.root.clip, .5, {delay:.5,alpha:1});
e.target.minimized = false;
}
break;
}
}
else if(e.type == MouseEvent.DOUBLE_CLICK)
{
trace(e.target.name);
switch(e.target.name)
{
}
}
}
function overEvent(e:MouseEvent):void
{
TweenLite.to(e.target, .4, {scaleY:1, scaleX:1});
}
function outEvent(e:MouseEvent):void
{
TweenLite.to(e.target, .1, {scaleY:.8, scaleX:.8});
}
function upDownEvent(e:MouseEvent):void
{
if(e.type == MouseEvent.MOUSE_DOWN)
{
switch(e.target.name)
{
case "titleBar":
e.target.root.parent.parent.startDrag();
break;
case "costIcon":
e.target.startDrag();
costIcon.removeEventListener(MouseEvent.CLICK, clickEvent);
break;
}
}
else if(e.type == MouseEvent.MOUSE_UP)
{
switch(e.target.name)
{
case "titleBar":
e.target.root.parent.parent.stopDrag();
break;
case "costIcon":
e.target.stopDrag();
costIcon.addEventListener(MouseEvent.CLICK, clickEvent);
break;
}
}
}
function redoWall(e:Event):void
{
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
var sw:Number = stage.stageWidth;
var sh:Number = stage.stageHeight;
var scaleW = sw/wL.contentLoaderInfo.width;
var scaleH = sh/wL.contentLoaderInfo.height;
wL.scaleY = wL.scaleX = scaleW;
}
function addWall(e:Event):void
{
var scaleW:Number = stage.stageWidth/wL.contentLoaderInfo.width;
var scaleH:Number = stage.stageHeight/wL.contentLoaderInfo.height;
wL.scaleY = wL.scaleX = scaleW;
//wL.scaleX = scaleW;
stage.addChild(wL);
appIcon.x = 100;
appIcon.y = 100;
appIcon.scaleY = appIcon.scaleX = .8;
stage.addChild(appIcon);
lockIcon.x = 230;
lockIcon.y = 100;
lockIcon.scaleY = costIcon.scaleX = .8;
stage.addChild(lockIcon);
socialIcon.x = 100;
socialIcon.y = 300;
socialIcon.scaleY = socialIcon.scaleX = .8;
stage.addChild(socialIcon);
costIcon.x = 230;
costIcon.y = 300;
costIcon.scaleY = costIcon.scaleX = .8;
stage.addChild(costIcon);
performanceIcon.x = 320;
performanceIcon.y = 200;
performanceIcon.scaleY = performanceIcon.scaleX = .8;
stage.addChild(performanceIcon);
}
function addCost():void
{
if(!costHolder.showing)
{
stage.addChild(costHolder);
costHolder.x = stage.stageWidth / 4;
costHolder.y = stage.stageHeight / 4;
}
}
function addPerformance():void
{
if(!performanceHolder.showing)
{
stage.addChild(performanceHolder);
performanceHolder.x = stage.stageWidth / 4;
performanceHolder.y = stage.stageHeight / 4;
}
}
function addApp():void
{
if(!appHolder.showing)
{
stage.addChild(appHolder);
appHolder.x = stage.stageWidth / 4;
appHolder.y = stage.stageHeight / 4;
}
}
function addLock():void
{
if(!lockHolder.showing)
{
stage.addChild(lockHolder);
lockHolder.x =stage.stageWidth / 4;
lockHolder.y = stage.stageHeight / 4;
}
}
function addSocial():void
{
if(!socialHolder.showing)
{
stage.addChild(socialHolder);
socialHolder.x = stage.stageWidth / 4;
socialHolder.y = stage.stageHeight / 4;
}
}
function addListeners(e:Event):void
{
e.target.loader.content.close.addEventListener(MouseEvent.CLICK, clickEvent);
e.target.loader.content.minimize.addEventListener(MouseEvent.CLICK, clickEvent);
e.target.loader.content.titleBar.addEventListener(MouseEvent.MOUSE_DOWN, upDownEvent);
e.target.loader.content.titleBar.addEventListener(MouseEvent.MOUSE_UP, upDownEvent);
}
function removeLoader(l:Loader):void
{
l.alpha = 1;
if((Object(l.getChildAt(0)).minimize.minimized))
{
Object(l.getChildAt(0)).titleBar.transform.colorTransform = cf2;
Object(l.getChildAt(0)).title.transform.colorTransform = cf1;
TweenLite.to(Object(l.getChildAt(0)), .1, {scaleX:1, ease:Bounce.easeOut});
TweenLite.to(Object(l.getChildAt(0)).title, .1, { scaleX:1});
TweenLite.to(Object(l.getChildAt(0)).minimize, .1, {scaleX:1, x:"+10"});
TweenLite.to(Object(l.getChildAt(0)).close, .1, {scaleX:1});
TweenLite.to(Object(l.getChildAt(0)).clip, .1, {delay:.1,alpha:1});
Object(l.getChildAt(0)).minimize.minimized = false;
}
MovieClip(l.parent).showing = false;
stage.removeChild(l.parent);
}
import gs.TweenMax;
import gs.easing.*;
close.mouseChildren = false;
minimize.mouseChildren = false;
close.buttonMode = true;
minimize.buttonMode = true;
close.addEventListener(MouseEvent.CLICK, clickEvent);
minimize.addEventListener(MouseEvent.CLICK, clickEvent);
close.addEventListener(MouseEvent.ROLL_OVER, overEvent);
minimize.addEventListener(MouseEvent.ROLL_OVER, overEvent);
close.addEventListener(MouseEvent.ROLL_OUT, outEvent);
minimize.addEventListener(MouseEvent.ROLL_OUT, outEvent);
function clickEvent(e:MouseEvent):void
{
switch(e.target.name)
{
case "close":
trace("CLICK");
break;
case "minimize":
trace("MINIMIZE");
break;
}
}
function overEvent(e:MouseEvent):void
{
TweenMax.to(e.target, .7, {colorMatrixFilter:{colorize:0xFFFFFF, amount:1, brightness:1.2}, ease:Bounce.easeInOut});
}
function outEvent(e:MouseEvent):void
{
TweenMax.to(e.target, .7, {colorMatrixFilter:{colorize:0xFFFFFF, amount:0, brightness:1}, ease:Bounce.easeInOut});
}
- Illustrator
- Futura LT ExtraBold, Neo-Geo
- Here is a project I did for my typography class. We had to create a poster about an event at Cooper Hewitt The flourishes were created by me. i was doodling on my notebook and liked the way it looked, so I decided to incorporate it into the design.
Just something I whipped up trying to build up my portfolio of web elements. This navigation element grabs the urls from an xml file, so you can update the links without having to open the flash file for fast updating of links. Any questions drop me a line.
[kml_flashembed movie=”http://blog.kreativeking.com/downloads/examples/navs/nav1.swf” height=”157.5” width=”560” base=”http://blog.kreativeking.com/downloads/examples/navs/” /]
New Design for the blog is finally up. I was up all night doing this one. I originally had another I was going to use but it wasn’t compatible with IE as well as FireFox. I really thing this template and will be the new home design for the site.
The design process for the blog is coming along well so far. I had bit of a Kreative block, but about an hour ago I got the ball rolling. I am hoping to have the design up and running within a week. In the mean time I will be posting up stuff like custom classes and such that I have made.
