HTML5 Canvas scrolling in Win8 and IE10 – taterboy
October 28th, 2012 | Filed under: Games, Tips

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”.

<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: , , , , , , , , ,

| No Comments »

Cutting the Cord to Cable TV – taterboy
December 9th, 2011 | Filed under: General Info, Tips, Video

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?”

Read More »

Technorati Tags: , , , ,

| No Comments »

Master Code Hinting in Flash Builder and Flash CS5 – taterboy
September 28th, 2011 | Filed under: ActionScript 3, Flash, Flex, Tips, Video

Ever need a class, but can’t remember if it is in the flash, mx or spark package, even drilling down further, was it in data, net or utils? There are so many classes in so many locations there is no way to remember them all or the properties and methods associated with them.

A quick tip I use often is typing “new”, then tapping the space bar. If code hints are working, the code hint window will appear listing all the possible classes. Typing the first and even second letter of the class name will filter the list, once you select the class you are looking for, that class will automatically be imported at the top of the file, if it’s needed.

This works almost anywhere and on any class, even static. I use it when I don’t feel like typing out long class names like StageDisplayState or TextFieldAutoSize. Type “new [space] stag” then click on the correct class. Boom!, it’s imported and completely typed out for you.

For a quick reference to which properties and methods are available in the class, remove the word “new” from before the class name that was just selected, then type a “.” right after the class name. This produces another code hint menu listing the public properties and methods.

Code hinting will also import classes automatically when a colon is added after a variable name, but just typing “new” and a space, is indeed the fastest.

Just remember to remove the new [Class] you just used to trigger the code hint window, if you forget, the compiler will let you know.



Technorati Tags: , , , , , , ,

| No Comments »

A Microphone And A Baby – Flash AS3 Microphone Class – taterboy
May 21st, 2010 | Filed under: ActionScript 3, Audio, Flex, Tips

Here is a little demo from some recent playing with Flash’s Microphone class.



Real demo is below the fold.

This is basically a microphone level meter that my son and I thought was pretty fun. Don’t wake the baby.
Read More »

Technorati Tags: , , , , , ,

| 6 Comments »

Flash vs. Flex equals Shared Libraries – taterboy
February 20th, 2010 | Filed under: ActionScript 3, Flash, Flex, Tips

SWC are files full of gooey goodness. They are an archive file or class library contianing an swf and xml catelog. You may have used an SWC to integrate a Flex/Flash application with any of the most popular web applications like facebook or yahoo. If not, then what are you waiting for?

I’m not sure what S.W.C stands for, but I do know they are an awesome way to share and distribute code. Everything is in one file, super easy to update, and if a newer version is not compatible with old code, it’s easily revered by replacing the newer SWC with a preivous build.

How To:
For a great tutorial on how to get started building and distributing your own shared libraries from Flex, check this out. http://tv.adobe.com/watch/adc-presents/creating-swc-files/ This video, I think is pretty deep, the swc build stuff starts about 7:20 in, but watch everything and hopefully it will all make scense.

Here is some more light reading (the SWC basics):
http://livedocs.adobe.com/flex/3/html/help.html?content=building_overview_5.html

Flash and Flex Love:
Building code libraries are cool and everything, but the reason I love SWC’s so much is the compatibility between Flash and Flex. It is like a holy union, they way graphic or media elements from Flash can be shared as classes for use in Flex. We use SWC’s for any project with a custom UI, basic skins and advanced visual effects.

The Battle Royal:
There is a growing question about the future of Flash and Flex, especially now that Flex is called Flash Builder (That’s just too confusing for me, so I’ll continue to call it Flex for now). Flex 4 has these new skin classes, Catalyst is getting a ton of buzz and the beta version of Flash CS5 looks to have a more Flex-like coding environment. So, which one will reign supreme? For me that question is hard to answer, I currently start most of our projects in Flash, all of the media elements are imported to build a library of visual/audio components. Any complex animations are created using the Flash Timeline. The decision about which program will be used for the rest of the project is based on how much coding is necessary. Flash CS4′s coding environment is no match for Flex’s, if there are more than a hundred lines of code needed, then Flex wins the day. It will be interesting how much this will change once I get my hands on a copy Flash CS5.

For more information on how to get started building Flex Components in Flash, check out this tutorial. http://tv.adobe.com/watch/adc-presents/turning-animations-into-flex-components

To get the Flex Component Kit for Flash http://www.adobe.com/go/flex_ck_en

For more info on Flex Containers from Flash watch this:
http://tv.adobe.com/watch/adc-presents/creating-flex-containers-in-flash

As A General Rule, No Code:
Using SWCs are a great way for Flex programmers to work with the creative team. Designers can build everything they need in Flash and hand it off as a shared library file(SWC) that drops in the “libs” folder of the Flex project. Flex components from Flash include all the graphics, animation, audio and code. The Flash guys can build complete working components in Flash then hand them off to the Flex team. As a general rule do not include code in your Flex components from Flash. By just providing the visual symbols, the Flex team can code everything and make updates to all non-visual elements as needed. In most cases the Flex team will maintain the app long after the design team has moved on to new projects. The more code that can be updated in Flex, the better, it sucks having to send the SWC back to the design team for code updates that could have easily been done by the Flex team. This seems to be the catalyst approach, allow the designer to build the UI, while keeping all of the code accessible to Flex.

