Learning from Scratch

[freemanoid]

Hi All!

I used to dabble in a little Adobe Flash back in AS2.0 days but very basically and now really want to learn as much as possible about Adobe Animate for making games/interactive pages in HTML5 Canvas. 

I'm really struggling to find many resources about coding in Animate as the main focus seems to be on animation. I wondered if any veterans could point me in the direction of how I can learn to code from the ground up. 

My specific questions are what language should I be working with? I'm not sure on the differences between Action Script and JS - isn't AS defunct now? Or can it be used in HTML5 projects?

Something I've been trying to do but was struggling with is controlling the camera with some hover over buttons I.e. every frame that you stay hovered over it adds 10 pixels to the X value and then stops adding once you hover out - would be great if anyone could help me with this, please?

I really look forward to hearing your responses and being a part of the community!

thanks a lot,

Ross

[JoãoCésar · Accepted solution]

Hi.

Glad to know that you are so eager to learn how to code in Adobe Animate.

Answering your questions:

- In Animate CC you have two coding languages to use: AS3 and JavaScript.

* AS3 is used to create games and apps for Windows, Mac OS, Android, and iOS targeting the Adobe/Harman AIR runtime and also the Flash Player (for desktop and offline usage). AS3 is an amazing language although it's not so popular these days. If you're not planning to publish content to the web, then you can still use it.

* JavaScript is the default scripting language for the web and it is what Animate uses for HTML5 Canvas, WebGL Standard, WebGL Extended, and VR Panorama documents. If you're targeting the web, then certainly JavaScript is the best option. You can also target desktop computers using something like Node.js and Electron and also target mobile devices using something like Adobe PhoneGap and Apache Cordova.

- You cannot use AS3 in HTML5 projects. Well, unless you come up with a very hacky approach. Hehe

- The code for the camera could be something like this:

var root = this;
var button = root.yourMoveCameraButton;
var camera = AdobeAn.VirtualCamera.getCamera(root);

root.hovering = function(e)
{
	e.currentTarget.hovering = true;
};

root.notHovering = function(e)
{
	e.currentTarget.hovering = false;
};

root.moveCamera = function(e)
{
	if (button.hovering)
		camera.moveBy(camera.offsetX, 0, 0);
};

root.start = function()
{
	// stage.enableMouseOver(); // uncomment this line if your button is not actually a Button symbol but a Movie Clip instance, for example
	camera.offsetX = 10;
	button.on("rollover", root.hovering);
	button.on("rollout", root.notHovering);
	root.on("tick", root.moveCamera);
};

root.start();

And here are some suggestions for learning materials:

- The official help has lot of articles, tutorials, and examples: https://helpx.adobe.com/support/animate.html;

- Animate CC also ships with great learning content. Just go to the start screen and select the LEARN option in the top-left corner of the screen;

- LinkedIn Learning has some great video courses (special mention to Joseph Labrecque): https://www.linkedin.com/learning/;

- Pluralsight also have some great video courses: https://www.pluralsight.com/;

- General tips and tricks in the comment that starts with "Excellent!";

- Official demos developed by the CreateJS team: https://github.com/CreateJS/AdobeAnimateDemo;

- Official Flappy Bird clone tutorial: https://theblog.adobe.com/building-a-html5-flappy-bird-game-clone-with-adobe-animate-cc/ ;

- Martin Melendez's YouTube channel;

- My repo on GitHub that contains the source codes and files of some games and other stuff;

- I also have a YouTube channel that you may find useful.

I hope these help.

Regards,

JC

[freemanoid]

Amazing response! Thanks so much for your help! I look forward to delving in to some of these resources later! 😁 

Will be sure to drop you a subscription!

[JoãoCésar]

Awesome! You're welcome!

I wish you an amazing learning adventure! 😄

[freemanoid]

