Targetting Flash Player 10 on Flex development

Here: Targeting Flash Player 10 (UPDATED for FB 3.0.2)

One thing to remember is to “Do whatever you need to do in your OS to ensure SWF files are default opened by the new Flash Player 10 debug app”.

I didn’t realize that my system (Windows XP SP 3, with Flash CS3 and Flex Builder 3.0.1/2+sdk 3.2/4.0 installed) continued to associate FP 9 with .swf type even after I had had FP 10 installed (debug and non-debug); I was quite confused though whether it happened at the OS level (for all apps) or  only for Flex Builder. Anyhow during the compiling process, FB kept on complaining and all the complaints seemed to associate with the Player verison issue. Even confusingly the compiler or the runtime said it couldn’t write UIComponent.rotationX property, which seemed to signal that the SWF was running inside version 9, while a trace for “flash.system.Capabilities.version” did get “WIN 10,0,12,36″!

Long frustrations short, the following are a couple of ways I found worked for me:

1. Exploerer > “Tools” > “Folder Options” > “File Types” > Scroll down the “Registered File Types List” and choose “SWF Flash movie” > Choose “Advanced” button on the bottom > “Edit” > Substitute the path in the “Application used to perform action” to the path to FP10 in your system. This way FP10 shows up on top of FP9 in the “Recommended Programs” list!.

1. Uninstall/Reinstall Flash Player 10 that are downloaded from Adobe site. Restart.

2. (Bullet-proof) Add “-target-player=10.0.0″ to the “Additional compiler arguments” before compiling.

FB stops hinting Flash Player 10 functions?

1. Make sure you are using playerglobal.swc from an SDK that targets FP10, which means SDK should be v3.0.1+(?) and it should reside in something like “frameworks/libs/player/10/playerglobal.swc”;

2. “Source attachement” option for the playerglobal.swc is “None” and the “Link type” should be “External”. Here.

Here are some links about code hinting in FB (SDK 3 vs. 4?) and the new Vector class (typed Array):

Kirupa forum: Using vectors (typed arrays) with Flex 3?

Mike Chambers: Using Vectors in ActionScript 3 and Flash Player 10

Access stage instance in Flex/AIR/Flash

In Adobe AIR:

If you want to access stage instance from the start-up of your application (usually to do some set-up stuff), you could access it with the “windowComplete” event for the WindowApplication tag (equivalent of “applicationComplete” for Application tag for Flash Player application), like so:

<mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml&#8221;
…
windowComplete=”initApp()”>

….

private function initApp():void
{
this.stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
this.stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
}

In Flex (targetting Flash Player):

I believe you could do so within a “applicationComplete” handler.

In Flash:

Stage Access/Outside In

Flex 101: Event “target”/”currentTarget

Flex 3/ActionScript 3 follows the 3C DOM event model convention, using the terms “target” and “currentTarget” to describe source of the event and the object who registers its interest in the related events. If a button or its parent container registers interest in a mouse click event, either the button or its container becomes “currentTarget” while the button is the “target” at bubbling propagation.

In Flex/Flash, things like SystemManager (which is instantiated by Application and which inherits from flash.display.MovieClip) can also register its interest in any UIComponent(Note that stylized skins that are drawn by the drawing APIs will not trigger any MouseEvent event if the systemManger registers MouseEvent), which as Matt says will “broadcast” the event(i.e., call the event handlers). In this case, “currentTarget” is the systemManager and “target” can be the visual omponent or the loader of the visual content “under” the stage who is the source of the event.

The same event handler for the same UIComponent can have different event targets for different event types. For example, in the following code, the same function handles “click”/”change”/”close” events that are registered by a comboBox. For a “click” event, the target is never the comboBox but either UITextField or Button depending where you click on the comboBox. This seems to make sense since the client would presumably be more interested in which part of the comboBox a user clicks for a “click” event.

<mx:ComboBox close=”changeCompState(event);” change=”changeCompState(event);” click=”changeCompState(event);” />
//click : componentStateTest1_0._componentStateTest1_ComboBox1.TextInput8.UITextField10
//change : componentStateTest1_0._componentStateTest1_ComboBox1
//close : componentStateTest1_0._componentStateTest1_ComboBox1
//click : componentStateTest1_0._componentStateTest1_ComboBox1.Button6
//change : componentStateTest1_0._componentStateTest1_ComboBox1
//close : componentStateTest1_0._componentStateTest1_ComboBox1
private function changeCompState(event:Event):void
{
trace(event.type+” : “+event.target);
}

