Highlighted

Responsive Project: Jigsaw Puzzle

Community Beginner ,
Jul 16, 2018

Copy link to clipboard

Copied

Hello,

I created a game using "Responsive Project" in Captivate 9 and added the jigsaw puzzle interaction.  It’s posted to a website designed in Dreamweaver. It works fine on a desktop computer but not IPhones. When dragging the pieces below about the halfway point on the screen, the pieces disappear. There isn't anything layered on top of the puzzle widget in the Timeline, and I didn’t resize the widget.

Thanks for your help! Jen

Adobe Community Professional
Correct answer by RodWard | Adobe Community Professional

It's a common misconception that only Responsive courses can be played on mobile devices.  All you really need for a mobile device is to publish to Computer and select the push button for HTML5 (not SWF).  In a somewhat unintuitive piece of UI design, the HTML5 button will look greyed out and dull when it is selected.

Make sure you select the scalable HTML box as well.

PublishToHTML5.png

Views

349

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Responsive Project: Jigsaw Puzzle

Community Beginner ,
Jul 16, 2018

Copy link to clipboard

Copied

Hello,

I created a game using "Responsive Project" in Captivate 9 and added the jigsaw puzzle interaction.  It’s posted to a website designed in Dreamweaver. It works fine on a desktop computer but not IPhones. When dragging the pieces below about the halfway point on the screen, the pieces disappear. There isn't anything layered on top of the puzzle widget in the Timeline, and I didn’t resize the widget.

Thanks for your help! Jen

Adobe Community Professional
Correct answer by RodWard | Adobe Community Professional

It's a common misconception that only Responsive courses can be played on mobile devices.  All you really need for a mobile device is to publish to Computer and select the push button for HTML5 (not SWF).  In a somewhat unintuitive piece of UI design, the HTML5 button will look greyed out and dull when it is selected.

Make sure you select the scalable HTML box as well.

PublishToHTML5.png

Views

350

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Most Valuable Participant ,
Jul 17, 2018

Copy link to clipboard

Copied

Is there any reason why you wanted this to be with Breakpoint views, instead of publishing to rescalable HTML?

Can you check the exact version number? It should be 9.0.2.437.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Jul 17, 2018

Copy link to clipboard

Copied

Thank you for the response!

I wanted the interactive puzzle to be workable on a desktop and mobile device. I thought using "Responsive Project" was the best way to do that. It allows me to "Publish for Devices."

If I use Rescalable, what would I choose from the Publish dropdown? The options are to Publish for Computer or Devices (App). The Index file will then be uploaded in Dreamweaver for a website.

Thanks again, Jen

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Jul 17, 2018

Copy link to clipboard

Copied

...Also my version is: 9.0.2.437.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jul 17, 2018

Copy link to clipboard

Copied

It's a common misconception that only Responsive courses can be played on mobile devices.  All you really need for a mobile device is to publish to Computer and select the push button for HTML5 (not SWF).  In a somewhat unintuitive piece of UI design, the HTML5 button will look greyed out and dull when it is selected.

Make sure you select the scalable HTML box as well.

PublishToHTML5.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Jul 18, 2018

Copy link to clipboard

Copied

Thank you so much! That was very helpful!

The only remaining issue is that when the user goes into the puzzle the first time, the pieces are a silhouette. Clicking the Reset button on the timer resolves that issue. Are there any fixes for that?

Thanks again!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jul 18, 2018

Copy link to clipboard

Copied

I have never personally seen that particular issue.  Can you take a couple of screenshots and show us what you see?

You can insert graphics into these posts via the small Insert Image icon on the toolbar on the forum.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Most Valuable Participant ,
Jul 18, 2018

Copy link to clipboard

Copied

I compared the different ways of creating a project that can be displayed on all devices in this article. Beware, it is written for CP2017, where Fluid Boxes were introduced as another way of creating such a project. But you'll see at least the difference between a rescalable and a responsive project with Breakpoint Views:

https://elearning.adobe.com/2017/11/tough-choice-breakpoints-or-fluid-boxes/

If you want to see a rescalable HTML published game:

Game

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Jul 18, 2018

Copy link to clipboard

Copied

I've been trying to get a screen shot but can't recreate it. It seems to be working fine now. I've republished and cleared history, so I would be recognized as a new user, but it's working great now. Thank you!!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Jul 18, 2018

Copy link to clipboard

Copied

Thank you, this is very helpful!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Resources
Captivate User Guide
New Group