DeeGeeBlog

Saw this job listing on indeed.com for an HTML5 developer:

Our local technology client is looking for a developer to convert Flash assets to HTML5 for maximum cross browser and iOS (iPhone/iPad) compatibility. They are looking for someone who can act in a consultative manner and assist with conversion issues and create templates as well as someone who can do the hands on execution and development.

Expert knowledge of Flash, ActionScript, JavaScript and, of course, HTML5 will make you successful in this role.

Our client has over 50,000 Flash assets that need to be converted so this is a sizable project for the right candidate!

Hmmm… I know that Adobe is working to include HTML5 and CSS3 structs into the new versions / updates of their products… Is this job listing a fluke, or a sign of the trend?

Back in 1983, I got a Commodore Vic 20 for my 16th birthday. I fiddled around with Commodore BASIC a little, even subscribed to Compute! magazine. But one of my favorite experiences then was IFR Flight Simulator.

I spent hours upon hours with that simulator.

Fast forward to 1999, and I reaquainted myself with the flight sim world with Microsoft Flight Simulator 98. It was the first time that I learned about computer upgrades, as my then not-too-shabby 1.6 MHz CPU / 2MB video card / 32 MB RAM machine couldn’t quite keep up with FS98′s graphics requirements.

Then came FS2002, FS2004, and FSX. Loved them all.

 

 

 

 

 

 

 

 

I’ve tried my hand as a virtual airline pilot with Pacific Airways, but while I loved their board community and fellow sim pilots, the flying experience wasn’t a strong draw.

Cut to January 2011, when I installed JustFlight’s Air Hauler. This is how flight simming should be. Love the hobby so much, I decided to make a web portal for my fictitious Air Hauler based cargo line based in Hawaii with locations on the Big Island, Oahu, and Kauai, Mahalo Air Transport.

What makes this new web product significant for me is that I’m really digging into web technologies more than what I’m comfortable with currently. First off, I’ve decided to construct the website in a php framework. I’m relying on jQuery and javascript much more than I have.

Ever since my wife turned a $2 thrift store find into a $160 profit on eBay ten years ago, I’ve never stopped reeling from the possibilities of earning a side income on the internet. I began selling on eBay shortly thereafter, learned what might be profitable purchases. Then, I branched out to my own webstore, and enjoyed a 3 1/2 year career of successful selling. During this time, I opened up a second webstore selling poker supplies (with marginal success,) and also learned how to bring in residual income through Google ads and affiliate marketing.

There are many ways to do it, and I’ll begin a series talking about my successes and current efforts.

Paths to Profit

Basically, there are a few common paths to earning income using an internet connection/websites:

1. Selling your own items on auction sites like or your own webstore
2. Selling items you purchase (at a great discount) and sell for profit on auction sites or your own webstore
3. Selling items you never own on eBay or your own webstore (the ‘drop-ship’ model)
4. Creating and selling your own created items or information products, usually through your own webstore or Etsy for handmade items
5. Using affiliate marketers to do the marketing to sell your items (you are responsible for shipping when orders come in from affiliates)
6. Earning Google AdSense or other advertising display platform like Bing or Yahoo from ads you host on your own blog/website
7. Making affiliate commissions from others by reviewing or describing items on your blog/website and providing links for readers to purchase these items from the vendors directly.

This list is not exhaustive, but does represent the lions’ share of opportunities available to you. I thought it would be fun to retrace my steps and discuss these paths; what helped me and what things I’d not do if I had the chance!

The Microsoft Expression Blend folks have done a smash-up job providing excellent video tutorials for folks new to Silverlight. I began their “5 Day” Blend training and just completed my first published Silverlight application, a video player for a fictitious product.

