Adobe Flash CS5.5 and AS3 – How to create a basic, but clean and simple Flash Preloader

One of the problems many flash developers face is creating a preloader that works correctly. If your like me, my first attempt resulted in asking the question, “Why does my preloader first appear on stage beginning at around 70% complete instead of startintg at 0%?” Probably because you put your preloader in frame 1 of your only SWF file.

The problem is within flash itself. Even if you tell flash to begin loading objects in frame 2 within your ActionScript settings, there are certain objects that flash insists on loading in frame 1. To work around this, we will create our preloader as its own SWF file that in turn loads our main SWF file.

Let’s say your main flash program is called, Main.swf

Let’s call our preloader project simply, preloader that will create our preloader.swf file.

Click the Text Tool and draw a TextField in the center of your stage. Call the instance of the TextField, txtPercentLoaded.

Add the following ActionScript to the frame:

var _URLLoader:Loader = new Loader;
var _URLRequest:URLRequest = new URLRequest("Main.swf");  
_URLLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loop);
_URLLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, done);
_URLLoader.load(_URLRequest);

addChild(_URLLoader); function loop(e:ProgressEvent):void
{
var perc:Number = e.bytesLoaded / e.bytesTotal;
txtPerecentLoaded.text = (Math.ceil(perc*100).toString());
} 

function done(e:Event):void
{
removeChild(txtPerecentLoaded);
txtPerecentLoaded = null;
} 

In your HTML file, point to the preloader.swf file.

Enter the URL of your domain that points to your HTML file containing the pointer to preloader.swf and watch the percentage go from 0 to 100% as the preloader loads your main movie, Main.swf

Adobe Flash CS5.5 and AS3 – How to pause your flash game

Let’s say you are playing a game that is keeping score. You are doing very well and you are close to beating someone else’s high score. All of sudden, you become distracted. The house is on fire! You want to save the house, but you also don’t want to lose the 30 minutes you’ve invested in to your game.

What do you do? Do you save the house or lose your best opportunity to top that high score?

You don’t even have to answer that question. Why? Because you can do BOTH.

First, pause the game, put out the fire, and when you are able to breathe clean air again, resume your game.

Let me show you one way this can be done.

1) Add an event listener for the keyboard.

stage.addEventListener(KeyboardEvent.KEY_DOWN,checkKeysDown);

2) Add a boolean variable to hold your pause (true or false) value.

 private var _Paused:Boolean = false;

3) Add your checkKeysDown function.

 function checkKeysDown(event:KeyboardEvent):void
 {
   if (event.keyCode == 119) //F8 function key
   {
   	_Paused = true;
   }
   if (event.keyCode == 120) //F9 fnction key
   {
   	_Paused = false;
   }
 }

4) In your function that is moving your game along (most likely your ENTER_FRAME event), place the following code at the beginning of the function.

if (_Paused == true)
 {
   var timePassed2:int = getTimer() - lastTime;
   lastTime +=  timePassed2;
   return;
 }

If the gamer hits F8, _Paused gets set to true. When the game enters your ENTER_FRAME function, you simply handle whatever code is necessary (like in my case – keeping my timer going), then simply call the return method. The code beyond this if statement will never execute again until the gamer presses F9 to change the value of the boolean, _Paused to false.

Adobe Flash CS5.5 and AS3 – Setting Tab Index and showing Tab Order

When you first drag controls onto the stage, the tab index is not set that you can see them in the IDE, but the tab order is set nevertheless in the order that the controls were placed onto to the stage. 
To see what I mean, drag a button onto the far left of the stage. Drag another button in the middle of the stage. Drag another button in-between the two buttons already on the screen. Lastly, drag a button to the far right of the stage. Run the program and keep hitting the tab key. Notice that the tab order is Button 1, Button 3, Button 2, then Button 4.

To see that the tab index is not set visually in the IDE, on the menu bar, click View, then click Show Tab Order. Notice that nothing has changed visually in the IDE. No sequence number appears at the top left corner of the controls.