ScrollPane doesn’t clip loaded content

When a ScrollPane is used to load media (Flash 8 IDE), sometimes the loaded content didn’t get clipped (it either sits on top of the scrollpane or goes underneath it).

Cause: An absolute URL is used (such as “myScrollPane.contentPath = ‘http://www.mydomain.com/img/image.jpg’&#8221;) for the loaded content.

Solution: Change the absolute URL to relative URL (“img/image.jpg”). Of course you should be able to put the loading swf file and the loaded contents on the same domain.

Full-screen mode in Flash 8

How to create true fullscreen movies with Flash

Exploring full-screen mode in Flash Player 9

Quick facts:

1. Only supported with Flash Player 9.0.28  or above;
2. Can be implemented in Flash 8 IDE by modifying the Stage class;
3. Can only be initiated with  user inputs such as mouse click or keypres;
4. An overlay dialog box will appear when the movie enters full-screen mode, instructing the user how to exit and return to normal mode.

Timeline, MovieClip and AS 3 101

1. A MovieClip subclass instance starts playing as soon as it’s been instantiated:


var myMC:MyMC = new MyMC();

AddChild(myMC); or removeChild(myMC) doesn’t affect the playhead in myMC, meaning if there is no framescript, myMC will continue playing regardless of whether it’s been added to the playlist or not.

2. To use the versatile/artistic/rétrospectif/timeline-script style, one thing to keep in mind is if any children MovieClip symbols are physically placed inside the timeline of your MovieClip subclass, you can either have Flash make those variable declarations automatically (and thus you should not declaring them as variables in your timeline script), or associate your movieClip symbol with an external class file definition and remove those variable declaration in the class. (in such a case, you will still have Flash declare those children instances variables for you but you will have to make them public in your class.)

Link: Flash CS3: Automatic Timeline Declarations

3. To use an external class definition for a MovieClip symbol and associate timeline script with it, use addFrameScript(frameObj1, frameHandler1, frameObj2, frameHandler2, *rest);. Note that frameObject is zero based: meaning if you want to use frame number, frame one would need a value of 0.

4. To determine if a displayObject is on the playlist or not, check to see if either of the following revolves to true or false:

displayObject.stage

displayObjectParentsOrAncestor.contains(displayObject)

5. Since the timeline script is synchronized by “Event.ENTER_FRAME“, it might be it’s delayed because of other script took longer to execute. As an animator, I found myself, especially in my earlier days of using Flash, put a stop() on some frame (say that frame is labeled “paused”) of a MC symbol and in my client code, I need to gotoAndPlay("paused") to resume from that specific point. It would sometimes get confusing since gotoAndPlay("paused") won’t always resume the playhead, instead it seems to freeze at that certain frame; that is because the frame script stop() is executed AFTER gotoAndPlay("paused") is executed . A quick-n-dirty workaround is to simply do the following:

gotoAndStop("paused");
gotoAndPlay(currentFrame+1);

or

gotoAndPlay(pausedFrameNumber+1);

6. Render Event

7. Flash 9: Timeline navigation and code execution

useHandCursor, buttonMode and mouseChildren

To display the hand cursor for a displayObject with a dynamic textfield inside it (Suppose the textfield is on top of a shape):

mySprite.buttonMode = true;
//By default useHandCursor is true;
//mySprite.useHandCursor = true;
mySprite.mouseChildren = false;

Publishing files for local deployment in Flash 8

In order to deploy an swf file that is published to Flash 8 and is wrapped in an HTML file on a CD/DVD or thumbdrive, the following set-ups are required:

1.  “Local playback security” needs to be set to “Access Local files only” if the swf needs to load other local swf files. If set to “Access network only”, the swf will fail to load/access other local swf files. “Local files” means the files that reside in local FileSystem or in movable media that are accessable to the FileSystem. They are usually accessed via something like “file:///C:/folder/fileName.swf“, etc, or a relative path like “./folder/fileName.swf”. Network files are those that are accessed via an iNternet protocal such as “http://sub.domainname/fileName.swf“.

2.  If “getURL” is used to access files on the Internet or call pseudo JavaScript functions within Flash Player, “allowScriptAccess” needs to be set to “always”. Otherwise, both IE and Firefox will fail those getURL calls.  If not wrapped in HTML, request to access an HTML page via “getURL” will be successful, provided the file exits, but the browser window will be obscured by the projector or the swf file and will not get auto focus as if the call is made via a web browser.

The above statements are true when tested on FP 8 and FP 9.

MVC/UMC revisit

I was doing a simple audio clip playlist a couple weeks ago. Such a small thing got to the level at which I almost couldn’t handle it when I started to try to put some buttons to indicate and prompt users to toggle “repeat all” on and off. It works like this:

If no clip is playing and “repeat all” is off, the player displays “toggle off” icon while displaying a “play all clips” button when mouse rolls over it. If a clip is playing and “repeat all” is off, the player instead displays “turn on autoplay” when mouse-over. When “repeat all” is on, the player displays “repeat all on” icon on “mouse-up” state and “turn off autoplay” on “mouse-over” state.

I got into interwinded “if-else” conditions and was almost lost. I spent almost a whole day and still couldn’t get the buttons work together nicely. I think to myself hey if such a small thing takes me so long to figure out, what else could I possibly do? I have been doing ActionScript full-time for about 3 years now; although most of my stuff is not stellar in terms of the coding level, I’ve gained quite a bit of confidence in coding UI and animation. So I decided to give myself a little break and went to the library and Borders. After reading and thinking, I finally think I not only got the stuff done, but also showed a bit of logic in my spaghetti code. At the end I list the books/articles that I have been reading for the past couple of days. Not that I feel I have been elevated to another level, but here are just some thoughts:

Basically Control is like a hub. It knows about both View and Model and connects View and Model. It contains the logic of the UI. The responsibility of Control basically is about coordinating all the events and actions that affect both UI and Model. Many of them (but not all) are about how to react to the requests from UI and updates it; if there is anything it cannot decide by itself, it relays them to the Model. The rule of thumb here is that if an interaction won’t affect other UI components and doesn’t request anything from Model, Control will handle it directly (like most of the roll-overs) without consulting Model.

If the UI is requesting anything from Model (like asking to play another song or movie), Control would not change View directly. Instead it sends the request to Model and Model makes changes accordingly and then signals Control about the updates. Control/View receives the information about the changes and View is then updated (like dehighlighting the currently highlighted button and highlighting the button that is associated to the clip that is requested, assuming the clip starts playing.)

The change of UI doesn’t necessarily initiated by a request from UI. It could be a system event, like a song completes playing, or a change from Model, like a new song has been added to the pool of all the available songs on the server, etc.. Control should have routines to handle all these changes (such as “handleClipComplete()”, etc..)

It’s just a matter of your coding style and about the complexity of the entities you are dealing with when it comes to whether to use classes (each of which present only a segment of MVC), or whether to have one UI component per View, or just to stuff everything in one big chunk of code. It’s the thought behind it that matters.

It helps me a lot since I’ve started to learn to draw diagrams of the states (statechart) and then to figure out all the classes and operations/attributes from it. I am using paper and pall pen instead of any of the UML tools. It helps me to concentrate on the thinking.

Readings:

• Constructing the User Interface with Statecharts, Ian Horrocks
• UML Dymystified, Paul Kimmel
• Flash MX for Interactive Simulation, Kaye and Castillo
• A Pattern Language of Statecharts, Yacoub and Ammar
• Creating a video player using the state design pattern and ActionScript 3.0, Bill Sander

Embedding fonts in Flash CS3/AS3

package
{
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.Font;
import flash.utils.getDefinitionByName;

    public class SimpleTextPaneTestDrive01 extends Sprite
{
private static var embeddedFont:Font = null;

        //CONSTRUCTOR
public function SimpleTextPaneTestDrive01()
{
var embeddedFontClass:Class = getDefinitionByName(“Font1″) as Class;
Font.registerFont(embeddedFontClass);
var embeddedFontsArray:Array = Font.enumerateFonts(false);
embeddedFont = embeddedFontsArray[0];
var fmt:TextFormat = new TextFormat();
//fmt.bold = true;
fmt.color =0xffffff;
fmt.size = 16;//Old day fashion: If you embed it in a textfield on stage
//fmt.font = “Helvetica”;
fmt.font = embeddedFont.fontName;

            var tf:TextField = new TextField();
tf.text = “hello world!”;

tf.setTextFormat(fmt);

}

}
}

Links:

Loading fonts at runtime
Using hasGlyphs() with embedded fonts