Merge pull request #5548 from LLK/revert-5544-wobbly-dragging

Revert "Make sprites wobbly when dragged"
2020-03-27 12:57:23 -04:00 · 2020-03-27 12:56:22 -04:00 · 2020-03-27 09:46:55 -04:00 · 2020-03-27 09:10:01 -04:00 · 2020-03-26 20:37:40 -04:00 · 2020-03-25 21:20:23 -04:00
317 changed files with 17340 additions and 12677 deletions
@@ -14,6 +14,6 @@ npm-*
 /dist
 /.opt-in

-# generated translation files
+# Generated translation files
 /translations
 /locale
@@ -12,22 +12,13 @@ env:
  - NODE_OPTIONS=--max-old-space-size=7250
  - NPM_TAG=latest
  - RELEASE_VERSION="0.1.0-prerelease.$(date +'%Y%m%d%H%M%S')"
-  - SMOKE_URL=https://llk.github.io/scratch-gui/$TRAVIS_PULL_REQUEST_BRANCH
 cache:
  directories:
  - node_modules
-before_install:
-# package-lock.json was introduced in npm@5
- '[[ $(node -v) =~ ^v9.*$ ]] || npm install -g npm@latest' # skipped when using node 9
- npm install -g greenkeeper-lockfile
 install:
 - npm --production=false install
- npm --production=false update
-before_script: greenkeeper-lockfile-update
 script:
 - npm test
- if [ "$TRAVIS_EVENT_TYPE" == "pull_request" ] && [ "$TRAVIS_BRANCH" == "master" ]; then  npm run test:smoke; fi
-after_script: greenkeeper-lockfile-upload
 before_deploy:
 - >
  if [ -z "$BEFORE_DEPLOY_RAN" ]; then
@@ -44,7 +35,6 @@ deploy:
    branch:
    - master
    - develop
-    - smoke
    - hotfix/*
    condition: $TRAVIS_EVENT_TYPE != cron
  skip_cleanup: true
@@ -61,18 +51,6 @@ deploy:
    condition: $TRAVIS_EVENT_TYPE != cron
  skip_cleanup: true
  script: if npm info scratch-gui | grep -q $RELEASE_VERSION; then git tag $RELEASE_VERSION && git push https://${GH_TOKEN}@github.com/${TRAVIS_REPO_SLUG}.git $RELEASE_VERSION; fi
- provider: s3
-  on:
-    branch:
-    - master
-    - $PREVIEW_BRANCH
-    condition: $TRAVIS_EVENT_TYPE != cron
-  access_key_id: $AWS_ACCESS_KEY_ID
-  secret_access_key: $AWS_SECRET_ACCESS_KEY
-  bucket: $AWS_BUCKET_NAME
-  acl: public_read
-  skip_cleanup: true
-  local_dir: build
 - provider: script
  on:
    all_branches: true
@@ -86,5 +64,3 @@ deploy:
    condition: $TRAVIS_EVENT_TYPE == cron
  skip_cleanup: true
  script: npm run i18n:src && npm run i18n:push
-after_deploy:
- 'curl -X POST -H "Fastly-Key: $FASTLY_TOKEN" -H "Accept: application/json" https://api.fastly.com/service/$FASTLY_SERVICE_ID/purge_all'
@@ -18,6 +18,8 @@ cd scratch-gui
 npm install
 ```

+**You may want to add `--depth=1` to the `git clone` command because there are some [large files in the git repository history](https://github.com/LLK/scratch-gui/issues/5140).**
+
 ## Getting started
 Running the project requires Node.js to be installed.

@@ -74,7 +76,7 @@ See [jest cli docs](https://facebook.github.io/jest/docs/en/cli.html#content) fo

 *NOTE: If you're a windows user, please run these scripts in Windows `cmd.exe`  instead of Git Bash/MINGW64.*

-Before running any test, make sure you have run `npm install` from this (scratch-gui) repository's top level.
+Before running any tests, make sure you have run `npm install` from this (scratch-gui) repository's top level.

 #### Main testing command

@@ -194,5 +196,60 @@ Further reading: [Stack Overflow](https://stackoverflow.com/questions/46602286/n
 You can publish the GUI to github.io so that others on the Internet can view it.
 [Read the wiki for a step-by-step guide.](https://github.com/LLK/scratch-gui/wiki/Publishing-to-GitHub-Pages)

+## Understanding the project state machine
+
+Since so much code throughout scratch-gui depends on the state of the project, which goes through many different phases of loading, displaying and saving, we created a "finite state machine" to make it clear which state it is in at any moment. This is contained in the file src/reducers/project-state.js .
+
+It can be hard to understand the code in src/reducers/project-state.js . There are several types of data and functions used, which relate to each other:
+
+### Loading states
+
+These include state constant strings like:
+
+* `NOT_LOADED` (the default state),
+* `ERROR`,
+* `FETCHING_WITH_ID`,
+* `LOADING_VM_WITH_ID`,
+* `REMIXING`,
+* `SHOWING_WITH_ID`,
+* `SHOWING_WITHOUT_ID`,
+* etc.
+
+### Transitions
+
+These are names for the action which causes a state change. Some examples are:
+
+* `START_FETCHING_NEW`,
+* `DONE_FETCHING_WITH_ID`,
+* `DONE_LOADING_VM_WITH_ID`,
+* `SET_PROJECT_ID`,
+* `START_AUTO_UPDATING`,
+
+### How transitions relate to loading states
+
+As this diagram of the project state machine shows, various transition actions can move us from one loading state to another:
+
+![Project state diagram](docs/project_state_diagram.svg)
+
+_Note: for clarity, the diagram above excludes states and transitions relating to error handling._
+
+#### Example
+
+Here's an example of how states transition.
+
+Suppose a user clicks on a project, and the page starts to load with url https://scratch.mit.edu/projects/123456 .
+
+Here's what will happen in the project state machine:
+
+![Project state example](docs/project_state_example.png)
+
+1. When the app first mounts, the project state is `NOT_LOADED`.
+2. The `SET_PROJECT_ID` redux action is dispatched (from src/lib/project-fetcher-hoc.jsx), with `projectId` set to `123456`. This transitions the state from `NOT_LOADED` to `FETCHING_WITH_ID`.
+3. The `FETCHING_WITH_ID` state. In src/lib/project-fetcher-hoc.jsx, the `projectId` value `123456` is used to request the data for that project from the server.
+4. When the server responds with the data, src/lib/project-fetcher-hoc.jsx dispatches the `DONE_FETCHING_WITH_ID` action, with `projectData` set. This transitions the state from `FETCHING_WITH_ID` to `LOADING_VM_WITH_ID`.
+5. The `LOADING_VM_WITH_ID` state. In src/lib/vm-manager-hoc.jsx, we load the `projectData` into Scratch's virtual machine ("the vm").
+6. When loading is done, src/lib/vm-manager-hoc.jsx dispatches the `DONE_LOADING_VM_WITH_ID` action. This transitions the state from `LOADING_VM_WITH_ID` to `SHOWING_WITH_ID`
+7. The `SHOWING_WITH_ID` state. Now the project appears normally and is playable and editable.
+
 ## Donate
 We provide [Scratch](https://scratch.mit.edu) free of charge, and want to keep it that way! Please consider making a [donation](https://secure.donationpay.org/scratchfoundation/) to support our continued engineering, design, community, and resource development efforts. Donations of any size are appreciated. Thank you!
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1381px" height="1012px" viewBox="-0.5 -0.5 1381 1012" content="&lt;mxfile host=&quot;www.draw.io&quot; modified=&quot;2020-02-04T16:31:44.889Z&quot; agent=&quot;Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36&quot; etag=&quot;8a2X5Jj65jOGG04xBBh1&quot; version=&quot;12.6.4&quot; type=&quot;device&quot;&gt;&lt;diagram name=&quot;Page-1&quot; id=&quot;58cdce13-f638-feb5-8d6f-7d28b1aa9fa0&quot;&gt;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 truncated
@@ -6,7 +6,7 @@
  "scripts": {
    "build": "npm run clean && webpack --progress --colors --bail",
    "clean": "rimraf ./build && mkdirp build && rimraf ./dist && mkdirp dist",
-    "deploy": "touch build/.nojekyll && gh-pages -t -d build -m \"Build for $(git log --pretty=format:%H -n1)\"",
+    "deploy": "touch build/.nojekyll && gh-pages -t -d build -m \"Build for $(git log --pretty=format:%H -n1) [skip ci]\"",
    "prune": "./prune-gh-pages.sh",
    "i18n:push": "tx-push-src scratch-editor interface translations/en.json",
    "i18n:src": "rimraf ./translations/messages/src && babel src > tmp.js && rimraf tmp.js && build-i18n-src ./translations/messages/src ./translations/ && npm run i18n:push",
@@ -44,7 +44,7 @@
    "babel-loader": "^8.0.4",
    "base64-loader": "1.0.0",
    "bowser": "1.9.4",
-    "chromedriver": "78.0.1",
+    "chromedriver": "80.0.0",
    "classnames": "2.2.6",
    "computed-style-to-inline-style": "3.0.0",
    "copy-webpack-plugin": "^4.5.1",
@@ -78,9 +78,9 @@
    "lodash.pick": "4.4.0",
    "lodash.throttle": "4.0.1",
    "minilog": "3.1.0",
-    "mkdirp": "^0.5.1",
+    "mkdirp": "^1.0.3",
    "omggif": "1.0.9",
-    "papaparse": "4.6.2",
+    "papaparse": "5.1.1",
    "postcss-import": "^12.0.0",
    "postcss-loader": "^3.0.0",
    "postcss-simple-vars": "^5.0.1",
@@ -108,13 +108,13 @@
    "redux-throttle": "0.1.1",
    "rimraf": "^2.6.1",
    "scratch-audio": "0.1.0-prerelease.20190925183642",
-    "scratch-l10n": "3.6.20191029224007",
-    "scratch-blocks": "0.1.0-prerelease.1572384380",
-    "scratch-paint": "0.2.0-prerelease.20191104214909",
-    "scratch-render": "0.1.0-prerelease.20191101193213",
+    "scratch-blocks": "0.1.0-prerelease.1585185354",
+    "scratch-l10n": "3.8.20200325112845",
+    "scratch-paint": "0.2.0-prerelease.20200213174123",
+    "scratch-render": "0.1.0-prerelease.20200324022200",
    "scratch-storage": "1.3.2",
-    "scratch-svg-renderer": "0.2.0-prerelease.20191104164753",
-    "scratch-vm": "0.2.0-prerelease.20191017151616",
+    "scratch-svg-renderer": "0.2.0-prerelease.20200205003400",
+    "scratch-vm": "0.2.0-prerelease.20200319175700",
    "selenium-webdriver": "3.6.0",
    "startaudiocontext": "1.2.1",
    "style-loader": "^0.23.0",
@@ -18,6 +18,7 @@ import StageWrapper from '../../containers/stage-wrapper.jsx';
 import Loader from '../loader/loader.jsx';
 import Box from '../box/box.jsx';
 import MenuBar from '../menu-bar/menu-bar.jsx';
+import MysteryMode from '../mystery-mode/mystery-mode.jsx';
 import CostumeLibrary from '../../containers/costume-library.jsx';
 import BackdropLibrary from '../../containers/backdrop-library.jsx';
 import Watermark from '../../containers/watermark.jsx';
@@ -156,6 +157,7 @@ const GUIComponent = props => {
                dir={isRtl ? 'rtl' : 'ltr'}
                {...componentProps}
            >
+                <MysteryMode />
                {telemetryModalVisible ? (
                    <TelemetryModal
                        onCancel={onTelemetryModalCancel}
@@ -32,6 +32,7 @@ import MenuBarHOC from '../../containers/menu-bar-hoc.jsx';

 import {openTipsLibrary} from '../../reducers/modals';
 import {setPlayer} from '../../reducers/mode';
+import {toggleMysteryMode} from '../../reducers/mystery-mode';
 import {
    autoUpdateProject,
    getIsUpdating,
@@ -469,6 +470,21 @@ class MenuBar extends React.Component {
                                            )}
                                        </MenuItem>
                                    )}</TurboMode>
+                                    <MenuItem onClick={this.props.onClickToggleMysteryMode}>
+                                        {this.props.mysteryMode ? (
+                                            <FormattedMessage
+                                                defaultMessage="Turn off Mystery Mode"
+                                                description="Menu bar item for turning off dark mode"
+                                                id="gui.menuBar.mysteryModeOff"
+                                            />
+                                        ) : (
+                                            <FormattedMessage
+                                                defaultMessage="Turn on Mystery Mode"
+                                                description="Menu bar item for turning on dark mode"
+                                                id="gui.menuBar.mysteryModeOn"
+                                            />
+                                        )}
+                                    </MenuItem>
                                </MenuSection>
                            </MenuBarMenu>
                        </div>
@@ -722,6 +738,7 @@ MenuBar.propTypes = {
    locale: PropTypes.string.isRequired,
    loginMenuOpen: PropTypes.bool,
    logo: PropTypes.string,
+    mysteryMode: PropTypes.bool,
    onClickAccount: PropTypes.func,
    onClickEdit: PropTypes.func,
    onClickFile: PropTypes.func,
@@ -732,6 +749,7 @@ MenuBar.propTypes = {
    onClickRemix: PropTypes.func,
    onClickSave: PropTypes.func,
    onClickSaveAsCopy: PropTypes.func,
+    onClickToggleMysteryMode: PropTypes.func,
    onLogOut: PropTypes.func,
    onOpenRegistration: PropTypes.func,
    onOpenTipLibrary: PropTypes.func,
@@ -772,6 +790,7 @@ const mapStateToProps = (state, ownProps) => {
        languageMenuOpen: languageMenuOpen(state),
        locale: state.locales.locale,
        loginMenuOpen: loginMenuOpen(state),
+        mysteryMode: state.scratchGui.mysteryMode,
        projectTitle: state.scratchGui.projectTitle,
        sessionExists: state.session && typeof state.session.session !== 'undefined',
        username: user ? user.username : null,
@@ -798,6 +817,7 @@ const mapDispatchToProps = dispatch => ({
    onClickRemix: () => dispatch(remixProject()),
    onClickSave: () => dispatch(manualUpdateProject()),
    onClickSaveAsCopy: () => dispatch(saveProjectAsCopy()),
+    onClickToggleMysteryMode: () => dispatch(toggleMysteryMode()),
    onSeeCommunity: () => dispatch(setPlayer(true))
 });

@@ -0,0 +1,9 @@
+.mystery-mode {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: 0.9;
+    background: transparent url('./mystery.png') center center;
+    z-index: 50;
+    pointer-events: none;
+}
@@ -0,0 +1,55 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import bindAll from 'lodash.bindall';
+import styles from './mystery-mode.css';
+import {connect} from 'react-redux';
+
+class MysteryMode extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handleMouseMove'
+        ]);
+        this.state = {
+            x: window.innerWidth / 2,
+            y: window.innerHeight / 2
+        };
+    }
+
+    componentDidMount () {
+        document.addEventListener('mousemove', this.handleMouseMove);
+    }
+
+    componentWillUnmount () {
+        document.removeEventListener('mousemove', this.handleMouseMove);
+    }
+    
+    handleMouseMove (event) {
+        this.setState({x: event.clientX, y: event.clientY});
+    }
+
+    render () {
+        if (!this.props.show) return null;
+        return (
+            <div
+                className={styles.mysteryMode}
+                style={{
+                    backgroundPosition: `${this.state.x + 2000}px ${this.state.y + 2000}px`
+                }}
+            />
+        );
+    }
+}
+
+MysteryMode.propTypes = {
+    show: PropTypes.bool
+};
+
+const mapStateToProps = state => ({
+    // This is the button's mode, as opposed to the actual current state
+    show: state.scratchGui.mysteryMode
+});
+
+export default connect(
+    mapStateToProps
+)(MysteryMode);
@@ -92,14 +92,16 @@ class LibraryItem extends React.PureComponent {
        this.setState({iconIndex: nextIconIndex});
    }
    curIconMd5 () {
+        const iconMd5Prop = this.props.iconMd5;
        if (this.props.icons &&
            this.state.isRotatingIcon &&
-            this.state.iconIndex < this.props.icons.length &&
-            this.props.icons[this.state.iconIndex] &&
-            this.props.icons[this.state.iconIndex].baseLayerMD5) {
-            return this.props.icons[this.state.iconIndex].baseLayerMD5;
+            this.state.iconIndex < this.props.icons.length) {
+            const icon = this.props.icons[this.state.iconIndex] || {};
+            return icon.md5ext || // 3.0 library format
+                icon.baseLayerMD5 || // 2.0 library format, TODO GH-5084
+                iconMd5Prop;
        }
-        return this.props.iconMd5;
+        return iconMd5Prop;
    }
    render () {
        const iconMd5 = this.curIconMd5();
@@ -151,7 +153,8 @@ LibraryItem.propTypes = {
    iconRawURL: PropTypes.string,
    icons: PropTypes.arrayOf(
        PropTypes.shape({
-            baseLayerMD5: PropTypes.string
+            baseLayerMD5: PropTypes.string, // 2.0 library format, TODO GH-5084
+            md5ext: PropTypes.string // 3.0 library format
        })
    ),
    id: PropTypes.number.isRequired,
@@ -0,0 +1,60 @@
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {connect} from 'react-redux';
+
+/**
+ * Turbo Mode component passes toggleTurboMode function to its child.
+ * It also includes `turboMode` in the props passed to the children.
+ * It expects this child to be a function with the signature
+ *     function (toggleTurboMode, {turboMode, ...props}) {}
+ * The component can then be used to attach turbo mode setting functionality
+ * to any other component:
+ *
+ * <TurboMode>{(toggleTurboMode, props) => (
+ *     <MyCoolComponent
+ *         turboEnabled={props.turboMode}
+ *         onClick={toggleTurboMode}
+ *         {...props}
+ *     />
+ * )}</TurboMode>
+ */
+class TurboMode extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'toggleTurboMode'
+        ]);
+    }
+    toggleTurboMode () {
+        this.props.vm.setTurboMode(!this.props.turboMode);
+    }
+    render () {
+        const {
+            /* eslint-disable no-unused-vars */
+            children,
+            vm,
+            /* eslint-enable no-unused-vars */
+            ...props
+        } = this.props;
+        return this.props.children(this.toggleTurboMode, props);
+    }
+}
+
+TurboMode.propTypes = {
+    children: PropTypes.func,
+    turboMode: PropTypes.bool,
+    vm: PropTypes.shape({
+        setTurboMode: PropTypes.func
+    })
+};
+
+const mapStateToProps = state => ({
+    vm: state.scratchGui.vm,
+    turboMode: state.scratchGui.vmStatus.turbo
+});
+
+export default connect(
+    mapStateToProps,
+    () => ({}) // omit dispatch prop
+)(TurboMode);
@@ -6,7 +6,12 @@ import VM from 'scratch-vm';

 import {connect} from 'react-redux';

