I recently saw an article on typanus.net that explained how to create a 3D progress bar using CSS and Sass, and I thought this would be a good challenge to pull off in LiveCode. The CSS demo makes use of several 3D properties found in modern browsers, however, and LiveCode doesn’t offer any 3D capabilities, nor do I possess any 3D coding skills.  So I figured I would use graphic techniques to create the illusion of 3D, and in my humble opinion, the final result is fairly convincing.
 
To view the stack in LiveCode, copy the following line and execute it in your LiveCode message box:


In the current era of “flat” UI design — a minimalist style of interface design that forgoes any 3D references — this project pretty much flies in the face of conventions, and allows customization of it’s 3D effects. The following properties of the bar can be adjusted:

  • statusBarValue – integer value that determines the “filled” portion of the bar (between the statusBarStartValue and statusBarEndValue)

  • statusBarFillColor – RGB color values for the bar’s fill

  • statusBarStartValue – the starting integer value of the bar (can be negative)

  • statusBarEndValue – the ending integer value of the bar (can be negative)

  • statusBarHeight – a positive integer reflecting the height of the bar within the control group

  • statusBarDepth – a positive integer that reflects the simulated depth of the bar

  • statusBarVanishingPoint – an x,y integer pair (currently zero and an integer) that controls the perspective effects of the bar

(Visited 619 times, 1 visits today)
3