Creating Variables and Conditional Statements in Edge Animate

By Paul Trani on December 20, 2012 in Edge Tools
w25
k 0

In this video I show how to get and set variables in Edge Animate, as well as adding some conditional statements to change content depending on the variable.

Download source files here

 

About the Author

Paul TraniView all posts by Paul Trani >
Like the real Paul Trani, but on the web.

25 Comments

  1. Ogy December 22, 2012 Reply

    Hi Paul,

    Many thanks for yet another awesome tutorial!

    I am complete newbie to Edge Animate + JavaScript / HTML5 / CSS3 but have semi-solid experience in AS3 and Flash.

    At this point I have three major question marks and would LOVE if you can link me or indeed give some hints (or even better make tutorial!) on following:

    1. This one is probably very easy but I still have no clue how to fully customise Edge Animate pre-loaders. Sure, I know I can use my own gif animation but how do I centre it on the stage, how do I make it dynamic so that loading percentage is displayed, how do I change pre-loader screen background colour / pattern etc… In short, little overall pre-loader tutorial would be awesome!

    2. If we decide to create little web site project in Edge Animate containing few pages. Is there any way to apply same or similar ‘deep linking’ techniques like we used to do it in Flash. Little ‘deep linking’ tutorial, hints or links on ‘how to’ would be great as well!

    3. Finally, most complex and most important thing – how can we dynamically load text and images into Edge Animate project? Can we do it via XML like we used to do it in Flash? If so how exactly? Little ‘dynamic’ tutorial featuring, let’s say, 5 photos with complimentary text ALL dynamically loaded via XML (or similar) would be nothing short of AWESOME! :)

    Love your stuff and keep up the great work!

    All the best

    Ogy

  2. Didier January 2, 2013 Reply

    Great! Just one little thing : Complimentary colors… Are they free ones? I would rather say complEmentary… The wise man shows the moon and the fool sees the finger… You are the wise man.

    • Author
      Paul Trani January 9, 2013 Reply

      Thanks Didier! Not sure what your profound statement means, but thanks!

  3. Don Jolley January 2, 2013 Reply

    Hi Paul,

    This is a truly excellent tutorial. I commented on the YouTube page asking whether the files are available for dissection, then actually went looking for the files and found them here. SO helpful.

    I was looking for this because my very first job with Edge Animate, and my first job having to actually modify/write the code in js, is a tricky, nasty thing. Five buttons animate onto the page, each one a rollover that changes the button to a rollover state. On click, the initial text fades and is replaced with a symbol that comes in from the right of the stage. That that symbol contains a text paragraph and symbol instances that have links to outside pages.

    When the user mouseovers another button, the first button fades back to the original state. When the second button is clicked, the symbol that replaced the original text fades like the first text faded, then is replaced by another symbol containing a text paragraph and symbol instances with links.

    It’s just a bit tougher than building rollovers and image swaps in Fireworks, so I’ve had two weeks to learn Edge, learn the necessary coding, and build four complex pages, each interactive with the other.

    While I am very disappointed in you that you did not anticipate that I would be doing this exact project and building a demo accordingly, the lessons in this exercise are invaluable. I am truly grateful.

    My one wish for this video (and I said it first on YouTube before I found your site), is it would have made things clearer if you had not used “colorToggle” and “mycolorToggle.” Being so close to each other made it tricky to follow. I retyped the code as you taught, replacing the term “mycolorToggle” with “squid” and things became clearer.

    • Author
      Paul Trani January 9, 2013 Reply

      Thanks Don! good observation! Thanks for your feedback. I hope it makes me better as a presenter! Thank you!

  4. Christian Sevens January 9, 2013 Reply

    Hi, if you ever find the time could you do a tut for randomizing things when clicked. I am absolutely doing my nut trying to get to a random point in the timeline (within a range) when i click on a button that i spent 2 weeks creating in Edge (can you tell yet i am not a web designer). Basically, i created a series of questions and answers and want the next question to be random. I presume that you are very busy but if you could point me to a resource i would be very grateful.

    many thanks.

    • Author
      Paul Trani January 9, 2013 Reply

      Christian,
      I went ahead and made a random example for you. Download it here. Enjoy Christian!
      Here’s the code that’s in the file:

      //Create a variable. Math.random picks a random number from 0-1 (.2390 for example) So you round down by using Math.floor. Then you multiply by 10000 since I have a timeline of 10 seconds.
      var x = Math.floor((Math.random()*10000)+1);

      // stop the timeline at the given position (ms or label)
      sym.stop(x);

  5. Cristian Ilisiu January 10, 2013 Reply

    Thank you for all your tutorials, i have learned Flash with you now i learn Edge. You are doing a very very good work.

    • Author
      Paul Trani January 10, 2013 Reply

      Thanks Cristian! Glad you like my tutorials. More coming soon! Thanks!

  6. Cristian Ilisiu January 13, 2013 Reply

    I have translated a lot of your tutorials from adobetv in Romanian. I am a big fan.

  7. carlos morrison February 5, 2013 Reply

    Hello, great tutorial i am and old flasher, whom needs to quickly update my as2 knowledge with something that can run in moder browsers, this is a great help, i hope ur next tutorials can cover the next topics wich we need real bad, and implementation of

    movieclip properties, _alpha, _x and all those for these symbols

    and some hitTest() implementation with those 2 we would be able to forget about applestore and its monopoly forever!!

    thank u so much!

    • Author
      Paul Trani June 26, 2013 Reply

      Thanks for the suggestions Carlos! I might do a tutorial on how to manipulate items in Edge Animate. Like you would do in Flash.

  8. Alex Reschka February 10, 2013 Reply

    What a great Job Paul!

    I have been stuck at this point with my website. because i have never really delt with the java script.

    http://www.reschkadesigns.com this is what i have so far, now im going to teach myself from your video and files. to make my site much better! thank u!

    • Author
      Paul Trani May 10, 2013 Reply

      Thank you Alex! Looks like your website is coming along nicely! Keep up the good work!

  9. Sebastián April 29, 2013 Reply

    Hi,

    Great Tutoril, much appreciated.
    Not sure why but I was having fun setting variables and changing them but then I realize that my iphone didn’t detect when I changed a variable instance. Everything works on a regular browser but it doesn’t work properly on iOS.

    this is the example:
    http://test.monolab.cl/smalldog2012/mobile2/

    Any thoughts?

    • Author
      Paul Trani May 10, 2013 Reply

      Hmm. I’m not sure what’s going on exactly. You should try to pass the variable into a text box that you can physically see on the page when testing on mobile. Might be just a delay in when it gets posted vs the animation that is waiting for it.

  10. Neil S. May 8, 2013 Reply

    I don’t normally bother to throw out internet kudos but this tutorial is most excellent! Thanks for taking the time to post it.

  11. Melissa July 25, 2013 Reply

    Paul, I really appreciate your videos- they are so helpful…I was wondering if you have any advice on adding forms to an adobe edge page.. I’m not sure where to begin.

  12. marion November 19, 2013 Reply

    what about drop down menu in flash is there a easier way!!!!!

  13. Daniel February 18, 2014 Reply

    Hi Paul,

    thanks for your nice tutorial about drag&drop.

    Have you also experienced that the draggable function has issues with the “responsive scaling” function of EA?

    Do you have a solution to this ?

    Thanks&Regards,
    Daniel

    • Author
      Paul Trani February 27, 2014 Reply

      No. I don’t have a solution for responsive scaling and a draggable function. Not right now. I’ll be working on more draggable/droppable stuff next month though. Stay tuned!

Leave a reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>