Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

How to make image fade in and out in a loop?

New Here ,
May 15, 2013 May 15, 2013

Ive got this image and i set its alpha to 1. So if its at 1 then it fades out and then it fades back in again and then out and so on.

Hurt.alpha -= 0.01;

                              if ( (Hurt.y < 0 ) && (Hurt.x < 0 ) ) 

                              {

                                        Hurt.alpha -= 0.03;

 

                                        Hurt.alpha -= 0.03;

                                        if ( (Hurt.y < 0 ) && (Hurt.x < 0 ) )

                                        {

                                                  Hurt.alpha += 0.03;

                                        }

                              }

im not sure but the part where it fades out works but doesnt fade back in again.

Some help

using Flashdevelop with starling

TOPICS
ActionScript
2.9K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 15, 2013 May 15, 2013

// fadeInOutF should repeatedly execute (eg, using an enterframe loop):

var fadeIn:Boolean;

function fadeInOutF():void{  // add event to function argument if an enterframe loop is used

if(Hurt.y<0 && Hurt.x<0){ // not sure this part makes sense but it's part of your code so i added it.

if(fadeIn){

Hurt.alpha+=.03;

if(Hurt.alpha>=1){

fadeIn=false;

}

} else {

Hurt.alpha-=.03;

if(Hurt.alpha<=0){

fadeIn=true;

}

}

}

}

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 15, 2013 May 15, 2013

it didnt work...it might be too much to ask but i need a even more basic fadein & fadeout that the one suggested

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 15, 2013 May 15, 2013

then you didn't create a loop.

remove your code and copy and paste the following:

this.addEventListener(Event.ENTER_FRAME,fadeInOutF);

var fadeIn:Boolean;

function fadeInOutF(e:Event):void{

if(Hurt.y<0 && Hurt.x<0){ // not sure this part makes sense but it's part of your code so i added it.

if(fadeIn){

Hurt.alpha+=.03;

if(Hurt.alpha>=1){

fadeIn=false;

}

} else {

Hurt.alpha-=.03;

if(Hurt.alpha<=0){

fadeIn=true;

}

}

}

}

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 15, 2013 May 15, 2013

nope still didnt work

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 15, 2013 May 15, 2013

do you see an error message?  is Hurt's x and y less than zero?

if no and yes (resp), copy and paste the trace output after running your program for 2 or 3 seconds after Hurt's x and y are less than zero using the following code:

trace("start");

this.addEventListener(Event.ENTER_FRAME,fadeInOutF);

var fadeIn:Boolean;

function fadeInOutF(e:Event):void{

trace(Hurt.alpha,Hurt.x,Hurt.y);

if(Hurt.y<0 && Hurt.x<0){ // not sure this part makes sense but it's part of your code so i added it.

if(fadeIn){

Hurt.alpha+=.03;

if(Hurt.alpha>=1){

fadeIn=false;

}

} else {

Hurt.alpha-=.03;

if(Hurt.alpha<=0){

fadeIn=true;

}

}

}

}

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 15, 2013 May 15, 2013

ok this is my code so far....tell me exactly where to input the code you are saying

package states

