P4, M2, D1 – Implementation and Testing

Justification of Tools used

Main Menu

To create the main menu scene, I utilized multiple layers. I began by creating the
background layer, where I pasted the background image from my design. Using the
Selection tool, I aligned the background image, and then employed the Free Transform tool
and Resize tool to ensure the image fit within the border on Adobe Animate. I repeated this
process of creating layers, pasting images, aligning them, and resizing them to match their
positions in the original design for the navigation bar, buttons, headings, logo, and main
text/content. When inserting images into layers, they automatically became keyframes. For
example, when I pasted the image of the forward button, the frame at which I inserted the
image became a keyframe.

For the main menu page, I implemented the rollover feature, causing the text to change
from white to orange when the user hovers their mouse over the navigation bar text. Please
refer to the advanced features section below for details on how this was achieved.
I used the Text tool to create the text for the navigation bar and headings, including "Main
Menu," "Subjects Offered," "Why Study at JCC," "Facilities," "Image Gallery," and "Student
Services." I then converted each text element into a symbol and coded them. Please refer to
the advanced features section below for more information on this process.
I created buttons such as the forward, backward, audio play, and pause buttons by first
converting each image into a symbol and then coding each button. For more details on how
this was accomplished, please refer to the advanced features section below.
Lastly, I added a stop layer to ensure that the user can view the main menu scene without
the image flickering to other scenes.

Subject Scene

In creating the "Subjects Offered" page, I began by establishing multiple layers in Adobe Animate.
Initially, I crafted a background layer by inserting the background image and aligning it using the
Selection tool. This image was then adjusted to fit within the designated border using the Free
Transform and Resize tools.

Subsequently, I applied a similar process to additional components such as the navigation bar,
buttons, headings, logo, and main text/content. Each element was added to its own layer, aligned,
scaled, and converted into keyframes when placed into frames, such as the audio play button which
automatically became a keyframe upon insertion.

For interactive elements like the navigation bar on the "Subjects Offered" page, I implemented a
rollover effect that changes the text color from white to orange when hovered over. This feature is
detailed further in the advanced features section. Text elements for the navigation bar and headings,
including labels like "Main Menu," "Why Study at JCC," and "Student Services," were created using
the text tool. Each text element was then transformed into symbols to facilitate the creation of
interactive buttons.

Additionally, I used the text tool to compose the main content of the scene, carefully positioning the
text to align with the original design using the selection tool. For instance, listing the AS & A Level
courses required precise text placement. Finally, I added a stop layer to ensure the scene remains
static during playback, preventing any unintended transitions to other scenes. For more detailed
instructions on these processes, please refer to the advanced features section.

WHY JCC scene

For the scene titled "Why Study at JCC," I started by creating a backdrop layer onto which I
pasted the background image. I used the Selection tool to align this image within the
boundaries of Adobe Animate and adjusted its size using the Free Transform and Resize
tools to ensure it matched the original design.
Following the background setup, I created additional layers for the main text/content,
buttons, headings, navigation bar, and logo. As I added images to these layers, they
automatically became keyframes. For example, when I inserted the image of the forward
button, that specific frame transformed into a keyframe.
For interactive elements, such as on the "Subjects Offered" page, I implemented a rollover
feature that changes the text color in the navigation bar from white to orange when the
cursor hovers over it. Further details on how this was achieved can be found in the
advanced features section below.
I also used the text tool to add essential information on a separate layer. For instance, I
typed out the percentage of grades achieved at Joseph Chamberlain College. Additionally, I
included a video tour of JCC, the specifics of which are outlined in the advanced features
sections below.
Finally, I created a stop layer to ensure the stability of the "Why Study at JCC" scene, preventing any
flickering or unintended transitions to other scenes. For more detailed instructions on these
processes, please refer to the advanced features section.

Facillities Scene

To create the "Facilities" scene, I employed a multi-layered approach. First, I used the text
tool to create the heading "Facilities" and the navigation bar. After that, I converted each of
these elements into symbols, enabling me to create buttons that could be coded. This
coding allows the user to be redirected to the main menu when they click on the
corresponding text in the navigation bar. For more information on how this is accomplished,
please refer to the advanced features section.
Next, I inserted images, such as the one depicting the sports hall at Joseph Chamberlain.
When an image is inserted, Adobe Animate automatically converts the frame into a
keyframe. Using the selection tool, I moved the image from the center of the scene to its
intended location in the left corner, as per the original design. I then utilized the free
transform tool to adjust the image size appropriately.
I repeated this process for the library and canteen headings, inserting images and using
various tools within Adobe Animate to ensure that my product accurately reflects the main
design. Lastly, I created a stop layer to ensure that the user can view the facilities scene
without the images flickering or transitioning to other scenes unintentionally.

