Image Transparency User Interactive Animation

[Stefan Hallberg]

I am posting this as a general question as I want to leave it open and receive suggestion on what application to use and to see if someone can assist in accomplishing my objective.

End result goal: Two or more stacked images with the viewer clicking in the top photo triggering a 3 second fade to the image below, clicking on the 2^nd photo and triggering the sequence in reverse, a fade to the top photo.

I tried it in Adobe Edge Animate with the first key frame set to opacity 100% and then another key frame at 3 seconds set to opacity 0%, I did get some suggestion but I was not able to make any of them work in the final export.

The final publishing goal is to be able to incorporate this within an InDesign created E-book; export to PDF and subsequently to MOBI and EPUB formats.

Interactivity and the viewer being able to click to reveal the different images and initiate the sequence is essential.

Please advice as to what Adobe application you think is the best to create this interactive sequence. It would be really great if someone could provide step-by-step instructions using the suggested application or direct me to a tutorial outlining how to create this in whatever Adobe Application you recommend.  I am not opposed to using several applications as if you believe that creating the sequence in on app like After Effects and then export to another to add interactivity is the most efficient way.

Your input and advice on this will be much appreciated.

Thank you.

Stefan

[kglad]

that's doable in animate pro.

i'm not an expert in edge so i can't say how that would work in edge or anything else.  if you want this message moved to the edge forum, let me know.

[Stefan Hallberg]

Thank you “kglad.com”, with “Animate Pro”, I assume that you are referring to Adobe Animate CC 2015, the Flash replacement app, which I do have version 12.2.1, that latest version as per Adobe CC update app.

If anyone can provide a step-by-step instruction as to achieving my goal in Adobe Animate CC, it will be greatly appreciated.

I don’t know as to what forum is best for this as it is still being explored, if pursuing it in Adobe Animate CC, maybe move the discussion there?

Thank you,

Stefan

[kglad · Accepted solution]

if this is what your want, http://www.kglad.com/Files/forums/fade.html download fade.fla in the same directory to see one way to do it.

[Stefan Hallberg]

Yes "kglad", that is exactly what I need, user interactive clickable fade back and forth, right on, thank you.

How do I download the fade.fla, how do access the "directory" you are referring to?

Thank you,

Stefan

[kglad]

http://www.kglad.com/Files/forums/fade.fla

[Stefan Hallberg]

Thank you "kglad", I downloaded the Animate file and was able to open it in Adobe Animate CC 2015.2 even though it stated that I have an older version, I have the latest version my OS 10.9.5 and computer is supporting.  Please note that I have never used Animate previously so I need to to move ahead from the basics.

There is no time line so how is the time for the fade designated?

What in the file controls the user interactivity, click on the photo and the fade is initiated?

How can the timing for the fade be controlled?

Can I just replace the graphics "ship.png" and "wave.png" with my own files and save/export?

There are 2 ship files, "ship.Png and "ship" with a cog wheel icon as well as "rect" and "sine", are these controlling the behavior or what are their significance?

What is the best save/export/output to be able to place it in InDesign and make it behave like yours?

This as far as I have been able to move on this project and your input is very appreciated.

The boat even has a Swedish flag so not Coast Guard but "Kust Bevakning" (I am native Swedish).

Thank you for staying with me on this and thank you for your patience in getting me through the vary basics of using Adobe Animate.

Stefan

[kglad]

There is no time line so how is the time for the fade designated?

using actionscript

What in the file controls the user interactivity, click on the photo and the fade is initiated?

How can the timing for the fade be controlled?

import flash.utils.Timer;

import flash.events.MouseEvent;

import flash.events.TimerEvent;

var fadeT:Timer = new Timer(40,0); // this controls how frequently (40 milliseconds) a fade is called.

var a:Array = [sine,ship];  // replace these with any two movieclips you want to cross-fade

var index:int = 0;

var fade1Complete:Boolean;

var fade2Complete:Boolean;

fadeT.addEventListener(TimerEvent.TIMER,fadeF);

rect.addEventListener(MouseEvent.CLICK,startfadeF); // this starts the fades when clicked

function startfadeF(e:MouseEvent):void{

    fade1Complete = false;

    fade2Complete = false;

    fadeT.reset();

    fadeT.start();

}

function fadeF(e:TimerEvent):void{

    if(a[index%2].alpha<=1){

        a[index%2].alpha+=.03;  // this controls the amount of fade-in per call

    } else {

        fade1Complete = true

    }

    if(a[(index+1)%2].alpha>0){

        a[(index+1)%2].alpha-=.03  // this controls the amount of fade-out per call

    } else {

        fade2Complete = true;

    }

    if(fade1Complete && fade2Complete){

        fadeT.stop();

        index++

    }

}

Can I just replace the graphics "ship.png" and "wave.png" with my own files and save/export?

yes. see above comment.

There are 2 ship files, "ship.Png and "ship" with a cog wheel icon as well as "rect" and "sine", are these controlling the behavior or what are their significance?

rect is used to respond to the mouse and covers the stage:

rect.addEventListener(MouseEvent.CLICK,startfadeF);

What is the best save/export/output to be able to place it in InDesign and make it behave like yours?

i don't know how indesign works with html5 files.  i recommend asking at the indesign forum

[Stefan Hallberg]

Thanks a million "kglad", I will work with this information and see what i can come up with.  As this is way over my head, it might take a wile.  Whatever question comes up I will post as they arise.

[kglad]

you're welcome.

[Stefan Hallberg]

Moving forward in resolving my Image Transparency User Interactive Animation issue. Thank you “kglad.com”, for providing the code and sample animation.

As I am a total newbie in Adobe Animate here are some questions:

“var a:Array = [sine,ship];  // replace these with any two movieclips you want to cross-fade

You state replace “movieclips”, I have 2 photos that need to fade as in your posted Coast Guard boat sample.

1. How do I generate the movie clips from within Adobe Animate CC?
2. In the Library panel there are the ship.png and sine.png (photos), there are also the ship and sine files represented by a cogwheel icon, are these the movie files that I need to replace?
3. In the very upper right of the interface there are various interface work places, Animator, Classic, Designer, etc., Which do you suggest I work in to best accomplish my goal?
4. How do I access the code you provide from within Adobe Animate?
5. After I have replaced the photos.png and generated the movie files and it is all showing in the Library module, how do I get it to display and be active in the Timeline?

I did watch some tutorials but I need to dig deeper.

Thank you again for you patience in assisting me with this.  Any input and assistance is very much appreciated even though it seems that I will need a complete step-by-step outline as how to go through the process of getting to my goal.

Regards,

Stefan

[kglad]

replace the image on the sine timeline with one of your pics and replace the image on the ship timeline with the other pic.

// using the tween class:

import fl.transitions.Tween;

import fl.transitions.easing.None;

import flash.events.MouseEvent;

var a:Array = [sine,ship]

var index:int = 1;

rect.addEventListener(MouseEvent.CLICK,startfadeF);

function startfadeF(e:MouseEvent):void{

new Tween(a[index], "alpha", None.easeNone, 1, 0, 1, true);

new Tween(a[1-index], "alpha", None.easeNone, 0, 1, 1, true);

index = 1-index;

}

[Sheena Kaul]

Moving to Adobe Animate CC - General​

[ClayUUID]

Why would you not use AS3's built-in Tween class? This sort of thing is exactly why it exists.

Fade - Adobe ActionScript® 3 (AS3 Flash) API Reference

[Stefan Hallberg]

ClayUUID, can you please expand on how you suggestion of “Fade transition for the movie clip instance” can be implemented in more detail?