I'm trying to use a sharedObject to coordinate the movement of several objects on the stage between multiple game players. I think that I'm very close but I seem to be having a problem converting a string stored in the sharedObject into an instance of the Ball class.
My problem is in the soSync function.
I think I need to convert into an object the value of 'objectMoved' that is stored in the sharedObject. I can trace the name of the selected object, but I cannot retrieve it as an object.
How do I store the selected object in a sharedObject and then use it to coordinate motion with the other game players?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
public var nc:NetConnection;
private var connectionURL:String = "rtmp://server address...";
public var remoteSO:SharedObject;
private var checker:Ball;
public function init():void{
//Create new checkers; place them and create listeners
for (var i:int = 0; i < 3; i++){
checker = new Ball;
checker.x = 150 + (i * 110);
checker.y = 150;
checker.name = String(i);
this.addChild(checker);
checker.addEventListener(MouseEvent.MOUSE_DOWN,handleMouseDown);
}
// Establish connection to the server
nc = new NetConnection();
//Listener triggered by the NetConnection connection
nc.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
nc.connect(connectionURL);
}
private function netStatusHandler(e:NetStatusEvent):void {
if(e.info.code == "NetConnection.Connect.Success"){
createRemoteSO();
}
}
private function handleMouseDown(e:MouseEvent):void{
//Show which object has been selected
objectInfo.text = "Clicked: "+String(e.currentTarget);
e.currentTarget.startDrag();
e.currentTarget.addEventListener(MouseEvent.MOUSE_MOVE,dragging);
e.currentTarget.addEventListener(MouseEvent.MOUSE_UP,handleMouseUp)
//Update the remote shared object from this client
function dragging(e:MouseEvent):void{
objectInfo.text = "Dragging: "+String(e.currentTarget);
//Set the shared object
remoteSO.setProperty("objectMoved",e.currentTarget.name);
remoteSO.setProperty("x",e.currentTarget.x);
remoteSO.setProperty("y",e.currentTarget.y);
}
function handleMouseUp(e:MouseEvent):void{
e.currentTarget.stopDrag();
objectInfo.text = ""
e.currentTarget.removeEventListener(MouseEvent.MOUSE_MOVE,dragging)
}
}
private function createRemoteSO():void{
// Create reference to the remote shared object
remoteSO = SharedObject.getRemote("remoteSO",nc.uri,false);
remoteSO.connect(nc);
//Listener to handle changes to the remote shared object
remoteSO.addEventListener(SyncEvent.SYNC, soSync);
}
//Called when a change is made to the remote shared object by other clients
private var counter:int;
private function soSync(se:SyncEvent):void {
if(remoteSO.data.objectMoved){
this.getChildByName(remoteSO.data.objectMoved).x = remoteSO.data.x;
this.getChildByName(remoteSO.data.objectMoved).y = remoteSO.data.y;
}else{
trace("Object does not exist")
}
}
]]>
</mx:Script>
<mx:Text x="147" y="51" text="Selected object"/>
<mx:TextArea id="objectInfo" x="237" y="50"/>
</mx:Application>
Ball.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:UIComponent xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
private function init():void{
var child:Shape = new Shape();
child.graphics.beginFill(0xff0000, .5);
child.graphics.drawCircle(0, 0, 50);
child.graphics.endFill();
this.addChild(child);
}
]]>
</mx:Script>
</mx:UIComponent>
I think you could use getChildByName("String/ObjectName here").
So in your case...
this.getChildByName(remoteSO.data.objectMoved).y = remoteSO.data.y;
Alternatively, could you not just add the physical object itself when using setProperty as opposed to the objects name. Like so...
remoteSO.setProperty("objectMoved",e.currentTarget);
Your Ball object seems to be a DisplayObject, which are unable to be saved in a shared object as a whole. You can, however, instantiate a Ball object, read properties out of the SO and assign them to your ball. The properties in question seem to be x and y, and not objectMoved, as your ball's name will most likely be in line of instance389 which does not spell a thing if you lose the naming context, and even if not, you can only find a child by name if it still exists. So, if you have only one object of type Ball, you assign it the X and Y read from the SO, if not, you should store several balls in your SO, so you will instantiate them later and preserve all of their coordinates.
Related
I am currently trying to make a game on flex and one of the problems I ran in to is how to play a short animation at the beginning. This is what I have so far:
Game.mxml
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
name="Game"
backgroundColor="#000000"
horizontalAlign="center"
creationComplete="Init();"
enterFrame="UpdateFrame();"
paddingLeft="0"
paddingTop="0"
paddingBottom="0"
paddingRight="0"
width="800" height="600">
<mx:Script>
<![CDATA[
include "Game.as";
]]>
</mx:Script>
<mx:Canvas id="gamePanel" x="0" y="0" width="100%" height="100%" mouseDown="MouseDown(event)" mouseUp="MouseUp(event)" mouseMove="MouseMoved(event)"/>
</mx:Application>
and Game.as
import flash.display.*;
import flash.events.*;
import flash.external.ExternalInterface;
import mx.events.*;
import mx.controls.*;
[Embed(source="MyVideoClip.flv")] private var MyVideoClip:Class;
public function Init():void
{
var MyVideo:Video = new Video(800, 600);
addChild(MyVideo);
var qNetConnection:NetConnection = new NetConnection();
qNetConnection.connect(null);
var qNetStream:NetStream = new NetStream(qNetConnection);
MyVideo.attachNetStream(qNetStream);
qNetStream.client = new Object();
qNetStream.play(MyVideoClip);
}
private function UpdateFrame():void
{
}
private function MouseDown(event:MouseEvent):void
{
}
private function MouseUp(event:MouseEvent):void
{
}
private function MouseMoved(event:MouseEvent):void
{
}
I am rather new to Flex and AS3 so most of this code was ripped off web tutorials. Whenever I try to compile it I get: 'Error: 'MyVideoClip.flv' does no have a recongnized extention, and a mimeType was not provided. Error: unable to transcode 'MyVideoClip.flv''
If I remove the 'embed' line and replace MyVideoClip with "MyVideoClip.flv" in the play() function, the code compiles with no errors, but when I open the SWF all I get is a black screen. What am I doing terribly wrong?
Thanks in advance!!
Try setting the mime-type, e.g.:
[Embed(source = "MyVideoClip.flv", mimeType = "application/octet-stream")]
You embedded the video file (its bytes) into the output SWF. So now NetStream must play from a bytes source. Just set a byteArray as equal to new MyVideoClip(); and append to NetStream.
Try this...
[Embed(source="MyVideoClip.flv", mimeType="application/octet-stream")] private var MyVideoClip:Class; //# embed the FLV's bytes
public var VideoClipBytes : ByteArray;
public var MyVideo:Video;
public var qNetConnection:NetConnection;
public var qNetStream:NetStream;
public function Init():void
{
VideoClipBytes = new MyVideoClip() as ByteArray; //# fill a byte Array with embedded bytes
qNetConnection = new NetConnection(); qNetConnection.connect(null);
qNetStream = new NetStream(qNetConnection);
qNetStream.client = new Object();
MyVideo = new Video(800, 600);
MyVideo.attachNetStream(qNetStream);
addChild(MyVideo);
qNetStream.play(null); //# play mode is now bytes
qNetStream.appendBytesAction(NetStreamAppendBytesAction.RESET_BEGIN); //# ready for new audio/video data
qNetStream.appendBytes( VideoClipBytes ); //# add bytes to decoder queue (playback)
}
PS : I made some of your variables as public so later you can access & control them from any other functions. Remember if you make var inside a public function it stays valid only in that one function and doesn't exist to other functions. Best make such vars as publicly available to all functions.
My app structure is below:
(local)
Login.swf
(server)
Main.swf
assets1.swf
assets2.swf
Login.swf -> Main.swf (OK!)
Main.swf -> assets1&2.swf (fail!, downloaded but not trigger complete event)
-progress event: bytes:loaded==total
Why?
How can i load assets from server using Main.swf?
I found somebody say it is crossdomain problem...then how to solve?
var _loader:Loader = new Loader();
var context:LoaderContext = new LoaderContext();
context.allowCodeImport = true;
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loader_complete_handler);
_loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loader_progress_handler);
_loader.loadBytes(_urlloader.data,context);
Thanks!
BE AWARE:
On mobile it only works on Android... iOS due to a security policy does not permit to load an swf inside another one.
Said that you can surerly load an SWF.
First of all we need to understand if you can download the SWF bytearray using the URLLoader.
if yes you can load the swf in a two step routine..
hope this help :)
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
showStatusBar="false"
creationComplete="downloadSwf()">
<fx:Script>
<![CDATA[
import mx.core.FlexGlobals;
import mx.events.CloseEvent;
import mx.events.FlexEvent;
import mx.managers.SystemManager;
import spark.components.Application;
private function downloadSwf():void {
// load the file with URLLoader into a bytearray
sfwLoader.visible = false;
var loader:URLLoader = new URLLoader();
// binary format since it a SWF
loader.dataFormat=URLLoaderDataFormat.BINARY;
loader.addEventListener(Event.COMPLETE, onSWFLoaded);
loader.addEventListener(IOErrorEvent.IO_ERROR, cantConnect);
//load the file
loader.load(new URLRequest("url"));
}
private function cantConnect(e:IOErrorEvent):void
{
var loader:URLLoader=URLLoader(e.target);
loader.removeEventListener(Event.COMPLETE, onSWFLoaded);
loader.removeEventListener(IOErrorEvent.IO_ERROR, cantConnect);
// error handling
return;
}
private function onSWFLoaded(e:Event):void {
// remove the event
var loader:URLLoader=URLLoader(e.target);
loader.removeEventListener(Event.COMPLETE, onSWFLoaded);
loader.removeEventListener(IOErrorEvent.IO_ERROR, cantConnect);
// add an Application context and allow bytecode execution
var context:LoaderContext=new LoaderContext();
context.allowLoadBytesCodeExecution=true;
// set the new context on SWFLoader
sfwLoader.loaderContext = context;
sfwLoader.addEventListener(Event.COMPLETE, loadComplete);
// load the data from the bytearray
sfwLoader.load(loader.data);
}
// your load complete function
private function loadComplete(completeEvent:Event):void {
sfwLoader.removeEventListener(Event.COMPLETE, loadComplete);
var swfApplication:* = completeEvent.target.content;
var sysmgr:SystemManager = (swfApplication as SystemManager);
sysmgr.addEventListener(FlexEvent.APPLICATION_COMPLETE, swfAppComplete);
}
private function swfAppComplete(event:FlexEvent):void {
sfwLoader.visible = true;
var sysmgr:SystemManager = (event.currentTarget as SystemManager);
sysmgr.removeEventListener(FlexEvent.APPLICATION_COMPLETE, swfAppComplete);
var swfApp:Application = (sysmgr.application as Application);
if (!swfApp.hasOwnProperty("version")) {
return;
}
// version is a public property in the main of the loaded application
var verion:String = swfApp["version"];
swfApp.addEventListener(Event.CLOSE, appClose);
}
private function appClose(e:Event):void
{
sfwLoader.unloadAndStop(true);
NativeApplication.nativeApplication.exit();
}
private function closeApp(e:CloseEvent):void
{
try{
(FlexGlobals.topLevelApplication as WindowedApplication).close();
}
catch(e:Error){}
}
]]>
</fx:Script>
<mx:SWFLoader id="sfwLoader"
width="100%" visible="false"
height="100%"/>
</s:WindowedApplication>
I'm not sure if that title is descriptive enough, but here is the basic issue. I have a spark.effects.Animate instance repeating n times with a listener on the EFFECT_REPEAT event. In that event's listener, I'm incrementing a variable. Logic would dictate that if the variable started at 0 and the animation was played with a repeatCount of 3, the variable would be 2 when finished. This works fine, until I focus a different tab. When doing this, on occasion, the repeat event isn't fired/handled (or the animation is just not actually doing the animation) and my count isn't correct when finished.
This is a fully functioning example built against Flex 4.5. To duplicate just click the GO button and maintain focus on the TAB. Then click it again and switch tabs and switch back. The counts don't match.
How can I fix this so that the repeat event is called consistently?
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="600" height="400" applicationComplete="application1_applicationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.controls.Image;
import mx.events.EffectEvent;
import mx.events.FlexEvent;
import spark.effects.Animate;
import spark.effects.animation.MotionPath;
import spark.effects.animation.SimpleMotionPath;
private var animate:Animate;
private var someCounter:int = 0;
protected function application1_applicationCompleteHandler(event:FlexEvent):void
{
// Create the graphic
var img:Image = new Image();
img.source = "http://www.google.com/intl/en_com/images/srpr/logo3w.png";
// Add the graphic
addElement( img );
// Create the motion path
var smp:SimpleMotionPath = new SimpleMotionPath();
smp.property = "x";
smp.valueFrom = 0;
smp.valueTo = this.width - 275;
// Add the motion path to a Vector
var paths:Vector.<MotionPath> = new Vector.<MotionPath>();
paths.push( smp );
// Create the animation
animate = new Animate();
animate.easer = null;
animate.target = img;
animate.duration = 150;
animate.repeatCount = 15;
animate.motionPaths = paths;
animate.addEventListener( EffectEvent.EFFECT_REPEAT, animate_effectRepeatHandler );
animate.addEventListener( EffectEvent.EFFECT_END, animate_effectEndHandler );
}
private function animate_effectRepeatHandler( event:EffectEvent ):void
{
lblCounter.text = someCounter.toString();
someCounter++;
}
private function animate_effectEndHandler( event:EffectEvent ):void
{
lblCounter.text = someCounter.toString(); // Sometimes doesn't equal animate.repeatCount - 1
}
protected function button1_clickHandler(event:MouseEvent):void
{
if( !animate.isPlaying )
{
someCounter = 0;
animate.play();
}
}
]]>
</fx:Script>
<mx:Label id="lblCounter" horizontalCenter="0" bottom="50" width="150" height="50" textAlign="center" />
<mx:Button horizontalCenter="0" bottom="0" label="GO" width="150" height="50" click="button1_clickHandler(event)" />
</s:Application>
I'm quite new to Flex and ActionScript, and I'm trying to do an application whose purpose is simply to be able to dynamically create rectangles on a panel: on mouse down the rectangle is created and updated on mouse move events (left button hold down), then the rectangle is achieved with mouse up.
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="550" height="400"
creationComplete="this.onCreationComplete(event);">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.graphics.SolidColor;
import spark.primitives.Graphic;
import spark.primitives.Rect;
public static const WIDTH:int = 480;
public static const HEIGHT:int = 300;
public static const BACKGROUND:int = 0xEFEFEF;
public static const CURRENT_FILL:SolidColor = new SolidColor(0x00AA00, 0.75);
protected var rectangles:ArrayCollection = null;
protected var currentRect:Rect = null;
protected var dragging:Boolean = false;
protected function onCreationComplete(event:FlexEvent):void
{
this.rectangles = new ArrayCollection();
this.sprite.graphics.beginFill(BACKGROUND);
this.sprite.graphics.drawRect(0, 0, this.sprite.width, this.sprite.height);
this.sprite.graphics.endFill();
this.sprite.addEventListener(MouseEvent.MOUSE_DOWN, this.onMouseDown);
this.sprite.addEventListener(MouseEvent.MOUSE_UP, this.onMouseUp);
}
protected function onMouseDown(event:MouseEvent):void
{
this.currentRect = new Rect();
this.currentRect.y = 10;
this.currentRect.height = this.sprite.height - (10 * 2);
this.currentRect.x = event.localX;
this.currentRect.width = 1;
this.panel.addElement(this.currentRect);
this.dragging = true;
this.sprite.addEventListener(MouseEvent.MOUSE_MOVE, this.onMouseMove);
}
protected function onMouseUp(event:MouseEvent):void
{
if (this.dragging)
{
this.sprite.removeEventListener(MouseEvent.MOUSE_MOVE, this.onMouseMove);
this.rectangles.addItem(this.currentRect);
this.dragging = false;
}
}
protected function onMouseMove(event:MouseEvent):void
{
if (this.dragging)
{
this.currentRect.width = event.localX - this.currentRect.x;
}
}
]]>
</fx:Script>
<s:Panel id="panel" x="10" y="10" title="Calendar">
<s:SpriteVisualElement id="sprite" width="{WIDTH}" height="{HEIGHT}" />
</s:Panel>
</s:WindowedApplication>
All works fine but now I want to do some actions when the user clicks (or double clicks, or what you want) on a rectangle. I tried to add an event on each rectangle (this.currentRect.addEventListener(MouseEvent.DOUBLE_CLICK, myMethod) added in onMouseUp), but the corresponding method is never executed...
What's the problem?
Objects drawn with the graphics API are not event dispatchers. So use addElement to add the Spark primitive rects that you're creating but not using in any way (to a container such a Group) instead of using the graphics api to draw the shapes.
You might find it's better, however, to simply have the ArrayCollection contain a bunch of bindable data objects and use a DataGroup with itemRenderers to display the data.
You could keep track of the rectangles you have drawn in a collection and do a hit test with the rectangles on mouse clicks and determine if any rectangle is being clicked on.
We are building an interface for a game.
The interface has a tabbed menu at the bottom of the screen, with each tab displaying different aspects of an object (called a node).
When you click on one of these parts, it becomes the focus, and we download it's details in XML, including all it's sub-nodes and parent nodes and then update the tab display accordingly, or at least that's what we'd like to happen.
What we have:
MainInterface.mxml
<s:Application...
<fx:Script>
<![CDATA[
public var currentNode:Node = new Node();
protected function selectNodeHandler(event:Event):void
{
loader = new URLLoader(new URLRequest(ourWebSite + event.target.id + ".xml"))
//the xmlDownloaded function below is what changes the contents of currentNode
loader.addEventListener(Event.COMPLETE, xmlDownloaded);
...
<s:SkinnableContainer id="dashBoard"..
<mx:TabNavigator...
<s:NavigatorContent...
<s:SkinnableDataContainer ...
dataProvider="{currentNode.children}"
itemRenderer="renderers.NodeRenderer">
Node.as (valueObjects.Node)
...
[Bindable] public var id:String;
[Bindable] public var name:String;
[Bindable] public var children:ArrayCollection = new ArrayCollection();
[Bindable] public var parents:ArrayCollection = new ArrayCollection();
...
NodeRenderer.mxml (renderers.NodeRenderer)
<s:ItemRenderer ... click="nodeRenderer_clickHandler(event)">
<fx:Script>
<![CDATA[
protected function nodeRenderer_clickHandler(event:MouseEvent):void
{
var eventObject:Event = new Event ("nodeSelected");
dispatchEvent(eventObject);
}
...
<s:Label text = "{data.name}"/>
We tried adding an event listener for "selectNode" to the dashBoard:SkinnableContainer you see see above, but it didn't seem to want to take. We suspect this is because dashBoard is from a spark component and the dispatcher for "selectNode" is on of our own custom components, but we weren't sure... in any case that's what the code assist seemed to indicate as we had to write it in by hand.
We're not sure how to pick up the Events in FlashBuilder 4's debugger, so we're having trouble working out where it's going wrong. Basically, when someone clicks on the label of a child or parent node (that is displayed by the itemRenderer), we want a URLRequest sent to our website, with the url specific to the node clicked on. We then want a URLLoader listening for the return which will update public variable 'currentNode' when xmlDownloaded is called by the loader.
If you could clarify how the click event should be dispatched, what should be listening for it then sending the URLRequest and where the URLLoader that is listening for the xml data to return should be that would solve our problems. Alternatively, if there is a better (more conventional) way to be doing what we're trying to do that would also help, as we're relatively new to actionscript and flex.
protected function selectNodeHandler(url:String):void
{
loader = new URLLoader(new URLRequest(url));
//consider identifying the loader, for instance
loader.name = url; // you could also pass a second parameter
//to the function and assign it to the name property of the loader.
//the xmlDownloaded function below is what changes the contents of currentNode
loader.addEventListener(Event.COMPLETE, xmlDownloaded);
}
protected function nodeRenderer_clickHandler(event:MouseEvent):void
{
var url:String = ourWebSite + event.currentTarget.id + ".xml";
selectNodeHandler( url );
}
protected function xmlDownloaded( event:Event ):void
{
//identify the target here with the name property
var id:String = event.target.name;
}