Animation

mmalhotra-9265
mmalhotra-9265 Community Member Posts: 417 ✶ Headliner ✶
Hi,

I worked on this example, and result is as attached.
However, I am unable to replicate the animated heart - filling from white to red color.

https://demofile.s3.amazonaws.com/ELH288_ChooseYourOwnChallenge/story.html

Regards
Malvika

Comments

  • carlfink
    carlfink Community Member Posts: 1,102 ✭ Legend ✭
    Like with the previous one, you have an action to show the red lines, but Girl 2's red line is not hidden to start with.

    I created a fixed version that also animates the red "heart" graphic. Can you see how I did that?

    Note that there are several graphics problems (like the corner of the blood donation equipment overhanging the heart logo). These are literally left as an exercise for you. Mind you, they could all be fixed if Lectora supported very common graphical features like making a color transparent. (Supporting more vector formats would also be appreciated.)

    I noticed that the image you used is an unlicensed one from Shutterstock. eLearning Brothers has a very large Asset Library. If your license lets you use it, I strongly recommend you search it for "blood bag". There's a very nice vector blood bag image there (https://library.elearningbrothers.com/stock/product/83822802), for one thing.
  • mmalhotra-9265
    mmalhotra-9265 Community Member Posts: 417 ✶ Headliner ✶
    @carlfink - The zipped file is just images.
    Can you share your file, will check once.
  • carlfink
    carlfink Community Member Posts: 1,102 ✭ Legend ✭

    @carlfink - The zipped file is just images.

    No, it isn't. I just downloaded it to check. It has both the AWT file and images.
  • mmalhotra-9265
    mmalhotra-9265 Community Member Posts: 417 ✶ Headliner ✶
    @carlfink - I saw your file, tried to replicate it.

    Does it seem fine?
  • carlfink
    carlfink Community Member Posts: 1,102 ✭ Legend ✭
    Here is a small thing that might not be obvious:



    I used to design software interfaces, so this is something I'm trained to notice. The gray decorative bar at the bottom of the screen is the same color as the default windows scroll bar (like the one at the right of my screen capture). It is likely that learners will think there is a scroll bar at the bottom of the window and try to scroll to the right ... and nothing will happen, because it's just a decoration.
  • mmalhotra-9265
    mmalhotra-9265 Community Member Posts: 417 ✶ Headliner ✶
    @carlfink - Small things make so much of difference.
  • mmalhotra-9265
    mmalhotra-9265 Community Member Posts: 417 ✶ Headliner ✶
    @carlfink - Does this seem fine (except shutterstock watermark) to be used for online portfolio?
  • carlfink
    carlfink Community Member Posts: 1,102 ✭ Legend ✭
    It is not clear to me why you have a hover effect trigger the heart "filling up" with blood, instead of using the OnMouseClick action.

    In English, the "a/an" article is used only for countable things. You would say, "a person" or "a rock", because you can count those things. You would not write, "a water" or "a dust", because you don't count them. In English, karma is not countable, so you don't use "a" before it. It would be correct to write, "a good deed".

    (Sorry, my schoolteacher brain lobe activated.)

    I still think you should animate the heart filling up. It's just a simple Wipe transition added to the objects' properties. For a better animation, use Wipe Up on both halves, and a variable to count how much of the object is showing -- if it's not showing at all, reveal the bottom. If one part is showing, reveal the second. If both parts are showing, do nothing.

    If you wanted to get fancy, you could have the heart beat. As is my way, I leave this as an exercise for you. Hint: there's an action to change the size of things, and also a timer object in Lectora.
  • carlfink
    carlfink Community Member Posts: 1,102 ✭ Legend ✭
    I don't know if I have mentioned it, but I am a blood donor. Here's Rafaello:



    His mother came by the blood center I donate at. He's fine now, all grown up and in college. He organizes blood drives there himself. It is pretty motivating.
  • mmalhotra-9265
    mmalhotra-9265 Community Member Posts: 417 ✶ Headliner ✶
    @carlfink - The heartbeat resize action is going incorrect.

    On another note, I liked Rafaello example more. Real life examples have more charm.
  • carlfink
    carlfink Community Member Posts: 1,102 ✭ Legend ✭
    I don't see any actions that change sizes in the attached file.

    Yes, that's why I posted Rafaello. (Also, personal connections, like his mother coming to the place I donate, make the message more powerful.) For a portfolio, you don't just want to show technical skill, you also need to show communications skills. At least as I practice it, creating online training requires both.

    You have the two women there "saying" things that are correct, but it might have more impact if they told specific stories, which you could easily find with a web search. If you are working as a freelance developer, you could research stories from the customer's location to use. For instance, if your customer was in Manhattan and you found the New York Blood Center's web site, you'd find Rafaello and several other people whose lives were saved by blood transfusions. Using local examples, whether your customer is in Pune or Paris or Pittsburgh, will make it more meaningful to your customer, or prospective customer.
  • mmalhotra-9265
    mmalhotra-9265 Community Member Posts: 417 ✶ Headliner ✶
    @carlfink - The heart resize is going incorrect.