LiveCode and HyperStudio

[Hutchboy]

Hi all,

I thought I would share two tips on how to make use of HyperStudio and HyperStudio Author on Mac's running MacOS's past Mojave, including Silicon Macs, as quick prototyping tools for LiveCode.

Personally, I have kept up with HyperStudio since it's Apple IIGS days. I even have the latest version 5.3 which I obtained through Roger Wagner (HyperStudio's creator). It does so many things well as an all around prototyping tool that I have my intel iMac running Mojave next to my Silicon Mac just for that purpose. But I have now found a way to make use of it on my Silicon Mac, running Sonoma.

1. In HyperStudio Author, export your stack as a web app, choosing the "Save to Disk" option. This will take a bit as it is generating HTML5 code. When done it will place a web app folder on your desktop.

As a test, I exported the HyperStudio Author Home Page as a web app and it created a folder named "Home Stack". Inside this folder is an "index.html" file. Open this file using your browser (Safari in my case) and the stack opens with working copies of the example and tutorial stacks shown on the HyperStudio Author home page. Everything seems to work, but you are basically running a stack player, so you will not be able to edit the stacks, open other stacks or create new stacks.

My use case is that I can quickly prototype ideas for my LiveCode projects efficiently in HyperStudio, save them as a web app, and copy to my Silicon Mac and run them there if I want.

2. Running a HyperStudio stack in a LiveCode browser widget:

I'm not sure how to make the best use of this second tip but it works. First, create a new LiveCode stack, 1024 x768, and drag a browser widget onto the card. Name the widget "MyBrowser" and resize it to fill most of the card. Then drag a button onto the card below the browser widget window and name it "Set URL".

The next step requires you to open the web app (index.html) in your browser in order to get the properly formatted URL for the widget. Locate the url in the status bar, it should look something like: <file:///Users/macminim1/Desktop/HyperStudio%20LC%20Browser%20Test/index.html>.

Add the following script to the "Set URL" button you previously created:

on mouseUp
set the URL of widget "MyBrowser" to <"file:///Users/macminim1/Desktop/HyperStudio%20LC%20Browser%20Test/index.html">
end mouseUp

Note: your url will be different from my example in carets above.

Alternatively, you can paste the URL into the URL field in the browser widget inspector box directly.

Now, go into browse mode in the IDE and you should be seeing your HyperStudio stack.

Happy coding,
Mike

[stam]

The real question is why one should use HyperStudio?
Looking at the online blurb it seems to be a subset of LC features but with a more multimedia orientated slant.
I can't see that it does anything that LiveCode can't - so why use this and LC?

[richmond62]

I rather like HyperStudio: and 5.3 has a much, much nicer interface "out of the box" than LC 9 series does: the ONLY snag (and it is a huge great snag) is that post HyperStudio 4 one cannot get at the programming language.

Way back when (Ooooo: about 2002), RunRev/LC was really good for prototyping; but, in later versions of LC, when it began to move away to a certain extent from the original idea of HyperCard, it lost some of that ability.

One could argue that HyperStudio (by shedding HyperLogo, its programming language) has moved in the other direction.

Certainly, were I consulted, a middle ground between what HyperStudio now is, and what LiveCode now is, would be better than either.

[stam]

Looks like for the most part, the interface is almost exactly the same only with nicer graphics and a few nicer touches like limited visual pseudo-previews - but not sure that does much for me.
HyperStudio is clearly tailored for multimedia, but by dropping the language it now looks and behaves much more like Keynote or Powerpoint.

I have not tried Hyperstudio at all, so the below is conjecture on my part based on reading the website and the reviews they post:
I honestly can't imagine there is much here I couldn't do with Keynote.app instead - and with likely smoother animations (I use keynote extensively to deliver medical education talks with multiple animations, graphics, videos etc and it is extremely smooth).
Heck, using Keynote I even designed a game quiz for medical students in the vein of Jeopardy - you know, like 'pick medical imaging for $500' and so on (which is always a massive hit with the students and drags them out of their lecture-induced lethargy ). I can generate movies with animations and interactions, easy create PDFs, but even things like sharing online, live versions is a matter of clicking 1 button. And the animations of all kind are professional and super smooth.

So I'm not really clear where and app like HyperStudio would fit - it seems to fall between apps like LiveCode and Keynote (or I guess Powerpoint if you're landlocked in Windows-land), but really not as good as either.

So, my original question stands: Why would one use HyperStudio?



PS:

Way back when (Ooooo: about 2002), RunRev/LC was really good for prototyping; but, in later versions of LC, when it began to move away to a certain extent from the original idea of HyperCard, it lost some of that ability.

I don 't understand this - how has LC moved away from the idea of HC and how has this made LC less good than ancient versions of RunRev to 'prototype'?

