Wednesday, November 30, 2011

Embossing Effects On-The-Fly

Embossing is an effect used to give an object the appearance of being sunk into or raised above a background. They are very easy to create in Photoshop, but today I'm going to show you how you can start with nothing but a shape and build the effect in code. This has the advantage of allowing you to adjust the effect on-they-fly based on parameters you choose.

We've done exactly this in our new IDE. In fact, I've been given permission to show a very small glimpse of the tray area of our new layout editor. The same object in our current IDE is on the left, the new version is on the right.


That version on the right is produced in code, starting only with an 8-bit mask to describe the shape:


The embossing effect is created using 3 layers. The bottom layer is the drop shadow, the middle layer is the fill, and the top layer is the inner shadow. I created this simple animation to demonstrate how the individual layers build together to create the effect:


Now, let's get to some actual code. First, you need an image to use as the shape. This image should have no color, only shades of grey. The background can be either white or translucent. We first need to create a method used to draw this shape at any color. For simplicity's sake, we'll call this method IconAtColor:

Private Function IconAtColor(Icon As Picture, Fill As Color) As Picture
  Dim P As New Picture(Icon.Width,Icon.Height,32)
  P.Graphics.ForeColor = Fill
  P.Graphics.FillRect(0,0,P.Width,P.Height)
  P.Mask.Graphics.ClearRect(0,0,P.Width,P.Height)
  P.Mask.Graphics.DrawPicture(Icon,0,0)
  Return P
End Function

Next, the actual embossing. We'll start with the bottom layer, the drop shadow. In our effect, the drop shadow will be used to create a bottom-edge highlight. So we're going to create a picture and fill its contents with white. Purists will argue that a new picture starts white, and they'd be right, but I like to be explicit. By filling it with white, there is no doubt you have a white picture. Next, we're going to clear the mask. A mask defaults to filled black, but we want the opposite, so a simple ClearRect call will handle that. Into the mask, we're going to draw the icon twice. First, we're going to draw the icon using some shade of grey between black (opaque) and white (transparent). This creates the opacity of the shadow. In the example code, we're going to use 75% white (25% opaque, &cBFBFBF). The shadow must be drawn 1 pixel from the top. Then we draw the icon a second time at 100% white (&cFFFFFF) at 0 pixels from the top. This "cuts" the shadow away from where we will actually fill. We do this because the fill may be translucent, and we don't want the shadow to show through. Here's the code to what we just did:

Dim DropShadow As New Picture(Icon.Width,Icon.Height,32)
DropShadow.Graphics.ForeColor = &cFFFFFF
DropShadow.Graphics.FillRect(0,0,DropShadow.Width,DropShadow.Height)
DropShadow.Mask.Graphics.ClearRect(0,0,DropShadow.Width,DropShadow.Height)
DropShadow.Mask.Graphics.DrawPicture(Self.IconAtColor(Icon,&cBFBFBF),0,1)
DropShadow.Mask.Graphics.DrawPicture(Self.IconAtColor(Icon,&cFFFFFF),0,0)

Now we're going to create the fill layer. Because we want the fill to darken the background, we're going to fill a new picture with black, and once again, clear the mask. Then all we have to do is draw the icon into the mask, again at some color between black and white to describe the opacity. In our example, the fill will be 50% opaque (&c7F7F7F):

Dim Fill As New Picture(Icon.Width,Icon.Height,32)
Fill.Graphics.ForeColor = &c000000
Fill.Graphics.FillRect(0,0,Fill.Width,Fill.Height)
Fill.Mask.Graphics.ClearRect(0,0,Fill.Width,Fill.Height)
Fill.Mask.Graphics.DrawPicture(Self.IconAtColor(Icon,&c7F7F7F),0,0)

And of course, the final layer is the inner shadow. Like the fill, we want this layer to darken, so we fill a new picture with black, and like the other two layers, we clear the mask. Like the drop shadow, we need to draw the icon twice. Once for the opacity, and once to "cut" the shape away. In this example, the shadow is 75% opaque (&c7F7F7F). This time, the first drawing should be 0 pixels from the top, and the second drawing should be 1 pixel from the top.

Dim InnerShadow As New Picture(Icon.Width,Icon.Height,32)
InnerShadow.Graphics.ForeColor = &c000000
InnerShadow.Graphics.FillRect(0,0,InnerShadow.Width,InnerShadow.Height)
InnerShadow.Mask.Graphics.ClearRect(0,0,InnerShadow.Width,InnerShadow.Height)
InnerShadow.Mask.Graphics.DrawPicture(Self.IconAtColor(Icon,&c3F3F3F),0,0)
InnerShadow.Mask.Graphics.DrawPicture(Self.IconAtColor(Icon,&cFFFFFF),0,1)

