03-30-2011 12:26 PM
I'm wondering how to set a boundry for a movieclip created in Flash on the stage for a Tablet OS project. I've successfully added a movieclip that I exported as a SWC file from flash into my project as detailed in this post.. I created a base container and was hoping to contain my movieclip in a subcontainer within it. In the post about adding a SWC to the FlashBuilder library is a link to an article which describes Combining animation and ActionScript using Flash Professional CS5 and Flash Builder CS5.
What I'm looking to do is to have my app running on the Playbook stage with a movieclip in a window reacting to what goes on in the app. I have successfully created a movieclip, created named frames, added it to my stage, and have the app (via button clicks) changing the flow of the animation on the stage similarly to the way the animated character in the animation tutorial mentioned above does.
I am wanting the movieclip to reside in a 550x400 window while the controls (buttons, text, etc) are on the Playbook stage independent of the movie clip. My movieclip is created in a Flash (CS3) project with a stage size of 550x400. When I add the clip to the stage or a container on the stage ( baseContainer.addChild(myClip) or just addChild(myClip), and set the movieclip's x and y to the stage's (or container's) x and y, the movieclip is half off the screen. I'm looking for a way to contain the movieclip with, ideally, some sort of border.
Also, my movie clip contains assets that, in the Flash SWF move on and off the stage that are not visible in the Flash SWF, but appear on the Playbook stage. I realize that the movieclip is created within a Flash project whose stage is defined as 550x400 so this masking occurs. All of these assets are visible on the Playbook stage (which is set at 1024x600).
I also successfully imported the entire Flash SWF to the Stage, but don't have the control of the timeline since the SWF file is available only through the loader object (or is this a bad assumption?).
Ideally, I'd like my screen layout to have a 550x400 window that contains the movieclip so that I can take advantage of orientation change. ie in landscape mode had the 550x400 window on the left and controls on the right and in portrait to have the movieclip on top and the controls on the bottom (ideally through containers that resize/reposition based on orientation change).
I hope I'm being clear about what I want. My questions are:
Any help on this would be appreciated since I'm looking to submit a second app before tomorrow. My app is complete except for the integration with the movieclip.
03-31-2011 01:05 PM
My project is all AS3. Maybe I wasn't clear. My project is all AS3 in FB4. I've included my Flash movieclip (exported as a SWC file).
I have simple a proof of concept app which starts with a class that extends Sprite with a stage of 1024x600. I then create a container called 'base' whose width and height are set to match the stage and whose flow is set to vertical. This container shows up correctly.
I then create two more containers (top and bottom) which are added to the base container. Both have a width equal to base.width - the margin width of base. Top has a height of 400 (the height of the movieclip) and bottom has a height equal to base.height - top.height. Both containers are positioned correctly.
In the bottom container, I have 4 buttons which go from left to right and are also positioned correctly.
I define my movieclip like: var myClip:MovieClip = new testclip() as MovieClip; and try to place it in the top container (top.addChild(myClip);
For the buttons, I have an event handler so that when the button is clicked, it does a gotoAndPlay([framename]) where [framename] is the label that I've given certain frames in my clip within flash.
All of this works except for the positioning and size of the movieclip. It does not seem to be contained within the container. I set the movieclip's x and y to that of the top container and the height to the container height and width to 550.
In the debugger, it's reporting a correct x/y and width/height, but the clip is appearing as if the x and y are set to negative values (but still partly visible on the stage).
Furthermore, even though I am setting a height and width for the movie clip, I can still see assets below what should be the bottom of the clip (defined by it's height and width) that I leave off of the stage in Flash for use later in the clip.
Is it possible to include this movieclip directly within a container on my stage without having it occupy the entire stage in the background?
03-31-2011 01:19 PM
03-31-2011 01:32 PM
Are you using QNX container?
Have you tried UIComponent and just set the x,y location of each child in the draw() method?
I've avoided QNX Container since the design of it is very odd. One day I will revisit it to see if it is better.
I am using QNX container. I've had good luck using this (once I figured it out) since it makes life very easy for dealing with orientation change - simply resize container and call the container's .layout method and I'm good to go.
I haven't tried UIComponent, but I think that the big issue is that a movieclip only knows the stage on which it resides. In Flash when I created the clip, the stage is set to 550x400. So when I run the clip, it positions the movieclip exactly where I placed it (manually) on the stage and it hides the 'hidden' assets because they're drawn off of the stage. In my PB app, when I add the movieclip to the stage (1024x600), the larger stage does not 'mask' correctly because the stage size if bigger.
Maybe my approach has been wrong. Is there anyway to define an object on the stage that would have it's own unique stage onto which I could put the movieclip (aside from loading the entire SWF file that I created in Flash)?
03-31-2011 01:34 PM
03-31-2011 02:01 PM
I can give you some advice (from my experience using Flash swc's and Tablet OS SDK):
1. When you are adding your exported movie clip the local coordinates will not match stage coordinates. Try to set x, y properties using globalToLocal() method, such as:
var test:MovieClip = new TestClip() as MovieClip; //you have to look for correct positioning here, I chose stage (0,0) var globalPoint:Point = new Point(0, 0); //map your global point to local stage on exported asset var localPoint:Point = test.globalToLocal(globalPoint); //set (x,y) properties test.x = localPoint.x; test.y = localPoint.y; //after setting coordinates add it to the container topContainer.addChild(test);
2. It is definitely a bad practice (I don't know if you still do it, as I read on one of your comments above) to include assets off stage in Flash CS4 (and hence in your app as that is what you want to achieve) for several reasons, including:
a. They are not visible but WILL BE REDRAWN EACH FRAME causing your app's performance to be poor if you have something that is somewhat heavy processing stuff (video, audio, some animation, etc). You need to stick to good Mobile Development Standards (especially in AIR which is not very good at performance).
b. In case you still want to ignore standards and include this behavior in your app (perhaps you are not doing any processor intensive code), then you have to draw an internal background within your exported movieclip (with the square drawing tool, for instance), set its width and height to match 1024X600, and make it invisible by setting its alpha to 0.
This will allow your movieclip to fill out your containers width and height and look "stretched" and will allow you to hide effectlively the assets you want to hide off stage.
I hope this helps, please don't get me wrong with the standards "sticking" policy, my intention is only to advice you on your app's performance which is VERY important for customers, but in the end is up to the developer what to do for improving user experience.