HTML5 Canvas scrolling in Win8 and IE10

This week Microsoft released Windows 8, it’s *13th Operating system, and with it the 10th version of Internet Explorer. Win8 promises to be an OS that works and looks the same across multiple devices. So you might be surprised when you try to interact with your HTML5 site/app/game in IE 10 on a tablet. Moving your finger around the page does not register, scrolling or dragging horizontally actually moves the browser window or creates a new tab; depending on the direction. Luckily there’s a simple fix, when preparing your HTML5 web app for IE10 on tablet, remember to add the “-ms-touch-action” css property to the Canvas tag and set the value to “none”. ?View Code HTML<canvas id="html5-canvas" style="-ms-touch-action:none;"></canvas> This property lets IE10 know that the Canvas app is not static content, allowing all those gestures to be picked up by the app or game. Learn more about -ms-touch-actions, as well as other IE css tags. As a side note, I’ve been very impressed with the speed and snappiness of Windows 8 on a tablet. It screams and is super responsive to touch. Disclaimer: This Article was written while the author was employed by Microsoft. *History of Windows. Technorati Tags: canvas,…

Cutting the Cord to Cable TV

The internet is like a massive well, brimming with video entertainment, but can it provide enough quality programming to replace your current cable provider?
Many have already cut the cord with their telephone company, opting instead for an internet based service that has put a few extra dollars in their pocket every month. With the average cable bill at around $75 per month, the prospect of doing the same with your cable company has the potential of even greater monthly savings. Online video services, such as Hulu and Netflix, are currently offering free and low cost, legal alternatives for viewing some of the most popular cable and network shows begging the question, “Why am I still paying for Cable?”

Technorati Tags: , , , ,

Photoshop Tips Though the Years

Can you believe Photoshop is almost 20 years old? It was initially distributed as scanner software by a company called BarneyScan in 1988 and Adobe officially released Photoshop 1.0 in 1990. A tear comes to my eye as I think about all we have been through and how much Photoshop has evolved over the years. “Our baby is all grown up! sniff, sniff.” With each new release came new features, some highly anticipated while others I still wonder what they are used for. As an artist though, is it really about the features? The art is created inside you, we use the photoshop as a tool to express our creations to the world. It was just a lot more barebones back then. I guess this is my version of the famous story, “Walking To School Barefooted, Uphill Both Ways”. That’s right, when I was a young man, we didn’t have a Navigator Palette and all those fancy Layer Effects. We still made art, and it was good. So, what if our our monitors only had 8 bit color at 640 x 480 resolution. That’s what it means to be old school! (Not to take anything away from all those really…

Adobe launches Tour de Flex

It is official, Adobe launches Tour de Flex, the update to the Flex 2 Component Explorer. Check it out here Tour de Flex.
Check out the About link in the drop-down in the upper right, to find links back to this blog (Todd Williams) and our company HD Interactive.
Also Greg Wilson has more background on how this version can to be.

Technorati Tags: , , , , ,

Free Fullscreen Kiosk Web Browser

Building a Fullscreen Kiosk Web Browser using Flex and AIR. There are a number a fullscreen web browsers/plugins out there, but not all of them are free. We have used a couple different ones over the years for kiosks that need Web Browsing capability or to display an HTML based kiosk application. Next time I can just build one, all I need is a few lines of code and a touchscreen monitor. I am impressed with AIR’s webkit (HTML Component), it is light and loads pages pretty fast. Here is an example of building a serious utility with very few lines of code. The core fullscreen browser takes only 4 lines of code in Flex 3. Technorati Tags: Adobe AIR, AS3, Flex, free, fullscreen browser, HTML component, installer badge, kiosk, mxml, webkit

Illustrator Tip #11…

…and The Most Important: Learn as many keyboard shortcuts you can. This is not an illustrator only tip. As with any app that you work in and expect to be proficient at, you should learn the key-board short cuts. In the manuals that come with the box, there is normally shortcut charts. If you did the download, you can find them online. Most Adobe apps have the ability to re-assign key-board short cuts as well. I would suggest against it, unless it is necessary, because if you ever go to work at a different location, or have to show someone something on a different computer, it helps if the shortcuts are the same. Some reasons we have had to change shortcuts in the past are, In Illustrator CS2 and previous, The shortcut for switching between the hollow and solid arrow selection tools, was Command + Tab (Ctrl + Tab on PC). On a mac, all the way back to OS 8, would instead toggle the application switcher. So instead of getting the hollow arrow selection tool, you would get a web browser or other open app instead. In Photoshop CS2 and before, Command + Option + D (Ctrl + Alt…

10 Adobe Illustrator Tips

With the nature of vectors being smaller than bitmap images in file size, I typically try to illustrate everything I do for Flash in Illustrator first. I love Illustrator as an illustration tool. Although Flash has made some great progress it’s illustration tool set, it just does not come close to the power and features of Illustrator. I also find Illustrator really fast for laying out design projects and more illustrative graphics then modeling and detailing in photoshop. Like any relationship, my affection for illustrator is not without frustration and we have to learn to accept some of the faults, if you can pardon my Dr. Phil type metaphor, to make it work. So here are some workarounds for some illustrator issues and a couple tips to help you work better with this great tool. Technorati Tags: Adobe, Design, drawing, Illustration, Illustrator, technique, Tips, Tutorial