DeeGeeBlog

(And Adobe… are you listening?)

I’m ramping up, learning Silverlight / Blend / XAML, and I’ve been using some great online tutorials and book. I just found out on my own with zero help from anybody how stinking easy it is to incorporate audio to your projects, especially in Blend. Do you know how much ActionScript code you’d have to write, how much wrangling you’d need to do to do this very thing in Flash? Uh… much more.

Step 1:

On the Assets tab, select Behaviors. On the next panel that opens up, look for (you probably don’t even need any help from now on…) look for PlaySoundAction.

You’re halfway done. Seriously.

Step 2:

Drag that PlaySoundAction to whatever icon/image/button/thingamajig on your object list. On the Properties tab, select what type of Trigger Event you’d like this audio clip to play after (I selected MouseEnter in this example) and under CommonProperties, select the source (I manually imported my mp3 clip to the Projects Library list, and just had to use the down arrow to select it from the list. If not, you can get the audio clip you want by clicking the elipses (…) to get it from your computer/network.

And that’s it.

Now, the audio clip must be in an ‘appropriate’ Silverlight format, mp3, mp4, wma, wmv, asf, or asx. You might need to convert an old wav file. Seriously, this was the hardest part of the process.

I’m going to be the smartest mofo at the Silverlight Firestarter 2010 event… well, no, no way. Maybe in my family. My mother doesn’t know jack about Silverlight. So I got that going for me.

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.

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.

…or, more precisely, Flash AND Silverlight!

“You do Flash and now you want to add Silverlight to your skillset? You’ve come to the right place.”

What exactly is Silverlight? I didn’t know how to answer that question a week ago, but thanks to my recent research/reading, I think I can now!

A fantastic resource, free of charge, is Microsoft’s Design .toolbox site.

You can sign up with your Microsoft Live ID creds and begin learning! If you’re a developer (or want to be) then you’ll learn fundamental design principles. Chock full of videos and exercises to work through using Microsoft Blend.