Online Multimedia Tools for The
Classroom
Azlan Abdul Aziz
Mohamad Ibrahim
Muhammad Fikri Ramli
Faculty of Computer and Mathematical Sciences
Universiti Teknologi MARA
2015
All rights reserved. No part of this publication may reproduced or transmitted in
any form by any means, electronic or mechanical including photocopying,
recorded or by any storage information or retrieval system, without the prior
written permission from the author.
Online Multimedia Tools for The Classroom
Azlan Abdul Aziz
Muhammad Fikri Ramli
Mohamad Ibrahim
Design by : Puteri Balqis
ISBN
Table of Content PAGES
CHAPTER 1 : TEXT 1
1.1 Stylish Text Generator 1
1.2 Grafitti Creator 6
1.3 Aurora 3D Text & Logo Maker 10
CHAPTER 2 : IMAGE 16
2.1 PicMonkey 16
2.2 FotoFlexer 24
2.3 PIXLR 28
CHAPTER 3 : ANIMATION 34
3.1 Blabberize 34
3.2 GoAnimate 39
3.3 ABCYA 44
CHAPTER 4 : AUDIO 49
4.1 Incredibox 49
4.2 Text-To-Speech 52
4.3 Text-To-Speech SitePal 54
CHAPTER 5 : VIDEO 56
5.1 WeVideo 56
5.2 Stupeflix 62
5.3 TubeChop 67
CHAPTER 6 : PRESENTATION TOOLS 70
6.1 Prezi 70
1
CHAPTER 1: TEXT
1.1 Stylish Text Generator
1.1.1 Introduction to Stylish Text Generator
Stylish Text Generator is software that allows user to generate text with multistyle.
It such a simple software with few easy stages to use it. Present together with more
various software and program for design, user can simply design picture, word text,
and other designs using a website without need user to surfing other website.
1.1.2 Step in using Stylish Text Generator
STEP 1 A user can start by navigating to the website
www.webestools.com
STEP 2 User need to log in first
1 Login button
2
2 Fill up login detail
STEP 3 Select Stylish Text Generator
1 Choose
‘Tools’ button
2 Choose
‘More
Generators’
3
STEP 4
3 Choose ‘Stylish
Text Generator’
1 Insert text
Create text.
4
3 Choose decorations
2 Choose text style
5
1.1.3 Reference
www.webestools.com
4 Text generated
Users may copy the generated text and
paste it on any space
6
1.2 GRAFFITI CREATOR
1.2.1 Introduction to GRAFFITI CREATOR
The software focuses on creating the graffiti text style. Graffiti creator contains few
type of gravity pattern and allows user to choose those graffiti pattern. User also
may choose to edit an alphabet in a word. User just needs to lock the alphabet that
need to maintain with. The unlock alphabet will undergoes changes made by user.
User may make changes on alphabet’s colour, size, and shadow.
1.2.2 Step in Using GRAFFITI CREATOR
A user can start by navigating to the website
STEP 1 www.graffiticreator.net
STEP 2
1 Choose text
Style
Create text
7
2 Insert texts
Texts appear on the editing platform
8
4 Setting for unlocked
alphabets 5 Colour setting
for unlocked alphabets
3 Setting texts
9
1.2.3 Reference
www.graffiticreator.net
ST EP 3 Print edited texts
‘Print’ texts
10
1.3 Aurora 3D Text & Logo Maker
1.3.1 Introduction to Aurora 3D Text & Logo Maker
User may build a 3D word text by using this software. The software is flexible
because user may adjust, rotate, and enlarge the created text by adjusting the 3 axes.
Many options provided for user to choose to create and edit the text. User also may
insert pictures and animation as well by downloading directly from internet or
select file from the library.
1.3.2 Steps in Using Aurora 3D Text & Logo Maker
www.presentation-3d.com
STEP 1
A user needs to download the software by navigating to the website
1 Click button
Download
11
STEP 2
User need to open the installed software on
the pc.
STEP 3 Create text
2 Choose
Aurora 3D Text &
Logo Maker
1 Create
new project
12
2 Choose template
3 Click button OK
Template appear on editing platform
13
4 Click once on the word to
allow word movement. Axes can be
rotate
5 Click to select element to edit
14
6 Click to upload picture
7 Click on right click to choose
picture setting
15
1.3.3 Reference
www.presentation-3d.com
Save button
STEP 4 Save text
16
CHAPTER 2: IMAGE
2.1 PicMonkey
2.1.1 Introduction to PicMonkey
PicMonkey is a web-based photo editing app that runs on any browser capable of running
flash. Akin to Photoshop and similar photo-editing packages, it has the added benefits of
being extremely simple to use, and completely FREE! You don’t even have to register; you
can simply upload a picture and go! How great is that?! It makes editing a photo so easy,
from textures, to colour-tinting, to airbrushing an image. You can become an expert photo-
shopper in minutes, and add a professional touch to your images.
2.1.2 Steps in Using PicMonkey
Sign In
Button
User can sign in through Facebook or directly through the
website.
STEP 1
A user can start by navigating to the website
www.picmonkey.com
STEP 2
17
STEP 3
Select editing mode. There are four editing
modes that you can choose which are; edit, touch up,
design, and collage. Place the cursor on chosen mode.
Sources option will drop- down.
.
STEP 4 Choose photo from the sources
18
The selected photo will appear on the working platform.
Working platform
STEP 4
User can change the setting of the image’s size and resolution by clicking the ‘Setting’ button
‘Setting’ button
19
STEP 5
Editing photo. Eight mode of editing photo
provided are located on the left of the interface.
Basic Edit Effects Touch Up Text
Overlays Frames Textures Themes
20
STEP 6
1 Adjust
editing scale
2 Click
‘Apply’
STEP 7 User may click ‘Undo’ to correct the edited
photo.
‘Undo’ button
Scale was provided for user to adjust the editing
scale. Click ‘Apply’ after adjust the scale
21
Pop up will appear if user does not click the ‘Apply’ button after
finish editing the picture. User need to confirm either to apply or
discard the changes made.
STEP 8
User can save the picture after finish editing the
picture. Click button ‘Save’ and picture will save to
computer.
‘Save’
button
22
User can set the picture’s name, type, dimension, and
quality before saving it.
4 dimension
3 photo’s quality
1 photo’s name
2 photo’s type
5 save the
ST EP 9 User can share the picture on any social media or
any clouds by clicking ‘Share’ button.
‘Share’ button
23
2.1.3 Reference
www.picmonkey.com
User can write the caption for the
edited picture and share to any social media or clouds.
Click ‘Do It’ button to share the picture.
3 share the photo
1 Sharing
site option
2 write the caption
24
2.2 FotoFlexer
2.2.1 Introduction to FotoFlexer
FotoFlexer is a free online image editor that can be used to improve the appearance
of digital photos. As it is a web application, there is no need to install any software
and you work within any modern web browser, such as Internet Explorer or
Firefox.
FotoFlexer has a wide range of tools and features available and you can save images
directly from it to many popular photo sharing and social networking sites. This
makes it a good option for users who are often on the go and use the internet to
regularly keep in touch with their family and friends.
2.2.2 Steps in Using FotoFlexer
STEP 1 A user can start by navigating to the website
www.fotoflexer.com
STEP 2 User need to log in first.
Log In
Button
STEP 3 User may choose photo resources and start
upload it to edit.
25
1 choose
photo source
2 upload
photo
STEP 4 Photo will appear at the working platform.
STEP 5 Editing photo. Eight mode of editing photo
provided are located on the top of the editing platform.
Scale provided for user to ………
26
1 choose editing mode
2 adjust editing
scale
3 ‘Apply’
button
STEP 6
Save the photo
1 ‘Save’ button
27
2.2.3 Reference
www.fotoflexer.com
3 Set photo’s format
4 Save
2 Choose locations to save
the photo
28
2.3 PIXLR
2.3.1 Introduction to PIXLR
PIXLR is one of the interactive software for photo editing. As it is a web
application, there is no need to install any software and you work within any
modern web browser.
2.3.2 Steps in using PIXLR
STEP 1
1 Login button
A user can start by navigating to the website
www.pixlr.com
User need to log in first.
STEP 2
29
2 Users may log in
through Facebook or email
address photo’s format
STEP 3 User may choose photo resources and start
upload it to edit.
STEP 3
30
STEP 5 Photo will appear at the working platform.
STEP 6 User can change the setting of the image’s size
Size setting
31
1 choose editing mode
2 adjust editing scale
STEP 7 Editing photo. Many option for editing photo provided are located on the top and left of the editing
platform. Scale provided for user to ………
32
Pop up will appear if user does not click the ‘Apply’ button after
finish editing the picture. User need to confirm either to apply or
discard the changes made.
STEP 6 Save the photo
1 ‘Save’ button
33
6 Save
4 Set photo’s
format
5 Set photo’s
quality
3 Set photo’s
name
2.3.3 Reference
www.pixlr.com
2 Choose locations to save
the photo
34
CHAPTER 3: ANIMATION
3.1 BLABBERIZE
3.1.1 Introduction to BLABBERIZE
Animate pictures to make people, animal, or object talk. This is simple web 2.0
browser base software that allow user to create and share video. This is user friendly
program and easy to use.
3.1.2 Steps in Using BLABBERIZE
1 Click ‘Login’ button
A user can start by navigating to the website
www.blabberize.com
m
User need to log in first.
STEP 1
STEP 2
35
2 Login
STEP 3
Choose the photo
Browse the photo
36
Edit the photo.
STEP 4
1 Crop the photo
2 Insert shape into
the photo
37
3 Insert sound into
the photo
STEP 5 Play the edited photo.
2 Click
‘OK’ to proceed
1 Click to play
the photo
38
3.1.3 Reference
www.blabberize.com
Choose either
to make another
scene or edit the
existing scene
Click ‘SAVE’ to
proceed
1 Describe your Blabber
2 Choose either
user want to make it
private or not
3
Click ‘SAVE ’
to
proceed
STEP 6 Save the edited photo. User may choose
either want to make another scene or edit the
existing scene
39
3.2 GoAnimate
3.2.1 Introduction to GoAnimate
GoAnimate is cloud based platform for creating and distributing animated videos.
It allows users to develop both narrative videos in which characters speak with lip-
sync and move around, and video presentation, in which a voice-over narrator
speaks over images and props, which may also move around. It provides users with
drag-and-drop tools that the company’s website indicates can be used to access
thousands of character models, backdrops, and other assets to create scenario-based
videos-like political depicted during the 2012 presidential campaign.
3 .2.2 Step in Using GoAnimate
STEP 1
A user can start by navigating to the website
www.goanimate.com
STEP 2 User need to log in first.
40
1 Fill up the data
2 Click LOG IN to proceed
Click to start create
the animation
Create the animation
STEP 3
41
1 Select theme
2 Choose setting
42
3 Select characters
4 Insert dialogues
43
3.2.3 Reference
www.goanimate.com
Publish the animation
3 Fill up the
description
STEP 4
1 Fill up the
title 2 Choose the
thumbnail
4 Publish
44
3.3 ABCYA
3.3.1 Introduction to ABCYA
ABCYA is one of an interesting animation maker. It is quite easy to use as the
editing tools are appear on the interface and not too complicated. User can use their
own creativity by drawing the picture and make it move like animation by adding
new frame to the timeline. User can simply click on the previous frame to make any
changes on it.
3.3.2 Step in Using ABCYA
Click button Go
A user can start by navigating to the website
www.abcya.com/animate.htm STEP 1
45
STEP 2 Create the animation
User can use tools provided to
start create animation
1 Copy frame
to continue edit
46
2 Click to add
images
3 Choose background and click
‘Done’
47
STEP 3 Publish the animation
1 Click to publish
4 Choose image and click
‘Done’
48
3.3.3 Reference
www.abcya.com/animate.htm
2 Choose
the size of animation
3 Save
49
CHAPTER 4: AUDIO
4.1 INCREDIBOX
4.1.1 Introduction to INCREDIBOX
Incredibox is interesting audio maker software. As the time move, software updates
their version according the pattern of music development. User need to choose
music version by the year first, then only user can start composing the audio. There
are four music element that user can select to compose the audio; beats, effects,
melodies, and voices. Combining all elements will compose a nice audio. Later, user
may share their composed audio with other users.
4.1.2 Step in using INCREDIBOX
STEP 1
A user can start by navigating to the website
www.incredibox.com
STEP 2 Create the audio
1 Choose the
version
50
3 Choose either want to cut or
record the sound
2 Choose the icon and drag to the person
one by one
record the sound
4 sound recorded. User can
drag the icon to
person during
recording
51
4.1.3 Reference
www.incredibox.com
STEP 3 End of creating the audio
User may choose either want to share the one
created audio or download it
record the sound
52
4.2 Text-To-Speech
4.2.1 Introduction to Text-To-Speech
Text-to-Speech is software that changes the text form into audio form. The software
highly recommended to those users that want to learn the way to pronounce the
right pronunciations. User just needs to insert the text and select the language to
speak. Choose the speaker as well. Click on ‘Say It’ button, and then hear the
pronunciation of the inserted text.
4.2.2 Step in Using Text-To-Speech
A user can start by navigating to the website
www.text-to-speech.imtranslator.net
4
Pronounce the text
2 Choose the
pronunciation
language 1 Choose the
pronunciation speed
3 Insert texts
STEP 2 Insert the text
STEP 1
53
4.2.3 Reference
www.text-to-speech.imtranslator.net
5 Play the speech
54
4.3 Text-To-Speech SitePal
4.3.1 Introduction to Text-To-Speech SitePal
Text-to-Speech is software that changes the text form into audio form. The software
highly recommended to those users that want to learn the way to pronounce the
right pronunciation. User just needs to insert the text and select the language to
speak. Choose the speaker as well. Click on ‘Say It’ button, and then hear the
pronunciation of the inserted text. Best part for this software is user may choose the
effect of the voices.
4.3.2 Step in Using Text-To-Speech SitePal
A user can start by navigating to the website
http://www.oddcast.com/home/demos/tts/tts_example.php
STEP 1
1 Insert texts 2 Choose
speech language
3 Choose speech voice
55
4.3.3 Reference
www.oddcast.com/home/demos/tts_example.php
4 Choose
speech effect
5 Click to
hear the speech
56
CHAPTER 5: VIDEO
5.1 WeVideo
5.1.1 Introduction to WeVideo
WeVideo enable student collaborate on video projects to build multimedia
presentations and thereby addressing Common Core standards. This is not only
constructs deep knowledge about a topic as they engage in building a video project,
but it also develops 21st century skills. WeVideo can be a different avenue for kids
to build confidence and self-esteem and open up a backdoor into academic work.
WeVideo provides an adaptive learning environment that is ideal for class projects
where students may have a wide disparity of skills.
5.1.2 Steps in Using WeVideo
STEP 1
A user can start by navigating to the website
www.wevideo.com
User need to log in first.
STEP 2
1 Click to
login
57
Start creates new video.
1 Click to
create new video
2 Fill the
form
2 FILL the
form
STEP 3
58
2 Insert media to edit
3 Choose theme
59
4 Choose media
element to edit
Insert media element (text) to edit
60
Insert media
element (music) to edit
User may
preview the
edited video
Publish the video.
STEP 4
1 Click to
publish the video
61
5.1.3 Reference
www.wevideo.com
2 Insert
title for the video
3 Choose
destination to publish
the video
4 Choose
the quality of the
video
5 Click to publish
the video
62
5.2 Stupeflix
5.2.1 Introduction to Stupeflix
Stupeflix is a web application to make awesome videos in a few clicks. You can import
photos, videos from your computer, or from the web. You can use photos from your
Facebook, Dropbox, Picasa or Flickr accounts. You can even use your webcam to record
on the spot. With free access, you can make as many videos as you want using the Free
Video Themes. You can also download and share all these videos for free.
5.2.2 Steps in Using Stupeflix
A user can start by navigating to the website
www.studio.stupeflix.com
STEP 2
1 Click to login
STEP 1
User need to log in first.
63
2 Choose
channel to log in
STEP 3
Start creates new video.
1 Click to
make the video
64
3 Add media
element to insert in the
video
2 Choose theme for the video
65
STEP 4
5 Preview
the video
1 Click
share
Publish the video.
4 Add more media element to insert in
the video
66
5.2.3 Reference
www.studio.stupeflix.com
2 Choose either to share or
download the video
67
5.3 TubeChop
5.3.1 Introduction to Tube Chop
TubeChop is a video chopping service. You place the URL of the video that you
would like to cut up to show in the box, find your place, and then share with friends.
This service relatively simple, but absolutely great to know if you find a video that
you want to show a single part to your classroom. It is prove to be beneficial in all
different grades throughout the education system. This tool brings an easier way to
locate the right part in a video for your educational use.
5.3.2 Steps in using TubeChop
STEP 1
STEP 2
1 Insert the
video’s link from YouTube
A user can start by navigating to the website
www.tubechop.com
Start edits new video.
68
2 Adjust the beginning point to cut video
3 Adjust the ending
point to cut video
69
STEP 3
5.3.3 Reference
www.tubechop.com
Publish
the video.
70
CHAPTER 6: PRESENTATION TOOLS
6.1 Prezi
6.1 Introduction to Prezi
Prezi is cloud-based presentation software that opens up a new world between
whiteboards and slides. The zoom able canvas makes it fun to explore ideas and
connections between them the result, visually captivating presentations that lead
your audience down a path of discovery.
6.2 Step in Using Prezi
STEP 1
A user can start by navigating to the website
www.prezi.com
STEP 2 User need to log in first.
71
1 Fill up the data
2 Click LOG IN to proceed
STEP 2 Create Prezi
72
1 Click to insert
text
User may choose template or start with blank prezi
73
3 Setting the inserted
element
2 Choose to insert
elements such as images, videos, and
others
74
4 Add frame 5 Setting the
frame
6 Edit the path
75
STEP 3
6.1.3 Reference
www.prezi.com
Click save button
STEP 4 Preview Prezi
User can choose
setting to create
Prezi
Save Prezi