The Big Question:
Besides code, what are the benefist of using Flex components from Flash instead of the, commonly preferred, image files? Packaging and consolidation has merit. Flash also saves out vector graphics which can be easily scaled unlike bitmap files. Scale 9 Grid is super easy to setup in the Flash IDE, just check a box and visually align the grid to the artwork. There are many other custom component and UI opportunities, like animation, that are only available when using SWC’s from Flash.

The Downside:
The creative / non-programmer person on the team may have terrible naming convention skills, using creatively vague names for all these new Flex Components, like naming some elements after Star Wars vehicles or some other nonsense. The designer will have to create a legend file describing all the components and their names. It is also helpful if an swf or image is provided with all the symbols layedout and properly labeled by class name. I would suggest prefixing all of the new component names with the name or abreviation of the project. That way after a few taps of the keyboard in Flex, you can see a nice list of all the class names from the SWC.

Please provide some comments on how you work with Flash and/or Flex. If you know or have a good guess on what SWC stands for, comment that as well.

Technorati Tags: , , , , , , ,

| 3 Comments »

Flash/Flex Tips and Free Book Drawing – Using Test Projects – taterboy
September 10th, 2009 | Filed under: Flash, Flex, Tips

We will give away 1 free copy of Foundation ActionScript 3.0 Animation, Making Things Move and Foundation Flash, Cartoon Animation. Details below.

UPDATE

The drawing has been canceled because of lack of interest. I still have the books and will think of another way to distribute them.

< ?php
require_once('includes/amazonStore.php');
echo '
‘;
echo getItem(’1590597915′,’dazzledish-20′);
echo ‘
‘;
echo getItem(’1590599128′,’dazzledish-20′);
echo ‘

‘;
?>

Because Revisions Suck:
Revisions are so common in our business, you can never take them personally. It is even harder when you feel the project you are working on is finished and the client is asking for a whole new feature. This is normally a good time to go to lunch or take a break. It happens, if they are a good client or you are lucky enough to get a change order out of it, it is difficult to say no. Once over the initial frustration and you are able to think clearly, the seemingly impossible chore becomes less impossible. Ideas begin to flow and your mind fills with thoughts like, “Maybe this will not be so bad” or “It should only take an hour or two”; instead of “It would have been nice to know about this sooner” and other things I dare not publish on this blog.
Read More »

Technorati Tags: , , , , , , , ,

| 4 Comments »

Export SWFObject code directly from Flash and Flex – taterboy
May 16th, 2009 | Filed under: Flash, Flex, Tips

SWFObject is the standard for embedding swfs into your webpages. In Flash CS4 the javascript embed code and plug-in detection has been combined into one file. This is easier then keeping track of extra javascript files, but not an easy way to transfer all that embed code to your web site.

SWFObject has provided a great AIR app for producing the embed code, it is very handy and the easiest way to produce the required embed code. I wanted to make this process even easier, so I created a couple template files that will embed your swf with swfobject directly from Flash or FLex. This is an update to a previous post, Exporting SWF Files With Custom HTML Templates.
Read More »

Technorati Tags: , , , , ,

| 3 Comments »

HDflix an AS2 FLV Player For Custom Skins – taterboy
May 10th, 2009 | Filed under: ActionScript 2, Design, Flash, Free Components/Classes, Tips, Video

There are many video players and player skins available online, but it can take hours to build something completely custom. Here is an AS2 FLV player that can make creating completely custom Flash video players a lot easier. HDflix is a fully functional player, but allows you to assign your own artwork to the player controls. This is not skinning an existing component, it is creating artwork, then assigning the artwork pieces to each control. Once a control is assigned, rollovers, button state events and control functions are automatically applied to your artwork.

See the Readme file and demo below.
Read More »

Technorati Tags: , , , , , ,

| 11 Comments »

Photoshop Tips Though the Years – taterboy
March 28th, 2009 | Filed under: Design, Digital Art, Photoshop, Tips

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 old school individuals who endured 1bit color.)

I started using Photoshop at version 2.5, though I have not adopted all the features that have come out over the years, I have learned a few things. I remember scoffing when Layer Styles appeared in version 6, everything new just seemed to be focused on filters and effects. I can do a perfectly good drop shadow from scratch, I thought; maybe even faster then it took someone to open the Layer Styles palette and enter in their settings. I did come around though and appreciate how all the styles are non destructive and adjustable.
Read More »

Technorati Tags: , , , , , , , , , ,

| 4 Comments »

Flash AS2 Pro Video Player – taterboy
March 7th, 2009 | Filed under: ActionScript 2, Flash, Free Components/Classes, Tips, Video

There are a some really nice video/swf players out there already, here is mine. It was first built in 2005, thus the out-dated design, but has been upgraded with some nice features over the years.

Some of the features include dynamic colors on the LED display that can be easily updated to match a site color scheme. Dynamic video size, AutoLoad, Jpeg placeholder, cookie support, and can run standalone or loaded into your own Flash app.

Another interesting feature is a loading system that tries to figure out the client’s download speed and buffer the correct amount. This works pretty well in most cases but some web servers can be unreliable when it comes to streaming video with a consistent data rate. So buffer times will very with each download.

Included are FLAs to skin the GUI and update the display logos. This is the pro version we were planning on selling, but were too busy with other projects and never got around to it.

Just a heads up, I have another video app that will be released shortly. It is very similar to my Scrollbar class, in that you do not skin it, the code wraps around artwork that you create to control flvs and audio files. That way you can go crazy with the UI design and the layout of each control. It is written in AS2 and will be coming soon, so check back.

Below is a demo and the contents of the included readme.txt file.
Read More »

Technorati Tags: , , , , , , , , ,

| 7 Comments »