How to tween/fade an Image Color?

Help and Feedback Art Design Support
#1

I’m trying to create this loading screen effect where an Image fades/tweens from black and white to the actual color of the image. So far I’ve created two images of my own logo. One is black and white, and the other one has colors.

I’m just not quite sure how to do this or how to start…

  • Example of what I’m trying to achieve:

Color

1 Like
#2

I’m not really sure how it would be exactly done, but I would guess it involves a coloured image inside of a transparent frame which is on top of the black and white image. The frame would have ClipsDescendants set to true, and the size of the frame is tweened upwards to reveal the coloured logo.

That’s my best guess, but I’ve never actually done this type of loading effect before :stuck_out_tongue: There may be a much easier way of doing it. (Perhaps using Image ScaleTypes?)

1 Like
#3

I already answered this in a similar post a while back. Hope it helps :slightly_smiling_face:

2 Likes
#4

I guess I’ll have to try that. :slight_smile:

#6

Okay so picture this. The ‘BubbleGum Simulator’ image is transparent and has ‘ClipsDescendant’ attached to it. Now you use 2 frames one that’s pink and another that’s blue. You tween one up til it reaches the top of simulator (pink), then you tween the other up til it reaches bubblegum (blue)

(Also the 2 frames are ZIndex 1 and the bubblegum and simulator images are both ZIndex 2 so that the image displays behind them.) Now make an actual loading script, and use a method similar to that and guarantee it will benefit.

#7

This is probably what I would use if I were to do this kind of thing.

1 Like