Your one-stop web everything MJPage Design

MJPage Design

Tips and Tricks — Tutorial #12


  1. Reseting preferences — Do not lose your code snippets

  2. Today, my Animate started to act up. I could not open the code windows from any of the {} in the elements panel - not stage - not any other elements. I could however open it from window/code. Not practical, even annoying.

    Fortunately there is a way to reset preferences as indicated in the Adobe post here .

    Now, there are a few things you need to remember. Resetting preferences does - well - reset everything including your code snippets. This is something that could get lots of users frustrated. However if you followed the post's instructions correctly, you renamed the original edge animate folder.

    greensock logo

    As indicated in the Adobe blog, when you reopen Edge Animate, a new Edge Animate folder is automatically created while the older one is preserved.

    So breathe and drill down to the original foler, the one you saved with another name - like edge animate old - and find the code snippets folder.

    folder 1

    It contains a JSON file named codeSnippet.json. Copy this file to the new edge animate folder in the codeSnippets folder.

    greensock logo

    Since I have all the versions so I can test user's files no matter what version they are using, under Edge Animate I have a folder for each version. So, since the preference issue affected only the version I was working in, I just copied the other folders as well.

    folder 2

  3. Make all your text fields not selectables
  4. Sometime, you want to make your text fiels not selectable because this interferes with the interface you planned for your Edge composition. Fortunately there is a way to correct this annoying problem by using a class name as well as css.

    Select all the text fields you want to make unselectable in the elements panel. Then choose a class name and add it to the class panel. All the text field will have the same class name. OK, I chose to use crazyText for my class name but you can choose something else. Always use something that makes sense to you as you do for variables. This make your code easier to read. For example 'crazyText' is more meaningful that 'myText' or 'x'. Make sure you do not forget the dot before the class name when you use it in the code below. I use all the browser prefixes to make sure the code is good for any browser.

    class name
    
      sym.$('.crazyText').css({
    		'-webkit-touch-callout': 'none',
    		'-webkit-user-select': 'none',
    		'-khtml-user-select': 'none',
    		'-moz-user-select': 'none',
    		'-ms-user-select': 'none',
    		'user-select':'none'
    		});
      

    Voila, you are done!

    More tips to come!...