more documentation for ai2html scroller

Closed this issue 2 years ago · 10 comments

It would be great to have instructions for how to set up the Illustrator document, what to name each layer, how to export them, etc. The code snippets on the component page are great but seem to only be half of the equation.

Answer 1 · 2022-03-09T16:14:36.000Z

Yeah, our Scroller component is built right now assuming each step is its own AI file, so in theory it's the same process as doing any other ai2html chart/map/whatever. No special naming conventions in AI.

I know @fcage has done variations where the entire scroller is in a single AI file, which seems more efficient, but I'm not clear on how that setup works to hide/show layers. I also know he tends to go straight for Svelte's own lower-level Scroller component and doesn't use ours as a shortcut, maybe because it doesn't yet work for that AI setup.

Good thing to thrash out, tho.

Answer 2 · 2022-03-09T16:32:49.000Z

I figured out the proper ai setup and export from looking at other projects. Just seems like if that's the ai scroller approach we're going to promote, we should have the full instrux on how to do it. But I know how documentation goes :) Just flagging

Answer 3 · 2022-03-09T16:43:39.000Z

Also I would be in favor of a component in which you don't have to save an ai file for each scroll step!

Answer 4 · 2022-03-09T17:33:51.000Z

Suggested fixes to the components demo page:

Fix function names (it should be makeScrollerSteps not makeSteps) - #40

Suggested additions to the doc:

Each step needs its own .ai file unless you want to show the same graphic twice. The .ai file can be named anything -- just make sure you add the correct file name, without the .ai extension, to the google doc.

Tip: First, make one master .ai file that contains graphics for all steps. Put graphics for each step into its own layer, which you might name step-1, step-2, etc. When you are ready to export, create separate .ai files for each step by hiding all but one layer and choosing save as. This makes it easier to manage multiple files and make sure graphics in different steps are aligned.

Example workflow:

Make maps-scroll-master.ai

Make graphics for each step and put them in separate layers: step-1, step-2, etc.

Once all graphics are ready, show just the step-1 layer and hide all others. Save the file as maps-scroll-1.ai, then run the ai2svelte script. In the google doc, set Background: maps-scroll-1 for step 1.

Do the same for all other layers

Let me know if either of you have thoughts/suggestions.

Answer 5 · 2022-03-09T19:17:37.000Z

I like this! Would be good to add to the bottom of the docs page, kinda separated from the strictly component-related stuff somehow. Kinda an additional tips section.

Answer 6 · 2022-03-09T19:20:40.000Z

Cool, will add this to the demo. @hobbes7878 do you want me to make a branch or can I push directly to master?

Answer 7 · 2022-03-09T19:22:22.000Z

Direct is fine for this one.

Answer 8 · 2022-03-09T19:51:04.000Z

great, adding.

Answer 9 · 2022-03-09T20:29:12.000Z

Pushed changes to the Scroller docs to master. I haven't built -- Jon, let me know if you want me to build it

Answer 10 · 2022-03-30T13:05:28.000Z

Think this is closed now. Re-open if not.