Flex 3 / AS3 : Save User Interface for Games

Source Code:
The commented code for this save interface can be found here.

Introduction:
I'm currently in the process of developing using the Pushbutton Engine, and it's going to be a long time before I can write a tutorial on the ideas/process involved in creating the save interface, so I've decided to just present a tutorial for using it in this post. Also if , if version 1.0 of Pushbutton Engine still doesn't have support specifically for savedata I will port this code to be compatible with the component framework.

Rundown of Classes:

• ISaveState : This is the interface that should be implemented by objects that you intend to use as save states.
• ExampleSaveState : An example implementation of ISaveState, used for the demo in Main.mxml.
• SaveManager : This class contains the code for saving and loading.
• Main.mxml : A messy, poorly labeled, but functional demonstration of the features of SaveManager.

Features of SaveManager:

1. Ability to save objects to local storage.
2. Ability to enumerate and load objects from local storage.
3. Ability to delete objects from local storage.
4. AutoSave/Load/Delete feature that allows the class to be used without a user interface.
5. Multiple save slots, with a code specified max number of slots.
6. Alerts to handle user confirmation for overwrites and deletes.
7. Data displayed adapts according to current user interface specified.

SaveManager Constructor:

• showAlerts - Boolean determines if alerts should pop up during use saveClass. This should probably be set to false when autosave is used so that the "Confirm Overwrite" dialog doesn't pop up.
• saveClass - Class representing the class of the saved data. This is required by actionscript serialization so that the object can be successfully serialezed / deserialized from a SharedObject. Without it casting would throw type errors because type info would be lost.
• targetSave - The object you will be saving if this instance is going to be used for saving, can also be set later using targetSaveState()
• slotList - A component that extends the flex ListBase class. This parameter will be used for displaying the save slots.
• saveButton - A button that will cause a save to the currently selected slot, or the autosave slot if no slot is selected.
• loadButton - A button that will load the currently selected slot, or the autosave slot if no slot is selected.
• deleteButton -A button that will delete the currently selected slot, or the autosave slot if no slot is selected.

Dynamic UI:
The UI adjusts depending on which component parameters are set to null.

1. If slotList is null, only the autoSave save slot will be available to the buttons, because there is no way to select a save slot.
2. If saveButton is null, the Create New Save... entry won't appear in the slotlist.

Demonstration:
Main.mxml defines a bunch of controls that demonstrate the SaveManagerClass.

1. The top row of buttons determines which features are available in the current SaveManager. Clicking buttons will hide or show controls according to their nullity.
2. The first list shows all of the save states.
3. The save button will save the "create save info" text fields to the currently selected slot (or autosave slot).
4. The load button loads the currently selected (or autosave) slot.
5. The delete button deletes the currently selected (or autosave) slot.
6. The three text inputs are for creating save data members to demonstrate saving.
7. The data grid shows the object currently stored in targetSaveState of the SaveManager (it will change when slots are loaded)

Usage Notes:
ISaveState.as - Implementing classes must have a parameterless constructor in order for serialization to work.

The commented code for this save interface can be found here.

AS3: Dynamically Loading Sounds in FlashDevelop

Dynamically Loading Sounds in FlashDevelop

Dynamically loading sounds in an AS3 movies allows you to store files seperately from your movie. Depending on where and how your sound is stored there may be significant time involved in loading it. Another method of using sound in your movie by embedding it directly into your movie can be found here.

The Set Up:

• Either upload sound to your own webspace, or find the address to one online to use for testing. The sound must be formatted as a mp3 to be loaded into a movie.
• Create a new AS3 project space in FlashDevelop.

Non-blocking image load:

• ... Non-Blocking?:
  Loading an image without Blocking means that while the sound is being loaded, code continues to run. This is a problem if the application demands that the sound plays immediately when you call Sound.play(). However, blocking sound loading takes some foresight in AS3, and non-blocking sound loading is adequate for many situations. If you need your sound to play immediately when you call Sound.play() and are using this method, make sure you give your sound adequate time to load before calling play().

The Code:

   // entry point
   var loadedSound:Sound = new Sound(new URLRequest("http://sites.google.com/site/programmingetc/Home/sploosh.mp3")); // Begin loading sound from the web
   loadedSound.play(); // Sound will play after it has finished loading.

Line By Line:

1. Lines up with the "//entry point" comment that should be in the default as3 project in FlashDevelop.
2. Create a sound object. By providing it's constructor with a URLRequest, it will begin downloading the sound immediately, alternately you could call loadedSound.load(URLRequest).
3. Play the sound. Techinically this queue's it up to be played once it is finished loading.

.zip source for this project can be found here

AS3: Dynamically Loading Images in FlashDevelop

Dynamically Loading Images in FlashDevelop with AS3

Dynamically loading images in an AS3 movies allows you to store images seperately from your movie. Depending on where and how your image is stored there may be significant time involved in loading an image. Another method of using images in your movie by embedding them directly into your movie can be found here.

The Set Up:

• Either upload an image do your own webspace, or find the address to one online to use for testing. The image must be formatted as a gif, jpg, or png.
• Create a new AS3 project space in FlashDevelop.

Non-blocking image load:

• ... Non-Blocking?:
  Loading an image without Blocking means that while the image is being loaded, code continues to run. This is a problem if the application demands that the image displays immediately after you call addChild(). However, blocking image loading takes some foresight in AS3, and non-blocking image loading is adequate for many situations. Blocking image loading will be covered in a future tutorial.

The Code:

// entry point
var imgInstance:Loader = new Loader(); // Create a new loader object
imgInstance.load(new URLRequest("http://sites.google.com/site/programmingetc/Home/image.png")); // Begin loading the image from web
addChild(imgInstance); // Display the image

Line By Line:

1. Lines up with the "//entry point" comment that should be in the default as3 project in FlashDevelop.
2. Create a loader object. It will be used to load the image, and can also be used as a DisplayObject for displaying the loaded image.
3. Call the load method, with a URL parameter that points to an image (hosted on my google webspace).
4. Add the loader instance to the sprite. The image will be displayed when it loads.

.zip source for this project can be found here