Student Services Scene:

To create the "Student Service" scene, I started by creating multiple layers. First, I focused
on the background layer, where I pasted the background image from my design. Using the
Selection tool, I aligned the background image properly and then utilized the free transform
tool and resize tool to ensure that the image fit within the border on Adobe Animate.

Next, I followed the same process of creating layers, pasting images, aligning them, and
resizing them to match their positions in the original design. I used the free transform tool,
Selection tool, and resizing tool for various elements such as the navigation bar, buttons,
headings, logo, and the main text/content. Whenever I inserted an image into a layer, that
frame automatically became a keyframe. For example, when I pasted the image of the audio
pause button, the frame at which I inserted the image turned into a keyframe.

For the main content of the scene, I used the text tool. I created a layer and wrote
information about the POD service that JCC provides to students. Using the Selection tool
and the resize tool, I made sure that the location and visual aspect of the text matched my
main design. I repeated the same process for the information regarding the individualized
support plans that JCC offers to students.
Advanced Features

Image Gallary
To create the image gallery scene in the timeline, I first set up the foundation by generating
eight blank keyframes. Each of these keyframes represents a different image that will be
displayed in the gallery. Above each keyframe, I created a stop layer. These stop layers
ensure that the timeline pauses on each keyframe, allowing me to showcase one image at a
time.

Next, I established a new layer called "Gallery" above the stop layers. This layer will be
dedicated to containing the actual images for the gallery. To import the images, I went to
"File" > "Import" > "Import to Library" and selected the image files I wanted to use. I then
proceeded to drag each image from the library onto the corresponding keyframe in the
"Gallery" layer, ensuring that a unique image is displayed in each keyframe.

To enlarge the pictures in the gallery, I selected each image on its respective keyframe and
utilized the Free Transform tool. This allowed me to resize the images, making them appear
larger and positioning them in the left box section of the scene page.

To extend the duration that each image is displayed, I used the F5 key to increase the
number of frames occupied by each image. This ensured that the rest of the layers would be
visible when a user selects an image, and it also increased the overall timeline length so that
I could clearly see each image in the scene. I created eight additional stop layers, one above
each image keyframe. These stop layers will guarantee that when a user selects an image,
the scene remains focused on that image until the user chooses to navigate to another
image or use the navigation system.

Sound
The first step in adding audio to the multimedia product is to have a play button to achieve this the
user should convert the image to a symbol first.

The user should double click the button or press f9 and select “<>” image then they should
select the Action Script folder then they should select the Audio and Video folder and
double click on “Click to Play/Stop sound
This should then open the audio actions layer the user should then replace the green text
that shows the URL to the name of their audio file they wish to import. Which in this case is
“Music.mp3” the user should only replace the text and not the bracket speech marks or the
“.mp3” section. The audio file has to be saved in the same location as the multimedia
product in order for it to work.
v
1 That the subjects Pass It worked
offered scene will
appear.

2 That the Why Study Pass It worked

at JCC scene will
appear.

3 That the Image Fail The Why

Gallery scene will study at
appear. JCC scene
appeared
instead

3b That the Image Pass It worked

Gallery scene will
appear.

4 That the Facilities Pass It worked

scene will appear.

5 That the Main Menu Fail The

scene will appear. facilities
scene
appeared
instead

5b That the Main Menu Pass It worked

scene will appear.
6 That the Student Pass It worked
Services scene will
appear.

7 That the Splash Pass It worked

screen works

8 That the tour guide Pass It worked

video on the why
study at jcc scene
will work

9 That the images on Pass It worked

image gallery scene
will appear on the
left side enlarged

10 That the forward Pass It worked

button will take the
user from the main
menu scene to the
subjects offered
scene

11 That the Backward Pass It worked

button will take the
user from the main
menu scene to the
student services
scene

12 That the rollover Pass It worked

works on the main
 menu scene

13 That the rollover Pass It worked

works on subjects
offered scene will
appear.

14 That the rollover Pass It worked

works on Why Study
at JCC scene will
appear.

15 That the rollover Pass It worked

works on Image
Gallery scene will
appear.

16 That the rollover Pass It worked

works on Facilities
scene will appear.

17 That the rollover Pass It worked

works on Student
Services scene will
appear.

18 That the forward Pass It worked

button will take the
user from the main
subjects offered
scene

to the Why study at

 jcc scene

19 That the forward Pass It worked

button will take the
user from the Why
study at jcc scene to
the facilities scene

20 That the forward Pass It worked

button will take the
user from the
facilities scene to the
image gallery scene

21 That the forward Pass It worked

button will take the
user from the image
gallery scene to the
student services
scene.