Carnival Scene 1, Week 4 Summary

February 2020 Project Summary

This last week of February my goal was to animate the Ferris Wheel and animate the movie clips presenting the photographs, and I am so sad to say there is zero progress on this. Each time I animate a movie clip it won’t stop looping, then I spend hours trying to figure out why. Eventually it stops looping (for the love of God WHY?), I make the next movie clip the exact same way, and then again the new movie clip won’t stop looping: http://sandynichols.net/carnival/trouble/carnival2020.html

Lessons Learned

• Don’t forget to put console.log(_this); in the script and use the browser to help debug
• “stop();” on the last frame of the movie clip doesn’t seem to work when publishing to HTML5, it instead needs to be pre-pended with “this”: _this.stop();
• There is still something wrong with the way the ” _this.stop(); ” is on the last frame of the movie clip because the main timeline script throws this browser error: “Cannot read property ‘stop’ of undefined”, as seen here: http://sandynichols.net/carnival/carnival-scaled-down-trbl1.html
• As mentioned above, each time I animate a movie clip (the ones presenting the photos) it won’t stop looping. WHY? Example here: http://sandynichols.net/carnival/trouble/carnival2020.html
• The built-in preloader functionality works great, just choose your own GIF and Adobe adds it for you! However, since my canvas is extra wide (user is expected to scroll right) the “center” of my canvas is way right, and sometimes off screen for smaller devices. More investigation is needed on how to center a preloader in the browser window, not the canvas.

Asking for Help

• I left a question about my problem on Stack Overflow, but it went unanswered. I think this is not the right audience.
• I left a question about my problem on the adobe help forum for Animate. The response was to put “stop();” on the last frame of the movie clip. As stated, I tried that, so this response was not helpful.

Next Steps / February Conclusion

Resort to an online code mentor to help me over this hump. Put this project down for March and resume it again in April or later. Include better planning for a mobile experience? Once scene 1 is complete, can move on to 2 & 3.

Developers Diary – Notes for Sandy

First milestone, show & hide the photographs: https://carnival.sandynichols.net/ . This was produced from file carnival2020, and you renamed the html file to index on the server to publish it to the subdomain. Since then you have gone on to troubleshoot the movie clips in this file, so you no longer have a working version of your first milestone.

Scaled down version showing the looping problem was published here. This is the current state of the carnival2020 file: https://sandynichols.net/carnival/trouble/carnival2020.html

You also have file /past-trys/carnival-scaled-down-trbl1. This is where you thought you overcame your looping problem, then discovered a console error. Adding another movie clip throws you back to the looping problem again. http://sandynichols.net/carnival/carnival-scaled-down-trbl1.html

Last State of the Code: carnival2020, the Individual Movie Clip:

 var _this = this;
 _this.joint3mc.stop();

Last State of the Code: carnival2020, the main timeline:

var _this = this;
 console.log(_this);
 _this.joint1mc.visible = false;
 _this.joint1mc.stop();
 _this.joint2mc.visible = false;
 _this.joint2mc.stop();
 _this.joint3mc.visible = false;
 _this.joint3mc.stop();
 //joint3
 _this.joint3btn.on('click', function(){
     _this.joint3mc.visible = true;
     _this.joint3mc.gotoAndPlay(1);
 });
 _this.joint3mc.on('click', function(){
     _this.joint3mc.visible = false;
 });
 //joint2
 _this.joint2btn.on('click', function(){
     _this.joint2mc.visible = true;
     _this.joint2mc.gotoAndPlay(1);
 });
 _this.joint2mc.on('click', function(){
     _this.joint2mc.visible = false;
 });
 //joint1
 _this.joint1btn.on('click', function(){
     _this.joint1mc.visible = true;
     _this.joint1mc.gotoAndPlay(1);
 });
 _this.joint1mc.on('click', function(){
     _this.joint1mc.visible = false;
 });