Let’s look to see if they are set visually another way. On the menu bar, click Windows, then Other Panels, then Accessibility. With this window up, click the buttons on the stage one at a time. Notice there is nothing in the Tab Index TextField at the bottom of the Accessibility window. Again, there is no evidence in the IDE that the tab index is set. Somewhere in the *.FLA that are set internally, but the tab index is not transferred by default in the Show Tab order view or via the Accessibility window.

With that said, how do we change the tab index to put the controls in the proper tab order. Again, click each control one at a time, but before clicking the next control, enter a number, beginning with 1, in the Tab Index TextField at the bottom of the Accessibility window. When done, go back and click each control again and notice that the Tab Index TextField visually shows and maintains the Tab Index of the controls.

Now, even though the Show Tab Order option is checked under the menu bar, View, you will not be able to see the TabIndex at the top left corner of the control until you click the Tab Order, OFF then ON again. For some reason, every time the tab index order is changed, you must click, OFF, then ON the Tab Order selection on the View menu to see the changed results.


Adobe Flash CS5.5 and AS3 – How to delete a scene

Inserting a scene and deleting a scene are not available in the same place. In other words, to add a scene, on the menu bar, click Insert, then click Scene. The stage tab name changes from Scene 1 to Scene 2. You are now modifying Scene 2.

How do you switch back to Scene 1. In the panel that holds your stage and pasteboard, click the scene icon that looks like a director’s clapperboard. The current scene will be marked with a checkbox.

Now, you don’t want Scene 1 anymore. How to you delete it? I could not find a ‘Delete Scene’ from the menu bar and cannot delete it from the director’s clapperboard icon.

To delete Scene 1,y ou have to click Windows on the menu bar, click Other Panels, then click on Scene. 

Highlight the scene you want to delete, then click the garbage can icon.

If desired, you can also you the this Scene window to insert scenes.

Adobe Flash CS5.5 and AS3 – How to find a control that has gone off the radar screen

I have no idea how it happened, but one day I tried compiling my Flash program and it was producing an error on a control I did not even see on the stage or the pasteboard. It was a control I once had, but I thought I deleted. How could I delete it if I can’t even find it?

I finally found it using the Movie Explorer window.

For some reason, this control had gone off the radar with an ‘x’ coordinate of -5000.00.

 

 

 

To use Movie Explorer, click Windows on the menu bar, then Movie Explorer. Scroll through the list of controls by clicking each one until you find the control you are looking for. The statistics or properties are reflected for the control you have highlighted. Once there, hit the DEL key or right-click the control and click Clear.

Adobe Flash CS5.5 and AS3 – Classic TextField vs. TLFTextField for password usage

The following demonstrates how to use the Classic TextField and the TLFTextField for the purposes of creating a password behavior type text.

Classic Text

Drag a Text Tool to the stage and call the Instance Name, txtPassword
Choose ‘Classic Text’ for the text engine
Choose ‘Input Text’ as the text type

In the code, set the txtPassword for password behavior as follows:

 txtPassword.displayAsPassword = true;

To disable txtPassword so the user can not enter data:

 txtPassword.type= "input";

To enable txtPassword so the user can enter data:

 txtPassword.type = "dynamic"

++++++++++++++++++++++++++++++++++++++++++++++++++++++

TLF Text

Drag a Text Tool to the stage and call the Instance Name, txtPassword
Choose ‘TLF Text’ for the text engine
Choose ‘Editable’ as the text type
Choose ‘Password’ as the behavior

To disable txtPassword so the user can not enter data:

 txtPassword.type= "input";

To enable txtPassword so the user can enter data:

 txtPassword.type = "dynamic"

Adobe Flash CS5.5 and AS3 – Global Security Settings

