Flex AS3 asynchronous sprite (MovieClip) animation - apache-flex

I'm using starling framework under flex AS3 project.
I've Sprite which named Bird and it use Altas for animation.
My problem is, there is two bird in my screen and both of them flaps at the same time. I want to flap asynchronous.
How can I do this, can I give a start frame number each of them ?
Thanks..
public class Bird extends Sprite
{
private var bird_mc:MovieClip;
public function Bird(startFrame:Number = 0)
{
super();
this.addEventListener(starling.events.Event.ADDED_TO_STAGE, onAddedToStage);
}
private function onAddedToStage(event:Event):void
{
this.removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
createBird_mc();
}
private function createBird_mc():void
{
bird_mc = new MovieClip(Assets.getAtlas().getTextures("Bird_"), 16);
bird_mc.x = Math.ceil(-bird_mc.width/2);
bird_mc.y = Math.ceil(-bird_mc.height/2);
starling.core.Starling.juggler.add(bird_mc);
this.addChild(bird_mc);
}
}

the solution is setting activeframe before add to stage.

Related

Use AS3 to write IOS like slide up menu

In an AS3 mobile App, I would like to have a menu of buttons or icons that slides up from the bottom. Using a SlideViewTransition, I can get part of what I want.
var transition:SlideViewTransition = new SlideViewTransition();
transition.direction = ViewTransitionDirection.UP;
transition.mode = SlideViewTransitionMode.COVER;
view.navigator.pushView(ShareView, null, null, transition);
This works, but it does not do two things that I need to do.
1) I want the new transition to only go up 1/2 of the screen so that the top part of the screen displays the view underneath.
2) I want the new view that covers to be partially transparent. By setting the alpha of the incoming view's contentGroup background alpha, the new view is transparent as it comes in. But, once it covers the view underneath the view becomes opaque.
this.contentGroup.setStyle('backgroundAlpha', 0.5);
Does anyone have any ideas of how I would have a view slide up 1/2 way and be transparent? I have no idea where to start, view skinning?, or subclass transition?, or use something in flash namespace instead of a spark view.
I decided it would be simplest to just use the lower level ActionScript and do the animation myself using methods that are normally applied to a Sprite, but in this case use a VGroup so that I could add spark elements to it. The following is the base class I wrote.
public class SlideUpDialog extends VGroup {
private var pctHeight:Number;
private var stopHeight:Number;
private var vertIncrement:Number;
public function SlideUpDialog(pctHeight:Number) {
super();
this.pctHeight = pctHeight;
if (stage) {
addedToStageHandler();
} else {
addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
}
}
private function addedToStageHandler(event:Event=null) : void {
removeEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
graphics.beginFill(0xEEEEEE, 0.8);
graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight * pctHeight);
graphics.endFill();
var bevel:BevelFilter = new BevelFilter(4, -45);
this.filters = [ bevel ];
x = 0;
y = stage.stageHeight;
stopHeight = y * (1 - pctHeight);
vertIncrement = y / 2 / 24 / 4;
}
public function open() : void {
addEventListener(Event.ENTER_FRAME, openFrameHandler);
}
private function openFrameHandler(event:Event) : void {
if (y > stopHeight) {
y -= vertIncrement;
} else {
removeEventListener(Event.ENTER_FRAME, openFrameHandler);
}
}
public function close() : void {
... the reverse of open
}
}

Connecting flex and weborb?

