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
Highlighted
Contributor
Posts: 48
Registered: ‎09-08-2013
My Device: Z10
My Carrier: None

Moving From Flash Professional to Flash Builder - how to use symbol library

[ Edited ]

As a Flash Professional developer I'm trying to make the programming world happy by using Flash Builder 4.6 and it's been nothing but a problem.

 

The BlackBerry Hello World app works just fine, but I develop games and create UI elements in the Flash Professional symbol library. I can't get my Flash Professional symbols to display on my BlackBerry Z10.

 

I wrote a simple test app called Hello Flash. I created a symbol named "cloud". I created a Hello Flash.as main class to add cloud to the display. I created a cloud.as class to move the cloud across the screen and start over on the other side when it is out of view (currently rem'd out to remove warnings that the public variables of the parent were undefined). I added an ENTER_FRAME event listener to call the cloud "go" function.

 

Selecting Control/Test Movie/in Air debug launcher(mobile) displays the black screen with a cloud moving across without any problem.

 

So I published an .SWC file and added it to the Flash Builder ActionScript Mobile Project. The project has no errors or warnings.  When I run the app on my BlackBerry Z10 I get a blank black screen (at least the background color is working).

 

HelloFlash.as

package
{
	import flash.display.*;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	[SWF(frameRate="24",
    backgroundColor="#000000")]
	
	public class HelloFlash extends MovieClip
	{
		private var mycloud:MovieClip;
		public var screenscale:Number;
		public var screenwidescale:Number;
		public var screenheight:uint;
		public var screenwidth:uint;
		
		public function HelloFlash()
		{
			// constructor code
			
			super();
			
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			stage.addEventListener(Event.RESIZE, setstage);
			stage.quality = StageQuality.MEDIUM;
			
		}
		public function setstage(e:Event):void{
			stage.removeEventListener(Event.RESIZE, setstage);
			screenheight = Math.min(stage.fullScreenWidth, stage.fullScreenHeight);
			screenwidth = Math.max(stage.fullScreenWidth, stage.fullScreenHeight);
			screenheight = Math.min(stage.stageWidth, stage.stageHeight);
			screenwidth = Math.max(stage.stageWidth, stage.stageHeight);
			
			screenscale = ((screenheight/320)+(screenwidth/480))*.5;
			screenwidescale = screenwidth/480;
			
			
			mainmenu();
		}
		
		public function mainmenu():void{
			mycloud = new cloud();
			mycloud.x = screenwidth*.5;
			mycloud.y = screenheight*.5;
			addChild(mycloud);
			startapp();
		}
		
		public function startapp():void{
			addEventListener(Event.ENTER_FRAME, go);
		}
		
		public function go(e:Event):void{
			mycloud.go();
			
		}
	}

}

 

 

 

 

cloud.as

package  {
	
	import flash.display.MovieClip;
	
	
	public class cloud extends MovieClip {
		
		
		public function cloud() {
			// constructor code
			super();
		}
		
		public function go():void{
			x++;
			/*x += MovieClip(parent).screenscale;
			if(x > MovieClip(parent).screenwidth + width*.5){
				x = 0 - width*.5;
			}*/
		}
	}
	
}

 bar-descriptor.xml

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<qnx>
   <initialWindow>
      <systemChrome>none</systemChrome>
      <transparent>false</transparent>
   </initialWindow>


   <author><var class="varname">xxxxxxxxxxxxxxxxxxx</var></author>

   <authorId><var class="varname">xxxxxxxxxxxxxxxxxxxx</var></authorId>
   
   <icon>
      <image>150.png</image>
   </icon>

<permission>access_internet</permission>
</qnx>

 HelloFlash-app.xml

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<application xmlns="http://ns.adobe.com/air/application/3.1">



	
	<id>HelloFlash</id>

	<filename>HelloFlash</filename>

	<name>HelloFlash</name>
	
	<versionNumber>0.0.0</versionNumber>
		         
	
	<initialWindow>
		
		<content>[This value will be overwritten by Flash Builder in the output app.xml]</content>
		
		
        <aspectRatio>landscape</aspectRatio>

        
	<autoOrients>false</autoOrients>
        <fullScreen>true</fullScreen>
        <visible>true</visible>
    </initialWindow>

	
<android>
        <manifestAdditions><![CDATA[
			<manifest android:installLocation="auto">
			    
			    <uses-permission android:name="android.permission.INTERNET"/>
			    
			</manifest>
			
		]]></manifestAdditions>
    </android>
    <iPhone>
        <InfoAdditions><![CDATA[
			<key>UIDeviceFamily</key>
			<array>
				<string>1</string>
				<string>2</string>
			</array>
		]]></InfoAdditions>
        <requestedDisplayResolution>high</requestedDisplayResolution>
    </iPhone>
    <extensions>
        <extensionID>qnx.system.QNXDevice</extensionID>
        <extensionID>qnx.net.QNXNetwork.ane</extensionID>
        <extensionID>qnx.sensors.QNXSensors</extensionID>
        <extensionID>qnx.fuse.ui.skins.QNXSkins</extensionID>
    </extensions>
</application>

 

 

 

 

I have added the hello.swc (published from Flash Professional) I first published the SWC normally then later found information about converting symbol to Flex component. I did that and published the SWC but still no display of my cloud on the screen. I also added rpc_rb.swc to remove a locale error.

 

Flex 4.6.0 has

 

airglobal.swc

asc-support.swc

core.swc

osmf.swc

testLayout.swc

servicemonitor.swc

 

referenced libraries has

 

hello.swc (my published swc from Flash Professional with "cloud" converted to Flex component)

rpc_rb.swc

rpc.swc

blackberry.swc

framework.swc

qnxmedia.swc

qnxui.swc

qnx-air.swc (linked externally)

QNXDevice.ane

QNXNetwork.ane

QNXSensors.ane

QNXSkins.ane

 

I hate to be the newbie and I'm usually good at figuring things out for myself. I currently have 7 games available on iOS, Android, Blackberry, Nook and Kindle Fire from teaching myself AS3 and using Flash Professional to publish to the various platforms, but Flash Builder is just not clicking for me.

 

If anyone can help or point me to a book that specifically deals with using Flash Professional symbols in an ActionScript Mobile Project I would greatly appreciate just being able to see something onscreen.

Contributor
Posts: 48
Registered: ‎09-08-2013
My Device: Z10
My Carrier: None

Re: Moving From Flash Professional to Flash Builder - how to use symbol library

After posting this i noticed that screenheight and screenwidth were rem'd out. I fixed that and still have the same problem.

Contributor
Posts: 48
Registered: ‎09-08-2013
My Device: Z10
My Carrier: None

Re: Moving From Flash Professional to Flash Builder - how to use symbol library

I also removed super(); from the constructor functions after noticing it does not exist in the BlackBerry Hello World example.

Developer
Posts: 210
Registered: ‎05-18-2009
My Device: NA
My Carrier: NA

Re: Moving From Flash Professional to Flash Builder - how to use symbol library

Not sure if this helps, 

 

I personally use Sprites instead of MovieClips.

 

With that said, your cloud class looks blank. Like it's coded to move, but it has no image or display.  

 

Also, during stage init, add something along the lines of 

 

this.addEventListener(Event.AddedToStage, goAdded);

 

Public function goAdded(e:Event):void {

// add your cloud code + add child codes here 

// until this happens,your stage has a width of 0 and height of 0

}

 

As for the cloud code. For testing purposes I'd add two things 

 

Init code, do the same as above. Use an on Added event - because it has no width or height either until it's added to the stage. 

 

In the added event, draw a simple box

 

This.graphics.clear();

This.graphics.beginFilll(0x777777);

This.graphics.drawRect(0,0,10,10);

This.endFill();

 

Something like that anyway. 

 

Finally, when trouble shooting you should do two things. 

 

*1. Create a logging class. Great for on devixe testing. 

*2. Use trace("message/var"); to see what's up

*3. When using a var type and not knowing the library to include, just I'd a dummy var set like 

var aSmiley Frustratedprite = new Sprite();

 

Type that, press enter. The library appears at the top. Delete the line. Good for skipping library hunting. Just my way of doing it...

 

Ed

 

 

 

Contributor
Posts: 48
Registered: ‎09-08-2013
My Device: Z10
My Carrier: None

Re: Moving From Flash Professional to Flash Builder - how to use symbol library

[ Edited ]

bear with me. I'm an artist - gone graphic artist - gone Macromedia Flash (back in the day) developer.

 

How would I define an objects image in its class? I don't know what you mean by my cloud class is empty. Cloud is a vector graphic in my Flash Professional library exported in the hello.swc file.

 

This is the way graphic objects defined as Symbols in Flash Professional and listed in the project library are called to the display.

 

var mycloud = new cloud(); 

 

is used to set the variable mycloud equal to (or as the) symbol in the library named cloud. The cloud class applies to every instance of cloud added as Child (    addChild(mycloud);  ). The coded motion in the cloud class causes the cloud to move. So the symbol named cloud is called to the display and the cloud does whatever is coded in cloud.as.

 

I could create a function to move cloud in the main class HelloFlash but I prefer in the spirit of object oriented programming to make an objects motion and interaction part of the object class (In the Flash Professional world graphics and code are consider seperate entities. You create the graphic and name it as a symbol. Then code in the class with the same name as the symbol makes the graphic move and interact with it's environment.). This way, the object is acting in and responding to its environment by its own wiring ( code or class or soul whatever you want to call it).

 

I thought I could add the exported SWC containing the graphic symbol cloud to the build path and then reference the symbol cloud from the SWC library and addChild(mycloud) to the display the way I do in Flash Professional.

 

So I'm completely clueless how to add these object to the display other than importing Bitmap images into the src folder and calling bitmap images from there.

 

One of the things I appreciate about Flash Professional is being able to create vector graphics for my UI, then scale them as they are used on various screen sizes - but better than that is the ability to cacheAsBitmap at runtime after the vector has been scaled to the current screen size. Bitmap density becomes irrelevant, multiple Bitmap libraries for multiple devices is eliminated and the developers have an efficient build once deploy anywhere concept to work with while utilizing the performance gain of hardware graphic acceleration and extended battery life.

Developer
Posts: 210
Registered: ‎05-18-2009
My Device: NA
My Carrier: NA

Re: Moving From Flash Professional to Flash Builder - how to use symbol library

[ Edited ]

Absolutely,

 

My samples are purely for troubleshooting at best...

 

Now, I have never moved many sw* or related from Professional to Builder.  The few times I did, I had to load the item the same way you would load, say, a graphic.  In those cases I used the [embed ...] command.  All my vector graphics are done in Builder because Im crazy.

 

But I'll hop out of the convo and let some of the cross Pro/Builder devs provide some feedback. 

 

My only advice for you is to see if trace can verify the symbol isnt working right.  Looking above, tossing a trace on your root go, and mycloud class go - that should verify they are being triggered... 

 

http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3864136/Flash-Tutorial-How-to-Import...

 

Outside of that, take a look at the tutorial above. I'm not certain you made a mistake though as they usually throw errors...

 

To your point, I use classes and custom events for most everything.  But i am not certain that will help with what you are looking for.

Contributor
Posts: 48
Registered: ‎09-08-2013
My Device: Z10
My Carrier: None

Re: Moving From Flash Professional to Flash Builder - how to use symbol library

I found part of the problem!

 

Apparently, the SWC references the Flash Professional project name and lists the library symobls underneath that. If the Flash Professional project name is the same as the FB ActionScript Mobile Project name then the SWC will not expand and compiler conflicts are created.

 

Unfortunately, I still can't get my cloud onscreen so far...

Contributor
Posts: 48
Registered: ‎09-08-2013
My Device: Z10
My Carrier: None

Re: Moving From Flash Professional to Flash Builder - how to use symbol library

[ Edited ]

I am really trying to give Flash Builder 4.6 a chance but it's not dependable. I am using the adobe Flex SDK 4.6.0 build 23201.

 

I figured out that an SWC cannot be imported from a directory with the same name as the Flash Builder ActionScript Mobile Project name.

 

I figured out that an SWC cannot be exported from a Flash Professional project with the same name as the Flash Builder ActionScript Mobile Project name.

 

But now I can create my Flash Builder Action Script Mobile project and add the Flash Professional exported SWC file to the build path and get the Flash Professional Library objects on screen - at least for the first run. If I change the SWC or change code in an .as file, the SWC in the build path stops expanding and the project stops showing the Flash Professional MovieClips onscreen.

 

To be more specific, I created a cloud MovieClip and exported the SWC from Flash Professional. I added the SWC to the Flash Builder build path. I added the cloud with addChild to the screen and the cloud.as class makes the cloud move stage right until it is out of sight and then enters stage left.

 

On the first run the cloud appears and does what it's supposed to do. Figuring I had conquored that hurdle I decided to move on to sound.

 

I imported an .mp3 sound into Flash Professional and exported the SWC again. I added code to the cloud class to call a function in the main class to play the sound file when the cloud resets stage left. I was suprised to see when i returned to Flash Builder that the SWC had already updated with the new sound object. But when I run the project on my BlackBerry Z10, the cloud is not visible. However, letting the project continue to run the sound will play outloud letting me know that the cloud is running just not showing on screen. When I expand the SWC in the build path, the SWC shows the sound object but not the cloud object. But the project has no warnings or errors showing.

 

I've tested and retested and the MovieClips just stop showing up on screen after the first run of the project. Creating a new project makes them show up again but then they also stop showing up in that project after the first run.

 

I'm not impressed with Flash Builder so far.

 

newme.as

 

package 
{
	
	import flash.display.*;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.media.Sound;
	import flash.media.SoundChannel;
	
	public class newme extends MovieClip
	{
		private var mycloud:MovieClip;
		public var screenscale:Number;
		public var screenwidescale:Number;
		public var screenheight:uint;
		public var screenwidth:uint;
		private var speaker:SoundChannel = new SoundChannel();
		private var myheligetaway:Sound = new heligetaway();
		
		public function newme()
		{
			// constructor code
			
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			stage.addEventListener(Event.RESIZE, setstage);
			stage.quality = StageQuality.MEDIUM;
			
		}
		public function setstage(e:Event):void{
			stage.removeEventListener(Event.RESIZE, setstage);
			screenheight = Math.min(stage.fullScreenWidth, stage.fullScreenHeight);
			screenwidth = Math.max(stage.fullScreenWidth, stage.fullScreenHeight);
			//screenheight = Math.min(stage.stageWidth, stage.stageHeight);
			//screenwidth = Math.max(stage.stageWidth, stage.stageHeight);
			
			screenscale = ((screenheight/320)+(screenwidth/480))*.5;
			screenwidescale = screenwidth/480;
			
			
			mainmenu();
		}
		
		public function mainmenu():void{
			mycloud = new cloud();
			mycloud.x = screenwidth*.5;
			mycloud.y = screenheight*.5;
			addChild(mycloud);
			startapp();
		}
		
		public function startapp():void{
			addEventListener(Event.ENTER_FRAME, go);
		}
		
		public function go(e:Event):void{
			mycloud.go();
			
		}
		
		public function playsound():void{
			speaker = myheligetaway.play();
		}
	}
	
}

 

cloud.as

package  {
	
	import flash.display.MovieClip;
	
	
	public class cloud extends MovieClip {
		
		
		public function cloud() {
			// constructor code
		}
		
		public function go():void{
			x += MovieClip(parent).screenscale;
			if(x > MovieClip(parent).screenwidth + width*.5){
				MovieClip(parent).playsound();
				x = 0 - width*.5;
			}
		}
	}
	
}