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?
Is there any news on this feature? I'm building a course and the visuals use this filter a lot. I don't understand why the option is there but it doesn't work.
Hi Leslie. Thanks for the update, but I would like to stress that adjusting transparency is absolutely not the same thing at all. It's fundamentally different. And I know I am probably mansplaining here, and for that, I do apologise, but I do think that suggesting transparency as a solution is a cop-out on behalf of Articulate.
MULTIPLY - It's unique among all the blend modes in that it's the only one named after the actual math that Photoshop performs behind the scenes when you have the Multiply mode selected. Photoshop takes the colours from the layer that's set to the Multiply blend mode and multiplies them by the colours on the layer(s) below it, then divides them by 255 to give us the result. - Photoshop Essentials
It allows for the base image to be seen with more definition. As opposed to transparency which simply muddies both 'layers'. Multiply also has the added benefit of rendering any white on the multiplied layer to become essentially invisible which can give rise to very interesting mask effects.
NORMAL
SOLID
80% OPACITY = 20% TRANSPARENCY
80% MULTIPLY
Why is it still offered as an option when it OBVIOUSLY does not work as intended? It's embarrassingly weird that there is an entire section of formatting within the software that is broken, and you guys are doing nothing to address the fact.
Wow. That's awesome stuff. How amazing would it be to be able to specify these properties within Articulate? And be able to create animations using these?
Or, more interestingly, how does your workflow Zio, incorporate all this CSS/Canvas whizzbang stuff with module production in 360?
Storyline SDK engine essentialy tranlsates each slide composition to an output that is already using canvas, css and js into html5 code. Articulate team have developed their libraries also for the graphic properties and I suppose they are based on canvas 2D API, so in my opinion the developing team shoud just fix the implementation/translation from the project interface to the canvas output to make those properties working. Now that the flash output is not supported anymore, there should be more time for the team to spend fixing the html5 output ;)
Thanks for your reply. Unfortunately if I adjust the transparency, the colours loose their vibrancy therefore not being in brand. Multiply is a great feature, adjusting the transparency just doesn't match.
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 SL360
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 !
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:
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.
41 Replies
I don't understand why is it even there as an unworkable option? Remove it, make it work, then introduce it.
Mr. Collins, I agree. If it's not working and known not to be, please don't include it as an option.
A year later, and using Storyline 360, it's still not working.
Is there any news on this feature? I'm building a course and the visuals use this filter a lot. I don't understand why the option is there but it doesn't work.
Hello Wendy and welcome to E-Learning Heroes. 😊
Thanks for reaching out and sharing that you are running into a similar issue.
I've updated our report to reflect the user impact. I wanted to share some information on how we define bugs and how we tackle them when they occur.
Are you able to adjust the transparency and have this work for you?
Hi Leslie. Thanks for the update, but I would like to stress that adjusting transparency is absolutely not the same thing at all. It's fundamentally different. And I know I am probably mansplaining here, and for that, I do apologise, but I do think that suggesting transparency as a solution is a cop-out on behalf of Articulate.
MULTIPLY - It's unique among all the blend modes in that it's the only one named after the actual math that Photoshop performs behind the scenes when you have the Multiply mode selected. Photoshop takes the colours from the layer that's set to the Multiply blend mode and multiplies them by the colours on the layer(s) below it, then divides them by 255 to give us the result. - Photoshop Essentials
It allows for the base image to be seen with more definition. As opposed to transparency which simply muddies both 'layers'. Multiply also has the added benefit of rendering any white on the multiplied layer to become essentially invisible which can give rise to very interesting mask effects.
NORMAL
SOLID
80% OPACITY = 20% TRANSPARENCY
80% MULTIPLY
Why is it still offered as an option when it OBVIOUSLY does not work as intended? It's embarrassingly weird that there is an entire section of formatting within the software that is broken, and you guys are doing nothing to address the fact.
Just to give some reference, since the output should be implemented with html/css native property defined in standards, or canvas 2D API:
CSS property: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
Canvas 2D API property: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
Wow. That's awesome stuff. How amazing would it be to be able to specify these properties within Articulate? And be able to create animations using these?
Or, more interestingly, how does your workflow Zio, incorporate all this CSS/Canvas whizzbang stuff with module production in 360?
Storyline SDK engine essentialy tranlsates each slide composition to an output that is already using canvas, css and js into html5 code. Articulate team have developed their libraries also for the graphic properties and I suppose they are based on canvas 2D API, so in my opinion the developing team shoud just fix the implementation/translation from the project interface to the canvas output to make those properties working. Now that the flash output is not supported anymore, there should be more time for the team to spend fixing the html5 output ;)
Hi Leslie
Thanks for your reply. Unfortunately if I adjust the transparency, the colours loose their vibrancy therefore not being in brand. Multiply is a great feature, adjusting the transparency just doesn't match.
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 SL360
Hi 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:
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.