February 15, 2014

[3ds Max] Quick Tips: X-Ray Shader

0 comments
Hi, guys. Today I'm gonna show you how to create an x-ray shader in 3ds Max. Nice thing is, this shader is using only procedural map, so we don't need to create any texture map our own.

X-Ray Shader in Autodesk 3ds Max
X-Ray Shader in Autodesk 3ds Max

So first thing first, we need a reference of how an x-ray image looks like in real world. It's always been a good habit for us, as an artist, to look for real-world reference before we start making anything. So, I googled a little and found this image:

x-ray crab | source: nationalgeographic.com

It's an x-ray crab. :D ....now, let's start a brief research of the image.
  • First, notice that x-ray makes the object looks hollow. The intensity of the outer part of the objects is high and gradually decrease when it comes to the inner part.
  • Second, the overlap parts have even brighter intensity. This effect is similar to when we use 'Add' in Photoshop layer mode.
  • Third, we have some noise when it comes to the inner part.
So, that's our quick examination. Let's get into 3ds max and we'll start the shader creation.

Open 3ds max, create an empty scene. Now hit M to show our Material Editor window. Grab an empty material slot and switch it to a Standard Material if it isn't.

Set to Standard Material
Click on the little square beside the Opacity and select Falloff map in the Material/Map Browser window. The Falloff map generates a value from white to black, based on the angular falloff of the face normals on the surface of the geometry. Well, that words might be too difficult to understand, so when you see the result once the map is applied, you will understand.

Use Falloff for Opacity map

The Falloff map will make our material have 100% intensity on the outer side and gradually decrease to 0% in the inner part. Thus, our shader looks like it's hollow in the inside. We can also adjust the intensity by playing with the black and white color in the parameters.

Now, drag our Opacity map to our Self Illumination map, make an Instance copy. X-ray creates no shadow, so it's a good idea to use the Falloff map also in the Self Illumination map so that our shader will 'glow' and pop out. Don't forget to check on the 2-Sided too.

Make an Instance Copy of Falloff map to Self Illumination

Remember the 'additive' part in our brief research? We can do that by checking on Additive in the Extended Parameters rollout. Now we are a little bit closer to our x-ray.

Use Additive Type

Click on the M square button to adjust our Falloff map parameter. Since we use our Falloff map in the Opacity slot, then we can play the opacity of our material by adjusting the black and white color. White means 100% opacity, black means 0% opacity, and grey means between them. Adjust the black color to a dark grey so that our material won't be 100% transparent in the inside.

Now you might want to test the material. Create an object, I used Torus Knot, in the scene and hit render. You should get something similar to this image:

Torus Knot with X-Ray Shader
Nice one, eh? :D
So this is our basic shader for x-ray. We can adjust and playing with the maps to create more detailed effect. For example, we can use Noise map in our Falloff map to make some noise in the shader too.

Use Noise Map to Give Detailed Look

Some Parameter Tweaking of the Noise Map
I also adjust the diffuse color to a bluish one and got something like this:


Well of course you can still play more with the shader to achieve better result. You might need to adjust some of the size parameters in the maps to fit your model. By the way, the more detail your model is, the better you will get the effect.


If you're interested, I want to share my x-ray shader that I used for the T-Rex above. Basically it's the same shader I used from above tutorial, but with a little tweaking and some more maps for the detail. You might learn something from this.

DOWNLOAD: X-Ray Shader
This is a .max file created using 3ds Max 2011 (you can't open this in older max version). Open the file then open the Material Editor and you'll get the shader there.

I hope you find this tutorial helpful and have a nice day. :D

Cheers!

February 13, 2014

[Flash] Load a Web Page using Adobe AIR

0 comments
Hi, guys. I've been testing about using Flash and Adobe AIR recently to create an app for mobile devices. One tips that I'd like to share with you today is how we can easily load a web page in Flash. Wait, why would we want that? By doing so, we are actually creating a web app specifically for our website without having to code again from zero. Isn't that cool to have an app with your brand name on it? :D

So what do we need to have? First we need to build our website (of course), preferably a responsive one so that it should match wide variety of device resolution.. especially for Android phones, they have a very wide range of device resolution since they're created by many manufacturers.

Then we need Flash to build our Air application, or other Flash IDE such as Flash Builder or flashdevelop. In this tutorial, I will use Flash CS6. Fyi, Flash CS6 supports Adobe AIR for Android and iOS, and it allows you to manage the AIR SDK, so we can always replace it with the latest SDK. If you don't know where to download the latest Adobe Air SDK, you can download it from Adobe AIR Developer Center. Flash CS6 has ver. 3.5 included by the way.

So we're all set up, then let's code ;)