im a newbie in flex. Im have a question :)
I have
[Bindable]
private var model:AlgorithmModel = new AlgorithmModel();
private var serviceProxy:Algorithm = new Algorithm( model );
In MXML
private function Show():void
{
// now model.Solve_SendResult = null
while(i<model.Solve_SendResult.length) //
{
Draw(); //draw cube
}
}
private function Solve_Click():void
{
//request is a array
Request[0] = 2;
Request[1] = 2;
Request[2] = 3;
serviceProxy.Solve_Send(request);
Show();
}
<s:Button x="386" y="477" label="Solve" click="Solve_Click();"/>
And when i call serviceProxy.Solve_Send(request); with request is array and i want use model.Solve_SendResult in my code flex to draw many cubes use papervison3d but in the first time i received model.Solve_SendResult = null . But when I click again then everything OK.
Anyone help me? Thanks?
The model.Solve_SendResult object contains a result of the executed serviceProxy.Solve_Send(request) method. The Solve_Send will be executed asynchronously and as a result, at the moment when you fire the show method the Solve_SendResult object may be still null.
As a solution, you can use the following:
Create a custom event
package foo
{
import flash.events.Event;
public class DrawEvent extends Event
{
public static const DATA_CHANGED:String = "dataChanged";
public function DrawEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}
}
}
In your Algorithm class define the following:
[Event(name=DrawEvent.DATA_CHANGED, type="foo.DrawEvent")]
public class Algorithm extends EventDispatcher{
//your code
In the Solve_SendHandler method of the Algorithm class add the following
public virtual function Solve_SendHandler(event:ResultEvent):void
{
dispatchEvent(new DrawEvent(DrawEvent.DATA_CHANGED));
//your code
}
In your MXML class create onLoad method and add an event listener to an instance of the Algorithm class as it shown below:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="onLoad()">
public function onLoad():void
{
serviceProxy.addEventListener(DrawEvent.DATA_CHANGED, onDataChanged);
}
private function onDataChanged(event:DrawEvent):void{
while(i<model.Solve_SendResult.length) //
{
Draw(); //draw cube
}
}
make the following changes in the Solve_Click() method:
private function Solve_Click():void
{
//request is a array
Request[0] = 2;
Request[1] = 2;
Request[2] = 3;
serviceProxy.Solve_Send(request);
}
That is it! So, basically the code above do the following: you added a listener to your service (algorithm class), and the listener is listening for the DrawEvent.DATA_CHANGED event. The DrawEvent.DATA_CHANGED will be dispatched when your client receive a result of the Solve_Send invocation. Thus, the onDataChanged will draw your cube or do whatever you want :)
The approach above is basic and you have to know how events work in flex and how you can deal with it. Additional information is available here:
http://livedocs.adobe.com/flex/3/html/help.html?content=createevents_3.html
http://livedocs.adobe.com/flex/3/html/help.html?content=events_07.html
Regards,
Cyril

skinning multiple UI components

Let's say you have a large number (N) of spark buttons in your app. Let's also say that your buttons all have very similar skins (size, various effects, etc) - the only difference being the specific png that they use as their BitmapImage.
Do you end up with N skin files, all differing by 1 line? Or is there a smarter way to do this while not adding a lot of code when you create the buttons in MXML (in fact, ideally, none).
Creating a custom Button with a icon SkinPart typed as a BitmapImage will allow you to use the same Skin for all buttons :
<YourCustomButton icon="#Embed('yourIconFile.png') />
CustomButton.as
public class CustomButton extends Button
{
[SkinPart(required="false")]
public var iconContainer:BitmapImage;
private var _icon:Object;
public function CustomButton()
{
super();
}
override protected function partAdded(partName:String, instance:Object):void
{
super.partAdded(partName, instance);
if (instance == iconContainer && _icon)
iconContainer.source = _icon;
}
public function get icon():Object
{
return _icon;
}
public function set icon(value:Object):void
{
if (iconContainer)
iconContainer.source = value;
_icon = value;
}
}

How do I set the dimensions of a custom component defined in an ActionScript class?

I'm trying to set the height of a vertical bar (activityBar) but it does not appear to do anything. i have tried something similar with the whole component, but setting the dimensions does nothing (even in the mxml used to instantiate the class). Indeed, I've added transparent graphics just to give the component some dimensions
I'm not sure what I'm doing wrong. It's something bad though; my approach seems dire.
FYI: I'm trying to create a mic activity bar that will respond to the mic by simply setting the height of the activityBar child (which seems to me to be more efficient than redrawing the graphics each time).
Thanks for your help!
package components {
import mx.core.UIComponent;
public class MicActivityBar extends UIComponent {
public var activityBar:UIComponent;
// Constructor
public function MicActivityBar() {
super();
this.opaqueBackground = 0xcc4444;
graphics.beginFill(0xcccccc, 0);
graphics.drawRect(0,-15,5,30);
graphics.endFill();// background for bar
activityBar = new UIComponent();
activityBar.graphics.beginFill(0xcccccc, 0.8);
activityBar.graphics.drawRect(0,-15,5,20);
activityBar.graphics.endFill();
activityBar.height=10;
addChild(activityBar);
}
}
}
package components {
import mx.core.UIComponent;
public class MicActivityBar extends UIComponent {
public var activityBar:UIComponent;
private var _w:Number;
// Constructor
public function MicActivityBar() {
super();
this.opaqueBackground = 0xcc4444;
graphics.beginFill(0xcccccc, 0);
graphics.drawRect(0,-15,5,30);
graphics.endFill();// background for bar
activityBar = new UIComponent();
activityBar.graphics.beginFill(0xcccccc, 0.8);
activityBar.graphics.drawRect(0,-15,5,20);
activityBar.graphics.endFill();
activityBar.height=10;
addChild(activityBar);
}
public function get w():Number {
return _w;
}
public function set w(value:Number):void {
_w = value;
}
override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
this.height=w;
this.weight=w;
}
}
}
See my updated code above.

