FLOverload 2.0 is a brand new game that brings a new approach to the classic pipes style problem solving game for the iPhone. I recently had the opportunity to work on the music and sound effects, thanks to the guys over at DS Media Labs.

Heres a quick review/demo of the upcoming iPhone game.

The object of game is to connect the pipes from the starting position to the ending position.

In each level, you have a certain amount of time to uncover the pieces and connect them make a path so that the water can flow over to the finishing position. If the time runs out, the water overflows and you lost the game.

It’s very addicting and fast pace so you gotta think fast and have a quick finger to solve the puzzle.

So you just tap on the pieces and switch them around, connect them up and when you think you’ve solved it, tap on the top button to complete it. Pretty simple challenge, but get harder each new level.

You’ll also find bonus pieces that will boost your points and give your more time to think, but watch out for those bad ones, they can really mess with you.

So there you have it, FLOverload 2.0. A big thanks to the Developers over at DS Media Labs, for giving me the opportunity to work on the music and sound effects. Watch out for it on the iTunes Store, coming out real soon.

Today I’m going to create a 3D Box and animate it using the new 3D Tools and Features in Flash CS4.

Step 1: Create a square shape

Start by drawing out simple square. Hold down the shift key to constrain the proportions. Now lets change the solid fill to a gradient by going the color palette, and lets change the type to a Linear gradient. Next lets remove the stroke, just goto the stroke color picker and choose the None option.

Now lets make sure our square is in the center of the stage, we can do that by going to the align panel and click on the horizontal and vertical align buttons.

Step 2: Position & Convert into a Movie Clip

Okay next lets convert this shape into a movie clip, just right click and select Convert to Symbol… alright now lets nest this symbol inside another movie clip, and lets name this one 3D Box. So inside the 3D box movie clip is where we’ll be setting up the 3D layers.

Step 3: Duplicate Layers for Each Box Side

Alright so now we can just copy and paste a few of these squares on some new layers. And lets name each copy after a side of the 3D Box such as top, bottom, left and right.

Step 4: Rotate Each Side 90º & Position in Place

Now lets convert all the frames into motion tweens by selecting them, right clicking and Create Motion Tween. Now lets start with the top layer and rotate the X axis 90 degrees. You can hold down the shift key to constrained your rotation. Next we can go inside the motion editor to ensure our rotation was a either a positive value, or a negative one. Just to make sure everything is set the name.

Now we’ll want to move this top layer up about half of the way. So just calculate half the height of the square and move it up so it sets on top. I like to use the 3D Position and View Panel to do this because you can easily change the values there.

Now lets repeat this process for the bottom layer. But this time we’ll want move the half way down, so again just change the value in the 3D Position and View Panel. Alright so next lets start on the left and right squares. Starting with left, lets rotate the Y axis 90 degrees and shift it over to the left about half of the width of the square. Again we can go inside the motion edition to check our values. Alright now we can repeat the same process for the right square, but don’t forget to move it to the right side instead of the left!

Step 5: Test 3D Box Rotation

So once we finish all rotating and positioning, we should be left with a picture frame looking set of rectangles. So lets jump out of the movie clip and goto scene 1. Now lets select our 3D rotation tool and watch as I rotate the box on its Y axis. Pretty sweet huh?

Step 6: Add Drop Shadow

Lets select our bottom layer, and lets goto the filters section in the properties panel and licks pick drop shadow. Lets change the blur X and Y values to something big like 100 pixels, change the quality to high, and distance to 0.

Step 7: Animate 3D Box Rotating

So now lets jump out to our main timeline and lets add a few move frames. Now Ill be using the motion editor to animate the 3D Box and have spin on it Y axis. So lets convert it the frames into a motion tween by right clicking on the frame bar and selecting convert to motion tween. Now we can scrub over to the last frame and then goto the motion editor. So if we want to just rotate the box spinning from left to right, we can simply change the Rotation Y value to 360 degrees.

Test out the animation by pressing cmd+renturn (cntrl+return on PC).

Download Flash CS4 3D Object

With a brand new year come brand new ideas and expectations. Lately I’ve been busy focusing most of my time on Pixil.info for many reasons, but mainly because I believe it’s one of the best ways to contribute to the design and development community. So with the new year here, I thought it be a really great idea to redesign the blog and simplify a few things.

First thing on my list were to make the site’s load time faster. With all the videos loading on the front page, we agreed it was best to not display every video on each post. So I decided that the best way to display our media was to run it though an elegant yet simple media viewer. So we decided to go with Shadowbox JS.

A few other items on the optimization list was to reduce the size of image and to ditch unnecessary transparent PNG images.