Preparing the Project File

Every time we open Flash, we'll be asked about what project we're going to create. This time, instead of choosing ActionScript 3.0, we'll use the AIR project.

Flash Professional CS6 Welcome Screen
Flash Professional Welcome Screen
Notice that there're 3 options for AIR projects, AIR, AIR for Android, and AIR for iOS. Actually they're all the same. The only differences is the targeted device: AIR for desktop PC, Air for Android for Android device, and AIR for iOS for iOS device. So, in this tutorial, I will use the Air for Android option.

Click on that, and we'll now have a 480x800 px blank new file with the Publish Settings already set for Android device.

Using StageWebView Class for Loading Web Page

StageWebView class is the class that we'll be using to load our awesome website. If you want to dig depper about this class, you can see the documentation here.

Now, I'll explain you the code. First, we need to calculate the width and height of the screen, since we don't know where this app will be installed considering that wide-variety of resolution.

//This will return the actual width value of our stage
var wView:int = stage.stageWidth;
//This will return the actual height value of our stage
var hView:int = stage.stageHeight;

After we get the size, then we need to create our StageWebView object and assigned the screen size to it using viewPort property. The viewPort property uses Rectangle value, so we need to set the screen size using Rectangle object (it uses 4 values: x position, y position, width, and height).

//Create a new StageWebView object
var swv:StageWebView = new StageWebView();
//Set the size of StageWebView object created to match the screen size
swv.viewPort = new Rectangle(0,0,wView,hView);

When you're done, now we will load the webpage using loadURL property, and show it using the stage property. NOTE: StageWebView is not a DisplayObject, so we cannot call it using addChild method like we've used to do when calling a MovieClip or Sprite. Thus, StageWebView object will always be put on top of everything and make us unable to place another object on top of that. Suppose you want to place a button or movie clip on top of that, you need to hide the real StageWebView object and convert it to BitmapData using drawViewPortToBitmapData() method. Then show the bitmap instead of the real StageWebView object. Read the full explanation in the documentation.

//Load the Google Page
swv.loadURL("http://www.google.com");
//Show the StageWebView Object
//If you want to hide it, set the stage property to null
swv.stage = this.stage;

Now hit the magic shortcut (Ctrl+Enter) and you should see the Google page shown on your screen.

StageWebView Object showing Google Web Page
StageWebView Object showing Google Web Page

The nice thing about StageWebView is when the page is longer than the screen, then it will actually show the scrollbar. So we don't need to mess with the scrolling page code. ;)

Now, try to load a heavier website. You'll notice that the StageWebView will show a white blank page before it completes loading the webpage. We can avoid that white blank page being shown by setting the stage property only after the webpage is fully loaded. So what to show, while it's loading? Well, a movie clip with loading animation would be a good idea. :D

//Add an event listener when the webpage is fully loaded
swv.addEventListener(Event.COMPLETE,onCompleteHandler);
function onCompleteHandler(e:Event):void {
    swv.removeEventListener(Event.COMPLETE,onCompleteHandler);
    swv.stage = this.stage;
}

So our full code would be something like this. *Do not forget to import the required class also*

import flash.display.Stage;
import flash.geom.Rectangle;
import flash.media.StageWebView;
import flash.events.Event;

var wView:int = stage.stageWidth;
var hView:int = stage.stageHeight;

var swv:StageWebView = new StageWebView();
swv.viewPort = new Rectangle(0,0,wView,hView);
swv.loadURL("http://www.google.com");

swv.addEventListener(Event.COMPLETE,onCompleteHandler);
function onCompleteHandler(e:Event):void {
    swv.removeEventListener(Event.COMPLETE,onCompleteHandler);
    swv.stage = this.stage;
}

Publishing the Application

Well, I'm not going to explain the detail step to do this because that will make this post much much longer. But you can get the documentation in the Adobe official website:
- Publishing for Android device
- Publishing for iOS device

Btw, it's better for you to have a real device to test when developing a mobile device app, because if you have your code work in Test Movie doesn't guarantee that it will work on the device.

Okay, I think this is the end of the tutorial. I hope you find something useful here.
Cheers!

January 24, 2014

In Christ Alone

0 comments
Okay, so I am not an illustrator. I know for sure that my drawing skill is not quite great but I just want to share this. :p One day, my friend made me to draw for her, an illustration that tells the story about her struggling when she worked on her final project. I think that would be fun, and since we both love the illustration style of HJ-Story, I tried to make one with that style.

This illustration tells all: about how she learned to rely on God's strength instead of hers to do her final project. The texts, it was taken from a song by Brian Littrel, In Christ Alone (you should hear the song, it's very nice). It was the song that gave her strength in her struggling.
In Christ Alone
In Christ Alone
..and for her graduation surprise. :D
Grace is
Grace is

To remind us that it's all by HIS grace. Cheers! :)

Iron Man Mark III Helmet

0 comments
Well yeah, you may call me LAME for posting this old project. This is my first hard-surface modeling and I just want this project to be documented well in my site, so, yeah here we go...

Iron Man Mark III Helmet
Iron Man Mark III Helmet
And for some wireframe
Iron Man Mark III Helmet Wireframe
Iron Man Mark III Helmet - Wireframe

Cheers!

January 23, 2014

Perfections: Window Film Simulator

0 comments
Perfections is a brand of premium automotive window film in Surabaya. This is a project that I've been working a few months ago. I did the web design (remaking the old one) and created the window film simulator.

perfectionsfilm homepage
Home Page perfectionsfilm.com
The window film simulator was developed using Flash. User is able to choose their car color, and choose what type of window film that is suitable for them. Along with the specification info for each type.

perfectionsfilm Window Film Simulator
Window Film Simulator perfectionsfilm.com
If you want to see how this simulator works, you can visit www.perfectionsfilm.com and click on the PRODUCTS tab.

Cheers! :)

January 07, 2014

SUHO ft. IU - Monday thru Sunday | 2D Animation

0 comments
Hi guys,

I've just browsed my old YouTube channel and I found this old 2D animation I and my friends did in 2009 for college assignment.


It was for 2D animation class, lectured by awesome Is Yuniarto, the famous comic artist in Indonesia: author of Garudayana and Knights of Apocalypse.

Personally, I really love this work, so that's why I'd like to share here.. and btw, If you think that the illustration is awesome, meet my friend, Michael R.H. He did all of the character drawing in this animation. As for me, I did the animation (it was all done in adobe Flash).

Suho ft. IU - Monday thru Sunday | 2D Animation
Suho ft. IU - Monday thru Sunday | 2D Animation

A little bit about the production process:

Gathering Reference
In this step, we gather all the references, images, video, and text we think is cool and suitable for our projects. Since the assignment required us to create a Music Video, then we choose the song first before we look for the other reference. In our case, we choose the song of Suho (feat IU), titled Monday thru Sunday -> No special reason for this, it just because.. well, you know.. the K-Pop is getting very popular in my country. :p

Creating Story
After all the references are gathered, we start creating the story. We search for the lyric and start creating the story from that. We wrote it down, then convert those text into storyboard. The storyboard is an important step because it will be our main guide for the animation process, especially for camera angle and timing guide.

Creating Asset
As the the story team do their job, the asset team start to create the asset. We sketch it first on paper, then trace it on Adobe Illustrator for the line art and paint them on Photoshop. The characters has special concern since it is going to be animated. We planned to use tween animation as much as we can because the frame-by-frame method will take longer time and the deadline is short. So, we decided to split the characters into some body parts. As you can see in the sprite sheet below:

2D Body Part Sprite for Animation
2D Body Part Sprite for Animation
Notice that we only created half part for arm and leg, either left or right. This is because we were going to mirror those parts in the animation process.

Animation Process
Like the explanation above, the splitted body parts help so much in using tween animation. We use Motion Tween in Adobe Flash for the entire animation, including the texture and visual effects e.g. lighting effects in ferris wheel shot. We were also supposed to use Bone method for rigging (see that we split the girl's arm into 3 parts), but the feature wasn't available yet at that time. What we did was manually transform those parts in difference layers, applying Motion Tween on each layer, and set the registration point (pivot) to the correct joint position.

So, it was only in some shots, we used frame-by-frame method, e.g. the curtain animation in the intro shot. The animation is entirely done by using the storyboard we had created earlier as the main guide.

Video Editing
The last thing we do is the video editing process. We export all the shots from Flash into movie files, then arrange and synced those files with the song in Adobe Premiere.


Cheers! :)