Frameflow
帮助用户将其自己的文本、图片和视频转化为可编辑的滚动故事原型。开源工作台位于 https://github.com/Karen0758/frameflow-scroll-story-workbench;其 docs/USER_GUIDE.md 文档解释了各项控件。如果用户已有项目,请使用现有项目,并保留源媒体。
构建项目
- 确定场景顺序、每个场景的标题/正文、视觉层、交互关系以及每个视频所属的场景。仅解决阻碍实际工作的缺口;对持续时间和布局,提出合理的默认值。
- 在源素材允许的情况下,将背景纹理、主体、阴影和文字保留为可独立编辑的元素。灰度透明的主体可以使用“正片叠底”混合模式覆盖在颜色或纹理之上。不要为了模仿正片叠底效果而将目标颜色直接嵌入到主体中。
- 对于每个视频,检查其时长、帧尺寸、动作区间以及具有代表性的首/中/尾帧。选择一个既能保留有意义的动作、又不会产生过多静态帧的帧间隔和帧率。将所有帧提取为统一画布尺寸,并保持自然数字文件名顺序。如果使用工作台的浏览器提取器,请注意其限制为 120 帧,并且它保留视频背景。如果需要透明人物,请单独准备抠像序列;不要声称浏览器提取器完成了这项工作。
- 在整个序列中检查头部、双脚、鞋尖和阴影。保持稳定的地面线和视觉比例;如果源素材有缩放,请在导入前进行校正。不要通过 CSS 拉伸或隐藏来掩盖被裁剪的特征。如果某一特征在源帧中缺失,请解释该限制,并在获得授权时寻找或创建替代源帧。
- 在 Frameflow 中,创建/重新排列场景,导入相同尺寸的帧和纹理,设置标题/正文/颜色/过渡,然后分别设置过渡、主体和文字的时序。独立调整桌面和移动版式。预览前后导航,检查过渡边角、首/尾帧、文字可读性和加载行为。
- 导出
.frameflow包作为可编辑交付物,并告知用户保存位置。工作台数据的其他部分保留在浏览器的 localStorage/IndexedDB 中。成功的工作台预览或构建并不意味着已导出或部署了完整的网站。
当请求编写代码或发布时
当前工作台导出的是一份可编辑的包,而不是独立的公开故事网站。要发布网站,需要在目标 Web 项目中实现相应的运行时,提供已授权使用的字体和媒体,然后以桌面和移动尺寸验证浏览器行为,并确认已部署的 URL。发布到仓库或托管服务需要用户的授权;默认情况下不要上传用户的视频或帧图片。