The next thing to do was to spice up the sites color scheme. Though at first I enjoyed the dull muted color look, I choose to saturate the existing color palette and really pop the shit out of those colors (but not eye precisely harsh of course . New textures were created and I experimented a lot with making grungy patterns. Spent lots of time with the dark color blend mode!

Positioning and aligning elements is always important to me and Its definitely what makes or breaks a design, so of course I kept the layout very simple. Two columns, fixed width!

And from beginning to end, organized layers, smart object slices, and yes even layer comps were used in my workflow. You guys don’t know how much it helps to use these when building out a site! Let me know what you guys think of the redesign, thanks!

Finally, our first episode rendered in HD! On this episode, Dingo shows us how to hack your Wii to get the HomeBrew Channel, and a tutorial on Wii Game Backups. Also, track in the background is a new one I just finished up and released to the public. So check em both out and let me know what you think! Thanks for watching and stay tuned for future episodes & tunes!

Listen – Tasty ColorsWatch – Burning Wii Games

So recently I got a hold of the new update for BeatMaker and I’ve been playing with it pretty thoroughly. I decided I’d do a review and a tutorial on how to make custom drum kits.

New Features BeatMaker 1.3

So first, Lets take a look at the the upgraded sequencer. With the introduction to the new preview bar, it makes it easy to scrub through long patterns. We can now zoom in and out of the sequencer and can now insert and remove bars on the timeline.

Next there’s the dynamic access bar which lets us quickly jump between different settings. We can now quickly switch between patterns while in the editor. Drum patterns can now be up to 4 bars long and The “step resolution” can now be edited up to 1/64T.

Next, we got a whole new pad editing screen for easy access to settings. An improved wav editor with cropping and zooming function… and a new cross controller with fullscreen mode for live effects.

Next up, we got audio recording. Thats right, everyone asked for it, and we finally got it. You can now record directly from the iPhones built-in mic or headset.

Now lets take a look at the new Moog filter. Features low-high and a band-pass frequency with resonance support. Also theres improvement to the delay effect featuring dotted and triplet rhythm support.

Last but not least, you can finally export your beats in midi format.

Use BeatPack to create your own custom kit.

So first we’ll need to download BeatPack from intrua’s website. http://intrua.net/shop.html

When you open up the app, first thing you’ll see is the share kits and samples section. If you read the instructions first you’ll get a head start on how to sync your audio files from your desktop to your iPhone. But first, I’m going to jump to over to the Create Kit section.

The Drag Zone is where we’ll be loading our samples. Simply drag an audio file to the desired pad to load it. This is were your creativity comes into play. I like to arrange my samples in groups, so when I play it live, I can play it with ease. So when your kit is ready, you can fill out the information section and even upload a kit icon. To save it out, click the generate button.

Next, goto the Share kits section and follow the instructions to get your kit onto your iPhone. So heres a quick run down. Goto BeatMaker, in the home section, click on the BeatPack Icon, then click on add server. Next, type in your computers IP address, you can find it in the share kits section in the BeatPack app.

When your ip shows up in the server list, simply click on it and hit the download button. Just navigate to your file and hit the download button. When its done, close it and load it as a kit.

And Thats pretty much how we create a custom kit, with BeatPack. Remeber, you can upload your tunes back over to your desktop by using the upload function.

Download Free BeatMaker Kit

Advanced Layer Comp Workflow
In a past episode, we talked about using layer comps to save time when building out websites. Today I’m going to take a closer look at layer comps, and show you how they can change the entire look of your project. So lets say your client likes the layout… but ask you to change the color scheme. Lets also say our client doesn’t know exactly which colors to choose. Instead of picking just one, our client suggests several color schemes. Best way to do this (in a non-destructive way) is to use Layer Comps.

Step 1: Create a new layer comp.

First, save our project’s current state, so lets open up the layer comps palette and click the create new button. Lets go over these three check boxes.

Visibility keeps track of what layers turned on or off, position stores the location of your layers and appearance holds all of your layer style information.

So depending on how drastic you want your layout to change, you’ll need to check the appropriate boxes. In this example all use all three.

Step 2: Changing your layout.
Now that we’ve saved our current state, lets start changing stuff around! So once your happy with your changes, lets save it out as a new layer comp. So in the layer comp palette, create new, make sure to check those appropriate boxes checked and hit okay.

Now you can switch back and forth between your new layer comps. It’s pretty amazing switching thru layer comps like this. Sorta resembles Javascript Style Sheet switching.

Alright so with all that done. Let’s export these out. I’ll be using the “Layer Comps to Files” export script. If your on CS4, you’ll notice adobe added a few new file formats. Alright and with that, you’ve just created an advanced layer comp workflow. Take a moment to play around the position and appearance, try to create something totally different, thanks and cya next time.

Since the recent overhual excitement from the release of Sweetcron, I’ve been spending some quality time designing some new themes. Some long hours went into making this one, so here it is. Feel free to leave me feedback,report bugs, or suggestions thank you.

View Demo
Custom Ecken Theme

Download Ecken’s Paper Theme

Testing out the new IR-909 beta 3 for iPhone. Within a couple minutes, I had filled all 4 patterns with some killer beats and decided I’d hook it up to Logic Pro. Somewhat a hassle to sync the BPM’s with Logic, but the result spoke for it’s self.

I’d definitely like to see the next version have more patterns, but 4 is okay. Having said that, I really like playin with this app! I tip my hat to Dmitry at http://roventskij.net/ for making this app, gotta drop a donation for all the hard work.

By the way, the track in the background is by yours truely. Check out the full song at Last FM

So on my last tutorial, we took a look at using layer comps and smart object for web build out. Today, we’re going to take a closer look at the How-To’s and Go In-depth.

How to Create Layer Comps for build out
Alright so when your design is ready for build out, you’ll want to first make text layer comps. This will help us easily export our slices. So just click on the new layer comp icon in your layer comp palette, and name it Text On. Make sure you only have “visibility” checked.

Next, make a Text Off layer comp. Then start turning off all the HTML text. To select a text layer with the move tool, you can hold down cmd or control key and click on the layer. So with all the text turned off and the layer comp selected, click on the Update icon to save the layer comp. Okay, now we can cycling threw them. This will now let us quickly turn off all the HTML text with a single click, which will lets us to export slices much faster.

How to setup the Navigation for build out (with Smart Objects):
Next, let’s take a look at our navigation. The goal here is to set up the document to have roll over graphics. we can do this by converting the nav into a smart object, and then create roll over graphics along with layer comps and slices. First make a selection of the background layer, make it the size you want the smart object to be and convert it that into a smart object. So just copy merge, Paste, and name the layer. Right click the layer and convert to a smart object. Now open the smart object and copy the graphics over. just click and drag on the folder, and plop it into place. Now we have to double our canvas height. Basically we’re going to set up the navigation for the CSS sliding doors technique. Duplicate the background layers and folders then shift them down. Create some cool graphics for the roll overs and save. When you switch back to our main layout, make the same marque selection of the background layer. Make that into a mask so you can mask out the roll over graphics. Also you might get warnings the layer comp palette. All you have to do to fix these is to hit the update icon or double click on the warning icon to clear the warning flag. So just cycle threw the layer comps and make sure their set properly.

How to setup Sidebar for build out:
Okay next, we’ll convert our sidebar into a smart object. So just like before, create a marque selection to determine a canvas size for our smart object. drag over the graphics Adjust the layers, save it. Next create text layer comps. These may become tedious if your layers aren’t organized, so its important to have layer organization.

How to create slices for build out:
Creating slices is a much better method then manually making selections, and exporting each image, piece by piece. By creating slices, we’re able to save image name, compression setting, dimension, and the ability to export them out all at the same time. Before we start slicing, make sure we have guidelines set up so that they snap easily. Now draw out some slices. Name your slices simple and Make sure they’re all consistent. So having a naming convention comes in handy. Next create slices in your smart objects. When you export your slices, make sure you switch to the Text Off layer comps. In the Save for Web & Devices dialog, you can change the name of the slices and set the image compression settings. In our save window, we can set to export selected slices only. I almost always have it have it set to this setting. Next export the slices inside the smart objects. You can select multiple slices by holding down the shift key and set the compression settings for all them at the same time. Check on our images when you’re finished. Alright, that’s it for my web build out workflow. I hope you’ve gotten something out of it, try it out. Let me know what you think, by post some comments. I’ll be posting the PSD file on our site for reference. So you can download it and test it out. Remember, its all about using slices, layer comps, and smart object’s. Dont forget, the key to making it easy is to being organized. Until next time, cya later.

Download Tutorial File

On today’s episode, an overview of using layer comps to set up sub-pages and ready-to export slices. Creating slices inside of smart objects and organizing your layers and folders can help you structure your sub-pages.

Layer Comps for Build Out
Layer comp are a convenient way to store a snapshot of certain aspects in a document. Here we’re able to save a layer’s visibility. Take a look at these two layer comps, text on and text off. When we cycle thru these two you’ll notice that all this is really doesing is turn off and on the soon-to-be HTML text. By having your comp setup this way, it allows us to quickly export slices with out having to worry about the html text getting exported along with a background image.

Smart Objects & Slicing
Here we have an entire sub-page reside in one smart object. Inside our smart oubject we have slices and layer comps. Thats right folks, smart objects support slices.

By converting your sub-page into a smart object, your able to create new slices for each new page. Also, notice we have our handy text on and text off layer comps. This is essential for exporting your slices. So in addition to converting your sub-pages into a smart objects, lets take a look at how we have our navigation set up. Here you’ll find our favorite text on and text off layer comps. We also have our slices.

Just by looking at the layout, you’ll notice we have it set up for the CSS sliding doors technique. This basically allows one background image contain different anchor states. so If you’ve done css menus before, you know the drill. thats basically all their is to the navigation. Alright so to sum thing ups, lets take a look at what we’ve learned so far.

• Use layer comps to set up sub-pages and ready-to export slices.
• Create your slices inside of smart objects.
• Organize your layers and folders to help you structure your sub-pages.
• Don’t forget you can convert pieces of your website into smart objects.