You can approach navigating content in Animate CC by creating sequences of content on the main timeline and then navigating to these sequences by going to their respective frames or frame labels.

Frame to Frame - AS2

on (release) {
gotoAndStop(5);
}

or

on (release) {
gotoAndPlay(20);
}

or

on (release) {
nextFrame();
}

or

on (release) {
gotoAndPlay("myFrameLabel");
}

Frame to Frame - AS3

section1_btn.addEventListener(MouseEvent.CLICK, onSection1);
function onSection1(e:MouseEvent) {
gotoAndStop(10);
}

section2_btn.addEventListener(MouseEvent.CLICK, onSection2);
function onSection2(e:MouseEvent) {
gotoAndPlay("myFrameLabel");
}

section3_btn.addEventListener(MouseEvent.CLICK, onSection3);
function onSection3(e:MouseEvent) {
nextFrame();
}

Frame to Frame - HTML5/JS

this.btnInstanceName.addEventListener("click", onClick.bind(this));

function onClick() {
this.gotoAndPlay(9);
}

 

this.btnInstanceName.addEventListener("click", onClickIt.bind(this));

function onClickIt() {
this.gotoAndPlay("myFrameLabel");
}

It can sometimes be easier to structure content across scenes and then navigate to particular scenes using code. If there is no stop actions within the timeline, you will automatically progress from one scene to the next, just like progressing from one frame to the next. There are no "Scenes" when publishing to HTML5/Canvas. However, because scenes function similarly to subsequent keyframes, you can achieve the same effect by using the "frame to frame" code above.

Scene to Scene - AS2

on (release) {
gotoAndPlay("Scene 2", 1);
}

or

on (release) {
gotoAndStop("mySceneName", 20);
}

Scene to Scene - AS3

scene_btn.addEventListener(MouseEvent.CLICK, onScene);
function onScene(e:MouseEvent) {
gotoAndPlay(1, "mySceneName");
}

Scene to Scene - HTML5/JS

//There are no "scenes" when publishing to HTML5 canvas. Use subsequent frames instead.

Page to Page navigation involves separating your content across multiple webpages and then navigating between them. You will need to decide if the new content should open in the same browser window ("_self") or a new window ("_blank").

Page to Page - AS2

on (release) {
getURL("yourpage.htm");
}

or

on (release) {
getURL("http://www.karlcleveland.com");
}

Page to Page - AS3

//You must use a URL request which can be set up in a variable or passed directly within the navigateToURL function
//Note the default in AS3 is now to open in a blank window, use "_self" to specify opening in same window.

myButton_btn.addEventListener(MouseEvent.CLICK, onClick);
function onClick(e:MouseEvent) {
navigateToURL(new URLRequest("http://karlcleveland.com"), "_self");
}

myButton2_btn.addEventListener(MouseEvent.CLICK, onClick2);
function onClick2(e:MouseEvent) {
var myRequest:URLRequest = new URLRequest("mailto:kcleveland@miracosta.edu");
navigateToURL(myRequest);
}

myButton3_btn.addEventListener(MouseEvent.CLICK, onClick3);
function onClick3(e:MouseEvent) {
var myRequest2:URLRequest = new URLRequest("test.ppt");
navigateToURL(myRequest2);
}

Page to Page - HTML5/JS

this.btnInstanceName.addEventListener("click", clickToGoToWebPage);

function clickToGoToWebPage() {
window.open("http://www.karlcleveland.com", "_blank");
}

You can navigate to selected content by hiding and revealing it. Do this by positioning it off-screen and then moving it on-screen, setting its visibility from false to true, or setting its opacity to 0 to 1.

Off-Screen to On-Screen or Hide and reveal - AS3

//Use a button to toggle the visibility of a movieclip (myClip) from true to false or false to true

myButton_btn.addEventListener(MouseEvent.CLICK, onClick);
function onClick(e:MouseEvent) {
myClip.visible = !myClip.visible;
}

//Play a movieclip whose first frame is positioned off stage or at an opacity of 0 and whose last frame (or next stop) is positioned on stage or at an opacity of 1

myClip.gotoAndPlay(1);

Off-Screen to On-Screen or Hide and reveal - HTML5/jS

//Use a button to toggle the visibility of a movieclip (myClipName) from true to false or false to true

this.btnInstanceName.addEventListener("click", onClick.bind(this));

function onClick() {
this.myClipName.visible = !this.myClipName.visible;
}

//Play a movieclip whose first frame is positioned off stage or at an opacity of 0 and whose last frame (or next stop) is positioned on stage or at an opacity of 1

this.myClipName.gotoAndPlay(0);

 

With Actionscript, you can load external .swf files into your current movie. This allows you to load movies into movies (or load content on demand). It's also possible to load content from the library to the stage, which is the approach you may take using HTML5/JS.

Movie to Movie (or Movieclip to Movieclip) - AS2

To load a movie into a movieclip (using a local path)

on (release) {
nameOfMovieClip.loadMovie("FileToLoad.swf");
}

To load a movie into a movieclip (using a local path to a folder and then the file)

on (release) {
nameOfMovieClip.loadMovie("MyFolderName/FileToLoad.swf");
}

To load a movie into a nested movieclip (using an absolute path)

on (release) {
_root.mc1.mc2.loadMovie("FileToLoad.swf");
}

To replace the entire movie with a new movie (replace the root level/layer)

on (release) {
loadMovieNum("FileToLoad.swf", 0);
}

To add a new movie on top of your current movie (into a level/layer on top)

on (release) {
loadMovieNum("FileToLoad.swf", 1);
}

Movie to Movie (or Movieclip to Movieclip) - AS3

stop();

var myContentLoader:Loader = new Loader();
var myContentURL:URLRequest = new URLRequest("sectionone.swf");

loadbox.addChild(myContentLoader);
//note "loadbox" is the instance name of the movieclip on the stage to load into
myContentLoader.load(myContentURL);

section1_btn.addEventListener(MouseEvent.CLICK, onClick);
section2_btn.addEventListener(MouseEvent.CLICK, onClick2);

function onClick(e:MouseEvent) {
myContentURL = new URLRequest("sectionone.swf");
myContentLoader.load(myContentURL);
}
function onClick2(e:MouseEvent) {
myContentURL = new URLRequest("sectiontwo.swf");
myContentLoader.load(myContentURL);
}

Movie to Movie - HTML5/JS

With HTML5/JS, you cannot load external .swf files, but you can load movieclips from the library and add them to the stage.

//Set the "linkage" property of the symbol in the library first
//In this case, the "linkage" is named "clipLinkageName"

var myInstanceName = new lib.clipLinkageName();

this.button.addEventListener("click", onClick.bind(this));
function onClick() {
//add the symbol to the stage
this.addChild(myInstanceName);

//position the x,y coordinates of the symbol on the stage
myInstanceName.x = 200;
myInstanceName.y = 100;
}

this.button2.addEventListener("click", onClick2.bind(this));

function onClick2() {
//remove the symbol from the stage
this.removeChild(myInstanceName);
}