You want to test your flash application from within the IDE. You press CTRL-Enter and all is well. You now want to test in DEBUG mode, so you press CTRL-Shift-Enter, and as soon as your application tries to access the internet, let’s say to run a PHP file, you get an Adobe Flash Player Security Dialog Box telling you that you have to click Settings. Huh? Can they be more descriptive please?

What the message is saying is that you have to add the directory from your hard drive where your application is running from to your global settings to give security permission for the application to communicate with the internet site.

Here is how:

1) Click Settings.

2) Click the Advanced Tab.

 

3) Click the Trusted Location Settings button

4) Click the Add button

5) Type in the directory that your application is running from, then click the Confirm button.

6) Verify your application directory is listed, then click the Close button.

7) Close the Flash Player Settings Manager dialog box by clicking the white X in the red box (top right)

Restart your application in DEBUG mode and you should be good to go.

Note: Another place you can add the directories is via the browser at:
http://www.macromedia.com/support/documentation/en/flashplayer/
help/settings_manager04a.html#11906

Microsoft Silverlight 2.0 Beta 2 – Setting Initial Focus on Silverlight Control (Textbox)

(The initial discussion was for Silverlight 2.0 Beta 1)

Step #1

Create a dummy textbox for your initial SL XAML and set the following properties as follows:

Opacity="0" IsReadOnly="True" TabIndex="0"

Step #2

In the ‘loaded’ event of your initial SL XAML, paste the following code to the end of that event:

Windows.Browser.HtmlPage.Plugin.Focus()
Dim t As New System.Windows.Threading.DispatcherTimer()
t.Interval = TimeSpan.FromMilliseconds(100)
AddHandler t.Tick, AddressOf t_Tick
t.Start()

Step #3

Add the following Subroutine which includes setting focus on the textbox:

 Private Sub t_Tick(ByVal sender As Object, ByVal e As EventArgs)
    Dim t As System.Windows.Threading.DispatcherTimer = TryCast(sender, System.Windows.Threading.DispatcherTimer)
    t.[Stop]()
    txtUserName.Focus()
End Sub

Warning: Make sure your VB logic does not set focus to any textbox whatsoever prior to the ‘t_Tick’ sub routine setting your textbox of choice first.

Microsoft Silverlight 2.0 Beta 2 – InvalidOperationException occurred

Private WithEvents mylogonService As NewsrLogon.IwcfLogonServiceClient

Error:

Could not find default endpoint element that references contract
‘SilverlightApplication.srLogon.IwcfLogonService’ in the ServiceModel
client configuration section. This might be because no configuration file was
found for your application, or because no endpoint element matching this
contract could be found in the client element.

+++++

According to a Silverlight Forum discussion
(http://silverlight.net/forums/t/18006.aspx) the solution is to fully qualify
the ‘contract’ in the <client/endpoint> section of the
ServiceReferences.ClientConfig file with the Silverlight project name.

<client>
   <endpoint address="http://localhost:59715/wcfLogonService.svc"
   binding="basicHttpBinding"
   bindingConfiguration="BasicHttpBinding_IwcfLogonService"
   contract="SilverlightApplication.srLogon.IwcfLogonService"
   name="BasicHttpBinding_IwcfLogonService"/>
</client>

 

Microsoft Silverlight 2.0 Beta 2 – How to navigate between xaml pages

Add the following to the app.xaml.vb:

 Dim mainUI As Grid = New Grid()

In Private Sub Application_Startup

 Me.RootVisual = mainUI

Add sub:

 Public Sub GoToPage(ByVal nextPg As UserControl)
      Dim app As App = CType(Application.Current, App)
      ' Remove the displayed page
      app.mainUI.Children.Clear()
      ' Show the next page
      app.mainUI.Children.Add(nextPg)
 End Sub

Then in your page:

 Private Sub btnLogon_Click1(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnLogon.Click
      Try
           Dim app As App = CType(Application.Current, App)
           app.GoToPage(New PendListPage())
      Catch ex As Exception
           clsExceptionRoutine.Exception_Routine(ex)
      End Try
 End Sub