Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Adobe AIR Development

Reply
Developer
Wingflap
Posts: 118
Registered: ‎01-22-2011
My Device: Bold 9650 and Playbook 16gb

Set Boundry for Movieclip

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:

 

  1. Can I 'contain' the movie clip in an object (ie container) whose size is set to 550x400?
  2. Do I need to import the entire SWF file?
  3. If 2, then how do I access the frames in the movieclip contained within the SWF via controls on the Playbook stage?
  4. Do I need to recreate the SWF as 1024x600, create a 550x400 mask on the movieclip and load the movie clip to show on the stage with the rest of the app's objects overlaid on top of the movie clip in the masked out area?
  5. Is there another approach that's not occurring to me?

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.

-------------------------------------------------------------------------------------------
Approved Apps: Barry Black

Loving my new Playbook!
Developer
Wingflap
Posts: 118
Registered: ‎01-22-2011
My Device: Bold 9650 and Playbook 16gb

Re: Set Boundry for Movieclip

Anyone?
-------------------------------------------------------------------------------------------
Approved Apps: Barry Black

Loving my new Playbook!
Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10

Re: Set Boundry for Movieclip

Most developers work AS or MXML and do not have to deal with the MovieClip and timelines.  Wish we could be of more help.

Developer
Wingflap
Posts: 118
Registered: ‎01-22-2011
My Device: Bold 9650 and Playbook 16gb

Re: Set Boundry for Movieclip

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?

-------------------------------------------------------------------------------------------
Approved Apps: Barry Black

Loving my new Playbook!
Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10

Re: Set Boundry for Movieclip

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.

Developer
Wingflap
Posts: 118
Registered: ‎01-22-2011
My Device: Bold 9650 and Playbook 16gb

Re: Set Boundry for Movieclip


jtegen wrote:

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)?

 

 

-------------------------------------------------------------------------------------------
Approved Apps: Barry Black

Loving my new Playbook!
Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10

Re: Set Boundry for Movieclip

I beleive there is only one "stage" in an app and any object that has a "stage" is just a reference back to the base one.  If memory serves me correctly.

New Developer
daniel_wind
Posts: 56
Registered: ‎02-07-2011
My Device: BB Playbook

Re: Set Boundry for Movieclip

Hi WingFlap,

 

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.

 

Thanks,

-------------------------------------
www.danielwind.net

Playbook App:
Grab Da Crab