Highlighted

How to create a Text Rollout?

Explorer ,
Jul 09, 2020

Copy link to clipboard

Copied

I'm looking to create a "Text Rollout" animation to have text look to appear as if it is being pulled out of a simple box graphic.

I tried animating text within the State view of a smart object, but there doesn't seem to be a way to apply a clipping mask to the object to prevent the text being visible outside of the smart object border.

I've seen many examples that either alpha fade in the text, or expanding scale the text, but I want the text to just slide in without scaling or fading.

With masking a standard thing in pretty much every other Adobe package, I thought it would be an obvious thing to have in Captivate.

Another method could be to have the background with a transparent hole in overlayed at the appropriate level, but with an animated full background,this seems a very awkward way of doing something that should be so simple!

Maybe there's something I could do with the "Rollover Slidelet", although I want to just appear at a certain time, not triggered by a rollover event.

Any help would be greatly appreciated.

Views

112

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to create a Text Rollout?

Explorer ,
Jul 09, 2020

Copy link to clipboard

Copied

I'm looking to create a "Text Rollout" animation to have text look to appear as if it is being pulled out of a simple box graphic.

I tried animating text within the State view of a smart object, but there doesn't seem to be a way to apply a clipping mask to the object to prevent the text being visible outside of the smart object border.

I've seen many examples that either alpha fade in the text, or expanding scale the text, but I want the text to just slide in without scaling or fading.

With masking a standard thing in pretty much every other Adobe package, I thought it would be an obvious thing to have in Captivate.

Another method could be to have the background with a transparent hole in overlayed at the appropriate level, but with an animated full background,this seems a very awkward way of doing something that should be so simple!

Maybe there's something I could do with the "Rollover Slidelet", although I want to just appear at a certain time, not triggered by a rollover event.

Any help would be greatly appreciated.

Views

113

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 09, 2020 0
Most Valuable Participant ,
Jul 09, 2020

Copy link to clipboard

Copied

Animated GIF using masking in Photoshop?

OAM created in Animate?

Or a simple motion effect in Captivate? and use the Timeline which doubles as layer manager You don't specify which trigger you want to use to pull out the text. Here is an example of a sliding in/out menu:

http://blog.lilybiri.com/sliding-menu

Beware: you cannot apply effects to custom states in a multi-state object.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2020 0
Explorer ,
Jul 09, 2020

Copy link to clipboard

Copied

I thought about an Animate OAM, although I've not had a great experience with my last project that was an entire presentation in Animate, then importing the OAM into Captivate (for SCORM). Also, it would need a new OAM or animate GIF for each header caption, much easier if it could be just a text box within Captivate itself.

The sliding menu example is the typical sliding in from off screen, my situation is to slide in from the box which is in the middle of the screen (horizontally).

There is no trigger only a point on the timeline.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2020 0
Most Valuable Participant ,
Jul 09, 2020

Copy link to clipboard

Copied

Put the box on top of the motion path for the text. I see that someone else took over, but this is completely possible with an Effect. Create a custom path so that you can reuse it easily. Will leave you to the other user.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2020 0
Advocate ,
Jul 09, 2020

Copy link to clipboard

Copied

Someone else "took over"?

 

Is that really what you think?

Did I steal your precious thread..? Are community forum responses only allowed to go to the first person who tags the thread? You don't need to "leave them to the other user" as if you're tossing table scraps to the dog.

 

Good grief! Did you ever think that the people who come here for answers to questions might appreciate multiple points of view or solutions to problems?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2020 1
Explorer ,
Jul 09, 2020

Copy link to clipboard

Copied

All responses are appreciated, even if they cover the same ground!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2020 0
Most Valuable Participant ,
Jul 09, 2020

Copy link to clipboard

Copied

Stop those reactions, just find it a waste of time if the solutions are similar. If they are different it is interesting for everyone. Wht do you talk about 'stealing'...? Just do not want to save precious time.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2020 0
Explorer ,
Jul 09, 2020

Copy link to clipboard

Copied

There are many ways to skin a cat!

The end results are normally the same as the object of the exercise.

Nothing is a waste of time if a solution is found. The best will then be marked as correct, to save others time!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2020 0
Advocate ,
Jul 09, 2020

Copy link to clipboard

Copied

Is this minimalistic example along the lines of what you were thinking?

slideText.gif

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2020 0
Explorer ,
Jul 09, 2020

Copy link to clipboard

Copied

That example is similar to what I would like, but the box is just a narrow vertical bar, the box you've show does the job of hiding the text, in my case the text is visible to the left of the box as it slides in, which is what I am trying to mask out of view.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2020 0
Advocate ,
Jul 09, 2020

Copy link to clipboard

Copied

Well, that does complicate things a little further.

What I have done here is to place a white box with no border over the text and shrink the larger box. This serves as the mask but your specific environment may be less suitable for that.

slideText.gif

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2020 0
Explorer ,
Jul 09, 2020

Copy link to clipboard

Copied

Yes, that's the effect, unfortunately a white cover-up box won't cut it!

My background has an image that is animated in with slide and scale effects, so unless I take a cutting of the exact position of the animated background to use in place of your white cover-up box it won't quite work.

 

See Slide in Text in Premiere as an similar example, using masking in Premiere!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2020 0
Advocate ,
Jul 09, 2020

Copy link to clipboard

Copied

Always tougher without the actual project in front of you.

So if you cannot layer in such a way to make that work - I am not sure about a native Captivate UI means of pulling that off. If the background is fully animated in already - I would have suggested a duplicate that was simply cropped back to align with the margin of your box so that the text was sandwiched between the full background on bottom and the partial background on top but you're keen on that idea already and it sounds like that won't work.

I will do some experimenting with a JavaScript solution and see if anything looks OK

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 09, 2020 0
Advocate ,
Jul 10, 2020

Copy link to clipboard

Copied

Well - I have something that may possibly work that does not involve any boxes to mask the text.

It would involve adding another HTML5 Animation to your stage, though.

You may already have a similar solution with your own tools but wanted something more Captivate native in order to avoid that which I am not convinced is gonna happen for this scenario.

 

slideText.gif

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 10, 2020 0
Explorer ,
Jul 12, 2020

Copy link to clipboard

Copied

That looks great, if you could share your solution project, I'd be most greatful.

Hopefully the text is easily adjustable within Captivate itself, but I may be asking too much!

I think your right, it is just another failing of Captivate native!

Thank you for your time and efforts.

 

Kind Regards.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 12, 2020 0
Advocate ,
Jul 13, 2020

Copy link to clipboard

Copied

Unfortunately, there will be no editing of this through Captivate at all. You will need to modify the code but the tweaks should be relatively minor.

 

I think every software does have limitations but to be honest - the fact that you can do something like this and still achieve what you're looking for in the end speaks volumes for Captivate and the level of flexibility that you truly have.

 

Please check your PMs for the code and some guidance on modifying it to your needs.

Hopefully it works out.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 13, 2020 0