Thanks a lot for your help so far. I'm trying to make it so that you can't keep scrolling the camera once the Camera's X reaches -279. I've added code to attempt to track a variable 'camx' and put +10 and -10 in the 'moveCamera' function before later calling an if function to make the button invisible if camx <-279 but unfortunately this doesn't work.

this.stop();

var root = this;
var RightButton = root.LivingRoomRightArrow;
var LeftButton = root.LivingRoomLeftArrow;
var camera = AdobeAn.VirtualCamera.getCamera(root);
var camx = -280;

root.RightHovering = function(e)
{
	e.currentTarget.hovering = true;
};

root.RightNotHovering = function(e)
{
	e.currentTarget.hovering = false;
};

root.LeftHovering = function(e)
{
	e.currentTarget.hovering = true;
};

root.LeftNotHovering = function(e)
{
	e.currentTarget.hovering = false;
};

root.moveCameraRight = function(e)
{
	if (RightButton.hovering)
		camera.moveBy(camera.addX, 0, 0);
		root.camx += -10;
};

root.moveCameraLeft = function(e)
{
	if (LeftButton.hovering)
		camera.moveBy(camera.minusX, 0, 0);
		root.camx += 10;
};

root.right = function()
{
	// stage.enableMouseOver(); // uncomment this line if your button is not actually a Button symbol but a Movie Clip instance, for example
	camera.addX = -10;
	RightButton.on("rollover", root.RightHovering);
	RightButton.on("rollout", root.RightNotHovering);
	root.on("tick", root.moveCameraRight);
};

root.left = function()
{
	// stage.enableMouseOver(); // uncomment this line if your button is not actually a Button symbol but a Movie Clip instance, for example
	camera.minusX = 10;
	LeftButton.on("rollover", root.LeftHovering);
	LeftButton.on("rollout", root.LeftNotHovering);
	root.on("tick", root.moveCameraLeft);
};

root.RightOff = function()
{
	RightButton.visible=false;
}

root.RightOn = function()
{
	RightButton.visible=true;
}

if (root.camx > -279)
{
	root.RightOn();
}

if (root.camx < -280)
{
	root.RightOff();
}


root.left();
root.right();

It also seems like there must be an easier method of just doing getPosition on the camera and comparing that?

In addition, could I ask how to also set the camera to X as well as 'moveBy' a certain amount?

Thanks so much for your help,

R

[JoãoCésar]

Hi.

Here is a suggestion:

var root = this;
var leftButton = root.leftButton;
var rightButton = root.rightButton;
var camera = AdobeAn.VirtualCamera.getCamera(root);

root.hovering = function(e)
{
	e.currentTarget.hovering = true;
};

root.notHovering = function(e)
{
	e.currentTarget.hovering = false;
};

root.moveCamera = function(e)
{
	if (leftButton.hovering)
		root.check(-camera.limits, -camera.offsetX, leftButton, rightButton);
	else if (rightButton.hovering)
		root.check(camera.limits, camera.offsetX, rightButton, leftButton);
	
	camera.setPosition(root.clamp(camera.getPosition().x, -camera.limits, camera.limits), 0, 0);
};

root.check = function(limit, offset, currentButton, otherButton)
{
	currentButton.visible = camera.getPosition().x !== limit;
	camera.moveBy(offset, 0, 0);
	otherButton.visible = true;
};

root.clamp = function(value, min, max)
{
	if (value < min)
		return min;
	
	if (value > max)
		return max;
	
	return value;
};

root.start = function()
{
	camera.offsetX = 10;
	camera.limits = 280;
	leftButton.on("rollover", root.hovering);
	leftButton.on("rollout", root.notHovering);
	rightButton.on("rollover", root.hovering);
	rightButton.on("rollout", root.notHovering);
	root.on("tick", root.moveCamera);
};

root.start();

Please notice that you can get and set the position of the camera through the getPosition and setPosition methods. Typing camera and a dot should bring a list of code suggestions.

I hope this helps.

Regards,

JC