I would like to thank the animate community

[Bundaberg North5E42]

ok team,

Project 1 is done - (simple choose your own adventure)

https://github.com/subtlefly/CYOA-animatecc-easelJS-html5

keep in mind this is for education so its not polished - its an example for me to use as what students will be able to create.

Couldnt have done it without you guys!

Now I'm not saying it's amazing or anything but I am pretty happy with the amount of freedom students will have through the animate platform to add images, sound and animations and have fun (if they are not particularly interested in the coding).  

Kids who are into it can add sound, extra functions and go as hard as they want to/are able!

There are plenty of things I could polish and add - there may be a few bugs but I think I have got most of them.. the kids will soon sort that out 

Thanks again everyone - if this code helps anyone else out well more power to your arm.

Thanks and have a great day

[kglad]

the first problem i see after downloading your repository is the fla contains no code and no links to an external class.

[Bundaberg North5E42]

oh sorry kglad - that will be my not understanding how gibhub works I suppose - I thought you would download the files in the folder and run the index.html file.  I will do some research and see if I can work it out

[kglad]

you expect the files to be downloaded one-by-one?

[Bundaberg North5E42]

no like I said, so sorry its obviously my misunderstanding of how to use the site.  JoãoCésar

had given me a github link for a movement file that the had created

https://bit.ly/3Q3eOwC.

and I just downloaded the files individually (because I actually didnt reallise there was any other way to do it)..   (I guess I thought it was just like Google Drive for coders- a place to share files)

It is embarrassing to be so dumb sometimes!

I did go and try to figure out how to use Github but after looking at some online instuctions and a tutorial I have no idea - I think I will just try to stick to the animate/EaselJS/Html5 pipeline for now and try to get some 13 yr old kid to explain it to me once school starts!

Once again thanks to you and everyone else for being patient and helping others

[kglad]

hey, we all know zero at the start. 

afaik, to use github efficiently, you click the code button>download zip file

then unzip and you have the all the folders and files with the folder/file structure set-up by the github creator. 

i'm not sure how downloading one-by-one would be any more helpful.  eg, if i download your fla directly, it will be the same fla that i downloaded and extracted from your zip: still no code and no link to any external js file(s).

so, how is that supposed to work?

[Bundaberg North5E42]

Hey kglad,

You dont need the .fla  - that is there in case someone wants to make edits and change the images or use the external code for another project.

If you download the .zip of the folder, just double click the index.html and it will run (the index is reading from the CYOAexternalclass.js).       If you opened the .fla and publish changes the index will read those changes from the new CYOAexternalclass.js.   The CYOAexternalclass.html wont work cause as you said it doesnt have any links to external scripts. I mean if you did open the .fla and make changes you would end up with a new CYOAexternalclass.html file but it wont work and isnt needed to run the project.  The workflow I have been shown makes this index.html file so that if you use Web Server for Chrome (or some alternative) and you point it toward the folder there is an option to automatically play the index.html file.

[kglad]

you're not setting up your fla properly:

open your fla

open the actions panel

expand global menu

then use the include submenu > + > navigate to a js file that needs to be included

repeat for each js file needed.

test.  if done correctly, everything should work.

save your fla and it should be ready to be added to your github repository

[Bundaberg North5E42]

Hey kglad,

I think this is partly why I have been having so much trouble working out what it going on with the answers that I have been getting here, because this must be some other way to do it I guess?  When I did go in and do what you said and put the relevant .js scipt as an internal script the project doesnt run (no errors) but I think this is all because of the (stage, root). (exportRoot, stage) (lib) and other weird things that we have been noticing are different about the code on the external files.

I know that you must be right, but I just downloaded the .zip file and when I clicked the index.html file it works no probs.  I guess old mate has a bunch of valid reasons why he thinks this is the proper way to do it?  I will get on and ask a question about it and see what the logic is

Thanks again for taking the time and teaching - I feel like I am getting somewhere

[kglad]

getting things to work by clicking the index file isn't much help to other users that want to modify things.

well, it is a help, but they'll almost certainly do things the expected way and create a js file to add the divs and whatever else is in your html that's needed.  

and yes, having a manually edited html would answer questions about issues like where gameCanvas id was coming from (in another thread).

[kglad]

are you planning to have your students use those github files?

and what's the point of including the fla?

[Bundaberg North5E42]

No this was my tester - to prove the concept - I will now make a series of breakdowns in different levles of complexity to be able to give students of different levels the ability to work on this in different ways.  I have an internal server for hosting files at school.

off the top of my head something like this -

So super basic - create a story and put some pics and text, put each pic on the timeline of an animate project and this.stop() each frame.  Then you could just put some buttons (or maybe the buttons and gotoAndStop code are even already there and you just have to put in the frame labels to make your story work)- super low rent.  Then if you are bored, tired or angry you can do animations on each page for fun. Just cntl+enter run it on the desktop (D+/C-)

Then for kids who have the ability you can use the set up with the external class and contol everything on one frame in the .fla from the external code. Use the webserver and run it from the index file (C- all the way to A++). (<-- keep in mind I have already figured out all the code changes that needed to be made and have the basic structure working so they will be given that as a Fait accompli

Not trying to be funny but I posted the github in case it might help someone else or they might like to use it in some way

The .fla file is there in case you want to add other drawings or images, edit the death animation, or make other physical changes on the stage (change the colour and size of the font on the dynamic txt boxes or the colour of the background)

You could also add extra drawings (or edit the purposely ridiculoulsy bad drawings I have included) - when you publish - those changes go to the spritesheets and the .js file and the index.html will reflect them when you run it next..

I have asked old mate and will let you know if I get an answer to why this has been proposed as the appropriate workflow for animate>EaselJS>Html-5 game design.

Thanks for taking the time I think it all helps

[Nicktendo28]

Very cool. this is pretty great code. Thanks for sharing. 

[Bundaberg North5E42]

So I said I would ask Old Mate about the logic behind this set up and here is the answer-

"In general I prefer to put the minimum of code in the fla. This avoids the need to publish for every code tweak. In a professional setting the graphic artist is not the coder and so dividing the task between asset creation and coding is preferable."