-import {computeChunkedRMS, encodeAndAddSoundToVM, SOUND_BYTE_LIMIT} from '../lib/audio/audio-util.js';
+import {
+    computeChunkedRMS,
+    encodeAndAddSoundToVM,
+    downsampleIfNeeded,
+    dropEveryOtherSample
+} from '../lib/audio/audio-util.js';
 import AudioEffects from '../lib/audio/audio-effects.js';
 import SoundEditorComponent from '../components/sound-editor/sound-editor.jsx';
 import AudioBufferPlayer from '../lib/audio/audio-buffer-player.js';
@@ -39,7 +44,8 @@ class SoundEditor extends React.Component {
            'paste',
            'handleKeyPress',
            'handleContainerClick',
-            'setRef'
+            'setRef',
+            'resampleBufferToRate'
        ]);
        this.state = {
            copyBuffer: null,
@@ -132,45 +138,32 @@ class SoundEditor extends React.Component {
        });
    }
    submitNewSamples (samples, sampleRate, skipUndo) {
-        // Encode the new sound into a wav so that it can be stored
-        let wavBuffer = null;
-        try {
-            wavBuffer = WavEncoder.encode.sync({
-                sampleRate: sampleRate,
-                channelData: [samples]
+        return downsampleIfNeeded({samples, sampleRate}, this.resampleBufferToRate)
+            .then(({samples: newSamples, sampleRate: newSampleRate}) =>
+                WavEncoder.encode({
+                    sampleRate: newSampleRate,
+                    channelData: [newSamples]
+                }).then(wavBuffer => {
+                    if (!skipUndo) {
+                        this.redoStack = [];
+                        if (this.undoStack.length >= UNDO_STACK_SIZE) {
+                            this.undoStack.shift(); // Drop the first element off the array
+                        }
+                        this.undoStack.push(this.getUndoItem());
+                    }
+                    this.resetState(newSamples, newSampleRate);
+                    this.props.vm.updateSoundBuffer(
+                        this.props.soundIndex,
+                        this.audioBufferPlayer.buffer,
+                        new Uint8Array(wavBuffer));
+                    return true; // Edit was successful
+                })
+            )
+            .catch(e => {
+                // Encoding failed, or the sound was too large to save so edit is rejected
+                log.error(`Encountered error while trying to encode sound update: ${e}`);
+                return false; // Edit was not applied
            });
-
-            if (wavBuffer.byteLength > SOUND_BYTE_LIMIT) {
-                // Cancel the sound update by setting to null
-                wavBuffer = null;
-                log.error(`Refusing to encode sound larger than ${SOUND_BYTE_LIMIT} bytes`);
-            }
-        } catch (e) {
-            // This error state is mostly for the mock sounds used during testing.
-            // Any incorrect sound buffer trying to get interpretd as a Wav file
-            // should yield this error.
-            // This can also happen if the sound is too be allocated in memory.
-            log.error(`Encountered error while trying to encode sound update: ${e}`);
-        }
-
-        // Do not submit sound if it could not be encoded (i.e. if too large)
-        if (wavBuffer) {
-            if (!skipUndo) {
-                this.redoStack = [];
-                if (this.undoStack.length >= UNDO_STACK_SIZE) {
-                    this.undoStack.shift(); // Drop the first element off the array
-                }
-                this.undoStack.push(this.getUndoItem());
-            }
-            this.resetState(samples, sampleRate);
-            this.props.vm.updateSoundBuffer(
-                this.props.soundIndex,
-                this.audioBufferPlayer.buffer,
-                new Uint8Array(wavBuffer));
-
-            return true; // Update succeeded
-        }
-        return false; // Update failed
    }
    handlePlay () {
        this.audioBufferPlayer.stop();
@@ -209,13 +202,15 @@ class SoundEditor extends React.Component {
            newSamples.set(firstPart, 0);
            newSamples.set(secondPart, firstPart.length);
        }
-        this.submitNewSamples(newSamples, sampleRate);
-        this.setState({
-            trimStart: null,
-            trimEnd: null
+        this.submitNewSamples(newSamples, sampleRate).then(() => {
+            this.setState({
+                trimStart: null,
+                trimEnd: null
+            });
        });
    }
    handleDeleteInverse () {
+        // Delete everything outside of the trimmers
        const {samples, sampleRate} = this.copyCurrentBuffer();
        const sampleCount = samples.length;
        const startIndex = Math.floor(this.state.trimStart * sampleCount);
@@ -224,10 +219,13 @@ class SoundEditor extends React.Component {
        if (clippedSamples.length === 0) {
            clippedSamples = new Float32Array(1);
        }
-        this.submitNewSamples(clippedSamples, sampleRate);
-        this.setState({
-            trimStart: null,
-            trimEnd: null
+        this.submitNewSamples(clippedSamples, sampleRate).then(success => {
+            if (success) {
+                this.setState({
+                    trimStart: null,
+                    trimEnd: null
+                });
+            }
        });
    }
    handleUpdateTrim (trimStart, trimEnd) {
@@ -257,14 +255,15 @@ class SoundEditor extends React.Component {
        effects.process((renderedBuffer, adjustedTrimStart, adjustedTrimEnd) => {
            const samples = renderedBuffer.getChannelData(0);
            const sampleRate = renderedBuffer.sampleRate;
-            const success = this.submitNewSamples(samples, sampleRate);
-            if (success) {
-                if (this.state.trimStart === null) {
-                    this.handlePlay();
-                } else {
-                    this.setState({trimStart: adjustedTrimStart, trimEnd: adjustedTrimEnd}, this.handlePlay);
+            this.submitNewSamples(samples, sampleRate).then(success => {
+                if (success) {
+                    if (this.state.trimStart === null) {
+                        this.handlePlay();
+                    } else {
+                        this.setState({trimStart: adjustedTrimStart, trimEnd: adjustedTrimEnd}, this.handlePlay);
+                    }
                }
-            }
+            });
        });
    }
    tooLoud () {
@@ -287,16 +286,22 @@ class SoundEditor extends React.Component {
        this.redoStack.push(this.getUndoItem());
        const {samples, sampleRate, trimStart, trimEnd} = this.undoStack.pop();
        if (samples) {
-            this.submitNewSamples(samples, sampleRate, true);
-            this.setState({trimStart: trimStart, trimEnd: trimEnd}, this.handlePlay);
+            return this.submitNewSamples(samples, sampleRate, true).then(success => {
+                if (success) {
+                    this.setState({trimStart: trimStart, trimEnd: trimEnd}, this.handlePlay);
+                }
+            });
        }
    }
    handleRedo () {
        const {samples, sampleRate, trimStart, trimEnd} = this.redoStack.pop();
        if (samples) {
            this.undoStack.push(this.getUndoItem());
-            this.submitNewSamples(samples, sampleRate, true);
-            this.setState({trimStart: trimStart, trimEnd: trimEnd}, this.handlePlay);
+            return this.submitNewSamples(samples, sampleRate, true).then(success => {
+                if (success) {
+                    this.setState({trimStart: trimStart, trimEnd: trimEnd}, this.handlePlay);
+                }
+            });
        }
    }
    handleCopy () {
@@ -322,25 +327,39 @@ class SoundEditor extends React.Component {
        });
    }
    resampleBufferToRate (buffer, newRate) {
-        return new Promise(resolve => {
-            if (window.OfflineAudioContext) {
-                const sampleRateRatio = newRate / buffer.sampleRate;
-                const newLength = sampleRateRatio * buffer.samples.length;
-                const offlineContext = new window.OfflineAudioContext(1, newLength, newRate);
-                const source = offlineContext.createBufferSource();
-                const audioBuffer = offlineContext.createBuffer(1, buffer.samples.length, buffer.sampleRate);
-                audioBuffer.getChannelData(0).set(buffer.samples);
-                source.buffer = audioBuffer;
-                source.connect(offlineContext.destination);
-                source.start();
-                offlineContext.startRendering();
-                offlineContext.oncomplete = ({renderedBuffer}) => {
-                    resolve({
-                        samples: renderedBuffer.getChannelData(0),
-                        sampleRate: newRate
-                    });
-                };
+        return new Promise((resolve, reject) => {
+            const sampleRateRatio = newRate / buffer.sampleRate;
+            const newLength = sampleRateRatio * buffer.samples.length;
+            let offlineContext;
+            // Try to use either OfflineAudioContext or webkitOfflineAudioContext to resample
+            // The constructors will throw if trying to resample at an unsupported rate
+            // (e.g. Safari/webkitOAC does not support lower than 44khz).
+            try {
+                if (window.OfflineAudioContext) {
+                    offlineContext = new window.OfflineAudioContext(1, newLength, newRate);
+                } else if (window.webkitOfflineAudioContext) {
+                    offlineContext = new window.webkitOfflineAudioContext(1, newLength, newRate);
+                }
+            } catch {
+                // If no OAC available and downsampling by 2, downsample by dropping every other sample.
+                if (newRate === buffer.sampleRate / 2) {
+                    return resolve(dropEveryOtherSample(buffer));
+                }
+                return reject('Could not resample');
            }
+            const source = offlineContext.createBufferSource();
+            const audioBuffer = offlineContext.createBuffer(1, buffer.samples.length, buffer.sampleRate);
+            audioBuffer.getChannelData(0).set(buffer.samples);
+            source.buffer = audioBuffer;
+            source.connect(offlineContext.destination);
+            source.start();
+            offlineContext.startRendering();
+            offlineContext.oncomplete = ({renderedBuffer}) => {
+                resolve({
+                    samples: renderedBuffer.getChannelData(0),
+                    sampleRate: newRate
+                });
+            };
        });
    }
    paste () {
@@ -351,8 +370,11 @@ class SoundEditor extends React.Component {
            const newSamples = new Float32Array(newLength);
            newSamples.set(samples, 0);
            newSamples.set(this.state.copyBuffer.samples, samples.length);
-            this.submitNewSamples(newSamples, this.props.sampleRate, false);
-            this.handlePlay();
+            this.submitNewSamples(newSamples, this.props.sampleRate, false).then(success => {
+                if (success) {
+                    this.handlePlay();
+                }
+            });
        } else {
            // else replace the selection with the pasted sound
            const trimStartSamples = this.state.trimStart * samples.length;
@@ -371,11 +393,14 @@ class SoundEditor extends React.Component {
            const newDurationSeconds = newSamples.length / this.state.copyBuffer.sampleRate;
            const adjustedTrimStart = trimStartSeconds / newDurationSeconds;
            const adjustedTrimEnd = trimEndSeconds / newDurationSeconds;
-            this.submitNewSamples(newSamples, this.props.sampleRate, false);
-            this.setState({
-                trimStart: adjustedTrimStart,
-                trimEnd: adjustedTrimEnd
-            }, this.handlePlay);
+            this.submitNewSamples(newSamples, this.props.sampleRate, false).then(success => {
+                if (success) {
+                    this.setState({
+                        trimStart: adjustedTrimStart,
+                        trimEnd: adjustedTrimEnd
+                    }, this.handlePlay);
+                }
+            });
        }
    }
    handlePaste () {
@@ -77,6 +77,13 @@ class Stage extends React.Component {
        this.attachMouseEvents(this.canvas);
        this.updateRect();
        this.props.vm.runtime.addListener('QUESTION', this.questionListener);
+
+        // The GUI component seems to be recreated when entering/exiting editor mode.
+        // If we only update mystery mode in componentDidUpdate, it won't
+        // update when switching between editor and player mode.
+        if (this.props.mysteryMode !== this.renderer._mystery.modeActive) {
+            this.renderer.setMysteryMode(this.props.mysteryMode);
+        }
    }
    shouldComponentUpdate (nextProps, nextState) {
        return this.props.stageSize !== nextProps.stageSize ||
@@ -85,7 +92,8 @@ class Stage extends React.Component {
            this.props.isFullScreen !== nextProps.isFullScreen ||
            this.state.question !== nextState.question ||
            this.props.micIndicator !== nextProps.micIndicator ||
-            this.props.isStarted !== nextProps.isStarted;
+            this.props.isStarted !== nextProps.isStarted ||
+            this.props.mysteryMode !== nextProps.mysteryMode;
    }
    componentDidUpdate (prevProps) {
        if (this.props.isColorPicking && !prevProps.isColorPicking) {
@@ -93,6 +101,9 @@ class Stage extends React.Component {
        } else if (!this.props.isColorPicking && prevProps.isColorPicking) {
            this.stopColorPickingLoop();
        }
+        if (this.props.mysteryMode !== prevProps.mysteryMode) {
+            this.renderer.setMysteryMode(this.props.mysteryMode);
+        }
        this.updateRect();
        this.renderer.resize(this.rect.width, this.rect.height);
    }
@@ -429,7 +440,8 @@ Stage.propTypes = {
    onDeactivateColorPicker: PropTypes.func,
    stageSize: PropTypes.oneOf(Object.keys(STAGE_DISPLAY_SIZES)).isRequired,
    useEditorDragStyle: PropTypes.bool,
-    vm: PropTypes.instanceOf(VM).isRequired
+    vm: PropTypes.instanceOf(VM).isRequired,
+    mysteryMode: PropTypes.bool
 };

 Stage.defaultProps = {
@@ -442,7 +454,9 @@ const mapStateToProps = state => ({
    isStarted: state.scratchGui.vmStatus.started,
    micIndicator: state.scratchGui.micIndicator,
    // Do not use editor drag style in fullscreen or player mode.
-    useEditorDragStyle: !(state.scratchGui.mode.isFullScreen || state.scratchGui.mode.isPlayerOnly)
+    useEditorDragStyle: !(state.scratchGui.mode.isFullScreen || state.scratchGui.mode.isPlayerOnly),
+    mysteryMode: state.scratchGui.mysteryMode && !(
+        state.scratchGui.mode.isFullScreen || state.scratchGui.mode.isPlayerOnly)
 });

 const mapDispatchToProps = dispatch => ({
@@ -59,9 +59,57 @@ const encodeAndAddSoundToVM = function (vm, samples, sampleRate, name, callback)
    });
 };

+/**
+ @typedef SoundBuffer
+ @type {Object}
+ @property {Float32Array} samples Array of audio samples
+ @property {number} sampleRate Audio sample rate
+ */
+
+/**
+ * Downsample the given buffer to try to reduce file size below SOUND_BYTE_LIMIT
+ * @param {SoundBuffer} buffer - Buffer to resample
+ * @param {function(SoundBuffer):Promise<SoundBuffer>} resampler - resampler function
+ * @returns {SoundBuffer} Downsampled buffer with half the sample rate
+ */
+const downsampleIfNeeded = (buffer, resampler) => {
+    const {samples, sampleRate} = buffer;
+    const duration = samples.length / sampleRate;
+    const encodedByteLength = samples.length * 2; /* bitDepth 16 bit */
+    // Resolve immediately if already within byte limit
+    if (encodedByteLength < SOUND_BYTE_LIMIT) {
+        return Promise.resolve({samples, sampleRate});
+    }
+    // If encodeable at 22khz, resample and call submitNewSamples again
+    if (duration * 22050 * 2 < SOUND_BYTE_LIMIT) {
+        return resampler({samples, sampleRate}, 22050);
+    }
+    // Cannot save this sound at 22khz, refuse to edit
+    // In the future we could introduce further compression here
+    return Promise.reject('Sound too large to save, refusing to edit');
+};
+
+/**
+ * Drop every other sample of an audio buffer as a last-resort way of downsampling.
+ * @param {SoundBuffer} buffer - Buffer to resample
+ * @returns {SoundBuffer} Downsampled buffer with half the sample rate
+ */
+const dropEveryOtherSample = buffer => {
+    const newLength = Math.floor(buffer.samples.length / 2);
+    const newSamples = new Float32Array(newLength);
+    for (let i = 0; i < newLength; i++) {
+        newSamples[i] = buffer.samples[i * 2];
+    }
+    return {
+        samples: newSamples,
+        sampleRate: buffer.sampleRate / 2
+    };
+};
+
 export {
    computeRMS,
    computeChunkedRMS,
    encodeAndAddSoundToVM,
-    SOUND_BYTE_LIMIT
+    downsampleIfNeeded,
+    dropEveryOtherSample
 };
@@ -54,13 +54,10 @@ const cloudManagerHOC = function (WrappedComponent) {
        canUseCloud (props) {
            return !!(props.cloudHost && props.username && props.vm && props.projectId && props.hasCloudPermission);
        }
-        shouldNotModifyCloudData (props) {
-            return (props.hasEverEnteredEditor && !props.canSave);
-        }
        shouldConnect (props) {
            return !this.isConnected() && this.canUseCloud(props) &&
                props.isShowingWithId && props.vm.runtime.hasCloudData() &&
-                !this.shouldNotModifyCloudData(props);
+                props.canModifyCloudData;
        }
        shouldDisconnect (props, prevProps) {
            return this.isConnected() &&
@@ -70,7 +67,7 @@ const cloudManagerHOC = function (WrappedComponent) {
                    (props.projectId !== prevProps.projectId) ||
                    (props.username !== prevProps.username) ||
                    // Editing someone else's project
-                    this.shouldNotModifyCloudData(props)
+                    !props.canModifyCloudData
                );
        }
        isConnected () {
@@ -102,11 +99,11 @@ const cloudManagerHOC = function (WrappedComponent) {
        render () {
            const {
                /* eslint-disable no-unused-vars */
+                canModifyCloudData,
                cloudHost,
                projectId,
                username,
                hasCloudPermission,
-                hasEverEnteredEditor,
                isShowingWithId,
                onShowCloudInfo,
                /* eslint-enable no-unused-vars */
@@ -124,23 +121,30 @@ const cloudManagerHOC = function (WrappedComponent) {
    }

    CloudManager.propTypes = {
-        canSave: PropTypes.bool.isRequired,
+        canModifyCloudData: PropTypes.bool.isRequired,
        cloudHost: PropTypes.string,
        hasCloudPermission: PropTypes.bool,
-        hasEverEnteredEditor: PropTypes.bool,
-        isShowingWithId: PropTypes.bool,
+        isShowingWithId: PropTypes.bool.isRequired,
        onShowCloudInfo: PropTypes.func,
        projectId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
        username: PropTypes.string,
        vm: PropTypes.instanceOf(VM).isRequired
    };

-    const mapStateToProps = state => {
+    CloudManager.defaultProps = {
+        cloudHost: null,
+        hasCloudPermission: false,
+        onShowCloudInfo: () => {},
+        username: null
+    };
+
+    const mapStateToProps = (state, ownProps) => {
        const loadingState = state.scratchGui.projectState.loadingState;
        return {
-            hasEverEnteredEditor: state.scratchGui.mode.hasEverEnteredEditor,
            isShowingWithId: getIsShowingWithId(loadingState),
-            projectId: state.scratchGui.projectState.projectId
+            projectId: state.scratchGui.projectState.projectId,
+            // if you're editing someone else's project, you can't modify cloud data
+            canModifyCloudData: (!state.scratchGui.mode.hasEverEnteredEditor || ownProps.canSave)
        };
    };

@@ -178,7 +178,7 @@
    },
    {
        "name": "Blue Sky 2 ",
-        "md5": "5a906c2f272b77f59f0ef207857a8b3a.svg",
+        "md5": "8eb8790be5507fdccf73e7c1570bbbab.svg",
        "type": "backdrop",
        "tags": [
            "outdoors",
@@ -286,7 +286,7 @@
    },
    {
        "name": "Circles",
-        "md5": "4e29033ec2b891a8f1ca21242811d403.svg",
+        "md5": "c9847be305920807c5597d81576dd0c4.svg",
        "type": "backdrop",
        "tags": [
            "patterns"
@@ -491,7 +491,7 @@
    },
    {
        "name": "Hearts",
-        "md5": "26d3418b2fbc1af2c5fea82e1c3df1db.svg",
+        "md5": "f98526ccb0eec3ac7d6c8f8ab502825e.svg",
        "type": "backdrop",
        "tags": [
            "patterns"
@@ -1050,7 +1050,7 @@
    },
    {
        "name": "Underwater 1",
-        "md5": "fb907f72b310acc8b95cbf2d2cccabc9.svg",
+        "md5": "d3344650f594bcecdf46aa4a9441badd.svg",
        "type": "backdrop",
        "tags": [
            "ocean",
@@ -1175,7 +1175,7 @@
    },
    {
        "name": "Witch House",
-        "md5": "597b9a9813fe5d8d387283138a0b8f2b.svg",
+        "md5": "30085b2d27beb5acdbe895d8b3e64b04.svg",
        "type": "backdrop",
        "tags": [
            "fantasy",
@@ -1190,7 +1190,7 @@
    },
    {
        "name": "Woods",
-        "md5": "d26cfd278999c9e37d6af75c296a58df.svg",
+        "md5": "f3eb165d6f3fd23370f97079f2e631bf.svg",
        "type": "backdrop",
        "tags": [
            "fantasy",
@@ -3,7 +3,7 @@ import introMove from './steps/intro-move.en.gif';
 import introSayHello from './steps/intro-say-hello.en.gif';

 // Text to Speech
-import speechAddExtension from './steps/speech-add-extension.en.gif';
+import speechAddExtension from './steps/talking-1-add-extension.en.gif';
 import speechSaySomething from './steps/speech-say-something.en.gif';
 import speechSetVoice from './steps/speech-set-voice.en.gif';
 import speechMoveAround from './steps/speech-move-around.en.gif';
@@ -15,12 +15,12 @@ import speechSpin from './steps/speech-spin.en.gif';
 import speechGrowShrink from './steps/speech-grow-shrink.en.gif';

 // Cartoon Network
-import cnShowCharacter from './steps/cn-show-character.en.gif';
+import cnShowCharacter from './steps/cn-show-character.gif';
 import cnSay from './steps/cn-say.en.gif';
 import cnGlide from './steps/cn-glide.en.gif';
-import cnPickSprite from './steps/cn-pick-sprite.en.gif';
+import cnPickSprite from './steps/cn-pick-sprite.gif';
 import cnCollect from './steps/cn-collect.en.gif';
-import cnVariable from './steps/cn-variable.en.gif';
+import cnVariable from './steps/add-variable.en.gif';
 import cnScore from './steps/cn-score.en.gif';
 import cnBackdrop from './steps/cn-backdrop.en.gif';

@@ -43,20 +43,20 @@ import musicMakeBeat from './steps/music-make-beat.en.gif';
 import musicMakeBeatbox from './steps/music-make-beatbox.en.gif';

 // Chase-Game
-import chaseGameAddBackdrop from './steps/chase-game-add-backdrop.en.gif';
+import chaseGameAddBackdrop from './steps/chase-game-add-backdrop.gif';
 import chaseGameAddSprite1 from './steps/chase-game-add-sprite1.en.gif';
 import chaseGameRightLeft from './steps/chase-game-right-left.en.gif';
 import chaseGameUpDown from './steps/chase-game-up-down.en.gif';
 import chaseGameAddSprite2 from './steps/chase-game-add-sprite2.en.gif';
 import chaseGameMoveRandomly from './steps/chase-game-move-randomly.en.gif';
 import chaseGamePlaySound from './steps/chase-game-play-sound.en.gif';
-import chaseGameAddVariable from './steps/chase-game-add-variable.en.gif';
+import chaseGameAddVariable from './steps/add-variable.en.gif';
 import chaseGameChangeScore from './steps/chase-game-change-score.en.gif';

 // Clicker-Game (Pop Game)
 import popGamePickSprite from './steps/pop-game-pick-sprite.en.gif';
 import popGamePlaySound from './steps/pop-game-play-sound.en.gif';
-import popGameAddScore from './steps/pop-game-add-score.en.gif';
+import popGameAddScore from './steps/add-variable.en.gif';
 import popGameChangeScore from './steps/pop-game-change-score.en.gif';
 import popGameRandomPosition from './steps/pop-game-random-position.en.gif';
 import popGameChangeColor from './steps/pop-game-change-color.en.gif';
@@ -73,22 +73,22 @@ import animateCharJump from './steps/animate-char-jump.en.gif';
 import animateCharChangeColor from './steps/animate-char-change-color.en.gif';

 // Tell A Story
-import storyPickBackdrop from './steps/story-pick-backdrop.en.gif';
-import storyPickSprite from './steps/story-pick-sprite.en.gif';
+import storyPickBackdrop from './steps/story-pick-backdrop.gif';
+import storyPickSprite from './steps/story-pick-sprite.gif';
 import storySaySomething from './steps/story-say-something.en.gif';
-import storyPickSprite2 from './steps/story-pick-sprite2.en.gif';
+import storyPickSprite2 from './steps/story-pick-sprite2.gif';
 import storyFlip from './steps/story-flip.en.gif';
 import storyConversation from './steps/story-conversation.en.gif';
-import storyPickBackdrop2 from './steps/story-pick-backdrop2.en.gif';
+import storyPickBackdrop2 from './steps/story-pick-backdrop2.gif';
 import storySwitchBackdrop from './steps/story-switch-backdrop.en.gif';
 import storyHideCharacter from './steps/story-hide-character.en.gif';
 import storyShowCharacter from './steps/story-show-character.en.gif';

 // Video Sensing
 import videoAddExtension from './steps/video-add-extension.en.gif';
-import videoPet from './steps/video-pet.en.gif';
-import videoAnimate from './steps/video-animate.en.gif';
-import videoPop from './steps/video-pop.en.gif';
+import videoPet from './steps/video-pet.en.png';
+import videoAnimate from './steps/video-animate.en.png';
+import videoPop from './steps/video-pop.en.png';

 // Make it Fly
 import flyChooseBackdrop from './steps/fly-choose-backdrop.en.gif';
@@ -98,7 +98,7 @@ import flyMoveArrows from './steps/fly-make-interactive.en.gif';
 import flyChooseObject from './steps/fly-object-to-collect.en.gif';
 import flyFlyingObject from './steps/fly-flying-heart.en.gif';
 import flySelectFlyingSprite from './steps/fly-select-flyer.en.jpg';
-import flyAddScore from './steps/fly-add-score.en.gif';
+import flyAddScore from './steps/add-variable.en.gif';
 import flyKeepScore from './steps/fly-keep-score.en.gif';
 import flyAddScenery from './steps/fly-choose-scenery.en.gif';
 import flyMoveScenery from './steps/fly-move-scenery.en.gif';
@@ -106,13 +106,13 @@ import flySwitchLooks from './steps/fly-switch-costume.en.gif';

 // Pong
 import pongAddBackdrop from './steps/pong-add-backdrop.en.png';
-import pongAddBallSprite from './steps/pong-add-ball-sprite.en.png';
+import pongAddBallSprite from './steps/pong-add-ball-sprite.png';
 import pongBounceAround from './steps/pong-bounce-around.en.gif';
 import pongAddPaddle from './steps/pong-add-a-paddle.en.gif';
 import pongMoveThePaddle from './steps/pong-move-the-paddle.en.gif';
-import pongSelectBallSprite from './steps/pong-select-ball.en.png';
+import pongSelectBallSprite from './steps/pong-select-ball.png';
 import pongAddMoreCodeToBall from './steps/pong-add-code-to-ball.en.png';
-import pongAddAScore from './steps/pong-add-score.en.gif';
+import pongAddAScore from './steps/add-variable.en.gif';
 import pongChooseScoreFromMenu from './steps/pong-choose-score.en.png';
 import pongInsertChangeScoreBlock from './steps/pong-insert-change-score.en.png';
 import pongResetScore from './steps/pong-reset-score.en.png';
@@ -122,16 +122,16 @@ import pongGameOver from './steps/pong-game-over.en.png';
 // Imagine a World
 import imagineTypeWhatYouWant from './steps/imagine-type-what-you-want.en.png';
 import imagineClickGreenFlag from './steps/imagine-click-green-flag.en.png';
-import imagineChooseBackdrop from './steps/imagine-choose-backdrop.en.png';
-import imagineChooseSprite from './steps/imagine-choose-any-sprite.en.png';
+import imagineChooseBackdrop from './steps/imagine-choose-backdrop.png';
+import imagineChooseSprite from './steps/imagine-choose-any-sprite.png';
 import imagineFlyAround from './steps/imagine-fly-around.en.png';
-import imagineChooseAnotherSprite from './steps/imagine-choose-another-sprite.en.png';
+import imagineChooseAnotherSprite from './steps/imagine-choose-another-sprite.png';
 import imagineLeftRight from './steps/imagine-left-right.en.png';
 import imagineUpDown from './steps/imagine-up-down.en.png';
 import imagineChangeCostumes from './steps/imagine-change-costumes.en.png';
 import imagineGlideToPoint from './steps/imagine-glide-to-point.en.png';
 import imagineGrowShrink from './steps/imagine-grow-shrink.en.png';
-import imagineChooseAnotherBackdrop from './steps/imagine-choose-another-backdrop.en.png';
+import imagineChooseAnotherBackdrop from './steps/imagine-choose-another-backdrop.png';
 import imagineSwitchBackdrops from './steps/imagine-switch-backdrops.en.gif';
 import imagineRecordASound from './steps/imagine-record-a-sound.en.gif';
 import imagineChooseSound from './steps/imagine-choose-sound.en.png';
@@ -173,10 +173,10 @@ import glideAroundPoint from './steps/glide-around-point.en.png';
 // Code a Cartoon
 import codeCartoonSaySomething from './steps/code-cartoon-01-say-something.en.png';
 import codeCartoonAnimate from './steps/code-cartoon-02-animate.en.gif';
-import codeCartoonSelectDifferentCharacter from './steps/code-cartoon-03-select-different-character.en.gif';
+import codeCartoonSelectDifferentCharacter from './steps/code-cartoon-03-select-different-character.png';
 import codeCartoonUseMinusSign from './steps/code-cartoon-04-use-minus-sign.en.gif';
 import codeCartoonGrowShrink from './steps/code-cartoon-05-grow-shrink.en.gif';
-import codeCartoonSelectDifferentCharacter2 from './steps/code-cartoon-06-select-another-different-character.en.gif';
+import codeCartoonSelectDifferentCharacter2 from './steps/code-cartoon-06-select-another-different-character.png';
 import codeCartoonJump from './steps/code-cartoon-07-jump.en.gif';
 import codeCartoonChangeScenes from './steps/code-cartoon-08-change-scenes.en.gif';
 import codeCartoonGlideAround from './steps/code-cartoon-09-glide-around.en.gif';
@@ -3,119 +3,227 @@ import introMove from './steps/intro-move.es.gif';
 import introSayHello from './steps/intro-say-hello.es.gif';

 // Text to Speech
-// import speechAddExtension from './steps/speech-add-extension.es.gif';
-// import speechSaySomething from './steps/speech-say-something.es.gif';
-// import speechSetVoice from './steps/speech-set-voice.es.gif';
-// import speechMoveAround from './steps/speech-move-around.es.gif';
-// import speechAddBackdrop from './steps/speech-add-backdrop.es.gif';
-// import speechAddSprite from './steps/speech-add-sprite.es.gif';
-// import speechSong from './steps/speech-song.es.gif';
-// import speechChangeColor from './steps/speech-change-color.es.gif';
-// import speechSpin from './steps/speech-spin.es.gif';
-// import speechGrowShrink from './steps/speech-grow-shrink.es.gif';
-//
-// // Cartoon Network
-// import cnShowCharacter from './steps/cn-show-character.es.gif';
-// import cnSay from './steps/cn-say.es.gif';
-// import cnGlide from './steps/cn-glide.es.gif';
-// import cnPickSprite from './steps/cn-pick-sprite.es.gif';
-// import cnCollect from './steps/cn-collect.es.gif';
-// import cnVariable from './steps/cn-variable.es.gif';
-// import cnScore from './steps/cn-score.es.gif';
-// import cnBackdrop from './steps/cn-backdrop.es.gif';
+import speechAddExtension from './steps/speech-add-extension.es.gif';
+import speechSaySomething from './steps/speech-say-something.es.png';
+import speechSetVoice from './steps/speech-set-voice.es.png';
+import speechMoveAround from './steps/speech-move-around.es.png';
+import speechAddBackdrop from './steps/speech-add-backdrop.gif';
+import speechAddSprite from './steps/speech-add-sprite.gif';
+import speechSong from './steps/speech-song.es.png';
+import speechChangeColor from './steps/speech-change-color.es.png';
+import speechSpin from './steps/speech-spin.es.png';
+import speechGrowShrink from './steps/speech-grow-shrink.es.png';
+
+// Cartoon Network
+import cnShowCharacter from './steps/cn-show-character.gif';
+import cnSay from './steps/cn-say.es.png';
+import cnGlide from './steps/cn-glide.es.png';
+import cnPickSprite from './steps/cn-pick-sprite.gif';
+import cnCollect from './steps/cn-collect.es.png';
+import cnVariable from './steps/add-variable.es.gif';
+import cnScore from './steps/cn-score.es.png';
+import cnBackdrop from './steps/cn-backdrop.es.png';

 // Add sprite
-import addSprite from './steps/add-sprite.es.gif';
+import addSprite from './steps/add-sprite.gif';

 // Animate a name
-import namePickLetter from './steps/name-pick-letter.es.gif';
-import namePlaySound from './steps/name-play-sound.es.gif';
-import namePickLetter2 from './steps/name-pick-letter2.es.gif';
-import nameChangeColor from './steps/name-change-color.es.gif';
-import nameSpin from './steps/name-spin.es.gif';
-import nameGrow from './steps/name-grow.es.gif';
+import namePickLetter from './steps/name-pick-letter.gif';
+import namePlaySound from './steps/name-play-sound.es.png';
+import namePickLetter2 from './steps/name-pick-letter2.gif';
+import nameChangeColor from './steps/name-change-color.es.png';
+import nameSpin from './steps/name-spin.es.png';
+import nameGrow from './steps/name-grow.es.png';

-// Make-Music
-import musicPickInstrument from './steps/music-pick-instrument.es.gif';
-import musicPlaySound from './steps/music-play-sound.es.gif';
-import musicMakeSong from './steps/music-make-song.es.gif';
-import musicMakeBeat from './steps/music-make-beat.es.gif';
-import musicMakeBeatbox from './steps/music-make-beatbox.es.gif';
+// Make Music
+import musicPickInstrument from './steps/music-pick-instrument.gif';
+import musicPlaySound from './steps/music-play-sound.es.png';
+import musicMakeSong from './steps/music-make-song.es.png';
+import musicMakeBeat from './steps/music-make-beat.es.png';
+import musicMakeBeatbox from './steps/music-make-beatbox.es.png';

 // Chase-Game
-import chaseGameAddBackdrop from './steps/chase-game-add-backdrop.es.gif';
-import chaseGameAddSprite1 from './steps/chase-game-add-sprite1.es.gif';
-import chaseGameRightLeft from './steps/chase-game-right-left.es.gif';
-import chaseGameUpDown from './steps/chase-game-up-down.es.gif';
-import chaseGameAddSprite2 from './steps/chase-game-add-sprite2.es.gif';
-import chaseGameMoveRandomly from './steps/chase-game-move-randomly.es.gif';
-import chaseGamePlaySound from './steps/chase-game-play-sound.es.gif';
-import chaseGameAddVariable from './steps/chase-game-add-variable.es.gif';
-import chaseGameChangeScore from './steps/chase-game-change-score.es.gif';
+import chaseGameAddBackdrop from './steps/chase-game-add-backdrop.gif';
+import chaseGameAddSprite1 from './steps/chase-game-add-sprite1.gif';
+import chaseGameRightLeft from './steps/chase-game-right-left.es.png';
+import chaseGameUpDown from './steps/chase-game-up-down.es.png';
+import chaseGameAddSprite2 from './steps/chase-game-add-sprite2.gif';
+import chaseGameMoveRandomly from './steps/chase-game-move-randomly.es.png';
+import chaseGamePlaySound from './steps/chase-game-play-sound.es.png';
+import chaseGameAddVariable from './steps/add-variable.es.gif';
+import chaseGameChangeScore from './steps/chase-game-change-score.es.png';

 // Clicker-Game (Pop Game)
-import popGamePickSprite from './steps/pop-game-pick-sprite.es.gif';
-import popGamePlaySound from './steps/pop-game-play-sound.es.gif';
-import popGameAddScore from './steps/pop-game-add-score.es.gif';
-import popGameChangeScore from './steps/pop-game-change-score.es.gif';
-import popGameRandomPosition from './steps/pop-game-random-position.es.gif';
-import popGameChangeColor from './steps/pop-game-change-color.es.gif';
-import popGameResetScore from './steps/pop-game-reset-score.es.gif';
+import popGamePickSprite from './steps/pop-game-pick-sprite.gif';
+import popGamePlaySound from './steps/pop-game-play-sound.es.png';
+import popGameAddScore from './steps/add-variable.es.gif';
+import popGameChangeScore from './steps/pop-game-change-score.es.png';
+import popGameRandomPosition from './steps/pop-game-random-position.es.png';
+import popGameChangeColor from './steps/pop-game-change-color.es.png';
+import popGameResetScore from './steps/pop-game-reset-score.es.png';

 // Animate A Character
-import animateCharPickBackdrop from './steps/animate-char-pick-backdrop.es.gif';
-import animateCharPickSprite from './steps/animate-char-pick-sprite.es.gif';
-import animateCharSaySomething from './steps/animate-char-say-something.es.gif';
-import animateCharAddSound from './steps/animate-char-add-sound.es.gif';
-import animateCharTalk from './steps/animate-char-talk.es.gif';
-import animateCharMove from './steps/animate-char-move.es.gif';
-import animateCharJump from './steps/animate-char-jump.es.gif';
-import animateCharChangeColor from './steps/animate-char-change-color.es.gif';
+import animateCharPickBackdrop from './steps/animate-char-pick-backdrop.gif';
+import animateCharPickSprite from './steps/animate-char-pick-sprite.gif';
+import animateCharSaySomething from './steps/animate-char-say-something.es.png';
+import animateCharAddSound from './steps/animate-char-add-sound.es.png';
+import animateCharTalk from './steps/animate-char-talk.es.png';
+import animateCharMove from './steps/animate-char-move.es.png';
+import animateCharJump from './steps/animate-char-jump.es.png';
+import animateCharChangeColor from './steps/animate-char-change-color.es.png';

 // Tell A Story
-import storyPickBackdrop from './steps/story-pick-backdrop.es.gif';
-import storyPickSprite from './steps/story-pick-sprite.es.gif';
-import storySaySomething from './steps/story-say-something.es.gif';
-import storyPickSprite2 from './steps/story-pick-sprite2.es.gif';
+import storyPickBackdrop from './steps/story-pick-backdrop.gif';
+import storyPickSprite from './steps/story-pick-sprite.gif';
+import storySaySomething from './steps/story-say-something.es.png';
+import storyPickSprite2 from './steps/story-pick-sprite2.gif';
 import storyFlip from './steps/story-flip.es.gif';
-import storyConversation from './steps/story-conversation.es.gif';
-import storyPickBackdrop2 from './steps/story-pick-backdrop2.es.gif';
-import storySwitchBackdrop from './steps/story-switch-backdrop.es.gif';
-import storyHideCharacter from './steps/story-hide-character.es.gif';
-import storyShowCharacter from './steps/story-show-character.es.gif';
+import storyConversation from './steps/story-conversation.es.png';
+import storyPickBackdrop2 from './steps/story-pick-backdrop2.gif';
+import storySwitchBackdrop from './steps/story-switch-backdrop.es.png';
+import storyHideCharacter from './steps/story-hide-character.es.png';
+import storyShowCharacter from './steps/story-show-character.es.png';

 // Video Sensing
 import videoAddExtension from './steps/video-add-extension.es.gif';
-import videoPet from './steps/video-pet.es.gif';
-import videoAnimate from './steps/video-animate.es.gif';
-import videoPop from './steps/video-pop.es.gif';
+import videoPet from './steps/video-pet.es.png';
+import videoAnimate from './steps/video-animate.es.png';
+import videoPop from './steps/video-pop.es.png';
+
+// Make it Fly
+import flyChooseBackdrop from './steps/fly-choose-backdrop.gif';
+import flyChooseCharacter from './steps/fly-choose-character.png';
+import flySaySomething from './steps/fly-say-something.es.png';
+import flyMoveArrows from './steps/fly-make-interactive.es.png';
+import flyChooseObject from './steps/fly-object-to-collect.png';
+import flyFlyingObject from './steps/fly-flying-heart.es.png';
+import flySelectFlyingSprite from './steps/fly-select-flyer.png';
+import flyAddScore from './steps/add-variable.es.gif';
+import flyKeepScore from './steps/fly-keep-score.es.png';
+import flyAddScenery from './steps/fly-choose-scenery.gif';
+import flyMoveScenery from './steps/fly-move-scenery.es.png';
+import flySwitchLooks from './steps/fly-switch-costume.es.png';
+
+// Pong
+import pongAddBackdrop from './steps/pong-add-backdrop.png';
+import pongAddBallSprite from './steps/pong-add-ball-sprite.png';
+import pongBounceAround from './steps/pong-bounce-around.es.png';
+import pongAddPaddle from './steps/pong-add-a-paddle.gif';
+import pongMoveThePaddle from './steps/pong-move-the-paddle.es.png';
+import pongSelectBallSprite from './steps/pong-select-ball.png';
+import pongAddMoreCodeToBall from './steps/pong-add-code-to-ball.es.png';
+import pongAddAScore from './steps/add-variable.es.gif';
+import pongChooseScoreFromMenu from './steps/pong-choose-score.es.png';
+import pongInsertChangeScoreBlock from './steps/pong-insert-change-score.es.png';
+import pongResetScore from './steps/pong-reset-score.es.png';
+import pongAddLineSprite from './steps/pong-add-line.gif';
+import pongGameOver from './steps/pong-game-over.es.png';
+
+// Imagine a World
+import imagineTypeWhatYouWant from './steps/imagine-type-what-you-want.es.png';
+import imagineClickGreenFlag from './steps/imagine-click-green-flag.es.png';
+import imagineChooseBackdrop from './steps/imagine-choose-backdrop.png';
+import imagineChooseSprite from './steps/imagine-choose-any-sprite.png';
+import imagineFlyAround from './steps/imagine-fly-around.es.png';
+import imagineChooseAnotherSprite from './steps/imagine-choose-another-sprite.png';
+import imagineLeftRight from './steps/imagine-left-right.es.png';
+import imagineUpDown from './steps/imagine-up-down.es.png';
+import imagineChangeCostumes from './steps/imagine-change-costumes.es.png';
+import imagineGlideToPoint from './steps/imagine-glide-to-point.es.png';
+import imagineGrowShrink from './steps/imagine-grow-shrink.es.png';
+import imagineChooseAnotherBackdrop from './steps/imagine-choose-another-backdrop.png';
+import imagineSwitchBackdrops from './steps/imagine-switch-backdrops.es.png';
+import imagineRecordASound from './steps/imagine-record-a-sound.es.gif';
+import imagineChooseSound from './steps/imagine-choose-sound.es.png';
+
+// Add a Backdrop
+import addBackdrop from './steps/add-backdrop.png';
+
+// Add Effects
+import addEffects from './steps/add-effects.es.png';
+
+// Hide and Show
+import hideAndShow from './steps/hide-show.es.png';
+
+// Switch Costumes
+import switchCostumes from './steps/switch-costumes.es.png';
+
+// Change Size
+import changeSize from './steps/change-size.es.png';
+
+// Spin
+import spinTurn from './steps/spin-turn.es.png';
+import spinPointInDirection from './steps/spin-point-in-direction.es.png';
+
+// Record a Sound
+import recordASoundSoundsTab from './steps/record-a-sound-sounds-tab.es.png';
+import recordASoundClickRecord from './steps/record-a-sound-click-record.es.png';
+import recordASoundPressRecordButton from './steps/record-a-sound-press-record-button.es.png';
+import recordASoundChooseSound from './steps/record-a-sound-choose-sound.es.png';
+import recordASoundPlayYourSound from './steps/record-a-sound-play-your-sound.es.png';
+
+// Use Arrow Keys
+import moveArrowKeysLeftRight from './steps/move-arrow-keys-left-right.es.png';
+import moveArrowKeysUpDown from './steps/move-arrow-keys-up-down.es.png';
+
+// Glide Around
+import glideAroundBackAndForth from './steps/glide-around-back-and-forth.es.png';
+import glideAroundPoint from './steps/glide-around-point.es.png';
+
+// Code a Cartoon
+import codeCartoonSaySomething from './steps/code-cartoon-01-say-something.es.png';
+import codeCartoonAnimate from './steps/code-cartoon-02-animate.es.png';
+import codeCartoonSelectDifferentCharacter from './steps/code-cartoon-03-select-different-character.png';
+import codeCartoonUseMinusSign from './steps/code-cartoon-04-use-minus-sign.es.png';
+import codeCartoonGrowShrink from './steps/code-cartoon-05-grow-shrink.es.png';
+import codeCartoonSelectDifferentCharacter2 from './steps/code-cartoon-06-select-another-different-character.png';
+import codeCartoonJump from './steps/code-cartoon-07-jump.es.png';
+import codeCartoonChangeScenes from './steps/code-cartoon-08-change-scenes.es.png';
+import codeCartoonGlideAround from './steps/code-cartoon-09-glide-around.es.png';
+import codeCartoonChangeCostumes from './steps/code-cartoon-10-change-costumes.es.png';
+import codeCartoonChooseMoreCharacters from './steps/code-cartoon-11-choose-more-characters.png';
+
+// Talking Tales
+import talesAddExtension from './steps/speech-add-extension.es.gif';
+import talesChooseSprite from './steps/talking-2-choose-sprite.png';
+import talesSaySomething from './steps/talking-3-say-something.es.png';
+import talesChooseBackdrop from './steps/talking-4-choose-backdrop.png';
+import talesSwitchBackdrop from './steps/talking-5-switch-backdrop.es.png';
+import talesChooseAnotherSprite from './steps/talking-6-choose-another-sprite.png';
+import talesMoveAround from './steps/talking-7-move-around.es.png';
+import talesChooseAnotherBackdrop from './steps/talking-8-choose-another-backdrop.png';
+import talesAnimateTalking from './steps/talking-9-animate.es.png';
+import talesChooseThirdBackdrop from './steps/talking-10-choose-third-backdrop.png';
+import talesChooseSound from './steps/talking-11-choose-sound.es.gif';
+import talesDanceMoves from './steps/talking-12-dance-moves.es.png';
+import talesAskAnswer from './steps/talking-13-ask-and-answer.es.png';

 const esImages = {
    // Intro
    introMove: introMove,
    introSayHello: introSayHello,

-    // // Text to Speech
-    // speechAddExtension: speechAddExtension,
-    // speechSaySomething: speechSaySomething,
-    // speechSetVoice: speechSetVoice,
-    // speechMoveAround: speechMoveAround,
-    // speechAddBackdrop: speechAddBackdrop,
-    // speechAddSprite: speechAddSprite,
-    // speechSong: speechSong,
-    // speechChangeColor: speechChangeColor,
-    // speechSpin: speechSpin,
-    // speechGrowShrink: speechGrowShrink,
-    //
-    // // Cartoon Network
-    // cnShowCharacter: cnShowCharacter,
-    // cnSay: cnSay,
-    // cnGlide: cnGlide,
-    // cnPickSprite: cnPickSprite,
-    // cnCollect: cnCollect,
-    // cnVariable: cnVariable,
-    // cnScore: cnScore,
-    // cnBackdrop: cnBackdrop,
+    // Text to Speech
+    speechAddExtension: speechAddExtension,
+    speechSaySomething: speechSaySomething,
+    speechSetVoice: speechSetVoice,
+    speechMoveAround: speechMoveAround,
+    speechAddBackdrop: speechAddBackdrop,
+    speechAddSprite: speechAddSprite,
+    speechSong: speechSong,
+    speechChangeColor: speechChangeColor,
+    speechSpin: speechSpin,
+    speechGrowShrink: speechGrowShrink,
+
+    // Cartoon Network
+    cnShowCharacter: cnShowCharacter,
+    cnSay: cnSay,
+    cnGlide: cnGlide,
+    cnPickSprite: cnPickSprite,
+    cnCollect: cnCollect,
+    cnVariable: cnVariable,
+    cnScore: cnScore,
+    cnBackdrop: cnBackdrop,

    // Add sprite
    addSprite: addSprite,
@@ -181,8 +289,115 @@ const esImages = {
    videoAddExtension: videoAddExtension,
    videoPet: videoPet,
    videoAnimate: videoAnimate,
-    videoPop: videoPop
+    videoPop: videoPop,

+    // Make it Fly
+    flyChooseBackdrop: flyChooseBackdrop,
+    flyChooseCharacter: flyChooseCharacter,
+    flySaySomething: flySaySomething,
+    flyMoveArrows: flyMoveArrows,
+    flyChooseObject: flyChooseObject,
+    flyFlyingObject: flyFlyingObject,
+    flySelectFlyingSprite: flySelectFlyingSprite,
+    flyAddScore: flyAddScore,
+    flyKeepScore: flyKeepScore,
+    flyAddScenery: flyAddScenery,
+    flyMoveScenery: flyMoveScenery,
+    flySwitchLooks: flySwitchLooks,
+
+    // Pong
+    pongAddBackdrop: pongAddBackdrop,
+    pongAddBallSprite: pongAddBallSprite,
+    pongBounceAround: pongBounceAround,
+    pongAddPaddle: pongAddPaddle,
+    pongMoveThePaddle: pongMoveThePaddle,
+    pongSelectBallSprite: pongSelectBallSprite,
+    pongAddMoreCodeToBall: pongAddMoreCodeToBall,
+    pongAddAScore: pongAddAScore,
+    pongChooseScoreFromMenu: pongChooseScoreFromMenu,
+    pongInsertChangeScoreBlock: pongInsertChangeScoreBlock,
+    pongResetScore: pongResetScore,
+    pongAddLineSprite: pongAddLineSprite,
+    pongGameOver: pongGameOver,
+
+    // Imagine a World
+    imagineTypeWhatYouWant: imagineTypeWhatYouWant,
+    imagineClickGreenFlag: imagineClickGreenFlag,
+    imagineChooseBackdrop: imagineChooseBackdrop,
+    imagineChooseSprite: imagineChooseSprite,
+    imagineFlyAround: imagineFlyAround,
+    imagineChooseAnotherSprite: imagineChooseAnotherSprite,
+    imagineLeftRight: imagineLeftRight,
+    imagineUpDown: imagineUpDown,
+    imagineChangeCostumes: imagineChangeCostumes,
+    imagineGlideToPoint: imagineGlideToPoint,
+    imagineGrowShrink: imagineGrowShrink,
+    imagineChooseAnotherBackdrop: imagineChooseAnotherBackdrop,
+    imagineSwitchBackdrops: imagineSwitchBackdrops,
+    imagineRecordASound: imagineRecordASound,
+    imagineChooseSound: imagineChooseSound,
+
+    // Add a Backdrop
+    addBackdrop: addBackdrop,
+
+    // Add Effects
+    addEffects: addEffects,
+
+    // Hide and Show
+    hideAndShow: hideAndShow,
+
+    // Switch Costumes
+    switchCostumes: switchCostumes,
+
+    // Change Size
+    changeSize: changeSize,
+
+    // Spin
+    spinTurn: spinTurn,
+    spinPointInDirection: spinPointInDirection,
+
+    // Record a Sound
+    recordASoundSoundsTab: recordASoundSoundsTab,
+    recordASoundClickRecord: recordASoundClickRecord,
+    recordASoundPressRecordButton: recordASoundPressRecordButton,
+    recordASoundChooseSound: recordASoundChooseSound,
+    recordASoundPlayYourSound: recordASoundPlayYourSound,
+
+    // Use Arrow Keys
+    moveArrowKeysLeftRight: moveArrowKeysLeftRight,
+    moveArrowKeysUpDown: moveArrowKeysUpDown,
+
+    // Glide Around
+    glideAroundBackAndForth: glideAroundBackAndForth,
+    glideAroundPoint: glideAroundPoint,
+
+    // Code a Cartoon
+    codeCartoonSaySomething: codeCartoonSaySomething,
+    codeCartoonAnimate: codeCartoonAnimate,
+    codeCartoonSelectDifferentCharacter: codeCartoonSelectDifferentCharacter,
+    codeCartoonUseMinusSign: codeCartoonUseMinusSign,
+    codeCartoonGrowShrink: codeCartoonGrowShrink,
+    codeCartoonSelectDifferentCharacter2: codeCartoonSelectDifferentCharacter2,
+    codeCartoonJump: codeCartoonJump,
+    codeCartoonChangeScenes: codeCartoonChangeScenes,
+    codeCartoonGlideAround: codeCartoonGlideAround,
+    codeCartoonChangeCostumes: codeCartoonChangeCostumes,
+    codeCartoonChooseMoreCharacters: codeCartoonChooseMoreCharacters,
+
+    // Talking Tales
+    talesAddExtension: talesAddExtension,
+    talesChooseSprite: talesChooseSprite,
+    talesSaySomething: talesSaySomething,
+    talesAskAnswer: talesAskAnswer,
+    talesChooseBackdrop: talesChooseBackdrop,
+    talesSwitchBackdrop: talesSwitchBackdrop,
+    talesChooseAnotherSprite: talesChooseAnotherSprite,
+    talesMoveAround: talesMoveAround,
+    talesChooseAnotherBackdrop: talesChooseAnotherBackdrop,
+    talesAnimateTalking: talesAnimateTalking,
+    talesChooseThirdBackdrop: talesChooseThirdBackdrop,
+    talesChooseSound: talesChooseSound,
+    talesDanceMoves: talesDanceMoves
 };

 export {esImages};
@@ -51,6 +51,9 @@ import libraryCodeCartoon from './thumbnails/code-a-cartoon.jpg';
 // Talking Tales
 import libraryTalking from './thumbnails/talking.png';

+// Sprite Mystery
+import librarySpriteMystery from './thumbnails/sprite-mystery.png';
+
 // Videos
 import recordASound from './thumbnails/record-a-sound.jpg';
 import glideAroundThumb from './thumbnails/glide-around.jpg';
@@ -104,82 +107,6 @@ export default {
        urlId: 'getStarted'
    },

-    'animate-a-name': {
-        name: (
-            <FormattedMessage
-                defaultMessage="Animate a Name"
-                description="Name for the 'Animate a Name' how-to"
-                id="gui.howtos.animate-a-name.name"
-            />
-        ),
-        img: libraryAnimate,
-        tags: ['animation', 'art', 'spin', 'grow'],
-        steps: [{
-            video: 'animate-a-name'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Pick a Letter Sprite"
-                    description="Step name for 'Pick a Letter Sprite' step"
-                    id="gui.howtos.animate-a-name.step_AnimatePickLetter"
-                />
-            ),
-            image: 'namePickLetter'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Play a Sound When Clicked"
-                    description="Step name for 'Play a Sound When Clicked' step"
-                    id="gui.howtos.animate-a-name.step_AnimatePlaySound"
-                />
-            ),
-            image: 'namePlaySound'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Pick Another Letter Sprite"
-                    description="Step name for 'Pick Another Letter Sprite"
-                    id="gui.howtos.animate-a-name.step_AnimatePickLetter2"
-                />
-            ),
-            image: 'namePickLetter2'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Change color"
-                    description="Step name for 'Change color' step"
-                    id="gui.howtos.animate-a-name.step_AnimateChangeColor"
-                />
-            ),
-            image: 'nameChangeColor'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Pick Another Letter Sprite & Make It Spin"
-                    description="Step name for 'Pick Another Letter Sprite & Make It Spin' step"
-                    id="gui.howtos.animate-a-name.step_AnimateSpin"
-                />
-            ),
-            image: 'nameSpin'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Pick Another Letter Sprite & Make It Grow"
-                    description="Step name for 'Pick Another Letter Sprite & Make It Grow!' step"
-                    id="gui.howtos.animate-a-name.step_AnimateGrow"
-                />
-            ),
-            image: 'nameGrow'
-        }, {
-            deckIds: [
-                'add-a-backdrop',
-                'glide-around'
-            ]
-        }
-        ],
-        urlId: 'name'
-    },
-
    'imagine': {
        name: (
            <FormattedMessage
@@ -337,6 +264,472 @@ export default {
        urlId: 'imagine'
    },

+    'code-cartoon': {
+        name: (
+            <FormattedMessage
+                defaultMessage="Code a Cartoon"
+                description="Name for the 'Code a Cartoon' how-to"
+                id="gui.howtos.code-cartoon"
+            />
+        ),
+        tags: ['code-cartoon'],
+        requiredProjectId: '331474033',
+        img: libraryCodeCartoon,
+        steps: [{
+            video: 'code-cartoon'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Say Something When You Click the Green Flag"
+                    description="Step name for 'Say Something When You Click the Green Flag' step"
+                    id="gui.howtos.code-cartoon.step_codeCartoonSaySomething"
+                />
+            ),
+            image: 'codeCartoonSaySomething'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Animate a Character When You Click It"
+                    description="Step name for 'Animate a Character When You Click It' step"
+                    id="gui.howtos.code-cartoon.step_codeCartoonAnimate"
+                />
+            ),
+            image: 'codeCartoonAnimate'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Select a Different Character"
+                    description="Step name for 'Select a Different Character' step"
+                    id="gui.howtos.code-cartoon.step_codeCartoonSelectDifferentCharacter"
+                />
+            ),
+            image: 'codeCartoonSelectDifferentCharacter'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Use a Minus Sign to Get Smaller"
+                    description="Step name for 'Use a Minus Sign to Get Smaller' step"
+                    id="gui.howtos.code-cartoon.step_codeCartoonUseMinusSign"
+                />
+            ),
+            image: 'codeCartoonUseMinusSign'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Make a Character Grow and Shrink"
+                    description="Step name for 'Make a Character Grow and Shrink' step"
+                    id="gui.howtos.code-cartoon.step_codeCartoonGrowShrink"
+                />
+            ),
+            image: 'codeCartoonGrowShrink'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Select a Different Character"
+                    description="Step name for 'Select a Different Character' step"
+                    id="gui.howtos.code-cartoon.step_codeCartoonSelectDifferentCharacter2"
+                />
+            ),
+            image: 'codeCartoonSelectDifferentCharacter2'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Jump Up and Down"
+                    description="Step name for 'Jump Up and Down' step"
+                    id="gui.howtos.code-cartoon.step_codeCartoonJump"
+                />
+            ),
+            image: 'codeCartoonJump'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Click a Character to Change Scenes"
+                    description="Step name for 'Click a Character to Change Scenes' step"
+                    id="gui.howtos.code-cartoon.step_codeCartoonChangeScenes"
+                />
+            ),
+            image: 'codeCartoonChangeScenes'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Glide Around"
+                    description="Step name for 'Glide Around' step"
+                    id="gui.howtos.code-cartoon.step_codeCartoonGlideAround"
+                />
+            ),
+            image: 'codeCartoonGlideAround'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Change Costumes"
+                    description="Step name for 'Change Costumes' step"
+                    id="gui.howtos.code-cartoon.step_codeCartoonChangeCostumes"
+                />
+            ),
+            image: 'codeCartoonChangeCostumes'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Choose More Characters to Add to Your Cartoon"
+                    description="Step name for 'Choose More Characters to Add to Your Cartoon' step"
+                    id="gui.howtos.code-cartoon.step_codeCartoonChooseMoreCharacters"
+                />
+            ),
+            image: 'codeCartoonChooseMoreCharacters'
+        }, {
+            deckIds: [
+                'Chase-Game',
+                'Tell-A-Story'
+            ]
+        }
+        ],
+        urlId: 'code-cartoon'
+    },
+
+    'say-it-out-loud': {
+        name: (
+            <FormattedMessage
+                defaultMessage="Create Animations That Talk"
+                description="Name for the 'Create Animations That Talk' how-to"
+                id="gui.howtos.say-it-out-loud"
+            />
+        ),
+        img: libraryTXTSpeech,
+        steps: [{
+            video: 'k54n8uwcty',
+            trackingPixel: (
+                <img src="https://code.org/api/hour/begin_scratch_talk.png" />
+            )
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Add the Text to Speech blocks"
+                    description="Step name for 'Add the Text to Speech blocks' step"
+                    id="gui.howtos.say-it-out-loud.step_AddTXTextension"
+                />
+            ),
+            image: 'speechAddExtension'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Say Something"
+                    description="Step name for 'Say Something' step"
+                    id="gui.howtos.say-it-out-loud.step_TXTSpeech"
+                />
+            ),
+            image: 'speechSaySomething'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Set a Voice"
+                    description="Step name for 'Set a Voice"
+                    id="gui.howtos.say-it-out-loud_TXTSetVoice"
+                />
+            ),
+            image: 'speechSetVoice'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Move Around"
+                    description="Step name for 'Move Around' step"
+                    id="gui.howtos.say-it-out-loud.step_TXTMove"
+                />
+            ),
+            image: 'speechMoveAround'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Add a Backdrop"
+                    description="Step name for 'Add a Backdrop' step"
+                    id="gui.howtos.say-it-out-loud.step_TXTBackdrop"
+                />
+            ),
+            image: 'speechAddBackdrop'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Add Another Character"
+                    description="Step name for 'Add Another Character' step"
+                    id="gui.howtos.say-it-out-loud.step_TXTAddSprite"
+                />
+            ),
+            image: 'speechAddSprite'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Perform a Song"
+                    description="Step name for 'Perform a Song' step"
+                    id="gui.howtos.say-it-out-loud.step_TXTSong"
+                />
+            ),
+            image: 'speechSong'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Change Color"
+                    description="Step name for 'Change Color' step"
+                    id="gui.howtos.say-it-out-loud.step_TXTColor"
+                />
+            ),
+            image: 'speechChangeColor'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Spin Around"
+                    description="Step name for 'Spin Around"
+                    id="gui.howtos.say-it-out-loud.step_TXTSpin"
+                />
+            ),
+            image: 'speechSpin'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Grow and Shrink"
+                    description="Step name for 'Grow and Shrink' step"
+                    id="gui.howtos.say-it-out-loud.step_TXTGrow"
+                />
+            ),
+            image: 'speechGrowShrink'
+        }, {
+            deckIds: [
+                'animate-a-name',
+                'Make-Music'
+            ]
+        }
+        ],
+        urlId: 'animations-that-talk'
+    },
+
+    'sprite-mystery': {
+        name: 'How to Find a Sprite',
+        img: librarySpriteMystery,
+        steps: [{
+            video: 'sprite-mystery'
+        }, {
+            deckIds: [
+                'intro-move-sayhello',
+                'add-sprite'
+            ]
+        }
+        ],
+        urlId: 'sprite-mystery'
+    },
+
+    'talking': {
+        name: (
+            <FormattedMessage
+                defaultMessage="Talking Tales"
+                description="Name for the 'Talking Tales' how-to"
+                id="gui.howtos.talking"
+            />
+        ),
+        tags: ['talking'],
+        img: libraryTalking,
+        steps: [{
+            video: 'talking'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Click to Add the Text-to-Speech Blocks"
+                    description="Step name for 'Click to Add the Text-to-Speech Blocks' step"
+                    id="gui.howtos.talking.step_talesAddExtension"
+                />
+            ),
+            image: 'talesAddExtension'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Choose a Sprite"
+                    description="Step name for 'Choose a Sprite' step"
+                    id="gui.howtos.talking.step_talesChooseSprite"
+                />
+            ),
+            image: 'talesChooseSprite'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Make a Character Speak"
+                    description="Step name for 'Make a Character Speak' step"
+                    id="gui.howtos.talking.step_talesSaySomething"
+                />
+            ),
+            image: 'talesSaySomething'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Choose a Backdrop"
+                    description="Step name for 'Choose a Backdrop' step"
+                    id="gui.howtos.talking.step_talesChooseBackdrop"
+                />
+            ),
+            image: 'talesChooseBackdrop'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Click a Character to Go to the Next Backdrop"
+                    description="Step name for 'Click a Character to Go to the Next Backdrop' step"
+                    id="gui.howtos.talking.step_talesSwitchBackdrop"
+                />
+            ),
+            image: 'talesSwitchBackdrop'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Choose Another Sprite"
+                    description="Step name for 'Choose Another Sprite' step"
+                    id="gui.howtos.talking.step_talesChooseAnotherSprite"
+                />
+            ),
+            image: 'talesChooseAnotherSprite'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Move Around"
+                    description="Step name for 'Move Around' step"
+                    id="gui.howtos.talking.step_talesMoveAround"
+                />
+            ),
+            image: 'talesMoveAround'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Choose Another Backdrop"
+                    description="Step name for 'Choose Another Backdrop' step"
+                    id="gui.howtos.talking.step_talesChooseAnotherBackdrop"
+                />
+            ),
+            image: 'talesChooseAnotherBackdrop'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Animate Talking"
+                    description="Step name for 'Animate Talking' step"
+                    id="gui.howtos.talking.step_talesAnimateTalking"
+                />
+            ),
+            image: 'talesAnimateTalking'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Choose Another Backdrop"
+                    description="Step name for 'Choose Another Backdrop' step"
+                    id="gui.howtos.talking.step_talesChooseThirdBackdrop"
+                />
+            ),
+            image: 'talesChooseThirdBackdrop'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Choose a Song to Dance To"
+                    description="Step name for 'Choose a Song to Dance To' step"
+                    id="gui.howtos.talking.step_talesChooseSound"
+                />
+            ),
+            image: 'talesChooseSound'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Dance Moves"
+                    description="Step name for 'Dance Moves' step"
+                    id="gui.howtos.talking.step_talesDanceMoves"
+                />
+            ),
+            image: 'talesDanceMoves'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Get the Ask and Answer Blocks from the Sensing Category"
+                    description="Step name for 'Get the Ask and Answer Blocks from the Sensing Category' step"
+                    id="gui.howtos.talking.step_talesAskAnswer"
+                />
+            ),
+            image: 'talesAskAnswer'
+        }, {
+            deckIds: [
+                'Tell-A-Story',
+                'Animate-A-Character'
+            ]
+        }
+        ],
+        urlId: 'talking'
+    },
+
+    'animate-a-name': {
+        name: (
+            <FormattedMessage
+                defaultMessage="Animate a Name"
+                description="Name for the 'Animate a Name' how-to"
+                id="gui.howtos.animate-a-name.name"
+            />
+        ),
+        img: libraryAnimate,
+        tags: ['animation', 'art', 'spin', 'grow'],
+        steps: [{
+            video: 'animate-a-name'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Pick a Letter Sprite"
+                    description="Step name for 'Pick a Letter Sprite' step"
+                    id="gui.howtos.animate-a-name.step_AnimatePickLetter"
+                />
+            ),
+            image: 'namePickLetter'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Play a Sound When Clicked"
+                    description="Step name for 'Play a Sound When Clicked' step"
+                    id="gui.howtos.animate-a-name.step_AnimatePlaySound"
+                />
+            ),
+            image: 'namePlaySound'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Pick Another Letter Sprite"
+                    description="Step name for 'Pick Another Letter Sprite"
+                    id="gui.howtos.animate-a-name.step_AnimatePickLetter2"
+                />
+            ),
+            image: 'namePickLetter2'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Change color"
+                    description="Step name for 'Change color' step"
+                    id="gui.howtos.animate-a-name.step_AnimateChangeColor"
+                />
+            ),
+            image: 'nameChangeColor'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Pick Another Letter Sprite & Make It Spin"
+                    description="Step name for 'Pick Another Letter Sprite & Make It Spin' step"
+                    id="gui.howtos.animate-a-name.step_AnimateSpin"
+                />
+            ),
+            image: 'nameSpin'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Pick Another Letter Sprite & Make It Grow"
+                    description="Step name for 'Pick Another Letter Sprite & Make It Grow!' step"
+                    id="gui.howtos.animate-a-name.step_AnimateGrow"
+                />
+            ),
+            image: 'nameGrow'
+        }, {
+            deckIds: [
+                'add-a-backdrop',
+                'glide-around'
+            ]
+        }
+        ],
+        urlId: 'name'
+    },
+
    'Make-Music': {
        name: (
            <FormattedMessage
@@ -1075,128 +1468,6 @@ export default {
        urlId: 'pong'
    },

-    'code-cartoon': {
-        name: (
-            <FormattedMessage
-                defaultMessage="Code a Cartoon"
-                description="Name for the 'Code a Cartoon' how-to"
-                id="gui.howtos.code-cartoon"
-            />
-        ),
-        tags: ['code-cartoon'],
-        requiredProjectId: '331474033',
-        img: libraryCodeCartoon,
-        steps: [{
-            video: 'code-cartoon'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Say Something When You Click the Green Flag"
-                    description="Step name for 'Say Something When You Click the Green Flag' step"
-                    id="gui.howtos.code-cartoon.step_codeCartoonSaySomething"
-                />
-            ),
-            image: 'codeCartoonSaySomething'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Animate a Character When You Click It"
-                    description="Step name for 'Animate a Character When You Click It' step"
-                    id="gui.howtos.code-cartoon.step_codeCartoonAnimate"
-                />
-            ),
-            image: 'codeCartoonAnimate'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Select a Different Character"
-                    description="Step name for 'Select a Different Character' step"
-                    id="gui.howtos.code-cartoon.step_codeCartoonSelectDifferentCharacter"
-                />
-            ),
-            image: 'codeCartoonSelectDifferentCharacter'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Use a Minus Sign to Get Smaller"
-                    description="Step name for 'Use a Minus Sign to Get Smaller' step"
-                    id="gui.howtos.code-cartoon.step_codeCartoonUseMinusSign"
-                />
-            ),
-            image: 'codeCartoonUseMinusSign'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Make a Character Grow and Shrink"
-                    description="Step name for 'Make a Character Grow and Shrink' step"
-                    id="gui.howtos.code-cartoon.step_codeCartoonGrowShrink"
-                />
-            ),
-            image: 'codeCartoonGrowShrink'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Select a Different Character"
-                    description="Step name for 'Select a Different Character' step"
-                    id="gui.howtos.code-cartoon.step_codeCartoonSelectDifferentCharacter2"
-                />
-            ),
-            image: 'codeCartoonSelectDifferentCharacter2'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Jump Up and Down"
-                    description="Step name for 'Jump Up and Down' step"
-                    id="gui.howtos.code-cartoon.step_codeCartoonJump"
-                />
-            ),
-            image: 'codeCartoonJump'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Click a Character to Change Scenes"
-                    description="Step name for 'Click a Character to Change Scenes' step"
-                    id="gui.howtos.code-cartoon.step_codeCartoonChangeScenes"
-                />
-            ),
-            image: 'codeCartoonChangeScenes'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Glide Around"
-                    description="Step name for 'Glide Around' step"
-                    id="gui.howtos.code-cartoon.step_codeCartoonGlideAround"
-                />
-            ),
-            image: 'codeCartoonGlideAround'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Change Costumes"
-                    description="Step name for 'Change Costumes' step"
-                    id="gui.howtos.code-cartoon.step_codeCartoonChangeCostumes"
-                />
-            ),
-            image: 'codeCartoonChangeCostumes'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Choose More Characters to Add to Your Cartoon"
-                    description="Step name for 'Choose More Characters to Add to Your Cartoon' step"
-                    id="gui.howtos.code-cartoon.step_codeCartoonChooseMoreCharacters"
-                />
-            ),
-            image: 'codeCartoonChooseMoreCharacters'
-        }, {
-            deckIds: [
-                'Chase-Game',
-                'Tell-A-Story'
-            ]
-        }
-        ],
-        urlId: 'code-cartoon'
-    },
-
    'cartoon-network': {
        name: (
            <FormattedMessage
@@ -1356,259 +1627,6 @@ export default {
        urlId: 'video-sensing'
    },

-    'say-it-out-loud': {
-        name: (
-            <FormattedMessage
-                defaultMessage="Create Animations That Talk"
-                description="Name for the 'Create Animations That Talk' how-to"
-                id="gui.howtos.say-it-out-loud"
-            />
-        ),
-        img: libraryTXTSpeech,
-        steps: [{
-            video: 'k54n8uwcty',
-            trackingPixel: (
-                <img src="https://code.org/api/hour/begin_scratch_talk.png" />
-            )
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Add the Text to Speech blocks"
-                    description="Step name for 'Add the Text to Speech blocks' step"
-                    id="gui.howtos.say-it-out-loud.step_AddTXTextension"
-                />
-            ),
-            image: 'speechAddExtension'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Say Something"
-                    description="Step name for 'Say Something' step"
-                    id="gui.howtos.say-it-out-loud.step_TXTSpeech"
-                />
-            ),
-            image: 'speechSaySomething'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Set a Voice"
-                    description="Step name for 'Set a Voice"
-                    id="gui.howtos.say-it-out-loud_TXTSetVoice"
-                />
-            ),
-            image: 'speechSetVoice'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Move Around"
-                    description="Step name for 'Move Around' step"
-                    id="gui.howtos.say-it-out-loud.step_TXTMove"
-                />
-            ),
-            image: 'speechMoveAround'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Add a Backdrop"
-                    description="Step name for 'Add a Backdrop' step"
-                    id="gui.howtos.say-it-out-loud.step_TXTBackdrop"
-                />
-            ),
-            image: 'speechAddBackdrop'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Add Another Character"
-                    description="Step name for 'Add Another Character' step"
-                    id="gui.howtos.say-it-out-loud.step_TXTAddSprite"
-                />
-            ),
-            image: 'speechAddSprite'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Perform a Song"
-                    description="Step name for 'Perform a Song' step"
-                    id="gui.howtos.say-it-out-loud.step_TXTSong"
-                />
-            ),
-            image: 'speechSong'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Change Color"
-                    description="Step name for 'Change Color' step"
-                    id="gui.howtos.say-it-out-loud.step_TXTColor"
-                />
-            ),
-            image: 'speechChangeColor'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Spin Around"
-                    description="Step name for 'Spin Around"
-                    id="gui.howtos.say-it-out-loud.step_TXTSpin"
-                />
-            ),
-            image: 'speechSpin'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Grow and Shrink"
-                    description="Step name for 'Grow and Shrink' step"
-                    id="gui.howtos.say-it-out-loud.step_TXTGrow"
-                />
-            ),
-            image: 'speechGrowShrink'
-        }, {
-            deckIds: [
-                'animate-a-name',
-                'Make-Music'
-            ]
-        }
-        ],
-        urlId: 'animations-that-talk'
-    },
-
-    'talking': {
-        name: (
-            <FormattedMessage
-                defaultMessage="Talking Tales"
-                description="Name for the 'Talking Tales' how-to"
-                id="gui.howtos.talking"
-            />
-        ),
-        tags: ['talking'],
-        img: libraryTalking,
-        steps: [{
-            video: 'talking'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Click to Add the Text-to-Speech Blocks"
-                    description="Step name for 'Click to Add the Text-to-Speech Blocks' step"
-                    id="gui.howtos.talking.step_talesAddExtension"
-                />
-            ),
-            image: 'talesAddExtension'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Choose a Sprite"
-                    description="Step name for 'Choose a Sprite' step"
-                    id="gui.howtos.talking.step_talesChooseSprite"
-                />
-            ),
-            image: 'talesChooseSprite'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Make a Character Speak"
-                    description="Step name for 'Make a Character Speak' step"
-                    id="gui.howtos.talking.step_talesSaySomething"
-                />
-            ),
-            image: 'talesSaySomething'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Choose a Backdrop"
-                    description="Step name for 'Choose a Backdrop' step"
-                    id="gui.howtos.talking.step_talesChooseBackdrop"
-                />
-            ),
-            image: 'talesChooseBackdrop'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Click a Character to Go to the Next Backdrop"
-                    description="Step name for 'Click a Character to Go to the Next Backdrop' step"
-                    id="gui.howtos.talking.step_talesSwitchBackdrop"
-                />
-            ),
-            image: 'talesSwitchBackdrop'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Choose Another Sprite"
-                    description="Step name for 'Choose Another Sprite' step"
-                    id="gui.howtos.talking.step_talesChooseAnotherSprite"
-                />
-            ),
-            image: 'talesChooseAnotherSprite'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Move Around"
-                    description="Step name for 'Move Around' step"
-                    id="gui.howtos.talking.step_talesMoveAround"
-                />
-            ),
-            image: 'talesMoveAround'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Choose Another Backdrop"
-                    description="Step name for 'Choose Another Backdrop' step"
-                    id="gui.howtos.talking.step_talesChooseAnotherBackdrop"
-                />
-            ),
-            image: 'talesChooseAnotherBackdrop'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Animate Talking"
-                    description="Step name for 'Animate Talking' step"
-                    id="gui.howtos.talking.step_talesAnimateTalking"
-                />
-            ),
-            image: 'talesAnimateTalking'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Choose Another Backdrop"
-                    description="Step name for 'Choose Another Backdrop' step"
-                    id="gui.howtos.talking.step_talesChooseThirdBackdrop"
-                />
-            ),
-            image: 'talesChooseThirdBackdrop'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Choose a Song to Dance To"
-                    description="Step name for 'Choose a Song to Dance To' step"
-                    id="gui.howtos.talking.step_talesChooseSound"
-                />
-            ),
-            image: 'talesChooseSound'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Dance Moves"
-                    description="Step name for 'Dance Moves' step"
-                    id="gui.howtos.talking.step_talesDanceMoves"
-                />
-            ),
-            image: 'talesDanceMoves'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Get the Ask and Answer Blocks from the Sensing Category"
-                    description="Step name for 'Get the Ask and Answer Blocks from the Sensing Category' step"
-                    id="gui.howtos.talking.step_talesAskAnswer"
-                />
-            ),
-            image: 'talesAskAnswer'
-        }, {
-            deckIds: [
-                'Tell-A-Story',
-                'Animate-A-Character'
-            ]
-        }
-        ],
-        urlId: 'talking'
-    },
-
    'add-sprite': {
        name: (
            <FormattedMessage