Navigating the Code panel
Your travel slideshow is now interactive, where users can click to see any of the images. But your code appears to be scattered among many different elements. How can you view all the code for your Edge Animate composition together? The answer is in the Code panel, which you can open by choosing Window > Code, or pressing Ctrl+E (Windows) or Command+E (Mac OS).
Viewing your code
The Code panel displays all the code in your Edge Animate composition—both the code that is automatically generated for every project, and the code that you insert yourself.
- Choose Window > Code, or press Ctrl+E (Windows)/Command+E (Mac OS).
- Click on the Full Code button on the far-right side of the panel to toggle between Full Code mode and non-Full Code mode.
- While in non-Full Code mode, click on the Plus button in line with the Stage element.
- If you want to delete an event or trigger from the Code panel, right-click on the event or trigger from the list and select Delete Action.
- In either Full Code or non-Full Code mode, when you make additions and edits to the script, and they are saved in the composition.
The Code panel opens. The Code panel is similar to the other script panels for triggers, events, and actions.
)
In Full Code mode, Edge Animate displays the entire code for the JavaScript file for the Edge Animate composition. Scroll down to see the script for all your thumbnail elements as well as the trigger. The code that this represents is contained in the file 05_workingcopy_edgeActions.js.
)
In non-Full Code mode, you can select the code for the individual elements or triggers on the Stage on the left side of the panel. In addition, there is an option to see the code for the Preloader, which is currently disabled because you haven’t yet added one. In later lessons, you’ll learn about adding a Preloader.
)
A hierarchical menu appears that allows you to add an event to the Stage itself, an event to any of the elements on the Stage, or an event to the Timeline.
)
)
Dealing with code errors
Using the provided code snippets makes adding code relatively easy because the script is already formatted correctly. All you have to do is replace key values. However, bugs and typos do invariably creep in, and dealing with code errors is a common struggle for any developer, whether a novice or an expert.
Edge Animate immediately alerts you to code errors, which make finding and correcting them easy. When there is a mistake in syntax in any of the code, Edge Animate displays an error message at the bottom-left corner of the Code panel. For example, if you were to accidentally delete the closing parenthesis of the stop() method, the error display tells you where the error occurs. In addition, a red dot appears next to the line of code in question.
)
The error notification is also displayed at the bottom-left corner of the Stage.
)
Click on the arrow icon after the error description to jump directly to the source of the error in the Code panel so you can fix it. The All or Code options in the error display determines whether all errors are displayed (including warnings of feature incompatibilities with various devices, such as text shadows in IE9), or only code errors are displayed.