In any case you need to add the eventListeners like this for (var i = 0; i < items.length; i++) {      this[items].addEventListener("click", EndLevel); } Klaus ... View more

Hi Slang75 To answer your question, if that all is possible in Illustrator, the answer is No. As far as I know. Illustrator is no web development tool. You could go the Image Map way as Monika suggests. But then you only have the links with no popups and other bells and whistles. I see right now two ways, though both demand some trickery outside Illustrator. Suggestion 1 You save your pure map from Illustrator without the circles, but make some notes on the x and y positions where the circles belong in relation to the coordinates of your map. Then you use some CSS positioning techniques (divisions with z-index, position relative/absolute, left and top values) to float your circles in controlled positions above your map. Then with some Javascript and CSS you make that when the circles are clicked and/or mouseovered that your popups with text and images appear. In one way or the other. I can't go too much into detail right now, you first would have to decide the general approach. Suggestion 2 You make yourself familiar with Adobe Animate CC. If you have a Creative Cloud Subscription install it. Here you can have your map as background on a stage and place your circles and hidden (at first) popups in a illustration-friendly manner (very much like Illustrator). You would publish the result in HTML5 Canvas format which would make it accessible on desktop and mobile touch devices alike. To animate how your circles and popups behave and appear you can be playful after your heart's content. This method would also have the advantage of being easily responsive for different viewport sizes. The insertion of the final canvas into your webpage would be done inside an iFrame. Okay, both my suggestions are a bit tricky but it would be worth it. The Image Map is the quicker solution for sure. Klaus ... View more

Hi to add to ClayUUID's good reasoning, I'm sure you could use this in each of your main timeline frames: var ths = this; var mcs = ["mc1", "mc2", "mc3", "mc4"]; stage.on("drawstart", initAllFrameMCs, this, true); function initAllFrameMCs (e) {     for (var i = 0; i < mcs.length; i++) {         ths[mcs].gotoAndStop(0);     } }    You only would have to amend the mcs array with the correct series and instance names of contained movieclips. Klaus ... View more

Hi BobobobCat Yes, the video position jump has to do with the dom_overlay_container in which the html5 video component lives. But I'm not sure what you are doing with your css addition position: absolute; left: 30px; 100px; 0px; display: block;. What is 100px? top? and 0px;? left can only be defined by one value, can't it. Use an iFrame The best way to nest a html5 canvas animation into another page with additional content is to install it in an iFrame. This way you keep the integrity of the Animate exported HTML document within its own window and dimensions.  See for example this page https://www.createjs.com/tutorials/Mouse%20Interaction/ . All createjs canvas examples are in iFrames within the overall page flow. Klaus ... View more

Hi casey On your first point: When you select Control -> Test (ctrl/or/cmd + Enter) the Player plays and loops all scenes in sorting order (as they are sorted in Window -> Scene). This would only be different if you added somewhere some code like stop(); or gotoAndStop(); You test single scenes by selecting Control -> Test Scene and it plays/loops the scene you are just working on. On your second point: I don't know how you insert your music. You should use Actionscript to initialize and play/stop/pause your song. So for example in frame 1 of scene 1 you could put a script like var mySound: Sound = new TheSong(); var soundStarted: Boolean; if (!soundStarted) {     mySound.play();     soundStarted = true; } Whereby TheSong() is the linkage/Class name you have given the sound file in your library. The var soundStarted: Boolean makes sure, that, when your scenes are looped that the sound doesn't start all over again when frame 1 in scene 1 gets repeated. More about sound methods in Actionscript 3: AS3: Sounds Klaus ... View more

Hi I answer here in the Forum sphere because it might help others with a similar problem. I can't 100% explain why the animation exported with Animate CC 2019 showed this problem and Animate CC 2018 did not. It might even be a bug in the latest release, not sure. But there's a way around it. Loop Timeline You exported your animation with Loop Timeline unchecked in Publish Settings/Basic. Your reason is obvious, you want your animation play only once and then stand still at the end. But this gives you the drops. I introduced a new layer with a tiny bit of code in a keyframe at the very end of your animation. Where you want the stand still. The code is simply: this.stop(); And then I checked Loop Timeline. So the animation is stopped by that bit of code. And now it works without drops. Classic vs Motion Tween The next part has nothing to do with the dropped layers issue but nevertheless important. You are using a Camera layer to zoom from close-up to wide view. And you made two Alpha fade-ins for your welcome and main title. For all these animations you used Motion Tweens. But you are exporting to HTML5 Canvas and for this target platform Motion Tweens will be published as Frame-by-Frame animation. When you publish or test your movie the Output panel tells you: Motion tweens are published as frame by frame animations. Use classic tweens where possible. (By the way: t is always a good idea to read and consider what is written in the Output window) So, use Motion Tween in Canvas projects only if your animation really needs to be frame-by-frame. In example you draw with Onion Skin an animated growth of a flower. Otherwise, for more mechanical tweens between different opacities (alpha), positions (x, y), scales (scaleX, scaleY) or rotation etc, use Classic Tween. That's less expensive (data size and CPU performance wise). Klaus ... View more