As someone who’s spent time with Adobe Flash and ActionScript 3, I can see how Microsoft’s Blend can give Flash a run for its money. One great feature that’s immediatly apparent is that you don’t need to know how to code (C# or VisualBasic) in order to create an application with some interactivity in Blend/Silverlight. With Flash, without knowing ActionScript, the best you’ll have is a heck of an animation. AS is required in order to script user interactivity with the application. Not so with Blend.

Here’s the finished, published version of my first Silverlight video player!

David Kelley, Microsoft Silverlight MVP, is a friend of my wife. They talk industry talk. David held an Interact presentation about Silverlight and Windows 7 phone development at my wife’s place of business, and thought I’d take this opportunity to meet him in person.

Knowing that I’m interested in web and application development as a career, he personally gave me a copy of Foundation Expression Blend 4. When Ichiro gives you a baseball bat, you are excited to take batting practice as soon as possible, no?

XAML I’ve learned today:

Making objects visible on the artboard (AS3 translation: the stage) using the name-value pair Visibility=”Visible” for visible or Visibility=”Collapsed” for invisible. In AS3, I believe it’s myObject.visible = true or = false.

My website doesn’t get a tremendous amount of traffic, relatively speaking, I know that. I’m spending some quality time brushing up on CSS now, using my favorite book, CSS: The Missing Manual. In it, the author speaks of little quirks of Microsoft Internet Explorer 5 and 6, and how CSS behaves a little differently using those browsers.

For a lark, I thought I’d check into my own website stats and see what the numbers are.

Nearly 50% of my viewers use Firefox; the most current version of MSIE, 8, is used by a bit more than 35% of my viewers. What’s interesting is how low on the powerchart Google’s Chrome is. More viewers are still using MSIE 6. This is a browser that’s been around since 2001…

Is this consistent with your stats, fellow webmasters? I personally downloaded and used Chrome for about one day; I found no great benefit over my beloved Firefox platform (I do use MSIE 8 about a third of the time, though).

I’m beginning my own Silverlight training, and hands down a fantastic resource is the .schools toolbox site at Microsoft.com.

Get an academic version of Microsoft Blend and follow the tutorial videos. All file assets are provided in the .toolbox pages, along with documentation and top-notch video instruction.

Create a Silverlight-based calculator and learn about organizing an Expression Blend workspace, adding text and effects, and working with keyframes to create simple animations. The video instruction is provided by Jeremy Osborn,  of Avlade.

Following along with the Calculator project app is a great way to learn. Primarily, I think, because the workflow you need to take requires a bit of repetition, which translates to remembering.

• Import images to the silverlight project
• Familiarization with Blend concepts and menus
• learn how the PEN tool works (finally! A mystery to me no more!)
• creating storyboards, and linking behaviors to animations

What’s very different between Blend/Silverlight and Flash/Actionscript is that Blend creates the XAML code under the hood as you add functions, and populate the ‘artboard’ (‘stage’ in Flash talk). Here’s a sample of the XAML code that was generated, entirely unbeknownst to me at the time:

<Canvas x:Name="plusminus" Height="72" HorizontalAlignment="Left" Margin="468,346,0,0"

VerticalAlignment="Top" Width="106" Clip="M65.499947,7.0624504 ... yadda yadda lots of digits... z">
    <i:Interaction.Triggers>
     <i:EventTrigger EventName="MouseLeftButtonDown">
      <im:ControlStoryboardAction Storyboard="{StaticResource PlusMinusPress}"/>
     </i:EventTrigger>
     <i:EventTrigger EventName="MouseLeftButtonUp">
      <im:ControlStoryboardAction Storyboard="{StaticResource PlusMinusRelease}"/>
     </i:EventTrigger>
    </i:Interaction.Triggers>
    <Image x:Name="image16" Height="72" Width="106" Source="Images/plusMinus.png" Stretch="Fill" RenderTransformOrigin="0.5,0.5">
     <Image.RenderTransform>
      <TransformGroup>
       <ScaleTransform/>
       <SkewTransform/>
       <RotateTransform/>
       <TranslateTransform/>
      </TransformGroup>
     </Image.RenderTransform>
    </Image>
   </Canvas>

It looks absolutely nothing like Actionscript 3 to me, it’s more like XML on steroids. Somewhere, probably soon, the .toolbox tutorials will cover tweaking XAML. Can an entire application be written solely using XAML? I can do a lot of things solely through Actionscript 3, besides importing images/assets into the Library. I don’t know how practical it is to program exclusively in XAML from beginning to end.

Another huge difference between Silverlight/Blend and Flash/ActionScript is programming interactivity. Flash makes great animations. But in order to wire up some interactivity with elements on the stage, you simply must learn and apply some actionscript. Not so with Blend. Using Behaviors from the toolbars in Blend, you can apply actions and animations based on inputs from the user … no coding necessary. I’m not an expert in Flash, but I don’t think that’s possible without actionscript.

Before I introduce this little project we worked on during the second week of my flash application development program, let me ask you: Is rolling a pair of dice just getting to be too strenuous for you? Want to impress your RISK® game playing clan? Whip out your own computerized dice roll simulator!

I make light of this program functionality, but in essence, it is a great introduction to a few important Flash concepts: the random number generator, Dynamic Text, and gotoAndStop functionality.

Here’s the fully functioning Flash application in all its glory:

Let’s dissect how it works, shall we? Begin!

Here’s the actionscript in its entirety:

rollButton.addEventListener(MouseEvent.MOUSE_DOWN, rollDice);

function rollDice(evt:MouseEvent):void{

//random number generator

//you can have x number of dice rollx is to be specified.

var roll1:int = Math.floor(Math.random()*6)+1;

var roll2:int = Math.floor(Math.random()*6)+1;

//numerical display of dice roll

roll_txt.text = roll1+ roll2;

//these following lines control the graphical display of the dice spots

die1.gotoAndStop(roll1);

die2.gotoAndStop(roll2);

}

We first start with a Flash stage sized 465 x 185 px and give it a nice felt green color. Then, labeling the first layer ‘graphics’ we drag out the three common graphics; the title icon, the button and the text background where the dice roll will be indicated numerically:

I also use the Align window to position the title graphic at the center of the top of the stage. First bit of actionscript is to make an event listener:

roll_btn.addEventListener(MouseEvent.MOUSE_DOWN, rollDice);

This indicates that the roll button has been named (given an instance name) of roll_btn. And we will create a function called rollDice. Let’s look at how that works:

var roll1:int = Math.floor(Math.random()*6)+1;

We assign variable name roll1 to get a random number for us. Random numbers that Flash generates are really numbers 0 through 1. Dice aren’t exactly in that format, are they? So we will have to tailor the built in randomization to generate some output that simulates die roll. For our example, we’re using standard 6-sided die, but the beauty of this program is that you could generate a program that can be used for Dungeons & Dragons type games that sometimes utilize 20-sided die. Math.random() gets us started. Notice that we declare the roll1 variable as an integer, meaning a whole number.

(Useless Trivia Spoiler alert: so it turns out that the random() method is not actually random at all. The number generated is based on the time in milliseconds that the random() method is being called. Tricky. This nugget of information comes to us from the book The Essential Guide to Flash CS4 with ActionScript published by Friends of ED, by Paul Milbourne, Chris Kaplan, et al, page 260.)

Multiplying the random number method by a maximum parameter we specify will return the top range, for our purposes here, the top range, the highest roll possible on one die is 6. Ah. But what if the random number generated is zero? No such die roll is possible. So to ensure that zero is removed from our list of possible random numbers, we must add 1 to the result.

We’ve got two dice so we need to call two separate functions for the dice. Thus,

var roll1:int = Math.floor(Math.random()*6)+1;

var roll2:int = Math.floor(Math.random()*6)+1;

We make a text box that will display our roll, so we don’t have to subject our poor users to slow arithmetic themselves. Here’s how that’s done:

roll_txt.text = roll1+ roll2;

Here’s where Dynamic Text enters our script. Using the Text tool in flash, we create a little text window where we want the dice roll to be numerically displayed:

My yellow highlight shows that you’d select Dynamic from the pulldown of text type options. This makes it respond to our scripting, once we give it an instance name of roll_txt.

Now, I’m not entirely sure how the last part of the script works, but here’s the code showing how to display graphically the dice spots (pips?) that correspond to the random number generator.

die1.gotoAndStop(roll1);

die2.gotoAndStop(roll2);

This image shows me being ambitious and adding a third die. But see the playhead is positioned on frame 5, and the die image has 5 pips on it? I believe this is what die1.gotoAndStop(roll1); is all about. If roll1 = 5 then the script would see this line as die1.gotoAndStop(5) so gotoAndStop must be some frame-related command.

Extra Credit:

On my own, for fun, and since I don’t see the term Snake Eyes enough in my day, I thought I’d try to have a custom message print in an additional little window when the dice roll was something particular. The text field was made Dynamic and given the instance name label_txt. I then simply added some scripting code and now it’s an Extra Special Dice Rolling simulator!

roll_btn.addEventListener(MouseEvent.MOUSE_DOWN, rollDice);

function rollDice(evt:MouseEvent):void{

label_txt.text = ""; //this clears any preexisting roll label from the previous round

//random number generator

var roll1:int = Math.floor(Math.random()*6)+1;

var roll2:int = Math.floor(Math.random()*6)+1;

roll_txt.text = roll1+ roll2;

die1.gotoAndStop(roll1);

die2.gotoAndStop(roll2);

if ((roll1 == 1 ) && (roll2 ==1)) {

label_txt.text = "Snake Eyes!"

}

if ((roll1 == 6 ) && (roll2 ==6)) {

label_txt.text = "BoxCars!"

}

if ((roll1 == 3 ) && (roll2 ==3)) {

label_txt.text = "Six da hard way!"

}

if ((roll1 == 4 ) && (roll2 ==4)) {

label_txt.text = "Eight da hard way!"

}

if (roll1 + roll2 == 3) {

label_txt.text = "Crapped Out!"

}

}

As I am wont to do, what interests me in this project is how to apply it to other types of problems or applications. Random number generation and utilization is an important ability for some Flash applications, and that’s covered here. We also have, for the first time, seen the gotoAndStop command used in conjunction with a movie clip entity. Perhaps there’s more ways to use this User input > random number > graphics change model that we’ve worked through in this project. Maybe a slot machine, maybe a car/color/style picker randomizer, perhaps the randomizing ‘engine’ can be used in e-learning in some way.

The chairman of the Everett (Washington) High School class of 1961 Reunion Committee approached me to do a full site reworking, as well as social media campaign in order to publicize and organize their upcoming 50th reunion extravaganza next year.

Their current (45th Year Reunion) site is EHS1961.com. I’ll assume the site’s hosting and redo the site overall. I’ve started a Facebook group for them. I also plan on creating a great, fun spinning record animation as well as full website functionality.

I’ve completed a sort of mock-up for the opening record animation. The reunion details will be on the record label, this is more of a proof of concept work.

More to come…

Updated 7/18/2010: I believe that all the functionality I’ve wanted for this project is fully incorporated! Go to this page (http://www.dongarber.com/flashassets/guitarsolo/guitarsolobacktracks.html) to play your very own guitar solo in A minor pentatonic, in either blues or metal guitar amplifier effects, and with a bluesy or a hard rock backing track to inspire you to create some jams!

I’ve had a load of fun working on this project. It’s a solo guitar playing application, using ActionScript 3. My newest added feature: two amp models, Blues and Metal. Click the image below to go to the application’s webpage.

Click the toggle switch on the Marshall amp to select either a warm bluesey tone, or the shredding of metal!

I’ll provide an in-depth look at the actionscript I wrote to create this app later. I’d like to give out thanks to two folks: Gary Rosenzweig’s video tutorial at FlashGameU.come made developing my toggle switch an absolute snap to code. And Travis Roof, whose awesome drum application I found a few weeks ago served as the spark for me to create my own guitar playing actionscript application.

Also, kudos and thanks to for his excellent discussion about Reacting to Certain Key Presses (assigning keyboard presses as event triggers). AS3 supports only a few keys by name, and to specify which individual keys you want to use as function triggers, you must determine their keycode. I learned about this here.

It’s Not Finished Yet

I want to add a few more features: A backing track to jam to; some more amp models (sounds), maybe some string/note animations.