gotoAndStop(); flashdevelop or flex

I have a custom class that embeds a movie clip. When I try to use parent class's such as gotoAndStop(). It ignores the method. I would like to know what I am doing wrong. below is my code. I call the method in my constructor Thanks!
game object class
package com.objects
{
import com.eapi.IGameObject;
import flash.display.MovieClip;
/**
* ...
* #author Anthony Gordon
*/
public class GameObject extends MovieClip implements IGameObject
{
public function GameObject()
{
}
}
}
hero class. gotoAndStop() in the constructor
package com.objects
{
import flash.display.MovieClip;
import flash.events.*;
/**
* ...
* #author Anthony Gordon
*/
[Embed(source='../../../bin/Assets.swf', symbol='Hero')]
public class Hero extends GameObject
{
private var aKeyPress:Array;
private var jumpDisabled:Boolean = false;
public function Hero()
{
gotoAndStop(1) ///<----------------Doesnt stop. Just keeps playing
wY = 150;
wX = 90;
speed = .5;
aKeyPress = new Array();
TheGame.sr.addEventListener(KeyboardEvent.KEY_DOWN, keyDownListener);
TheGame.sr.addEventListener(KeyboardEvent.KEY_UP,keyUpListener);
}
private function keyDownListener(e:KeyboardEvent):void {
//trace("down e.keyCode=" + e.keyCode);
aKeyPress[e.keyCode]=true;
}
private function keyUpListener(e:KeyboardEvent):void {
//trace("up e.keyCode=" + e.keyCode);
aKeyPress[e.keyCode]=false;
}
override public function UpdateObject():void
{
Controls();
updatePosition();
}
private function Controls():void
{
if (aKeyPress[38])//Key press up
;//dy -= speed;
else if (aKeyPress[40])//Key press down
dy += speed;
if (aKeyPress[37])//left
{
dx -= speed;
}
else if (aKeyPress[39])//Right
{
dx += speed;
}
if (aKeyPress[32]){//space
jump();
}
}//End Controls
private function jump():void
{
if (!jumpDisabled)
{
if (onGround)
{
gotoAndStop(10);
dy = -15;
jumpDisabled = true;
}
}
else
{
jumpDisabled = false;
}
}
}
}
The problem is that when you embed a swf of a movie clip actually what you got is a movieclip with and added child Loader who get inside the real movieclip.
You must try something like
var aMovie:MovieClip;
Loader(this.getChildAt(0)).getLoaderInfo.addListener(Event.Complete, methodEventCompleteName);
function methodEventCompleteName(e:Event)
{
aMovie = MovieClip(Loader(this.getChildAt(0)).content);
}
I really suggest to try learn to use SWC files. I export him on flash cs5 IDE then add on a lib folder into my proyect, then in flashdeveloper ide right click into the SWC file and check the "add to library" option. Inside a class can directly instantiate the movieClip name into the SWC file like this:
var aMovie:MovieClip = new MyMovieClipFromSWC() as MovieClip;
and it's done :D
Hope this help to someone... because I spend like 3 weeks trying to figured out and finally get it... there isn't enough info about it...
You should add a listener to know when its added to stage and initialize your clip there.
public function Hero() {
if ( stage ) _init( );
else addEventListener(Event.ADDED_TO_STAGE, _init );
}
private function _init( e:Event = null ):void {
removeEventListener( Event.ADDED_TO_STAGE, _init );
gotoAndStop(1) ///<----------------Doesnt stop. Just keeps playing
wY = 150;
wX = 90;
speed = .5;
aKeyPress = new Array();
TheGame.sr.addEventListener(KeyboardEvent.KEY_DOWN, keyDownListener);
TheGame.sr.addEventListener(KeyboardEvent.KEY_UP,keyUpListener);
}
Also, i think this reading Order of operations by senocular would be rather interesting.
It explains frame execution in timeline objects and object creation.
Figure it out. I forgot that my MovieClip was encapuslated in another movieclip. So i had to call the movieclip that was inside of the Hero symbol
I noticed you're still using
[Embed(source='../../../bin/Assets.swf', symbol='Hero')]
Since you're using flash develop (but same goes for flex) there's no reason you can't use SWCs
Although I can't tell with 100% certainty that that is what is causing this issue, once you start using SWCs it will make a world of difference.
Not only will you no longer need to use the embed code, things like gotoandplay and extending classes will work better, and you will be able to see the classes and objects within.
SWFs are not meant to be used this way, and sooner you stop using them for things they are not meant for, the the easier it will be.

Resources