thefyrewire

Firstly, I hoped you had a great Thanksgiving! And secondly, thank you so much for taking the time to create this. I'm going to go over it and deconstruct it until I understand every part. Thanks again, this is really helpful and I appreciate it greatly.

Thank you! I took a look at the containers and implemented them, so now I push that into the array and can tween just the container instead of the rounded rectangle and text, which already looks much cleaner, thank you! I'm not too familiar with using objects in arrays so will definitely read up on that tomorrow, likewise with caching.

It's amazing what you can learn on the internet these days! It will be an overlay, so most likely the max number of messages will be if it exceeds a certain height or I could just make the max the height of the screen. If it exceeds a certain height I'll probably force the message to clear instead of waiting for the timer. The chat definitely won't be that busy, but in the case of preparing for all eventualities, I imagine the messages would pop up, shoot up to the max height and be forcibly removed. Messages will probably be active for a couple seconds before fading and sliding out to the left, and users can't remove messages once it's been sent.

Note: when you open the Codepen scroll down to the bottom Hello there! I'm a JS/HTML5 newbie trying to animate an IRC chat using HTML5/JS in Animate CC. My goal is to dynamically create rounded rectangles with text from the chat and load them onto the canvas from the bottom. New messages would pop up from the bottom of the list and push the other messages upwards. Currently, I have the WebSocket set up and listening to messages. When it detects a message it sends it to the queue where it checks if any animation is currently playing, then if not it generates a rounded rectangle and the message text and animates it coming up from the bottom of the screen. My problem now is, if I send another message, another instance of this rounded rectangle is created and animates on top of the old one. I tried instead pushing each object pair (the text and the rectangle) into an array and then accessing it from there, which works, however, I'm having a little trouble optimising it (I attached a codepen to demonstrate the effect I'm going for and the bloated spaghetti code) (and I don't know if this is the best way to do things). The messages would also need to fade out to the side after a certain amount of time, which would mean new messages need to start lower down again. So, I'm thinking maybe each message has some kind of timer that animates it being removed and removes it from the array so that newer messages can overwrite them? I'm not sure. Does anyone have any suggestions for how I could approach this? Any help would be greatly appreciated, thank you! EDIT: This was my attempt at iterating: (the main attached one is what I'm trying to achieve without manually specifying the Y position, as the height of boxes will be dependent on the size of the message).

Ah! Thank you very much, that worked perfectly!

Hello, first-time poster here! I'm an HTML5/Animate CC newbie (and not really a dev in general, just doing this for fun and learning) and I was wondering if someone could tell me what I'm doing wrong here. I would like to be able to use GSAP to animate a vector file I'd add to the stage and would need to be able to make it animate when I call a function, however when I try to do this I keep getting cannot tween a null object, but if it's not wrapped in a function the animation plays fine. I created a new HTML5 canvas to see if I had the same problem, and I did: 1. Added a symbol to a blank HTML5 canvas, made it a MovieClip and drew a circle. I called the instance mcThing 2. In the Timeline, I selected the first frame and went into Actions 3. I wrote: function playAnimation() { TweenMax.to(this.mcThing, 3, {y:500}); } playAnimation(); 4. When testing in Chrome, I get cannot tween a null object. If I reference it as mcThing (omitting the this. I instead get mcThing is not defined. 5. If I then remove the function and just have this: TweenMax.to(this.mcThing, 3, {y:500}); It plays fine, but now I can't call it when I need to. Some context: Essentially what I currently have is a WebSocket listening for messages. When it receives a message, it's added to the queue. I am trying to get it to play an animation and insert the text from that message. The text itself should be okay: I used CreateJS to instantiate a text in the code and TweenMax works there, the problem is animating shapes/drawings. I suppose I could instantiate all the shapes in the code itself and TweenMax would work then but I don't think this is realistic as the animation/shapes are fairly complex, so I'm trying to target the stage. The animation would play out, stop, then the message would be removed from the queue and the next one would play (same animation, different text). I think this is a scope issue, but I'm not sure what I need to change. I have used GSAP in AS3 recently and it was working completely fine within functions. Any help would be much appreciated!