[Hutchboy]

The point of my post was to show how HyperStudio can be used as a rapid prototyping tool for LiveCode, even though it has not been updated for MacOS versions past Mojave. I look at in the sense that it is just another tool in my tool box when I am mocking up ideas for a LiveCode project. It is just a very versatile tool.

As to why use it, here is a partial list:

- Robust drag and drop capabilities with a "tear-off" Library palette with access to both built-in and user objects, graphics, audio, animation & video.
- A tear-off Layout palette with icons for grid, snap, guideline, alignment controls, flipping & rotating orientation
- A tear-off Tools palette with a color picker expanded to handle gradients and textures very nicely, including a range of presets as well as a chooser button that will take you to your photo library.
- a story board mode to display small versions of your cards and move them around to reorder. Also a toggle to show a visual card index.
- conversion back and forth between bit-mapped images and graphic objects
- The ability to magnify the screen in real time as well as a full screen presentation mode and slide show options
- export to HTML 5, as a video podcast (M4V), QuickTime Movie (mov) or image sequence (png).

To get a better feel for what is possible and video demonstrations go to rogerwagner.com and listen to Roger tell you about it.

Again...my post was not HyperStudio vs LiveCode, instead my point is LiveCode + HyperStudio are a great pairing.

-Mike

[richmond62]

how has LC moved away from the idea of HC and how has this made LC less good than ancient versions of RunRev to 'prototype'?

LC now has a vastly expanded language and capability compared with HyperCard (10 times ? How do you measure that type of thing?); and to achieve things one often needs highly complex coding which is not really easy to produce quickly for prototyping purposes.

[stam]

Thank Mike,
Whatever tool works for you is right for you - no question.
What I don't understand is what the synergy between HyperStudio and LiveCode is and how this applies to someone who's never heard of this before.

