Forum Discussion
Color mode (multiply) for image overlay
I need to overlay 2 images, the top one with overlay mode. I noticed this isn't working as it should. The top image displays as a black rectangle. Any solution for this?
Thank you.
41 Replies
Thank you for taking a look, Wendy. It looks like you have an army of support at your back!
Thank you for the visuals and explanations, Diarmaid and Zio. That is exceptionally helpful.
Are there any plans to fix this issue or alternatively remove the option?
I recently discovered the option and was really excited for it because it would have opened up such a fast and easy way to switch up the designs of our e-learning.
Was really sad when I found out it is still not working in SL360Hi Claudia and welcome to E-Learning Heroes. 😊
We are continuing to track this bug, but I do not have an update to share at this time.
I wanted to share some information on how we define bugs and how we tackle them when they occur.
Hi Leslie, fixing this issue will be really appreciated. 👍
With a little Javascript this is not hard to do.
https://360.articulate.com/review/content/73c07ae3-b423-432b-8bc8-af5138f0fce2/review
Choose your blendmode and the opacity ( 0-100 ) and apply... and you see your images in the wanted mixBlendmode.
The code for this is actually quite simple.let overlay = document.querySelector("[data-acc-text='overlay.png']");overlay.style.mixBlendMode = "multiply";overlay.style.opacity = "0.8";
In my sample i added quite some more mixBlendModes so you can see what happens.
I used Diarmaid Collins images so you can see it is exactly as his samples.
Adding the Storyline...
For Articulate and the developers...The image effects in Storyline itself still fail !Thank you! Your script is fantastic.
Storyline, please pay attention to your users and fix it (or remove it). 🤞
That is stunning Math. Is there nothing Javascript cannot do? And where does one to begin to learn Javascript? Is it possible to animate the effects over time, or when certain elements are interacted with (button pressed, etc)?
I only found out a few months ago, in another thread that the Color Mode option in Storyline is not 'technically' broken - it just is misleading. Here's how @PhilMayor explained it:
- Phil Mayor
- Hero
I always thought that the blend modes were broken, however what I think they are doing isn't what I expected them to do.
You have to choose a colour, and they behave similar to the same options in photoshop if you had a layer of solid colour (the colour you selected) over the top of your image.
Although not 100% identical to the photoshop output they are analogous. Just not what I expected them to do I expected the image would be blended with whatever was below.
So, basically, it relates to the colour that you want to apply ON THAT IMAGE alone to give more 'effect options' that the simple Recolour options within the Format Tab. It's kind of obvious when you realise this but it's not at all intuitive.
Normal image
Image with an orange colour selected and OVERLAY blend applied.
Again, apologies to all those who already knew this. I didn't and wanted to share Phil's great knowledge.
@PhilMayor is correct. That is the way the color mode is intended in Storyline. And indeed that is very misleading. Articulate should change the naming.
@Diarmaid Collins The CSS for mixBlendModes is static. So you can only set it, not animate it. That said...you can workaround that by using Canvas2d to animate the values and get a similar effect as Zio Fonta in his links shows. Using buttons to set it, no problem offcourse. Doing that in the sample already.
I used Flash for years. And Actionscript 2 and 3. That was quite similar to Javascript so when Flash had its demise ( actually a few years earlier as i saw that coming ) i started getting things done by Javascript.
Javascript as is, is a great language to know and learn, but using it in Storyline is another cup of tea... as Storyline has its pecularities you need to watch. So do you want to learn Javascript generally... so you can use it in pure HTML5 and/or other projects... or do you want to learn how to use it in Storyline ? Both will lead you on another learning pathway.
