more documentation for ai2html scroller
Closed this issue · 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.
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.
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
Also I would be in favor of a component in which you don't have to save an ai file for each scroll step!
Suggested fixes to the components demo page:
- Fix function names (it should be
makeScrollerSteps
notmakeSteps
) - #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 choosingsave 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 asmaps-scroll-1.ai
, then run theai2svelte
script. In the google doc, setBackground: maps-scroll-1
for step 1.- Do the same for all other layers
Let me know if either of you have thoughts/suggestions.
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.
Cool, will add this to the demo. @hobbes7878 do you want me to make a branch or can I push directly to master?
Direct is fine for this one.
great, adding.
Pushed changes to the Scroller docs to master. I haven't built -- Jon, let me know if you want me to build it
Think this is closed now. Re-open if not.