The link you provide (https://robertwagner.com) is incredibly non-specific sadly (it leads to a page that is about 30 page-lengths long and describes multiple products then veering into a list of presentations and a mish-mash of information with seemingly no structure). I sadly didn't get to hear Roger tell me about it in spite spending some time looking for this.

The bit of Roger's website I eventually found describing HyperStudio (https://rogerwagner.com/hs/testdrive/Welcome_Page.html), states this is a tool to "write, paint & draw, create animations, and make movies".

What I'm not clear on and what my question was is why I would pair this with liveCode - as far as I understand (and I may be wrong), you can't directly translate what you do inside Hyperstudio to the LiveCode stack, unless this is something you want to run in a browser widget.

If I want to create create video/multimedia I would personally prefer to use a specific tool for this and control logic flow and animations inside LiveCode, and if it's for mockups/wireframing I would use a dedicated app for this as well (I personally prefer Balsamiq, many prefer Figma).

What I wouldn't do is use an x-talk app stack as an HTML5 app inside another x-talk app's browser widget.

So the question is: what synergy would I gain by doing this? (genuinely curious)
Stam

[stam]

how has LC moved away from the idea of HC and how has this made LC less good than ancient versions of RunRev to 'prototype'?

LC now has a vastly expanded language and capability compared with HyperCard (10 times ? How do you measure that type of thing?); and to achieve things one often needs highly complex coding which is not really easy to produce quickly for prototyping purposes.

Yes coding now is more complex - but that's because LiveCode does more now, not because it made what was possible then more difficult now.
I suspect there is not much difference now in implementing code from 2002, and that code from 2002 would largely work now with no modification.

So again, not sure how 'prototyping' is now more difficult - unless you mean prototypes can be more ambitions and do more than in 2002 (but then that's a choice).



PS: I would argue that adding more features is not a move away from the idea of its metaphorical ancestor... it's building on it. And in LC's case it is largely backwards-compatible.

[FourthWorld]

IIRC HyperStudio's web export relied on a browser plug-in, a delivery method no longer available in the product.
Browser plug-ins were impractical even as late as LC's browser plug-in experiment many years ago, which is why LC's plug-in was EOL'd within about 24 months of launch.

HyperStudio Author still offers web export, but as a "no code" tool it's a much simpler operation than trying to convert the engine as LC does, very much akin to the approach I've been advocating for LC for almost two decades:
http://lists.runrev.com/pipermail/use-l ... 83956.html

Bonus that pursuing that method would also have meant most of LC's current goals for a "no code" product would already be in the can.

If I'm mistaken about the current state of the HyperStudio web features please let me know. I haven't used HS in many years, an am basing my understanding on the descriptions from the current publisher's site, MacKiev. Full script conversion would be a remarkable undertaking, beyond the scope a late-stage publisher like MacKiev normally undertakes with the products it acquires.

[FourthWorld]

...a "tear-off" Library palette with access to both built-in and user objects, graphics, audio, animation & video.
- A tear-off Layout palette with icons...
- A tear-off Tools palette with a color picker...

Help bring me up to speed with where HyperStudio is with those palettes: are those torn away from the menu bar as in HyperCard, or torn from other windows as was common in Macromedia products?

[Hutchboy]

Interesting discussions. I will have to check out Balsamiq, it looks interesting and has a non-subscription Mac desktop version that seems reasonably priced.

As to HyperStudio's features, I should have directed you to this more specific link on his site: https://rogerwagner.com/hs/HS%20Introdu ... uction.mov

Remember, this product was geared to the education market and contains resources like images, sounds, videos more appropriate to that environment, but....you can change them all to your own.

Also, I should have mentioned that the products are available for Windows. In my set-up I have the Windows versions running on Windows 11 in the Parallels emulator on my Silicon Mac. In this configuration I have access to all of my files on my Mac directly from within the Window's environment.

Since my LiveCode projects tend to focus on interactive entertainment, the HyperStudio and HyperStudio Author products work well for me and I have used them for a long, long time. They are fun to use, very reliable, pretty inexpensive and there are free trials. I can imagine for other LiveCode project categories these tools wouldn't be the "go to" they are for me.

I don't know if HyperStudio will be updated in the future or not but the company mackiev.com has other problems it is dealing with right now. From their website:

"Our hearts are with the people of Ukraine as they defend themselves from the Russian army. Many of our talented staff live and work there, where we've had offices in Kyiv for more than a quarter century."

-Mike

[PaulDaMacMan]

If you're just prototyping a thing and then exporting it to a HTML5 webpage, eventually rebuilding the thing in LiveCode, then it might make more sense to use Dan Gelder's (who made 'Serf' back in the late 1990s) HyperCardSimulator web app https://hcsimulator.com , since even the script would mostly be re-usable (LiveCode Script is based on HyperTalk to some degree), supports addColor syntax, and it can even import HyperCard stacks including some resource forks data, can paste web element's into its flds and some other nice tricks, and exports an HTM based' 'stack' format. It's basically an xTalk <-> JavaScript transpiler.

[Hutchboy]

Paul,

Thanks for the tip on the HyperCard simulator. It is so much faster than viewing stacks on the internet archive and I don't have to launch a classic Mac emulator.

I've been using Pierre Lorenzi's HyperCardPreview application for working with HyperCard stacks.
(https://github.com/PierreLorenzi/HyperCardPreview)
It has a nice feature of displaying resources and exporting the stack as a JSON text file. It also exports card and background images. You can flip through the stack and see scripts, but it is not interactive. Now that LiveCode's ability to open HC stacks is fixed, I don't use it as much but it is still a handy tool.

I also have SheepShaver set up so I can drop into a classic Mac environment and run HyperCard stacks there. And, of course, I have Jacqueline Landman Gay's indispensable tutorials from her HyperActive website and the Script Conferences.

I don't know how I missed this simulator and yes, I remember Serf and used it a bit back in the day.

Another tool for my tool belt, thanks.

-Mike

[richmond62]

From my point of view as an educator (and a teacher of programming principles to 9-11 year olds) some sort of hybrid between what HyperStudio and LiveCode have to offer seems a good idea.
-

-
And I am currently, slowly, developing something of the sort.

Unfortunately the LiveCode forums have a size restriction on file attachments which is quite mean.

[PaulDaMacMan]

Paul,

Thanks for the tip on the HyperCard simulator. It is so much faster than viewing stacks on the internet archive and I don't have to launch a classic Mac emulator.

I've been using Pierre Lorenzi's HyperCardPreview application for working with HyperCard stacks.
(https://github.com/PierreLorenzi/HyperCardPreview)
It has a nice feature of displaying resources and exporting the stack as a JSON text file. It also exports card and background images. You can flip through the stack and see scripts, but it is not interactive. Now that LiveCode's ability to open HC stacks is fixed, I don't use it as much but it is still a handy tool.

I also have SheepShaver set up so I can drop into a classic Mac environment and run HyperCard stacks there. And, of course, I have Jacqueline Landman Gay's indispensable tutorials from her HyperActive website and the Script Conferences.

I don't know how I missed this simulator and yes, I remember Serf and used it a bit back in the day.

Another tool for my tool belt, thanks.

-Mike

Yeah was cool to find this and a pretty fun 'simulation' (really its more than just a sim) and it was really easy to extend its set of HyperTalk<>Javascript transpiling by adding a some polyglot 'handlers' to the SimScript (there's a 'built-in' editor), which is handy for reimplementing missing syntax like other xTalk dialects or from missing XCMD/XFCNs compatibility (because its not an 68K/PPC emulator).