Code Block Creator Tool

Very cool and impressive. Thank you for sharing DShaw​.

Added the option to add custom images, directly in the tool, to the front and back of flip cards.. Also added a Branching Scenario Builder with the ability to add custom avatars and background images. Added a carousel builder with custom transition animations...

Hi,

sounds good, but I am confused. This may be a dumb question... but what would be an example of "the builder of your choice"? I guess that would be something outside Articulate?

I have to say, a lot of work has gone into this. It’s very impressive.

It opens up so much scope, especially the idea of using Rise as a SaaS platform to create and distribute custom Rise code blocks.

This looks like a neat tool, and even neater that it's built in Rise. Kicking the tires a bit I would expect these flip cards to use a responsive grid, ideally the same breakpoints that Rise uses, I think that would solve the layout issues here. I documented most of the breakpoints Rise uses here- 

https://theme-360.com/theme-component/rise-360-media-queries/

This looks really cool. When I click the to look at it fully, it's asking for a password. If I'm clicking the wrong link, could you provide it? Thanks so much!

New update to Rise Canvas

Rise's built-in carousel/process block is fine. Cards in a row, click to advance. You know the one.

The Card Carousel builder gives you a lot more.

Two modes, one builder

In standard mode you get content cards, icon, heading, body text, an optional image, and your choice of slide, fade or flip transition. Choose how many you want, set your colours, pick a direction, toggle the dots and counter. The usual controls, done properly.

Switch on image-only mode and it becomes something different entirely: full-bleed photos, edge to edge, cross-fading between them. Add a caption overlay if you want, heading and body text over a gradient at the bottom, or leave it clean. Either way it looks nothing like a standard Rise block.

The part that's actually new

Turn on auto-advance and the carousel starts itself. Not on page load, it waits until the learner actually scrolls it into view, then kicks in about a second later. Set the interval anywhere between two and ten seconds. It pauses when you hover over it, picks up again when you move away, and backs off if the learner's device has reduced motion turned on.

Manual controls stay live throughout, so it's never on rails.

What it's good for

A scrolling gallery of site photos. A rotating set of key messages. A before-and-after sequence. Anywhere you'd normally drop in a static image and think "I wish this moved"

Rise Canvas just got animations and screen transitions.

This is the biggest update Rise Canvas has had since launch. The headline feature, entrance animations with screen transitions. Plus a handful of things that have been on the most-requested list for a while. Let me walk through what's new.

Animations and screen transitions

Rise Canvas now has an Animations mode, a fourth mode sitting beside Design and Preview in the toolbar. Switch it on and the canvas changes, each block gets an animation badge showing its current entrance, and a floating controls bar appears at the top with a Play button, timing sliders, and a guide.

Entrance animations

Every block can be given an entrance animation, fade up, fade in, slide left, slide right, zoom, iris, flip, bounce, rotate, and more. When the component scrolls into view in Rise, it plays the entrance. Select any block, open the dropdown in its badge, pick an entrance. Hit Play to preview them all on the canvas without leaving the builder.

Entrances respect prefers-reduced-motion, if the learner has that set on their device, components simply appear without animating. The timing sliders let you set the speed from 0.3 to 2 seconds, and those settings travel with the export.

Screens and page transitions

This is where it gets more interesting. Any block can be marked as In deck, blocks that are deck-marked group together into a screen, and screens are revealed one at a time with a page transition rather than being stacked vertically. Eight transitions are available: push, slide, wipe, cube, turn, iris, zoom, and deal.

So you can have a carousel and a quiz side by side on screen one, hit Continue, and the page turns to reveal a checklist on screen two. Each screen can have its own transition, you set it on the last block in the group.

You can also gate Continue behind a component. Mark a block as Required for completion, and the Continue button stays disabled until the learner has interacted with it, answered a quiz question, completed a checklist, and so on. A visible hint tells them what they need to do.

Entrances inside screens

Entrances and screen transitions work together. When a screen appears, its blocks play their entrance animations, a carousel slides in from the right, a quiz slides in from the left, staggered slightly so they don't all land at the same moment. Hit Continue, the page transitions, and the next screen's components animate in as the transition lands. Back replays the entrances on whichever screen you return to.

Navigation

Decked screens get centred Back / Continue buttons and progress dots beneath the content. The dot count matches the number of screens, so learners always know where they are in the sequence. The Continue button label is editable, so it can read "Next section" or "I've read this" or whatever fits your content.

See it in action in my course in the weekly challenge The man in the middle