Using your iPhone as a Wireless MIDI controller. Find out how we can remotely control Logic Studio with our iPhones.

UPDATE: Osculator app now comes with TouchOSC templates!

• TouchOSC
  iPhone
• OSCulator
  Desktop

Alright so first we’ll need to download TouchOSC from the App Store.

So while we download that, lets go over to the desktop and download OSCulator. OSCulator is basically going to make Touch OSC work with Logic.

Make sure your iPhone and desktop are on the same wifi network. In TouchOSC, your desktop name should show up in network list. Make sure the layout you pick matches with the osculator template you want to use.

Once your connected, test out the controllers in TouchOSC and check OSCulator for a solid green connection. Now in Logic, you can use the Controller Assignment window by hitting Cmd+K. When assigning controllers, always make sure to set the value settings with an unsigned format and a scaled mode.

Heres a quick tip for assigning XY pads with Logics Sculpture Morph Pad.

Goto OSCulator and verify which midi CC is set to the XY. Then in Sculpture, go down to the Midi controller assign area and change the MorphXY settings to the OSCulator midi CC’s. Now your the iPhone can smoothy change the shape of sound in Logic

Alright there you have it, you get the idea. Of course you can also set this up as a piano, or a drum machine, lots of other cool stuff, I hope you enjoyed the epsode, I’ll cya next time with another tutorial.

Breadcrumbs or breadcrumb trail are a navigation technique used in user interfaces. Its purpose is to give users a way to keep track of their location within programs or documents. So here is a quick code snippet for achieving this in wordpress.

First, add this piece of code to your functions.php
Download Source Code
Second, add this to piece to somewhere in your template where you’d like to display the breadcrumb.

Download Soure Code
Finally, you can style it with CSS. Here how I styled mine:

/* BreadCrumb Styles */
#bread {
background: #0a0a0a;
padding: 4px;
margin:10px 0 1px 0;
}
#bread ul {
padding: 0 0 0 10px;
margin: 0;
list-style: none;
font:normal 11px Arial;
}
#bread ul li {
display: inline;
color: #a8a8a8;
margin: 0 4px 0 0;
padding: 0 16px 0 0;
background:url(images/arrow.png) no-repeat right;
}
#bread ul li a {
color:#b3d962;
text-decoration: none;
}
#bread ul li:last-child {
background: none;
}

GridIron Software Flow is a very unique program for creative professionals.
And Its basically a tool that helps you track and manage all the files that go into creating a project. Let me show you what I mean, check this out.

So one of the best features flow has to offer is that it allows you to visually see the structure of a project. If you use various programs to create a project, flow can actually see the connection between all the files.

Whats great is that this works for websites, print documents, video composites, just about anything! So It helps you streamline your workflow, and keeps you on top of your project.

So if your project looks like a major cluster, we can organize it down so its less messy.

So I can right click on the images, and select group similar, and we if we keep doing that,youll notice it groups all the images per file format, JPG, PNG, GIF, very nice!

Now whats even better is you can make custom groups. Ill make all these individual files into a group and call it Downloads.

A quick way to see contents in the groups is to right click and select Show Group Contents. Alright and its starting to look a lot more organized.

Alright, now lets take a look at another example. Its a Photoshop document. You can actually see all the layers and bins inside the document, very cool. Heres an after effects project, same thing, you can see the structure of the composition.

Alright and there you have it. Thats a quick demo of GridIrons Flow, now theres a whole bunch of other features like versioning, time tracking, tagging and ]]> http://noeruiz.com/reviews/episode-17-using-gridiron-flow/feed/ 0 http://noeruiz.com/tutorials/how-to-create-3d-box-in-flash-cs4/ http://noeruiz.com/tutorials/how-to-create-3d-box-in-flash-cs4/#comments Thu, 08 Jan 2009 22:01:57 +0000 admin http://noeruiz.com/?p=264

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

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.

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.

• Create roll over and roll out animations.
• Use action script to control button behaviors.
• Get familiar with frame labels to set up your animation states.

View TutorialDownload Files