{

 

          import starling.animation.Juggler;

          import starling.animation.Tween;

          import starling.display.Button;

          import starling.display.Image;

          import starling.display.Quad;

          import starling.display.Sprite;

          import starling.events.Event;

          import starling.text.TextField;

          import starling.utils.Color;

          import starling.core.Starling;

          import starling.animation.Transitions;

          import states.IgameState;

 

          /**

           * ...

           * @author Stefan Oprisan

           */

 

           //function to the starling stage object(comes from the main stagestarling class)

          public class menu_Credits extends Sprite implements IgameState

          {

                    //this holds our display objects such as BG's, sprites, etc.

          private var gameClassRef:game;

          private var BG:Image;

          private var BackButton:Button;

          private var Q:Quad;

          private var changeState:IgameState;

          private var GameName:TextField;

          private var GameName2:TextField;

          private var credits:TextField;

          private var credits2:TextField;

          private var credits3:TextField;

 

 

 

                    public function menu_Credits(extGameClassRef:game)

                    {

                              this.gameClassRef = extGameClassRef; //use the above reference

                              this.addEventListener(Event.ADDED_TO_STAGE, init);

                    }

 

                    private function init(e:Event):void

                    {

                              removeEventListener(Event.ADDED_TO_STAGE, init);

 

 

 

                              BG =  new Image(embeded_Assets.myTexAtlas.getTexture("credits"));

                              this.addChild(BG);

 

 

                              Q = new Quad( 100, 10, 0x21302e); //here you create a new Quad with size 800x600 and its is black

                              this.addChild(Q);

                              Q.pivotX = Q.width >> 1; //here you change the pivot in the middle

                              Q.pivotY = Q.height / 2; //here you change the pivot in the middle

                              Q.x = 400; //here you input the position of the square which is in the middle

                              Q.y = 500; //here you input the position of the square which is in the middle

                              Q.alpha = 1;

 

                              //Trigger Happy Published by Uxbridge College A KHM3dia Production Executive and Main Director During Development Stefan Oprisan

 

                              credits = new TextField(400, 200, ""); //here you can change the position and what it can say

                              credits.x = 450; //X position

                              credits.y = 300;//Y position

                              credits.text = "Trigger Happy"; //type here what text you want to say

                              credits.fontName = "Capture it"; //font name

                              credits.fontSize = 20; //change here the size of the font

                              credits.color = Color.WHITE; //color of the text

                              credits.width = 325; //this extends the boundary of how big it can be

                              credits.height = 50; //this extends the boundary of how big it can be

                              credits.alpha = 1; //this changes the tranparency

                              this.addChild(credits);

 

                              credits2 = new TextField(400, 200, ""); //here you can change the position and what it can say

                              credits2.x = 450; //X position

                              credits2.y = 360;//Y position

                              credits2.text = "Published by Uxbridge College"; //type here what text you want to say

                              credits2.fontName = "Capture it"; //font name

                              credits2.fontSize = 20; //change here the size of the font

                              credits2.color = Color.WHITE; //color of the text

                              credits2.width = 310; //this extends the boundary of how big it can be

                              credits2.height = 50; //this extends the boundary of how big it can be

                              credits2.alpha = 0; //this changes the tranparency

                              this.addChild(credits2);

 

 

                              BackButton = new Button(embeded_Assets.myTexAtlas.getTexture("BG_invisible"), "" );

                              BackButton.addEventListener(Event.TRIGGERED, GoBack);

                              this.addChild(BackButton);

 

                              BackButton.addEventListener(Event.TRIGGERED, GoBack);

                              BackButton.x = 255;

                              BackButton.y = 475;

                              BackButton.text = "Go Back";

                              BackButton.fontName = "Capture it";

                              BackButton.fontSize = 10;

                              BackButton.fontColor = Color.WHITE;

                              this.addChild(BackButton);

 

                              GameName = new TextField(400, 200, ""); //here you can change the position and what it can say

                              GameName.x = -20; //X position

                              GameName.y = 130; //Y position

                              GameName.text = "Trigger"; //type here what text you want to say

                              GameName.fontName = "Capture it"; //font name

                              GameName.fontSize = 70; //change here the size of the font

                              GameName.color = Color.WHITE; //color of the text

                              GameName.width = 500; //this extends the boundary of how big it can be

                              GameName.height = 200; //this extends the boundary of how big it can be

                              GameName.alpha = 0.85; //this changes the tranparency

                              this.addChild(GameName);

 

                              GameName2 = new TextField(400, 200, ""); //here you can change the position and what it can say

                              GameName2.x = -17; //X position

                              GameName2.y = 190; //Y position

                              GameName2.text = "Happy"; //type here what text you want to say

                              GameName2.fontName = "Capture it"; //font name

                              GameName2.fontSize = 90; //change here the size of the font

                              GameName2.color = Color.WHITE; //color of the text

                              GameName2.width = 500; //this extends the boundary of how big it can be

                              GameName2.height = 200; //this extends the boundary of how big it can be

                              GameName2.alpha = 0.85; //this changes the tranparency

                              this.addChild(GameName2);

 

 

                    }

 

                    private function GoBack(e:Event):void  

                    {

                              this.gameClassRef.changeState(game.MENU_MAIN);

                    }

 

 

                    //Interface IgameState

                    public  function update():void

                    {

                              credits.y -= 1;

                              if (credits.y < 500 )

                              {

                                        credits.y += 3;

 

                              }

 

                              credits.y += 1;

                              if ( credits.y < 500)

                              {

                                        credits.y -= 3;

                              }

 

 

 

                              

                    }

 

                    public function destroy():void

                    {

                        BG.removeFromParent(true);

                              BG = null;

 

                              BackButton.removeFromParent(true);

                              BackButton =  null;

 

                              this.removeFromParent(true);

                    }

 

          }

}

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 16, 2013 May 16, 2013
LATEST