And there we have it, the three layers needed to create the effect. Draw them all directly on top of each other, starting with the drop shadow, then the fill, and finishing with the inner shadow. You can adjust some of the numbers, such as the distances from the top to draw the icon on the drop shadow and inner shadow layers, and choose different colors to create different opacities. Your fill color does not need to be black. You can reverse the inner and drop shadows to create a raised effect. Experiment with this code to achieve new effects.

A sample project can be downloaded here which includes the artwork and code ready to run.

Tuesday, November 15, 2011

More than an Introduction to Programming

Last week Peter Wayner wrote a nice piece in the New York Times titled "Programming for Children, Minus the Cryptic Syntax". Anything that gets kids interested in programming is a good thing and the article discusses a few software products designed specifically to teach kids programing logic in a fun and intuitive way. 


Real Studio would have a made a great addition to this list. Though most of the software tools Wayner mentions are great for introducing programming to kids, they can't realistically be used for much more than that. On the other hand, Real Studio can be used to introduce programming to kids without limiting what they can do to simplistic programming. Real Studio is really accessible to children and is already used in many schools around the world to teach programming. 


Many people feel that you have to choose between something being easy and intuitive or difficult and powerful. I think that choice is a copout- you can have it both ways, though it may require more design and thought to achieve. We add features that make Real Studio easier and we add features that make it more powerful. We work to make it intuitive for those learning programming for the first time and at the same time, make it powerful for experienced developers.


You can have it both ways if you take the time to design your products with this in mind and the result can be a far superior product, one that students would be lucky to get their hands on early.

Thursday, November 10, 2011

The Winner: HTML5

Developers have tried for years to deliver applications with desktop-like features and quality through a web browser. In the early days HTML was simply not up to the task. The original solution was to use Java to run an app inside the browser but that, unsurprisingly, resulted in a horrible user experience. Later Flash appeared. Flash provided a much higher quality experience because the Flash browser plugin could do just about anything in terms of the user interface while still providing the benefit of deploying the app through a browser. Java and Flash are similar in concept but one was developed by a company that primarily made servers while the other was developed by a company that exclusively made desktop software. It's not a shock that Flash has a better user experience.


But Flash is not without downsides. First, the user has to have the Flash plugin installed. Second, the plugin has to load some or all of the application from the server to the user's browser. This often results in the user waiting through an annoying loading progress thermometer. Flash also crashes too often. Over the years, some people have told me that they don't install Flash because their entire system becomes unstable if they do. In addition, Flash and similar technologies like Microsoft's Silverlight are not efficient on mobile devices which are sensitive to battery life. Apple famously chose to not support Flash on iOS because it was felt that Flash was just not efficient enough.


Here at Real Software, long before there was an iPhone, we considered giving Real Studio users the ability to build applications that could be deployed in a browser via a special plugin we would develop. After much consideration, we decided not to pursue this for many reasons- one of which being we believe that depending on an installed plugin greatly reduces the value of the technology.


Later, AJAX and HTML5 came along making it more possible to build desktop-like applications for the web. This made Adobe Flash and Microsoft Sliverlight less necessary and provided an excellent solution for power-sipping mobile devices. At Real Software, when we decided to investigate building web applications again, the native web technology had caught up with what we wanted to accomplish allowing us to develop our web framework for Real Studio. Real Studio Web Edition has never relied on plugins and instead creates native HTML/HTML5, CSS, JavaScript, etc., on the fly and sends it to the browser.


Now Adobe has announced that it's discontinuing the Flash plugin for mobile devices. It also appears that Microsoft may be putting Silverlight out to pasture as well. Adobe is going to refocus on HTML5. If Microsoft is going to end development of Sliverlight, perhaps they plan to do the same. This will likely be the beginning of the end for Flash as a plugin for desktop browsers as well. If Flash is going to support HTML5 for mobile, where all relevant browsers support HTML5, it's only a matter of time before the majority of desktop users are using an HTML5-compatible browser. At that point, it would not make sense for Adobe to continue to support a Flash browser plugin at all.


HTML5 has won this fight but it's not a total win for users. Flash is a complete end-to-end solution developed by one company. That allowed Adobe to provide a very consistent user experience. HTML5 (along with CSS, JavaScript, etc.,) is a standard that is then interpreted by the developers of Internet Explorer, Firefox, Chrome and Safari. That's a lot of different people and the result is that these native technologies don't work exactly the same on all browsers, creating extra work for web application developers that have to test and tweak their web apps for each browser. Adobe will have to deal with these inconsistencies.


The Real Studio web framework already abstracts the developer from these browser differences and from the assembly language of the web (HTML, CSS, JavaScript, AJAX and PHP/Java) as well. This is what web development technologies need to do to make web application development efficient for and accessible to everyone.


What we are seeing today with this announcement from Adobe and the rumors about Silverlight is technological equivalent of survival of the fittest and this time the winner is HTML5.