assuming Hurt is on-stage when that class is added to the stage and there's only one class instance, you can use:

package states

{

 

          import starling.animation.Juggler;

          import starling.animation.Tween;

          import starling.display.Button;

          import starling.display.Image;

          import starling.display.Quad;

          import starling.display.Sprite;

          import starling.events.Event;

          import starling.text.TextField;

          import starling.utils.Color;

          import starling.core.Starling;

          import starling.animation.Transitions;

          import states.IgameState;

 

          /**

           * ...

           * @author Stefan Oprisan

           */

 

           //function to the starling stage object(comes from the main stagestarling class)

          public class menu_Credits extends Sprite implements IgameState

          {

                    //this holds our display objects such as BG's, sprites, etc.

          private var gameClassRef:game;

          private var BG:Image;

          private var BackButton:Button;

          private var Q:Quad;

          private var changeState:IgameState;

          private var GameName:TextField;

          private var GameName2:TextField;

          private var credits:TextField;

          private var credits2:TextField;

          private var credits3:TextField;

 

private var fadeIn:Boolean;

 

                    public function menu_Credits(extGameClassRef:game)

                    {

                              this.gameClassRef = extGameClassRef; //use the above reference

                              this.addEventListener(Event.ADDED_TO_STAGE, init);

                    }

 

                    private function init(e:Event):void

                    {

startFadeF();

                              removeEventListener(Event.ADDED_TO_STAGE, init);

 

 

 

                              BG =  new Image(embeded_Assets.myTexAtlas.getTexture("credits"));

                              this.addChild(BG);

 

 

                              Q = new Quad( 100, 10, 0x21302e); //here you create a new Quad with size 800x600 and its is black

                              this.addChild(Q);

                              Q.pivotX = Q.width >> 1; //here you change the pivot in the middle

                              Q.pivotY = Q.height / 2; //here you change the pivot in the middle

                              Q.x = 400; //here you input the position of the square which is in the middle

                              Q.y = 500; //here you input the position of the square which is in the middle

                              Q.alpha = 1;

 

                              //Trigger Happy Published by Uxbridge College A KHM3dia Production Executive and Main Director During Development Stefan Oprisan

 

                              credits = new TextField(400, 200, ""); //here you can change the position and what it can say

                              credits.x = 450; //X position

                              credits.y = 300;//Y position

                              credits.text = "Trigger Happy"; //type here what text you want to say

                              credits.fontName = "Capture it"; //font name

                              credits.fontSize = 20; //change here the size of the font

                              credits.color = Color.WHITE; //color of the text

                              credits.width = 325; //this extends the boundary of how big it can be

                              credits.height = 50; //this extends the boundary of how big it can be

                              credits.alpha = 1; //this changes the tranparency

                              this.addChild(credits);

 

                              credits2 = new TextField(400, 200, ""); //here you can change the position and what it can say

                              credits2.x = 450; //X position

                              credits2.y = 360;//Y position

                              credits2.text = "Published by Uxbridge College"; //type here what text you want to say

                              credits2.fontName = "Capture it"; //font name

                              credits2.fontSize = 20; //change here the size of the font

                              credits2.color = Color.WHITE; //color of the text

                              credits2.width = 310; //this extends the boundary of how big it can be

                              credits2.height = 50; //this extends the boundary of how big it can be

                              credits2.alpha = 0; //this changes the tranparency

                              this.addChild(credits2);

 

 

                              BackButton = new Button(embeded_Assets.myTexAtlas.getTexture("BG_invisible"), "" );

                              BackButton.addEventListener(Event.TRIGGERED, GoBack);

                              this.addChild(BackButton);

 

                              BackButton.addEventListener(Event.TRIGGERED, GoBack);

                              BackButton.x = 255;

                              BackButton.y = 475;

                              BackButton.text = "Go Back";

                              BackButton.fontName = "Capture it";

                              BackButton.fontSize = 10;

                              BackButton.fontColor = Color.WHITE;

                              this.addChild(BackButton);

 

                              GameName = new TextField(400, 200, ""); //here you can change the position and what it can say

                              GameName.x = -20; //X position

                              GameName.y = 130; //Y position

                              GameName.text = "Trigger"; //type here what text you want to say

                              GameName.fontName = "Capture it"; //font name

                              GameName.fontSize = 70; //change here the size of the font

                              GameName.color = Color.WHITE; //color of the text

                              GameName.width = 500; //this extends the boundary of how big it can be

                              GameName.height = 200; //this extends the boundary of how big it can be

                              GameName.alpha = 0.85; //this changes the tranparency

                              this.addChild(GameName);

 

                              GameName2 = new TextField(400, 200, ""); //here you can change the position and what it can say

                              GameName2.x = -17; //X position

                              GameName2.y = 190; //Y position

                              GameName2.text = "Happy"; //type here what text you want to say

                              GameName2.fontName = "Capture it"; //font name

                              GameName2.fontSize = 90; //change here the size of the font

                              GameName2.color = Color.WHITE; //color of the text

                              GameName2.width = 500; //this extends the boundary of how big it can be

                              GameName2.height = 200; //this extends the boundary of how big it can be

                              GameName2.alpha = 0.85; //this changes the tranparency

                              this.addChild(GameName2);

 

 

                    }

private function startFadeF():void{

trace("start");

this.addEventListener(Event.ENTER_FRAME,fadeInOutF);

}

private function fadeInOutF(e:Event):void{

trace(Hurt.alpha,Hurt.x,Hurt.y);

if(Hurt.y<0 && Hurt.x<0){ // not sure this part makes sense but it's part of your code so i added it.

if(fadeIn){

Hurt.alpha+=.03;

if(Hurt.alpha>=1){

fadeIn=false;

}

} else {

Hurt.alpha-=.03;

if(Hurt.alpha<=0){

fadeIn=true;

}

}

}

}

 

                    private function GoBack(e:Event):void  

                    {

                              this.gameClassRef.changeState(game.MENU_MAIN);

                    }

 

 

                    //Interface IgameState

                    public  function update():void

                    {

                              credits.y -= 1;

                              if (credits.y < 500 )

                              {

                                        credits.y += 3;

 

                              }

 

                              credits.y += 1;

                              if ( credits.y < 500)

                              {

                                        credits.y -= 3;

                              }

 

 

 

                              

                    }

 

                    public function destroy():void

                    {

                        BG.removeFromParent(true);

                              BG = null;

 

                              BackButton.removeFromParent(true);

                              BackButton =  null;

 

                              this.removeFromParent(true);

                    }

 

          }

}

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
May 15, 2013 May 15, 2013

Not sure what you're doing with x,y but as far as simply fading something in/out in a loop you should look at TweenLite/Max - it makes this quite simple:

fadeOut();

function fadeOut(){

          TweenMax.to(Hurt, 1, {alpha:0, onComplete:fadeIn});

}

function fadeIn(){

          TweenMax.to(Hurt, 1, {alpha:1, onComplete:fadeOut});

}

Or, you can even do it in one line:

TweenMax.to(Hurt, 1, {alpha:0, yoyo:true, repeat:-1});

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines